The character moves in each direction, but how can I hold another key to allow it to move diagonally rather than just stop and move in that direction? I set up a gif here: https://i.gyazo.com/1a13d207f94e4361ab8e015679ba5d85.gif
JavaScript:
$(document).ready(function(){
$("#character").addClass("front-stand");
});
//setInterval(moveChar, 20);
var keypressed = 0;
$(document).keydown(function(e){
if (!keypressed){
keypressed = e.keyCode;
moveChar();
if (e.keyCode == keypressed){
keypressed = false;
$("#character").stop(false,true);
}
function moveChar(){
switch (e.keyCode){
case 38:
$("#character").animate({top: "-=25"}, 200);
break;
case 39:
$("#character").animate({left: "+=25"}, 200);
break;
case 40:
$("#character").animate({top: "+=25"}, 200);
break;
case 37:
$("#character").animate({left: "-=25"}, 200);
break;
}
}
}
});
#character{
position: absolute;
top: 0;
left: 0;
height: 32px;
width: 32px;
background-image:url(character.png);
}
Now, I am not saying that the following is perfect, but I did manage to get it working quickly after some fiddling. I've posted it to codepen, so you should be able to see it whenever, but I've also got it here just in case. Odds are there is probably a much cleaner and nicer way to do this, but so far this is what I've got.
If you hit two keys at the same time, it will first register the sideways motion for 1 animation and will THEN animate both motions after that. You could probably clear this up by calling a delay on for say 100ms, but I didn't get a chance to test how that does.
function _animate(el, key) {
if (key < 37 || key > 40) return undefined;
el = $(el);
var styles = {};
if (el.data('animations') == undefined)
el.data('animations', []);
var data = el.data('animations');
if (data.indexOf(key) == -1)
data.push(key);
el.data('animations', data); //Push the object to the element.
for (var i = 0; i < data.length; i++) {
var k = data[i]
switch (k) {
case 37:
styles.left = '-=25px';
break;
case 38:
styles.top = '-=25px';
break;
case 39:
styles.left = '+=25px';
break;
case 40:
styles.top = '+=25px';
break;
}
}
console.log(styles);
el.animate(styles);
}
$(document).on('keydown', function(e) {
_animate($('#sprite'), e.keyCode);
}).on('keyup', function(e) {
data = $('#sprite').data('animations');
data.splice(data.indexOf(e.keyCode), 1);
$('#sprite').clearQueue();
});div#sprite {
background-color: green;
position: relative;
height: 25px;
width: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sprite"> </div>