function will change snake position by deleting the tail and adding a new head in needed direction(VectorX/Y). But when I press any button vectors are don`t changing.
const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');
function drawSqr(color, size, position){
cs.fillStyle = color;
cs.fillRect(position[0] * size, position[1] * size, size, size);
}
const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);
let vectorX = 0, vectorY = 0;
let snake = {
position : [
[1, 1],
[2, 1],
[3, 1],
],
color: "#00FFFF",
snakeRender: function(event){
document.addEventListener('keydown', function(event, vectorX, vectorY){
switch(event){
case "w":
vectorX = 0, vectorY = 1;
break;
case "a":
vectorX = -1, vectorY = 0;
break;
case "s":
vectorX = 0, vectorY = -1;
break;
case "d":
vectorX = 1, vectorY = 0;
break;
}
return alert(event + " was pressed!");
});
let [x, y] = this.position.at(-1);
this.position.push([x + vectorX, y + vectorY]);
let oldTail = this.position.shift()
console.log(this.position)
console.log(vectorX, vectorY)
drawSqr("#000000", sqrSize, oldTail);
for(let pos of this.position){
drawSqr(this.color, sqrSize, pos);
}
setTimeout(() => snake.snakeRender(), 1000);
}
};
snake.snakeRender();<!DOCTYPE html>
<html>
<head>
<title>The snake</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="map" width="1280" height="720"></canvas>
<script src="script.js"></script>
</body>
</html>P.s vectors will change when you press "W", "A", "S", "D". I think problem is in setTimeOut but i don`t know how can i fix this. Thanks for your help. P.p.s I have checked does program see the pressed buttons and it is returned [object KeyboardEvent]
Try this:
switch(ev.key){
case "w":
vectorX = 0, vectorY = 1;
break;
case "a":
vectorX = -1, vectorY = 0;
break;
case "s":
vectorX = 0, vectorY = -1;
break;
case "d":
vectorX = 1, vectorY = 0;
break;
}
There are two issues:
function(ev, vectorX, vectorY) means that updating vectorX and vectorY will update those local variables and not the global ones declared here: let vectorX = 0, vectorY = 0;. (And only the global ones are accessible to the updaters.)switch(ev) instead of switch(ev.key) means that it will never match any key, because ev is an object, not a string.const canvas = document.getElementById('map');
const cs = canvas.getContext('2d');
function drawSqr(color, size, position){
cs.fillStyle = color;
cs.fillRect(position[0] * size, position[1] * size, size, size);
}
const sqrSize = 20;
cs.fillStyle = "#000000";
cs.fillRect(0, 0, canvas.width, canvas.height);
let vectorX = 0, vectorY = 0;
let snake = {
position : [
[1, 1],
[2, 1],
[3, 1],
],
color: "#00FFFF",
snakeRender: function(event){
document.addEventListener('keydown', function(ev){
switch(ev.key){
case "w":
vectorX = 0, vectorY = 1;
break;
case "a":
vectorX = -1, vectorY = 0;
break;
case "s":
vectorX = 0, vectorY = -1;
break;
case "d":
vectorX = 1, vectorY = 0;
break;
}
return
});
let [x, y] = this.position.at(-1);
this.position.push([x + vectorX, y + vectorY]);
let oldTail = this.position.shift()
console.log(this.position)
console.log(vectorX, vectorY)
drawSqr("#000000", sqrSize, oldTail);
for(let pos of this.position){
drawSqr(this.color, sqrSize, pos);
}
setTimeout(() => snake.snakeRender(), 1000);
}
};
snake.snakeRender();<!DOCTYPE html>
<html>
<head>
<title>The snake</title>
<meta charset="utf-8">
</head>
<body>
<canvas id="map" width="1280" height="720"></canvas>
<script src="script.js"></script>
</body>
</html>Also, adding an event listener every single time snakeRender() runs, means there are many event listeners, each doing the same thing. I didn't adjust anything there, though.