$(document).ready(function () {
$('#jumpleft').hide();
$('#crouchleft').hide();
$('#jumpright').hide();
$('#crouchright').hide();
$('#walkright').hide();
$('#walkleft').hide();
$('#standleft').hide();
var $facing = "right";
var $minleft = 320;
var $maxright = 480;
$(document).keydown(function (key) {
switch (parseInt(key.which, 10)) {
case 65:
//a-press-->walk left
if ($minleft > 0) {
$('#walkleft').show();
$('#standright').hide();
$('#standleft').hide();
$('img').animate({
left: "-=20px"
}, 'fast');
$facing = "left";
$minleft -= 20;
$maxright -=20;
};
break;
case 83:
//s-press-->crouch
if ($facing === "right") {
$('#crouchright').show();
} else {
$('#crouchleft').show();
}
$('#standleft').hide();
$('#standright').hide();
break;
case 87:
//w-press-->jump
$('#standleft').hide();
$('#standright').hide();
if ($facing === "right") {
$('#jumpright').show();
} else {
$('#jumpleft').show();
}
$('img').animate({
top: '-=100px'
}, 'fast');
$('img').animate({
top: '+=100px'
}, 'fast');
break;
case 68:
//d-press-->walk right
if ($maxright < 800) {
$('#walkright').show();
$('#standleft').hide();
$('#standright').hide();
$('img').animate({
left: "+=20px"
}, 'fast');
$facing = "right";
$maxright += 20;
$minleft +=20;
}
break;
default:
break;
}
});
$(document).keyup(function (key) {
switch (parseInt(key.which, 10)) {
case 65:
//a-press-->walk left
$('#standleft').show();
$('#walkleft').hide();
break;
case 83:
//s-press-->crouch
if ($facing === "right") {
$('#standright').show();
} else {
$('#standleft').show();
}
$('#crouchleft').hide();
$('#crouchright').hide();
break;
case 87:
//w-press-->jump
if ($facing === "right") {
$('#standright').show();
} else {
$('#standleft').show();
}
$('#jumpleft').hide();
$('#jumpright').hide();
break;
case 68:
//d-press-->walk right
$('#standright').show();
$('#walkright').hide();
break;
default:
break;
}
});
});
<!DOCTYPE html>
<body>
<div id="boundary">
<div id="standright">
<img src="http://acm28.files.wordpress.com/2013/08/mariostandright.gif" />
</div>
<div id="standleft">
<img src="http://acm28.files.wordpress.com/2013/08/mariostandleft.gif" />
</div>
<div id="walkright">
<img src="http://acm28.files.wordpress.com/2013/08/mariowalkright.gif" />
</div>
<div id="walkleft">
<img src="http://acm28.files.wordpress.com/2013/08/mariowalkleft.gif" />
</div>
<div id="crouchleft">
<img src="http://acm28.files.wordpress.com/2013/08/mariocrouchleft.gif" />
</div>
<div id="crouchright">
<img src="http://acm28.files.wordpress.com/2013/08/mariocrouchright.gif" />
</div>
<div id="jumpleft">
<img src="http://acm28.files.wordpress.com/2013/08/mariojumpleft.gif" />
</div>
<div id="jumpright">
<img src="http://acm28.files.wordpress.com/2013/08/mariojumpright.gif" />
</div>
</div>
</body>
img {
position: absolute;
left: 320px;
top: 100px;
}
}