진행중인 게임이 작동하지 않습니다.

Question

온라인으로 팩맨을 디자인하려고했으나 객체 감지를 위해 작성한 코드가 작동하지 않습니다. 대부분의 경우 벽이 없을 때 멈추고 빈 공간으로 흘러갑니다. 나는 코드를 올바르게 작성했다고 믿지만, 나는 단지 자바 스크립트를 배우기 시작하면서 실수 일 수있다.

<canvas id="gc" width="400", height="400"></canvas> 
 

 
    <script> 
 
    window.onload = function() { 
 
     canv=document.getElementById("gc"); 
 
\t  ctx=canv.getContext("2d"); 
 
     document.addEventListener("keydown",keyPush); 
 
\t  setInterval(game,1000/2); 
 
    } 
 

 
    var px=4 
 
\t var py=5; 
 
    var xv=0 
 
\t var yv=0; 
 
\t var cx=5; 
 
\t var cy=17; 
 
\t //1 = wall, 0 = biscuit, 2 = nothing 
 
    var map=[[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], 
 
\t \t  [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1], 
 
\t \t  [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1], 
 
\t \t  [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1], 
 
\t \t  [1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1], 
 
\t \t  [1,0,0,0,0,1,0,1,0,0,0,0,1,0,1,0,0,0,0,1], 
 
\t \t  [1,0,1,1,0,1,0,0,1,0,1,1,0,0,1,0,1,1,0,1], 
 
\t \t  [1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1], 
 
\t \t  [1,0,0,0,1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1], 
 
\t \t  [1,0,1,1,1,0,0,0,1,2,2,1,0,0,0,1,1,1,0,1], 
 
\t \t  [1,0,0,0,0,0,1,0,1,2,2,1,0,1,0,0,0,0,0,1], 
 
\t \t  [1,0,1,1,0,1,1,0,1,2,2,1,0,1,1,0,1,1,0,1], 
 
\t \t  [1,0,0,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,1], 
 
\t \t  [1,1,1,1,0,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1], 
 
\t \t  [1,0,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1], 
 
\t \t  [1,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,1,1,0,1], 
 
\t \t  [1,0,1,0,0,0,0,1,0,1,1,0,1,0,0,0,0,1,0,1], 
 
\t \t  [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1], 
 
\t \t  [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1], 
 
\t \t  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]; 
 
    point=0; 
 
    gs=tc=20; 
 

 
    function game() { 
 
\t \t // got to check if can move 
 
\t \t 
 
\t \t var x = px + xv; 
 
\t \t var y = py + yv; 
 

 
\t \t if (map[x][y] != 1) { 
 
\t \t \t px = x; 
 
\t \t \t py = y; 
 
\t \t } 
 

 
     ctx.fillStyle="black"; 
 
    \t ctx.fillRect(0,0,canv.width,canv.height); 
 

 
\t \t for (var i=0; i<map.length;i++) { 
 
\t \t \t for (var s=0; s<map[i].length;s++) { 
 
\t \t \t \t if (map[i][s] == 1) { 
 
\t \t \t \t \t ctx.fillStyle="blue"; 
 
    \t \t \t \t ctx.fillRect(s*gs,i*gs,gs,gs); 
 
\t \t \t \t } 
 
\t \t \t \t if (map[i][s] == 0) { 
 
\t \t \t \t \t ctx.fillStyle="white"; 
 
    \t \t \t \t ctx.fillRect(s*gs+5,i*gs+5,gs-10,gs-10); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t ctx.fillStyle="red"; 
 
    \t ctx.fillRect(cx*gs+5,cy*gs+5,gs-10,gs-10); \t \t 
 

 
     ctx.fillStyle="yellow"; 
 
    \t ctx.fillRect(px*gs+2.5,py*gs+2.5,gs-5,gs-5); 
 

 
    } 
 

 
    function keyPush(evt) { 
 
     switch(evt.keyCode) { 
 
\t \t case 37: 
 
\t \t \t xv=-1;yv=0; 
 
\t \t \t break; 
 
\t \t case 38: 
 
\t \t \t xv=0;yv=-1; 
 
\t \t \t break; 
 
\t \t case 39: 
 
\t \t \t xv=1;yv=0; 
 
\t \t \t break; 
 
\t \t case 40: 
 
\t \t \t xv=0;yv=1; 
 
\t \t \t break; 
 
\t } 
 
    } 
 
</script>

제발 도와주세요.

Answer 1

스크립트가 정상입니다. 충돌 확인시 y과 x이 혼동되어있었습니다. if (map[y][x] != 1)와
고정 코드 :

window.onload = function() { 
 
    canv=document.getElementById("gc"); 
 
    ctx=canv.getContext("2d"); 
 
    document.addEventListener("keydown",keyPush); 
 
    setInterval(game,1000/2); 
 
} 
 

 
var px=4 
 
var py=5; 
 
var xv=0 
 
var yv=0; 
 
var cx=5; 
 
var cy=17; 
 
//1 = wall, 0 = biscuit, 2 = nothing 
 
var map=[[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1], 
 
     [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1], 
 
     [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1], 
 
     [1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1], 
 
     [1,0,1,1,0,1,0,1,0,1,1,0,1,0,1,0,1,1,0,1], 
 
     [1,0,0,0,0,1,0,1,0,0,0,0,1,0,1,0,0,0,0,1], 
 
     [1,0,1,1,0,1,0,0,1,0,1,1,0,0,1,0,1,1,0,1], 
 
     [1,0,1,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0,1], 
 
     [1,0,0,0,1,0,1,0,1,1,0,1,0,1,0,1,0,0,0,1], 
 
     [1,0,1,1,1,0,0,0,1,2,2,1,0,0,0,1,1,1,0,1], 
 
     [1,0,0,0,0,0,1,0,1,2,2,1,0,1,0,0,0,0,0,1], 
 
     [1,0,1,1,0,1,1,0,1,2,2,1,0,1,1,0,1,1,0,1], 
 
     [1,0,0,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,1], 
 
     [1,1,1,1,0,1,1,0,0,0,0,0,0,1,1,0,1,1,1,1], 
 
     [1,0,0,0,0,1,0,0,1,1,0,1,0,0,1,0,0,0,0,1], 
 
     [1,0,1,1,0,1,0,1,0,0,0,0,1,0,1,0,1,1,0,1], 
 
     [1,0,1,0,0,0,0,1,0,1,1,0,1,0,0,0,0,1,0,1], 
 
     [1,0,1,0,1,0,1,1,0,1,1,0,1,1,0,1,0,1,0,1], 
 
     [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1], 
 
     [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]]; 
 
point=0; 
 
gs=tc=20; 
 

 
function game() { 
 
    // got to check if can move 
 

 
    var x = px + xv; 
 
    var y = py + yv; 
 

 
    if (map[y][x] != 1) { 
 
     px = x; 
 
     py = y; 
 
    } 
 

 
    ctx.fillStyle="black"; 
 
    ctx.fillRect(0,0,canv.width,canv.height); 
 

 
    for (var i=0; i<map.length;i++) { 
 
     for (var s=0; s<map[i].length;s++) { 
 
      if (map[i][s] == 1) { 
 
       ctx.fillStyle="blue"; 
 
       ctx.fillRect(s*gs,i*gs,gs,gs); 
 
      } 
 
      if (map[i][s] == 0) { 
 
       ctx.fillStyle="white"; 
 
       ctx.fillRect(s*gs+5,i*gs+5,gs-10,gs-10); 
 
      } 
 
     } 
 
    } 
 

 
    ctx.fillStyle="red"; 
 
    ctx.fillRect(cx*gs+5,cy*gs+5,gs-10,gs-10);  
 

 
    ctx.fillStyle="yellow"; 
 
    ctx.fillRect(px*gs+2.5,py*gs+2.5,gs-5,gs-5); 
 

 
} 
 

 
function keyPush(evt) { 
 
    switch(evt.keyCode) { 
 
    case 37: 
 
     xv=-1;yv=0; 
 
     break; 
 
    case 38: 
 
     xv=0;yv=-1; 
 
     break; 
 
    case 39: 
 
     xv=1;yv=0; 
 
     break; 
 
    case 40: 
 
     xv=0;yv=1; 
 
     break; 
 
} 
 
}

<canvas id="gc" width="400" height="400"></canvas>