我用一个简单的游戏的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有一个错误

回答

相关问题