使用箭头键在画布中移动形状

Question

Need help with my code so that it moves the rectangle in initializePlayer to move up, down, left, and right with the keyboard arrows?

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"))

}

any and all help is appreciated!!!

Answer 1

This code is very messy, format it! But there are also some bugs:

• Apply the to the window, not the canvas. Otherwise the event listener isn't carried out.
• You used event.keycode . This property doesn't exist! The correct property is event.keyCode .

• In keyEventHandler there is a statement that does nothing: (y - dy > 0) I guess you meant if (y - dy > 0) .

• To repaint the rectangle when a keydown event occurs, you should call render() at the end of keyEventHandler .

• render doesn't work because drawRect and makeRect don't exist. I expect that this is just a part of your code, but I don't see the sense in this anyway, as you use fixed coordinates? What about this:

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

If you have problems with debugging, I highly recommend you Firebug for Firefox , but every browser also has a built-in console that can be opened with F12.

Answer 2

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

instead of

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

What's actually working/not working? I need more information to actually answer the question... :(