javascript help!! html5 canvas
hi guys
so im new to java script and i was trying to make a script that makes a image/sprite move side to side when i press the arrow key but i dont know where im going wrong could you please help me thanks
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script>
window.onload = function(){
//variables
var destX = 300;
var destY = 300;
var imageObj = new Image();
//image load function
imageObj.onload = function(){
context.drawImage(imageObj, destX, destY);
};
imageObj.src = "sprite.png";
};
function keyDown(e) {
if (e.keyCode == 39) rightKey = true;
else if (e.keyCode == 37) leftKey = true;
}
function keyUp(e) {
if (e.keyCode == 39) rightKey = false;
else if (e.keyCode == 37) leftKey = false;
}
function loop() {
clearCanvas();
drawImg();
}
function drawImg() {
if (rightKey) {
destX += 5;
} else if (leftKey) {
destY -= 5;
}
function init() {
canvas = document.getElementById('myCanvas');
ctx = canvas.getContext('2d');
imageObj = new Image();
imageObj.src = 'sprite.png';
setInterval(loop, 1000/30);
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
</body>
</html>
thanks guys:thumbup:
Re: javascript help!! html5 canvas
Code:
// Add keyboard navigation
$(document).keyup(function(e){
// ignore arrow/space keys if inside a form element
if (e.target.tagName.match('TEXTAREA|INPUT|SELECT')) { return; }
switch (e.which) {
case 39: case 32: // right arrow & space
if (base.$wrap.is('.your class here')){
base.goForward();
}
break;
case 37: // left arrow
if (base.$wrap.is('.your class here')){
base.goBack();
}
break;
}
});
