I don’t know how to solve the problem:
When I keep left+space pressed down together, the animation works,but when I keep left pressed (without leave it) and then I press space (one time, kept pressed left), the animation jumps but it doesn’t go left… The animation stops even if I press some other key (to reset it I must leave all). Can someone explain me why is it so and give me some practical solution? Thank you very much! This is the code:
<style>
#map{
position:relative;
height:220px;
width:800px;
}
#character{
height:100px;
width:100px;
position:absolute;
bottom: 10px;
left: 0px;
z-index:1;
}
</style>
<div id="map"><div id="character"><img src="images/bart.gif"></div></div>
<script>
enableJump = true;
jump = function(){
if(enableJump){ enableJump = false;
salta = function(){
if(flagY){
posY++;
if(posY >= 90) flagY = false;
jj = document.getElementById('character').style.bottom=posY;
}
else{
posY--;
jj = document.getElementById('character').style.bottom=posY;
if(posY < 10){
flagY = true;
clearInterval(j);
enableJump = true;
up = false;
}
}
}
j = setInterval(salta,8);
}
}
up = false; dx = false;
document.onkeydown = function(evt){
code = evt.keyCode;
if(code == 32) up=true;
if(code == 39) dx=true;
moveCharacter();
}
document.onkeyup = function(evt){
code = evt.keyCode;
if(code == 32) up=false;
if(code == 39) dx=false;
}
posX = 10; posY = 10; flagY = true; var j;
moveCharacter = function(){
if(dx == true && up == true){
jump();
posX+=10;
x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)';
temp = document.getElementById('character').style.left=posX;
}
else if(dx){
posX+=10;
x1 = document.getElementById('character').style.backgroundImage='url(images/character_left.gif)';
temp = document.getElementById('character').style.left=posX;
}
else if(up){ jump(); }
}
</script>
Code cleaned (without jump but with the same problem, keeping pressed left and pressing another key it stops and I must leave it to reset it)
<script>
var dx = false;
var posX = 10;
var posY = 10;
document.onkeydown = function(evt){
if(evt.keyCode == 39) dx=true;
moveCharacter();
}
document.onkeyup = function(evt){
if(evt.keyCode == 39) dx=false;
}
moveCharacter = function(){
if(dx){
posX+=10;
document.getElementById('character').style.left=posX;
}
}
</script>
Finally i solved the problem:
Functions keydown, keyup, movecharacter were deleted.
I added:
Reference: http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/
http://stackoverflow.com/questions/9507200/why-keydown-listener-doesnt-work-in-ie
It works with Chrome, Firefox, IE7/8/Quirks mode (not in document mode IE9 standards)
Thank for your interest!