JQuery

Maze

청춘고양이 2022. 6. 21. 22:37
반응형

간단한 미로 게임

이차원 배열을 이용하여 간단한 미로게임을 구현.

    $(document).ready(function(){

            let map=[
                ['★','□','□'],
                ['□' ,'□','□'],
                ['□' ,'□','□']
            ]
            let x=0
            let y=0

            function init(){
                let fullText=''
                for(let i=0; i<=2; i++){
                    for(let j=0; j<=2; j++){
                        fullText += map[i][j]
                    }
                    fullText += "<br>"
                }
                $('#map-area').html(fullText)
            }
            function refresh(){
                $('#map-area').html('')
                var fullText=''
                for(let i=0; i<=2; i++){
                    for(let j=0; j<=2; j++){
                        fullText += map[i][j]
                    }
                    fullText += "<br>"
                }
                $('#map-area').html(fullText)
            }
            init()

            $(document).on("keydown",keyEventFnc)
            function keyEventFnc(e){
                switch(e.keyCode){//키코드 값
                    case 37://LEFT 키코드 값
                        $("#user-id").val("LEFT")
                        map[y][x]='□'
                        x--
                        map[y][x]='★'
                        break;
                    case 38://TOP 키코드 값
                        $("#user-id").val("TOP")
                        map[y][x]='□'
                        y--
                        map[y][x]='★'
                        break;
                    case 39://RIGHT 키코드 값
                        $("#user-id").val("RIGHT")
                        map[y][x]='□'
                        x++
                        map[y][x]='★'
                        break;
                    case 40://BOTTOM 키코드 값
                        $("#user-id").val("BOTTOM")
                        map[y][x]='□'
                        y++
                        map[y][x]='★'
                        break;
                }
                //alert('x:'+x+',y:'+y)
                //console.log(map)
                refresh()//repaint
            }
        })
반응형