仅使用JavaScript创建跳转动画
仅使用JavaScript创建跳转动画
提问于 2015-10-12 01:00:16
我不知道为什么我的代码不允许我正确跳转。我可以左右移动，但当我尝试使用向上箭头跳跃时，它会将我带到一个随机的高度，并且我不会倒下。
我正在尝试构建一个平台，并获得所需的基本代码。
这是我的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;
}回答 1
Stack Overflow用户
发布于 2015-10-12 01:34:41
您的跳转函数有一些问题。
您应该使用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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33067670
复制相关文章
相似问题