大概是我在这个问题上的第三或第四篇文章，感谢您到目前为止的帮助。
我在javascript中有一个小型平台游戏项目，用户可以在该项目中控制一个多维数据集，该多维数据集可以左右运行，并且可以跳跃和（然后）下降。
我遇到的问题是，当我按住跳转按钮时，我的角色会跳转，达到最大高度，然后下降（这是所希望的），但是如果继续按住跳转按钮，则角色会再次“跳转”并陷入跳跃/下落的无限循环，具有立方体的视觉效果，就像在空中摇晃一样。
尽管可爱又搞笑，这是不希望的。有人可以帮我提供一些代码，以便在仍然按下该键的同时禁用跳跃的布尔值，然后在再次按下该键的同时释放该键，然后重新启用它。代码如下，谢谢。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Platformer!</title>
<style>
* {
padding: 0;
margin: 0;
}
canvas {
background: "#eee";
display: block;
margin: 0 auto;
border: 2px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="640" height="560"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var coinRad = 8;
var coinX = 40;
var coinY = 80;
var x = 20;
var y = 510;
var w = 30;
var h = 50;
var rightPressed = false;
var leftPressed = false;
var ducked = false;
var jumping = false;
var falling = false;
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 == 40) {
ducked = true;
}
else if(e.keyCode == 32) {
jumping = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
else if(e.keyCode == 40) {
ducked = false;
}
else if(e.keyCode == 32) {
jumping = false;
falling = true;
}
}
function drawCube() {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.fillStyle = "Green";
ctx.fill();
ctx.closePath();
}
function run() {
ctx.clearRect(0,0,canvas.width,canvas.height);
if (jumping) {
if (y > canvas.height/3) {
y -= 20;
}
if (y <= canvas.height/3) {
jumping = false;
falling = true;
}
}
else if (falling) {
if (y < 510) {
y += 40;
}
if (y >= 510) {
y = 510;
falling = false;
}
}
if (leftPressed) {
if (x > 0) {
x -= 2.5;
}
}
else if (rightPressed) {
if (x < canvas.width-w) {
x += 2.5;
}
}
drawCube();
}
setInterval(run, 10);
</script>
</body>
最佳答案
希望对您有所帮助：
<canvas id="gameCanvas" width="640" height="560"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var coinRad = 8;
var coinX = 40;
var coinY = 80;
var x = 20;
var y = 510;
var w = 30;
var h = 50;
var rightPressed = false;
var leftPressed = false;
var ducked = false;
var jumping = false;
var falling = false;
var down = true;
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 == 40) {
ducked = true;
}
else if(e.keyCode == 32) {
if (down) {
jumping = true;
down = false;
}
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
else if(e.keyCode == 40) {
ducked = false;
}
else if(e.keyCode == 32) {
jumping = false;
falling = true;
}
}
function drawCube() {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.fillStyle = "Green";
ctx.fill();
ctx.closePath();
}
function run() {
ctx.clearRect(0,0,canvas.width,canvas.height);
if (jumping) {
if (y > canvas.height/3) {
y -= 20;
}
if (y <= canvas.height/3) {
jumping = false;
falling = true;
}
}
else if (falling) {
if (y < 510) {
y += 40;
}
if (y >= 510) {
y = 510;
falling = false;
down = true;
}
}
if (leftPressed) {
if (x > 0) {
x -= 2.5;
}
}
else if (rightPressed) {
if (x < canvas.width-w) {
x += 2.5;
}
}
drawCube();
}
setInterval(run, 10);
</script>
https://jsfiddle.net/hg788rj7/
关于javascript - Angular 色跳转脚本JavaScript平台游戏，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44553913/