I have a stupid problem at the moment when learning JavaScript. I just want to move this simple image, but it doesn't work at all. Can someone see the problem? I will remove all the not so important code. I need some kind of repaint method or somethin I think. How shall I solve this?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
var paddle;
var score;
var timer;
var dx = 0;
var dy = 0;
var paddleX = 300;
var paddleY = 50;
var s1x = -1;
var s1y = 0;
var star1X = 0;
var star1Y = 0;
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
function init(){
paddle = document.getElementById('paddle');
document.onkeydown = keyListener;
document.onkeyup = keyListener;
timer = setTimeout('init()',50);
move();
keyMoving();
}
function keyListener(e){
}
imageObj.onload = function() {
context.drawImage(imageObj, paddleX, paddleY);
};
imageObj.src = 'ball.PNG';
function keyMoving(){
document.onkeydown = function(event) {
event = event || window.event;
var e = event.keyCode;
// Left
if(e==37){
dx = -4;
}
//Up
if(e==38){
dy = -4;
}
// Right
if(e==39){
dx = 4;
}
// Down
if(e==40){
dy = 4;
}
}
}
function move(){
paddleX += dx;
paddleY += dy;
}
</script>
</body>
</html>
