HTML 5帆布遊戲對象碰撞後卡住

請幫我試了幾件事情，但每當我將小物體移動到較大的物體後，在碰撞檢測後卡住了。這是我的代碼很容易理解。我也嘗試檢測另一個對象的各個方面的碰撞檢測。HTML 5帆布遊戲對象碰撞後卡住

// 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();

來源

2013-08-26 ktkization

這個問題可能是您在碰撞時將其設置爲零後，您從未將速度設置爲高於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 
}

您可能需要根據擊鍵計算出球員想要去的地方並計算出一個三角洲。如果增量是允許的（不碰撞），則更新玩家的位置，否則不應用增量。

來源

2013-08-26 21:43:21

感謝您的回覆SB。你能建議我該怎麼做，或者我應該使用完全不同的碰撞檢測系統 – ktkization

我找到了解決我的問題的方法。我已經將鍵盤的方向添加到了參數中，並創建了一個獨立的碰撞檢測函數。如果您認爲我對我的碰撞代碼進行了任何改進，我將不勝感激任何有用的輸入。

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

}

來源

2013-08-27 11:16:26 ktkization

HTML 5帆布遊戲對象碰撞後卡住

回答

相關問題