EN COURS DE CONSTRUCTION
< SNAKE >
Snake-Monster
canvas{
border: 2px solid "#AA7DFC";
}
console.log("coucou");
let variable = "hello";
console.log(variable);
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
let box = 20;
let snake = [];
snake[0] = { x: 10 * box, y: 10 * box };
let food = {
x: Math.floor(Math.random() * 15 + 1) * box,
y: Math.floor(Math.random() * 15 + 1) * box,
};
let score = 0;
let d;
document.addEventListener("keydown", direction);
function direction(event) {
let key = event.keyCode;
if (key == 37 && d != "RIGHT") {
d = "LEFT";
} else if (key == 38 && d != "DOWN") {
d = "UP";
} else if (key == 39 && d != "LEFT") {
d = "RIGHT";
} else if (key == 40 && d != "UP") {
d = "DOWN";
}
}
function draw() {
context.clearRect(0, 0, 400, 400);
for (let i = 0; i < snake.length; i++) {
context.fillStyle = i == 0 ? "#AA7DFC" : "#ffb4a1";
context.fillRect(snake[i].x, snake[i].y, box, box);
context.strokeStyle = "white";
context.strokeRect(snake[i].x, snake[i].y, box, box);
}
context.fillStyle = "white"; context.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if (d == "LEFT") snakeX -= box;
if (d == "UP") snakeY -= box;
if (d == "RIGHT") snakeX += box;
if (d == "DOWN") snakeY += box;
if (snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor(Math.random() * 15 + 1) * box,
y: Math.floor(Math.random() * 15 + 1) * box,
};
} else {
snake.pop();
}
let newHead = {
x: snakeX,
y: snakeY,
};
if (
snakeX < 0 ||
snakeY 19 * box ||
snakeX > 19 * box ||
collision(newHead, snake)
) {
clearInterval(game);
}
snake.unshift(newHead);
context.fillStyle = "#AA7DFC";
context.font = "30px Arial";
context.fillText(score, 2 * box, 1.6 * box);
}
function collision(head, array) {
for (let g = 0; g < array.lenght; g++) {
if (head.x == array[g].x && head.y == array[g].y) {
return true;
}
}
return false;
}
let game = setInterval(draw, 200);
Uniquement fonctionnel sur PC
Le jeu SNAKE
Le principe du jeu est de contrôler un serpent qui se déplace à l’intérieur d’une zone de jeu. Le but est de faire grandir le serpent en mangeant des objets. Plus le serpent devient long et plus le défi augmente, car le joueur doit éviter de heurter les bords de l’écran ou le corps du serpent.
Techniques utilisées
Les principales techniques utilisées sont :
- Canvas HTML5: Utilisation de l’élément canvas HTML5 pour créer un espace de jeu interactif.
- Contexte 2D: Utilisation du contexte 2D du canvas pour dessiner des éléments tels que le serpent, la nourriture et les scores.
- Détection des touches: Écoute des événements de pression des touches pour contrôler le déplacement du serpent.
- Gestion du serpent: Stockage et mise à jour de la position du serpent dans un tableau, ainsi que la gestion de sa croissance et de sa collision avec lui-même.