Question

我遇到的问题是当我使用碰撞检测系统检测玩家和使用for语句绘制的正方形之间的碰撞时，它完全可以完全接收碰撞我知道这一点因为我每次都会记录到控制台检测到碰撞以及碰撞为一侧的碰撞。但是在那个控制台日志之后，它应该通过设置我用于从10移动到0的变量来停止玩家移动但是它不是，抱歉添加所有代码我只是不知道为什么问题存在于第一名

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>

Answer 1

也许更好的解决方法是将球员的位置设置为碰撞时对象的边缘。

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

我有一个关于简单游戏的javascript的错误

1 个答案: