正在进行的游戏不起作用

Question

我试图在线设计一个 pacman 版本，但是我为对象检测编写的代码不起作用。大多数情况下，它会在没有墙并遇到空白时停止 space。我相信我写的代码是正确的，但他们可能是错误的，因为我刚开始学习 javascript。

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

    <script>
    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[x][y] != 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;
 }
    }
</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>

正在进行的游戏不起作用

Game in progress doesn't work

html

javascript

pacman