Witam, wpadłem sobie na pomysł, żeby zrobić sobie grę snake w JS. Mam aktualnie problem z tym, gdy chce, żeby mój wąż (teraz to aktualnie jest tylko kwadracik), zmieniał kierunki ruchu, ale gdy wciskam klawisz to pojawia się znacznie za daleko i nie mogę tego ogarnąć. Proszę o pomoc bo nie daje sobie rady.
<!doctype html><html> <head> <meta charset="UTF-8" /> </head> <body> <canvas></canvas> <script> const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 1000;
const bw = canvas.width;
const bh = canvas.height;
const headSnake = 30;
let snakeX = bw / 2
let snakeY = bh / 2
let snakeSpeed = 3;
let key = '68';
function board() {
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, bw, bh);
}
function snake() {
ctx.fillStyle = 'white';
ctx.fillRect(snakeX, snakeY, headSnake, headSnake);
if (key == '118') key = '68';
if (key == '87') snakeY -= snakeSpeed; //w
if (key == '83') snakeY += snakeSpeed; //s
if (key == '65') snakeX -= snakeSpeed; //a
if (key == '68') snakeX += snakeSpeed; //d
document.addEventListener('keydown', snakeMove);
function snakeMove(event) {
key = event.keyCode;
if (key == '118') key = '68';
if (key == '87') snakeY -= snakeSpeed; //w
if (key == '83') snakeY += snakeSpeed; //s
if (key == '65') snakeX -= snakeSpeed; //a
if (key == '68') snakeX += snakeSpeed; //d
}
}
function game() {
board();
snake();
}
setInterval(game, 1000 / 60);
</script>
</body>
</html>