如何爲跳躍的人制作碰撞事件

Question

如何爲角色製造碰撞和重力事件以跳躍並與敵人發生碰撞？

說我想我的角色跳20px然後回來，但如果沒有地面下，他們繼續下降。

這是我的編碼，與身份證人的div可以左右移動箭頭鍵，但我需要這樣做，所以當他跳躍時，他會回來，但如果他與另一個div碰撞，他也是停下來，但如果他不是，他會繼續下降。此外，如果有任何機會，你可以幫我，所以我可以把跳躍鍵和移動按鈕所以他不都在同一時間將是有益的

document.body.addEventListener('keydown', function(){move()}); 
 

 

 
function move(){ 
 
var spot = document.getElementById('person').offsetTop; 
 
var lr = document.getElementById('person').offsetLeft; 
 
var y = spot + 5; 
 
var z = spot - 5; 
 
var w = lr + 5; 
 
var v = lr - 5; 
 

 
var map = []; // Or you could call it "key" 
 
onkeydown = onkeyup = function(e){ 
 
    e = e || event; // to deal with IE 
 
    map[e.keyCode] = e.type == 'keydown'; 
 
    /*insert conditional here*/ 
 
if(map[38]){ 
 
\t \t document.getElementById('person').style.top = z + "px"; 
 
\t }else if(map[37]){ 
 
\t \t document.getElementById('person').style.left = v + "px"; 
 
\t }else if(map[39]){ 
 
\t \t document.getElementById('person').style.left = w + "px"; 
 
\t } 
 
} 
 
} 
 
\t

<div id="person" style="width: 20px; height: 20px;top:490px; position: absolute ; background-color:#00F"></div> 
 
<div id="ground" style="width:auto; position:relative; top:500px; height: 5px; background-color:#000"></div> 
 
<div id="wall" style="width: 30px; height:30px; top:470px; left:100px; position:relative; background-color:#000"></div>

Answer 1

您最好的選擇將會評估一個物理庫，比如Matter.js或PhysicsJS。你也可以看看其他評估https://github.com/bebraw/jswiki/wiki/Physics-libraries

Answer 2

這裏有一點點的博弈論。你應該閱讀關於如何最好地實現你想要的效果的文章或教程。

您的地面和角色都是遊戲對象，可能都是寬度，高度，x和y座標。

如果玩家沒有與y軸上的物體（下方）碰撞，那麼您需要在每次更新時在角色上應用重力值，以便將角色向下移動。

.(x,y)---------- 
|    | 
|    | 
|    | 
|    | 
|    | 
---------------- 

Where player.x and y is the top left of it's box

可以計算使用此碰撞player.y-player.length（讓你的播放器的底部）>=大於或等於ground.y地面上的位置。在這種情況下，不要施加重力。

對於弓和箭，您只需檢查左側，右側，底部和頂部不會與另一個物體發生碰撞。