Probleme mit der Benutzereingabe beim vertikalen Verschieben eines Bildes

Question

Ich muss ein Bild vertikal durch Benutzereingabe verschieben, aber wenn ich die definierte Taste drücke passiert nichts. Ich weiß nicht, ob der Befehl, den ich verwende, um ein neues Bild vertikal zu zeichnen, falsch ist oder meine Funktion ist?

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; 
} 

Answer 1

Sie haben nicht handlekeyPress(event) Funktion deklariert.

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?   

      } 
     } 
} 

Wie Sie sehen, geben Sie den Funktionscode in einer anderen Funktion an. Diese Funktion kann nicht außerhalb der Funktion aufgerufen werden.