Pour créer un snake JS :
//author : Thibaut Lemaire
//Name : Créer un snake
//date : Janvier 2022
//modele : DAN Chaine Youtube 'let write Sanke game in plain Javascript'
let canvas = document.getElementById('canvas');
let ROWS = 30
let COLS = 50
let PIXEL = 10
let pixels = new Map();
function initializeCanvas() {
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let pixel = document.createElement('div');
pixel.style.position = 'absolute'
pixel.style.border = '1px solid red'
pixel.style.left = j * PIXEL + 'px';
pixel.style.top = i * PIXEL + 'px';
pixel.style.width = PIXEL + 'px';
pixel.style.height = PIXEL + 'px';
let position = i + '_' + j;
canvas.appendChild(pixel);
pixels.set(position, pixel);
}
}
}
initializeCanvas();
function drawSnake(snake) {// dessiner la structure
let snakePositions = new Set();
for (let [top, left] of snake) {
let position = top + '_' + left;
snakePositions.add(position);
}
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let position = i + '_' + j;
let pixel = pixels.get(position);
pixel.style.background =
snakePositions.has(position) ?
'black' :
'white';
}
}
}
function draw() {//draw the snake
drawSnake(currentSnake);
}
let currentSnake = [//coordonées
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4]
];
let moveRight = ([t, l]) => [t, l + 1];
let moveLeft = ([t, l]) => [t, l - 1];
let moveUp = ([t, l]) => [t - 1, l];
let moveDown = ([t, l]) => [t + 1, l];
let currentDirection = moveRight;
let directionQueue = [];
window.addEventListener('keydown', (e) => {//changing directions
switch (e.key) {
case "ArrowLeft":
case "S":
case "s":
//left pressed
directionQueue.push(moveLeft);
break;
case "ArrowRight":
case "F":
case "f":
//right Pressed
directionQueue.push(moveRight);
break;
case "ArrowUp":
case "E":
case "e":
//Up Pressed
directionQueue.push(moveUp);
break;
case "ArrowDown":
case "X":
case "x":
directionQueue.push(moveDown);
//Down Pressed
break;
}
dump(directionQueue);
})
function step() {
currentSnake.shift();
let head = currentSnake[currentSnake.length - 1];
let nextDirection= currentDirection;
while (directionQueue.length > 0) {
let candidateDirection = directionQueue.shift();
if (areOpposite(candidateDirection, currentDirection)){
continue;
}
nextDirection = candidateDirection;
break;
}
currentDirection = nextDirection;
let nextHead = currentDirection(head);
currentSnake.push(nextHead);
drawSnake(currentSnake);
dump(directionQueue);
}
function areOpposite (dir1, dir2) {
if (dir1 === moveLeft && dir2 === moveRight){
return true;
}
if (dir1 === moveRight && dir2 === moveLeft){
return true;
}
if (dir1 === moveUp && dir2 === moveDown){
return true;
}
if (dir1 === moveDown && dir2 === moveUp){
return true;
}
return false;
}
drawSnake(currentSnake);
setInterval(() => {// vitesse du serpent
step();
}, 800);
function dump(queue) {
document.getElementById('debug').innerText =
queue.map(fn => fn.name).join(', ')
}
Ce tuto est complet sur les deux vidéos d'exemple, mais le code, ici present, est incomplet ...
Le script est dans la partie HEAD de la page HTML