Что не так с кодом js?
он некорректный с самой первой строки...
// тут очевидно было пропущено объявление переменной куда сохраняем полученный из DOM canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// вангую, что тут не объявленные переменные, и их нужно объявить
var x = 0;
var y = 0;
var x1 = 0;
var y1 = 0;
var g = 4;
var b = 7;
// тут норм, но все же стоит включить себе линтер
// ибо порядок в коде == порядок в голове
var ground1 = new Image();
ground1.src = "Ground.png";
var pick1 = new Image();
pick1.src = "Pick.png";
// а вот в функции draw началась полная дичь...
function draw() {
ctx.clearRect(0,0,316,632); // очистку перенес внутрь функции отрисовки
// тут я вырезал addEventListener - ибо добавлять нового подписчика на каждой отрисовке - дичь полнейшая
// пристрелите того, кто Вас этому научил, так Вы сделаете этот мир лучше
if(g < b) {
ctx.drawImage(ground1, x, y);
x+=32;
if(x-32 > 290){
x = 0;
y+=32;
}
if(y-32 > 578){
y = 0;
x = 0;
}
}
// я так думаю эту картинку надо рисовать после фона
ctx.drawImage(pick1, x1, y1);
requestAnimationFrame(draw); //зациклим анимацию
}
// анимировать что-то по таймеру плохая затея, есть более подходящие инструменты
requestAnimationFrame(draw);
// подписку на событие клавиатуры вынес из отрисовки
// а саму отрисовку выкинул из обработчика
// его дело переменные пересчитывать, а рисовать будет draw
document.addEventListener("keydown", function pick(e) {
if(e.keyCode == 87){
y1-=32;
}
if(e.keyCode == 65){
x1-=32;
}
if(e.keyCode == 83){
y1+=32;
}
if(e.keyCode == 68){
x1+=32;
}
});
по хорошему надо еще, чтоб цифры от времени зависели, ибо requestAnimationFrame будет вызывать вкфц с частотой соответствующей доступному FPS
