Verschieben von Formen in Leinwand mit den Pfeiltasten

Question

Brauchen Sie Hilfe mit meinem Code, so dass es bewegt sich das Rechteck in InitializePlayer nach oben, unten, links und rechts mit den Tastaturpfeilen bewegen?

function initializePlayer() { 
G.context.fillStyle = "purple"; 
G.context.fillRect(300, 200, 20, 20); 
G.context.beginPath(130, 130); 
} 

function playerMove(dx, dy) { 
var canvas = document.getElementById("canvas"); 
canvas.addEventListener("keydown", keyEventHandler, true); 

} 


function keyEventHandler(event) { 
if (event.keycode == 38) { 
(y - dy > 0) 
y -= dy; 
} 
else if (event.keycode === 40) { /* Down arrow was pressed */ 
if (y + dy < HEIGHT) 
y += dy; 
} 
else if (event.keycode === 37) { /* Left arrow was pressed */ 
if (x - dx > 0) 
x -= dx; 
} 
else if (event.keycode === 39) { /* Right arrow was pressed */ 
if (x + dx < WIDTH) 
x += dx; 
} 
} 

function render() { 
drawRect(makeRect(300, 200, 20, 20, "purple")) 

} 

alle und alle Hilfe wird geschätzt !!!

Answer 1

window.addEventListener("keydown",function(e){keyEventHandler(e);},false); 

statt

canvas.addEventListener("keydown",keyEventHandler,false); 

Was wirklich funktioniert/nicht funktioniert? Ich brauche mehr Informationen, um tatsächlich die Frage zu beantworten ... :(

Answer 2

Dieser Code sehr chaotisch ist, das Format es Aber es gibt auch einige Bugs:

• Wenden Sie das keydown Ereignis zum Fenster, ...! nicht die Leinwand Andernfalls wird der Ereignis-Listener nicht ausgeführt wird
• Sie event.keycode verwendet Diese Eigenschaft existiert nicht die richtige Eigenschaft ist event.keyCode

• In keyEventHandler eine Erklärung gibt, die nichts tut, ist:. (y - dy > 0) Ich denke du meinst if (y - dy > 0).

• das Rechteck neu zu zeichnen, wenn ein keydown Ereignis auftritt, Sie render() am Ende keyEventHandler nennen sollten.

• render funktioniert nicht, weil drawRect und makeRect nicht existieren. Ich erwarte, dass dies nur ein Teil Ihres Codes ist, aber ich sehe den Sinn darin sowieso nicht, da Sie feste Koordinaten verwenden? Was dazu:

  function render() { 
      G.context.clearRect(0, 0, WIDTH, HEIGHT); 
      G.context.fillStyle = "purple"; 
      G.context.fillRect(x, y, 20, 20); 
  } 
  

Wenn Sie Probleme mit Debuggen, ich Sie Firebug for Firefox sehr empfehlen, aber jeder Browser hat auch eine integrierte Konsole, die mit F12 geöffnet werden kann.