270 lines
9.2 KiB
HTML
270 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>snake</title>
|
|
<meta charset="UTF-8" />
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
<script src="/static/js/utils.js" defer></script>
|
|
<script src="/static/js/TP6.js" defer></script>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
|
/>
|
|
</head>
|
|
<body
|
|
style="
|
|
background-color: #282a36;
|
|
margin: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
"
|
|
>
|
|
<h2
|
|
id="status"
|
|
style="
|
|
color: white;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
"
|
|
>
|
|
Snake
|
|
</h2>
|
|
<canvas
|
|
style="
|
|
border-radius: 10px;
|
|
display: flex;
|
|
margin: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
"
|
|
id="canvas"
|
|
></canvas>
|
|
</body>
|
|
<script>
|
|
class Game {
|
|
constructor() {
|
|
const { width, height } = document
|
|
.getElementById("canvas")
|
|
.getBoundingClientRect();
|
|
document.getElementById("canvas").setAttribute("width", width);
|
|
document
|
|
.getElementById("canvas")
|
|
.setAttribute("height", height);
|
|
this.boxSize = 15;
|
|
this.canvasWidth = width;
|
|
this.canvasHeight = height;
|
|
this.p = 0;
|
|
this.score = 0;
|
|
this.board = new Board(
|
|
this.canvasWidth,
|
|
this.canvasHeight,
|
|
this.boxSize,
|
|
this.p,
|
|
);
|
|
this.snake = new Snake(0, 0);
|
|
this.apple = new Apple(0, 0);
|
|
this.gridWidth = this.canvasWidth / this.boxSize;
|
|
this.gridHeight = this.canvasHeight / this.boxSize;
|
|
this.LastInput = "ArrowDown";
|
|
this.input = "ArrowDown";
|
|
}
|
|
|
|
init() {
|
|
let x = Math.floor(Math.random() * this.gridWidth);
|
|
let y = Math.floor(Math.random() * this.gridHeight);
|
|
this.apple.position = [x, y];
|
|
this.board.drawBoard();
|
|
document.addEventListener("keydown", (event) => {
|
|
const keyName = event.key;
|
|
if (
|
|
keyName === "ArrowUp" ||
|
|
keyName === "ArrowDown" ||
|
|
keyName === "ArrowLeft" ||
|
|
keyName === "ArrowRight"
|
|
) {
|
|
this.input = keyName;
|
|
}
|
|
});
|
|
this.update();
|
|
}
|
|
|
|
computeMovement(keypressed) {
|
|
this.snake.tail.push(this.snake.head);
|
|
if (
|
|
(keypressed === "ArrowUp" &&
|
|
this.LastInput == "ArrowDown") ||
|
|
(keypressed === "ArrowDown" &&
|
|
this.LastInput == "ArrowUp") ||
|
|
(keypressed === "ArrowLeft" &&
|
|
this.LastInput == "ArrowRight") ||
|
|
(keypressed === "ArrowRight" &&
|
|
this.LastInput == "ArrowLeft")
|
|
) {
|
|
keypressed = this.LastInput;
|
|
} else {
|
|
this.LastInput = keypressed;
|
|
}
|
|
switch (keypressed) {
|
|
case "ArrowUp":
|
|
this.snake.head = [
|
|
this.snake.head[0],
|
|
this.snake.head[1] - 1,
|
|
];
|
|
break;
|
|
case "ArrowDown":
|
|
this.snake.head = [
|
|
this.snake.head[0],
|
|
this.snake.head[1] + 1,
|
|
];
|
|
break;
|
|
case "ArrowLeft":
|
|
this.snake.head = [
|
|
this.snake.head[0] - 1,
|
|
this.snake.head[1],
|
|
];
|
|
break;
|
|
case "ArrowRight":
|
|
this.snake.head = [
|
|
this.snake.head[0] + 1,
|
|
this.snake.head[1],
|
|
];
|
|
break;
|
|
default:
|
|
console.log("Should not happen");
|
|
break;
|
|
}
|
|
if (
|
|
this.snake.head[0] >= this.gridWidth ||
|
|
this.snake.head[0] < 0 ||
|
|
this.snake.head[1] >= this.gridHeight ||
|
|
this.snake.head[1] < 0
|
|
)
|
|
this.dead = true;
|
|
|
|
this.snake.tail.forEach((box) => {
|
|
if (
|
|
box[0] === this.snake.head[0] &&
|
|
box[1] === this.snake.head[1]
|
|
) {
|
|
this.dead = true;
|
|
}
|
|
});
|
|
|
|
if (
|
|
this.snake.head[0] === this.apple.position[0] &&
|
|
this.snake.head[1] === this.apple.position[1]
|
|
) {
|
|
this.snake.tailLenght++;
|
|
this.score++;
|
|
let x = Math.floor(Math.random() * this.gridWidth);
|
|
let y = Math.floor(Math.random() * this.gridHeight);
|
|
this.apple.position = [x, y];
|
|
}
|
|
|
|
while (this.snake.tail.length > this.snake.tailLenght) {
|
|
this.snake.tail.shift(0);
|
|
}
|
|
}
|
|
|
|
update() {
|
|
this.computeMovement(this.input);
|
|
this.board.clear();
|
|
//this.board.drawScore(this.score);
|
|
this.board.drawSnake(this.snake);
|
|
this.board.drawApple(this.apple);
|
|
this.board.drawBoard();
|
|
if (!this.dead)
|
|
setTimeout(() => {
|
|
this.update();
|
|
}, 100);
|
|
else {
|
|
document.getElementById("status").textContent =
|
|
"PERDU, n'hesite pas a recommencer :)";
|
|
}
|
|
}
|
|
}
|
|
|
|
class Apple {
|
|
constructor(x, y) {
|
|
this.color = "#6272a4";
|
|
this.position = [x, y];
|
|
}
|
|
}
|
|
|
|
class Snake {
|
|
constructor(x, y) {
|
|
this.color = "#bd93f9";
|
|
this.head = [x, y];
|
|
this.tailLenght = 1;
|
|
this.tail = [[x, y]];
|
|
}
|
|
}
|
|
|
|
class Board {
|
|
constructor(canvasWidth, canvasHeight, boxSize, padding) {
|
|
this.canvasWidth = canvasWidth;
|
|
this.canvasHeight = canvasHeight;
|
|
this.boxSize = boxSize;
|
|
this.p = padding;
|
|
this.canvas = document.getElementById("canvas");
|
|
this.context = canvas.getContext("2d");
|
|
}
|
|
clear() {
|
|
this.context.clearRect(
|
|
0,
|
|
0,
|
|
this.canvas.width,
|
|
this.canvas.height,
|
|
);
|
|
}
|
|
drawBoard() {
|
|
for (let x = 0; x <= this.canvasWidth; x += this.boxSize) {
|
|
this.context.moveTo(0 + x + this.p, this.p);
|
|
this.context.lineTo(
|
|
0 + x + this.p,
|
|
this.canvasHeight + this.p,
|
|
);
|
|
}
|
|
|
|
for (let x = 0; x <= this.canvasHeight; x += this.boxSize) {
|
|
this.context.moveTo(this.p, 0 + x + this.p);
|
|
this.context.lineTo(
|
|
this.canvasWidth + this.p,
|
|
0 + x + this.p,
|
|
);
|
|
}
|
|
this.context.strokeStyle = "#44475a";
|
|
this.context.stroke();
|
|
}
|
|
fillBox(x, y, color) {
|
|
this.context.fillStyle = color;
|
|
this.context.fillRect(
|
|
x * this.boxSize + this.p,
|
|
y * this.boxSize + this.p,
|
|
this.boxSize,
|
|
this.boxSize,
|
|
);
|
|
}
|
|
drawScore(score) {
|
|
this.context.font = "200px serif";
|
|
this.context.strokeText(score, 280, 370);
|
|
}
|
|
drawApple(apple) {
|
|
this.fillBox(apple.position[0], apple.position[1], apple.color);
|
|
}
|
|
drawSnake(snake) {
|
|
this.fillBox(snake.head[0], snake.head[1], snake.color);
|
|
snake.tail.forEach((box) => {
|
|
this.fillBox(box[0], box[1], snake.color);
|
|
});
|
|
}
|
|
}
|
|
|
|
g = new Game();
|
|
g.init();
|
|
</script>
|
|
</html>
|