Probably my third or fourth post on this subject, thanks for the help so far.
I have a small platform game project in javascript where the user controls a cube which can run left and right and can jump and (subsequently) fall.
Issue I have is that when I hold down the jump button, my character jumps, reaches max height, then falls (which is desired) but if the jump button is continued held down, the character then 'jumps' again and is caught in a jumping/falling infinite loop, which has the visual affect of the cube just shaking in mid air.
Whilst adorable and hilarious this is not desired. Can some one help me out with some code for disabling the jumping boolean whilst the key is still pressed, and then re enabling it once the key is released, subject to the key being pressed again. Code follows, thank you.
<!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>
I hope this help:
<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>