我正在创建一款平台类游戏并设置了一些物理特性。我想让它在玩家跳跃和跌落时反弹并停下来。请问，有人可以帮忙吗？谢谢。 Jsfiddle 链接到我的代码:https://jsfiddle.net/fezzie07/nfbv5oLd/153/#&togetherjs=HH8otvf7hA
html:
<html>
<body>
<canvas id="c" width="400" height="200"></canvas>
</body>
</html>
样式:
#c {
background-color: #202020;
border-style: dashed;
border-color: black;
border-width: 1px;
}
javascript:
var fps, canvas, context, controller, gamePiece, gameEnemy, loop;
fps = 60;
canvas = document.getElementById("c");
context = canvas.getContext("2d");
controller = {
left: false,
right: false,
up: false,
keyListener: function(event) {
var key_state = (event.type == "keydown") ? true : false;
switch (event.keyCode) {
case 37: // left key
controller.left = key_state;
break;
case 38: // up key
controller.up = key_state;
break;
case 39: // right key
controller.right = key_state;
break;
}
}
};
gamePiece = {
x: canvas.width / 2,
y: canvas.height / 2,
w: 10,
h: 10,
yVel: 0,
xVel: 0,
jumping: false,
}
gameEnemy = {
}
loop = function() {
context.clearRect(0, 0, canvas.width, canvas.height);
draw();
move();
collision();
if (controller.up && gamePiece.jumping == false) {
gamePiece.yVel -= 15;
gamePiece.jumping = true;
}
if (controller.left) {
gamePiece.xVel -= 0.5;
}
if(controller.right) {
gamePiece.xVel += 0.5;
}
}
function draw() {
context.fillStyle = "#afeeee"
context.fillRect(gamePiece.x, gamePiece.y, gamePiece.w, gamePiece.h);
context.strokeStyle = "#f08080";
context.beginPath();
context.moveTo(0, canvas.height - 16);
context.lineTo(canvas.width, canvas.height - 16);
context.stroke();
}
function move() {
gamePiece.yVel += 1.5;
gamePiece.y += gamePiece.yVel;
gamePiece.x += gamePiece.xVel;
gamePiece.xVel *= 0.9;
gamePiece.yVel *= 0.9;
}
function collision() {
if (gamePiece.y > canvas.height - 16 - gamePiece.h) {
gamePiece.y = canvas.height - 16 - gamePiece.h;
gamePiece.yVel = 0;
gamePiece.jumping = false;
}
}
window.setInterval(loop, 1000 / fps);
window.addEventListener("keydown", controller.keyListener)
window.addEventListener("keyup", controller.keyListener);
最佳答案
在函数 collision() 中，而不是做
gamePiece.yVel = 0;
你可以做
gamePiece.yVel = -gamePiece.yVel;
如果 flex 太大，将其乘以阻尼值，
var yDamp = 0.5;
gamePiece.yVel = -gamePiece.yVel * yDamp;
最后，为了防止弹跳时跳跃
gamePiece.jumping = gamePiece.yVel > 1;
关于javascript - 用于 html 5 Canvas 平台游戏风格游戏的弹跳物理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58158228/