Странный багги рост для змеи JavaScript ⇐ Html

[Anonymous]

Я смотрел учебное видео для змеи JavaScript, однако, по какой -то причине, это не работало, так что я должен был спрашивать Chatgpt (к сожалению), как исправить горизонтальную ошибку роста, и после миллионов исправлений сейчас только вертикаль. Есть помощь с этим? Я тоже не могу понять, что я делаю неправильно.

const CANVAS = document.getElementById("game-canvas");

const CONTEXT = CANVAS.getContext("2d");

const SEGMENT_WIDTH = 32.0;
const SEGMENT_HEIGHT = 32.0;

const COLUMNS = CANVAS.width / SEGMENT_WIDTH;
const ROWS = CANVAS.height / SEGMENT_HEIGHT;

class Segment {
constructor(x, y, direction ) {

this.x = x;
this.y = y;

this._direction = direction;
this.OLD_direction = this.direction

this.next = null;

}

get direction() {

return this._direction;

}

set direction(direction) {

this.OLD_direction = this._direction;

this._direction = direction;
}

setDirection(direction) {
this.direction = direction;
}

move() {

this.OLD_direction = this.direction;

if (this._direction === 0) this.y--;
else if (this._direction === 1) this.y++;
else if (this._direction === 2) this.x--;
else if (this._direction === 3) this.x++;

if (this.x < 0) this.x = COLUMNS - 1;
else if (this.x >= COLUMNS) this.x = 0;
if (this.y < 0) this.y = ROWS - 1;
else if (this.y >= ROWS) this.y = 0;

if (this.next !== null) {
this.next.direction = this.OLD_direction;
this.next.move();
}
}

}

const ROOT = new Segment(COLUMNS / 2, ROWS / 2, 0);

window.addEventListener("keydown", event => {

if (event.code === "KeyW") {

if (ROOT.direction !== 1) ROOT.direction = 0;

} else if (event.code === "KeyS") {

if (ROOT.direction !== 0) ROOT.direction = 1;

} else if (event.code === "KeyA") {

if (ROOT.direction !== 3) ROOT.direction = 2;

} else if (event.code === "KeyD") {

if (ROOT.direction !== 2) ROOT.direction = 3;

}

});

function addSegment() {
let lastSegment = ROOT;
while (lastSegment.next !== null) {
lastSegment = lastSegment.next;
}

let dir = lastSegment.OLD_direction;

let newX = lastSegment.x;
let newY = lastSegment.y;

if (dir === 0) newY += 1;
else if (dir === 1) newY -= 1;
else if (dir === 2) newX += 1;
else if (dir === 3) newX -= 1;

if (newX < 0) newX = COLUMNS - 1;
else if (newX >= COLUMNS) newX = 0;
if (newY < 0) newY = ROWS - 1;
else if (newY >= ROWS) newY = 0;

lastSegment.next = new Segment(newX, newY, dir);
}

let foodX = 0;
let foodY = 0;

function randFoodPosition() {

foodX = Math.floor(Math.random() * COLUMNS);
foodY = Math.floor(Math.random() * ROWS);

}

randFoodPosition();

let elapsedFrames = 0;

function update() {

if (elapsedFrames > 10) {

ROOT.move();

if (ROOT.x === foodX && ROOT.y === foodY) {

addSegment()

randFoodPosition()
}

elapsedFrames = 0

} else elapsedFrames++;
}

function render() {

console.log("Rendering...?");

CONTEXT.fillStyle = "#60c198";

CONTEXT.fillRect(0.0, 0.0, CANVAS.width, CANVAS.height);

let currentSegment = ROOT;

while (currentSegment !== null) {

CONTEXT.fillStyle = "black";

CONTEXT.fillRect(currentSegment.x * SEGMENT_WIDTH, currentSegment.y * SEGMENT_HEIGHT, SEGMENT_WIDTH, SEGMENT_HEIGHT);

currentSegment = currentSegment.next
}

CONTEXT.fillStyle = "#183026";

CONTEXT.fillRect(foodX * SEGMENT_WIDTH, foodY * SEGMENT_HEIGHT, SEGMENT_WIDTH, SEGMENT_HEIGHT);
}

function tick() {

update();

render();

window.requestAnimationFrame(tick);

}

tick();

< /code>
html: < /p>








#game-canvas {

position: absolute;

left: 50%;
top: 50%;

transform: translate(-50%, -50%);
}



SNAKE












Подробнее здесь: https://stackoverflow.com/questions/796 ... ript-snake