What's wrong with the js code?

How to make this code work correctly - were shown the background and the character go?
document.getElementById("canvas");
var ctx = canvas.getContext("2d");

x = 0;
y = 0;
x1 = 0;
y1 = 0;
g = 4;
b = 7;


var ground1 = new Image();
ground1.src = "Ground.png"
var pick1 = new Image()
pick1.src = "Pick.png"

function draw(){
ctx.drawImage(pick1, x1, y1);
document.addEventListener("keydown", function pick(e) {
 if(e.keyCode == 87){
y1-=32;
 ctx.drawImage(pick1, x1, y1);
}
 if(e.keyCode == 65){
x1-=32;
 ctx.drawImage(pick1, x1, y1);
}
 if(e.keyCode == 83){
y1+=32;
 ctx.drawImage(pick1, x1, y1);
}
 if(e.keyCode == 68){
x1+=32;
 ctx.drawImage(pick1, x1, y1);
}
})
 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.clearRect(0,0,316,632);

setInterval(draw, 20);
March 19th 20 at 09:12
3 answers
March 19th 20 at 09:14
Solution
Th is, in setInterval pushed the connection handler to the keydown? Clever. Don't need no setInterval here.

Keydown handler itself looks too difficult - why in four different places to make the same function call? First, you change the coordinates, and in the end pulled a redraw.

The size of the images - and if you decide to change? Or sealed somewhere? Make a constant.

As for the drawing, then probably the easiest would be to tile the canvas background image, and then draw the character.

How it can look:

const
 canvas = document.querySelector('#canvas'),
 ctx = canvas.getContext('2d');

let
 pickX = 0,
 pickY = 0;

const TILE_SIDE = 32;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image()
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
 switch (e.keyCode) {
 case 87: pickY -= TILE_SIDE; break;
 case 65: pickX -= TILE_SIDE; break;
 case 83: pickY += TILE_SIDE; break;
 case 68: pickX += TILE_SIDE; break;

 default: return;
}

draw();
});

function draw() {
 for (let x = 0; x < canvas.width; x += TILE_SIDE) {
 for (let y = 0; y < canvas.height; y += TILE_SIDE) {
 ctx.drawImage(ground, x, y);
}
}

 ctx.drawImage(pick, pickX, pickY);
}

draw();
March 19th 20 at 09:16
Solution
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
March 19th 20 at 09:18
What's wrong with the js code?
it is incorrect from the very first line...

// here is obvious has been overlooked declaring a variable where to store received from the DOM canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Wang, that's not the declared variables, and they need to declare
var x = 0;
var y = 0;
var x1 = 0;
var y1 = 0;
var g = 4;
var b = 7;

// then rules, but still need to include yourself Linter
// because the order in the code == a tidy mind
var ground1 = new Image();
ground1.src = "Ground.png";
var pick1 = new Image();
pick1.src = "Pick.png";

// but in the function draw started the full game...
function draw() {
 ctx.clearRect(0,0,316,632); // clear moved inside the function render

 // then I cut out the addEventListener for adding a new subscriber every drawing - game full
 // shoot whoever taught You that, so You make the world a better place

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

 // I think this picture is necessary to draw after the background
 ctx.drawImage(pick1, x1, y1);

 requestAnimationFrame(draw); //let's loop the animation
}

// animate something on a timer was a bad idea, there are more suitable tools
requestAnimationFrame(draw);

// subscribe to the event keyboard made from drawing
// and the render is thrown out of the handler
// his case variables to count, and to draw will 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;
}
});

on good it is necessary still that the numbers are time dependent, because requestAnimationFrame will cause wcfc with a frequency corresponding to available FPS

Find more questions by tags CanvasJavaScript