Невозможно заставить квадрат на холсте двигаться, и теперь квадрат тоже не будет рисовать
Я пытаюсь сделать уже нарисованный квадрат с помощью клавиш WASD.
Я не был уверен, как это сделать, поэтому я посмотрел какой-то код и примерно через 2 часа нашел свой собственный нерабочий код. Это не сработало, но, по крайней мере, оно рисовало мой квадрат ... Или было.
Теперь это не так, и я понятия не имею, почему, вот мой JavaScript:
function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
ctx.addEventListener("keydown", move, true);
function move(event){
//W
if(event.keyCode == 87){
y = y + 20;
}
//A
else if(event.keyCode == 65){
x = x - 20;
}
//S
else if(event.keyCode == 83){
y = y + 20;
}
//D
else if(event.keyCode == 68){
x = x + 20;
}
}
var x = 0;
var y = 0;
ctx.fillStyle = "green";
ctx.fillRect(x + 20, y + 20, 20, 20);
}
window.addEventListener('load', function(event){
initCanvas();
});
И HTML / CSS (вся страница):http://pastebin.com/wjXv5tdK Вероятно, это связано с прослушивателем событий, потому что кажется, что он работает без него.
TL; DR
Поэтому я хочу, чтобы на холсте был нарисован квадрат, и чтобы пользователь управлял им с помощью клавиш WASD.