Я смотрел учебное видео для змеи 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
