dimanche 19 avril 2015

Having trouble with user input in moving an image vertically

So I need to move an image vertically by user input however, when I press the defined key nothing happens. I don't know if the command Im using to draw the new image going vertically is wrong or my function is. Any help would be appreciated!


Script.js



var map = document.getElementById("map");
var ctx = map.getContext("2d");

var baseImage = new Image();
baseImage.src = "assets/base.png";
baseImage.addEventListener("load", drawImage);

var speedyImage = new Image();
speedyImage.src = "assets/speedy.png";
speedyImage.addEventListener("load", drawImage);

var bubbleImage = new Image();
bubbleImage.src = "assets/bubble.png";
bubbleImage.addEventListener("load", drawImage);

document.addEventListener('keydown', function(event){ handleKeyPress(event);});

var dt = 1000/30.0;

function intersectRect(r1, r2) { // detects collision

return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);

}


function drawImage(){
setInterval(update, 1000/30.0);
}



var x = 0;
var y = 0;
var speed = 0.05;
var direction = 1;
document.getElementById("score").innerHTML = 0;


function update(){
ctx.clearRect(0, 0, map.width, map.height);

for(var i = 0; i < 1; i++){
ctx.drawImage(bubbleImage,x, map.height - baseImage.height - 50);
function handleKeyPress(event){
if(event.keyCode == 32){ // if space
// trouble here... would I just use the draw image function again?

}
}
}

for(var i = 0; i < 3; i++){
ctx.drawImage(speedyImage,x,0);
ctx.drawImage(speedyImage,x,70);
ctx.drawImage(speedyImage,x,150);
if(intersectRect(bubbleImage,speedyImage) == false)
score+= score+100;

}


ctx.drawImage(baseImage, x, map.height - baseImage.height );
y += speed*direction*dt;
x += speed * direction * dt;

if (x > map.width - baseImage.width || x < 0)
direction = -direction;

}

Aucun commentaire:

Enregistrer un commentaire