Aar*_*hah 2 javascript css html5-canvas
我是编码的新手，并且正在制作游戏，但是我不知道如何模拟重力来使角色跳跃。我尝试了许多不同的方法，但结果却很糟糕。这是我的代码：
#canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}<body>
<canvas id='canvas' width='512px' height='300px'></canvas>
<script>
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let charX = 20;
let charY = 130;
let charSide = 20;
let velocity = 0;
let resistance = 0;
let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let aPressed = false;
let dPressed = false;
function drawRect(x, y, width, height, color) {
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
}
function drawGround(x, y, count) {
if (count === undefined) {
count = 1;
}
drawRect(x, y, 32 * count, canvas.height - y, '#684027');
drawRect(x, y, 32 * count, 10, 'green');
}
function draw() {
//Updates Game
ctx.clearRect(0, 0, canvas.width, canvas.height);
//Draws Character
drawRect(charX, charY, charSide, charSide, 'lime');
//Draws Ground
drawGround(0, 150, 16);
//Moves Character
if (charY = 130) {
speed = 0;
accelerate = 0;
}
if (rightPressed && charX < canvas.width - charSide) {
charX += 2;
} else if (leftPressed && charX > 0) {
charX -= 2;
} else if (upPressed && charY > 0 && charY < 131) {
velocity = 0;
velocity += 50;
resistance++;
velocity -= resistance;
charY -= velocity;
} else if (upPressed === false && charY > 129) {
resistance = 0;
velocity = 0;
}
}
//Character Movement Logic
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
function keyDownHandler(e) {
if (e.keyCode == 39) {
rightPressed = true;
} else if (e.keyCode == 37) {
leftPressed = true;
} else if (e.keyCode == 38) {
upPressed = true;
} else if (e.keyCode == 65) {
aPressed = true;
} else if (e.keyCode == 68) {
dPressed = true;
}
}
function keyUpHandler(e) {
if (e.keyCode == 39) {
rightPressed = false;
} else if (e.keyCode == 37) {
leftPressed = false;
} else if (e.keyCode == 38) {
upPressed = false;
} else if (e.keyCode == 65) {
aPressed = false;
} else if (e.keyCode == 68) {
dPressed = false;
}
}
//Animates Game
setInterval(draw, 10);
</script>
</body>我尝试制作不同的变量，例如速度和阻力，并在跳跃时将其应用于角色的y位置，但这没有用。
首先在设置动画requestAnimationFrame时间时使用动画。以下示例显示了操作方法。
假设帧速率恒定，可以应用最简单的重力。一个对象的位置和速度均为y。重力是恒定的力，可增加每帧的增量
obj = {
y : 0, // position
dy : 0, // speed
size : 20, // height
onGround : false, // true if on the ground
drag : 0.99, // the drag is 0.01
}
const grav = 0.1;
每帧（动画刻度）都会施加重力并更新位置
obj.dy += grav;
obj.y += obj.dy;
如果物体撞到地面，则将增量y为零
if(obj.y + obj.size >= 150){ // has hit ground
obj.y = 150 - obj.size; // place on ground
obj.dy = 0; // stop delta y
obj.onGround = true;
}else{
obj.onGround = false;
}
然后画人物
要使角色跳起来，只需将增量y设置为负值即可。仅当角色在地面上时才进行设置。上面的代码将使角色及时退回。
if(keyboard.up && obj.onGround){
obj.dy = -5;
}
添加一些与速度成比例的阻力或阻力。速度越快，创建阻力系数的阻力就越大。在添加重力后，每帧将增量y乘以该值。
obj.dy *= obj.drag; // reduce speed due to drag
下面的示例显示了一个可以从地面跳跃并左右移动的玩家。跳跃中有一点阻力，当玩家在地面上时，左右移动会产生很大阻力。
obj = {
y : 0, // position
dy : 0, // speed
size : 20, // height
onGround : false, // true if on the ground
drag : 0.99, // the drag is 0.01
}
const grav = 0.1;
obj.dy += grav;
obj.y += obj.dy;
if(obj.y + obj.size >= 150){ // has hit ground
obj.y = 150 - obj.size; // place on ground
obj.dy = 0; // stop delta y
obj.onGround = true;
}else{
obj.onGround = false;
}