Menu
So I am trying to make a little page where you can get a man to jump over a box, its all in CSS and jQuery.
I have made it so if you press the right arrow key the whole background is moving left and the other way around on left arrow key, to make the illusion that the man is moving. Know when you hit space I change the man bottom position to make I look like he is jumping.
But when I hit space it stops the moving effect so the man is just jumping straight up an down.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The man!</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery1.10.2.js"></script>
<script type="text/javascript" src="main_script.js"></script>
</head>
<body>
<div id="canvas">
<div id="grass"></div>
<div id="box"></div>
<div id="man"></div>
</div>
</body>
</html>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#canvas {
position: relative;
min-width: 2500px;
height: 100%;
}
#grass {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: green;
}
#box {
position: absolute;
bottom: 100px;
left: 2000px;
width: 100px;
height: 100px;
background: brown;
}
#man {
position: fixed;
bottom: 100px;
left: 500px;
width: 73px;
height: 161px;
background-image: url(images/mand.png);
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transition: bottom 0.5s ease-in-out;
-moz-transition: bottom 0.5s ease-in-out;
-ms-transition: bottom 0.5s ease-in-out;
-o-transition: bottom 0.5s ease-in-out;
transition: bottom 0.5s ease-in-out;
}
$( document ).ready(function() {
});
$(document).keydown(function(event) {
console.log("Key pressed: " + event.keyCode);
if(event.keyCode == 39) {
event.preventDefault();
$("#canvas").animate({
marginLeft: "-=10px"
}, 1)
}
if(event.keyCode == 37) {
event.preventDefault();
if($("#canvas").css('margin-left') < '0px') {
$("#canvas").animate({
marginLeft: "+=10px"
}, 1)
}
}
if(event.keyCode == 32) {
event.preventDefault();
setTimeout(function() {
$("#man").css("bottom", "300px");
setTimeout(function() {
$("#man").css("bottom", "100px");
},500);},0);
}
});
I have also made a little fiddle of it: JSFiddle
566
You need a running loop. In my example i used a setTimeout with 10ms but this is not the best solution. better use animationFrame for something like this.
but this should give you an beginning point of what you want:
bind keydown and keyup to build a keyStack:
var keyStack = {};
$(document).keydown(function (e) {
keyStack[e.keyCode] = true;
});
$(document).keyup(function (e) {
delete keyStack[e.keyCode];
});
generate a loop to run your game:
updateCanvas = function() {
//... your code to update your canvas
//create a loop
setTimeout(updateCanvas, 10);
}
and start your loop:
updateCanvas();
example: http://jsfiddle.net/Valtos/89mQc/6/
172
It's seems it can't send call event handler for 2 down keys at the same time. It is normal actually (see more details here: JavaScript multiple keys pressed at once). You need to handle keyDown and keyUp events for switching "running" state like this (pseudocode! see woking example in fiddle below):
$(document).keydown(function(event) {
// switch your man to a "running" state
startRunning();
})
.keyup(function(event) {
// switch to a "hold" state
stopRunning();
});
Full demo.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
