Question

请帮我尝试了几件事，但每当我将小物体移动到较大的物体时，它会在碰撞检测后卡住。这是我的代码，它很容易理解。我还试图检测另一个物体各个侧面的碰撞检测。

// Setup requestAnimationFrame
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame  ||  
                    window.webkitRequestAnimationFrame ||  window.msRequestAnimationFrame;

// Create the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


// Game objects
var player = {
width:50,
height:50,
x:50,
y:50,
speed:100,
color:'#3C1BE0'
       };

var wall={
width:50,
height:150,
x:300,
y:100,
color:'#E01B5D'
        };


// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
},false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
},false);

//check collisions
var collisions=function(){


}

// Update game objects
var update = function (modifier) { 

//test for collisions 

//player collision with wall(red cube)

if(player.x+player.width>wall.x && 
   player.x<wall.x+wall.width   &&
   player.y<wall.y+wall.height  && 
   player.y+player.height>wall.y 
  )
   {
     player.speed=0;
   } 

//player collission with canvas
if(player.x < 0 )
{
    player.x=0;
}
else if(player.x+player.width> canvas.width)
{
    player.x=canvas.width-player.width;
}
else if(player.y <0 )
{
    player.y=0;
}
else if(player.y+player.width>=canvas.height)
{
    player.y=canvas.height-player.height;
}


if (38 in keysDown) { // Player holding up
player.y -= player.speed*modifier;
}
if (40 in keysDown) { // Player holding down
player.y += player.speed*modifier;
}
if (37 in keysDown) { // Player holding left
player.x -= player.speed*modifier;
}
if (39 in keysDown) { // Player holding right
player.x += player.speed*modifier;
}

};

// Draw everything
var render = function () {
ctx.clearRect(0,0,600,400);

ctx.fillStyle=wall.color;
ctx.fillRect(wall.x,wall.y,wall.width,wall.height);

ctx.fillStyle=player.color;
ctx.fillRect(player.x,player.y,player.width,player.height);
};

// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;
requestAnimationFrame(main);
};

// Let's play this game!
var then = Date.now();
main();

Answer 1

问题可能是在碰撞中将速度设置为零后，您永远不会将速度设置为0以上。

if(player.x+player.width>wall.x && 
   player.x<wall.x+wall.width   &&
   player.y<wall.y+wall.height  && 
   player.y+player.height>wall.y) {
     player.speed=0; // this never gets unset
}

您可能需要根据击键来计算玩家想去的位置并计算一个delta。如果增量是允许的（不是碰撞），则更新玩家的位置，否则不应用增量。

Answer 2

我找到了解决问题的方法。我已经将键盘的方向添加到参数中并创建了一个独立的碰撞检测功能。如果您认为我对碰撞代码进行了任何改进，我会感激任何有用的输入。

var collisions=function(sprite1,sprite2){
return sprite1.x < sprite2.x + sprite2.width &&
sprite1.x + sprite1.width > sprite2.x &&
sprite1.y < sprite2.y + sprite2.height &&
sprite1.y + sprite1.height > sprite2.y;

}

if(collisions(player,wall)){
if(player.y+player.height>wall.y &&
    40 in keysDown
  )
{
  player.y=wall.y-player.height;
}

if(player.y<wall.y+wall.height  &&
  38 in keysDown
  )
{
  player.y=wall.y+wall.height;
}
if(player.x+player.width>wall.x && 
    39 in keysDown
   )
{
  player.x=wall.x-player.width;
}
if(player.x<wall.x+wall.width   && 
 37 in keysDown
   )
{
  player.x=wall.x+wall.width;
}

}

HTML 5画布游戏对象在碰撞后卡住

2 个答案: