我不知道为什么我的代码不允许我正确跳转。 我可以很好地左右移动，但是当我尝试使用向上箭头跳跃时，它会将我带到一个随机高度，并且我不会再跌倒。
我正在尝试构建一个平台游戏并记下所需的基本代码。
这是我的 JavaScript:
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys =[];
var width = 500,
height = 400,
speed = 4,
jumpHeight = 10,
gravity = 10.0,
velocity = null;
var player= {
x:0,
y:380,
width:20,
height:20,
speed:4,
velX:0,
velY:0,
jumpBoo:false,
};
window.addEventListener("keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
delete keys[e.keyCode];
}, false);
/*
keys
up-38
down-40
right-39
left-37
*/
function game(){
update();
render();
}
function jump(){
if(keys[38]){
if(player.y=250){
player.y+=speed*5;
}
if(player.y<250){
player.y-=speed*3;
}
}
}
function update(){
jump();
if(keys[37]) player.x-=speed;
if(keys[39]) player.x+=speed;
if(player.x <0) player.x=0;
if(player.y <0) player.y=0;
if(player.x >= width - player.width) player.x = width - player.width;
if(player.y >= height - player.height) player.y = height - player.height;
if(player.y >= height-player.height){
player.y = height - player.height;
}
}
function render(){
context.clearRect(0,0,width,height);
context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function(){
game();
}, 1000/30);
我的 HTML:
<html>
<head>
<meta charset="UTF-8"/>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<canvas id="mainCanvas" width="500" height="400"></canvas>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
还有我的 CSS:
#mainCanvas{
background-color: #bcbcbc;
}
最佳答案
您的跳转功能存在一些问题。
而不是 if(player.y=250){你应该使用if(player.y==250){
还有，逻辑有问题，要减小y的值当用户按键时向上，并增加 y 的值当用户没有按下按键返回时，如下所示:
function jump(){
if(keys[38]){
if(player.y>250){
player.y-=speed*3;
}
} else if(player.y<380){
player.y+=speed*5;
}
}
关于javascript - 仅使用 JavaScript 创建跳跃动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33067670/