我用一個簡單的遊戲的javascript有一個錯誤

-1

我遇到的錯誤是當我使用碰撞檢測系統檢測玩家和使用for語句繪製的正方形之間的碰撞時，它會完美地識別我碰到的碰撞這是因爲我將它記錄到控制檯，只要它檢測到碰撞和碰撞一方的碰撞。但是在控制檯日誌之後，它應該通過設置一個我用於從10移動到0的變量來阻止玩家移動，但它不是，對不起，添加所有代碼我只是不知道爲什麼問題存在於首先我用一個簡單的遊戲的javascript有一個錯誤

var frame = setInterval(draw,10); 
 
var canvas = document.getElementById('Canvas'); 
 
var ctx = canvas.getContext('2d'); 
 
var pos = [[300,250],[500,250],[700,250]] 
 
var height = 150; 
 
var width = 150; 
 
var plyr = {pos:[0,0],width: 50,height: 50}; 
 
var a = {up: 10, down:10, left:10, right:10}; 
 

 
function draw(){ 
 
canvas.width = canvas.width 
 

 
for(var i=0;i < pos.length;i++){ 
 
    ctx.rect(pos[i][0],pos[i][1],height,width); 
 
    ctx.stroke(); 
 
} 
 
ctx.rect(plyr.pos[0],plyr.pos[1],plyr.width,plyr.height); 
 
ctx.stroke(); 
 
} 
 

 
document.onkeydown = checkKey; 
 

 
function checkKey(e) { 
 
    e = e || window.event; 
 
    if (e.keyCode == '38') {/*up*/plyr.pos[1] -= a.up;} 
 
    else if (e.keyCode == '40') {/*down*/plyr.pos[1] += a.down;} 
 
    else if (e.keyCode == '37') {/*left*/plyr.pos[0] -= a.left;d=1;} 
 
    else if (e.keyCode == '39') {/*right*/plyr.pos[0] += 
 
    a.right;d=0;} 
 

 
    for(var c=0;c < pos.length;c++){ 
 
    touch(plyr.pos[0],plyr.pos[1],plyr.width,plyr.height,pos[c] 
 
    [0],pos[c][1],height,width); 
 
    } 
 
} 
 

 

 
function touch(x1,y1,width1,height1,x2,y2,width2,height2){ 
 
    if(x1 + width1 > x2 && x2 + width2 > x1 && y1 + height1 > y2 && 
 
    y2 + height2 > y1){ 
 
    if(y1 + height1 > y2 && y2 + 20 > y1 + height1) 
 
    {console.log('touch down');a.down = 0;} 
 
    else if(y2 + height2 > y1 && y1 + 20 > y2 + height2) 
 
    {console.log('touch up');a.up = 0;} 
 
    else if(x1 + width1 > x2 && x2 + 20 > x1 + width1) 
 
    {console.log('touch right');a.right = 0;} 
 
    else if(x2 + width2 > x1 && x1 + 20 > x2 + width2) 
 
    {console.log('touch left');a.left = 0;} 
 
    } 
 
    else{ 
 
    a.up = 10; 
 
    a.down = 10; 
 
    a.left = 10; 
 
    a.right = 10; 
 
    } 
 
}

<!doctype html> 
 
    <html> 
 
     <head> 
 
     <title>Testing</title> 
 
     </head> 
 
     
 
     <body> 
 
     <canvas id="Canvas" width="1000" height="500"></canvas> 
 
     </body> 
 
    </html>

來源

2017-08-30 stu17079

這麼多條件陳述。你應該嘗試重寫你的代碼，使其更清潔和清晰 –

對不起這是我第一次真正的嘗試在Java腳本，所以如果你可以建議另一種方式做它，將不勝感激 – stu17079

也許更好的方法來解決這個問題，是設置球員的位置上碰撞物體的邊緣。

 function touch(x1,y1,width1,height1,x2,y2,width2,height2){ 
     if(x1 + width1 > x2 && x2 + width2 > x1 && y1 + height1 > y2 && 
     y2 + height2 > y1){ 
      if(y1 + height1 > y2 && y2 + 20 > y1 + height1) 
      {console.log('touch down');plyr.pos[1] = y2-plyr.height;} 
      else if(y2 + height2 > y1 && y1 + 20 > y2 + height2) 
      {console.log('touch up');plyr.pos[1] = y2+height2;} 
      else if(x1 + width1 > x2 && x2 + 20 > x1 + width1) 
      {console.log('touch right');plyr.pos[0] = x2-plyr.width;} 
      else if(x2 + width2 > x1 && x1 + 20 > x2 + width2) 
      {console.log('touch left');plyr.pos[0] = x2+plyr.width;} 
     } 
     }

來源

2017-08-30 00:21:21

我用一個簡單的遊戲的javascript有一個錯誤

回答

相關問題