Spiel in Arbeit funktioniert nicht

Question

Ich habe versucht, eine Version von Pacman online zu entwerfen, aber der Code, den ich für die Objekterkennung geschrieben habe, funktioniert nicht. Meistens hört es auf, wenn es keine Wand gibt und in Leerräume mündet. Ich glaube, dass ich den Code richtig geschrieben habe, aber sie können Fehler sein, als ich gerade anfing, Javascript zu lernen.

<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>

Bitte helfen Sie mir.

Answer 1

Ihr Skript ist in Ordnung, Sie hatten gerade y und x in der Kollisionsprüfung verwechselt.
Fest Code mit 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>