DjalimSimaila/site-perso-poly
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ca me coute des token
All checks were successful
DEPLOY / deploy (push) Successful in 9s
Details

Browse Source
This commit is contained in:
Djalim Simaila 2025-02-23 20:19:00 +01:00
parent 33b1bde178
commit 707075503a
1 changed files with 247 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

458
projects/snake.html
View File

@ -1,231 +1,267 @@
<!doctype html>
<body style="background-color: #282a36; margin: 0; width: 100vw; height: 100vh">
<h2
id="status"
<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="
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: #282a36;
margin: 0;
width: 100vw;
height: 100vh;
"
></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;
>
<h2
id="status"
style="
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
"
></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";
}
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++;
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();
}
while (this.snake.tail.length > this.snake.tailLenght) {
this.snake.tail.shift(0);
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 :)";
}
}
}
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 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);
class Snake {
constructor(x, y) {
this.color = "#bd93f9";
this.head = [x, y];
this.tailLenght = 1;
this.tail = [[x, y]];
}
}
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);
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");
}
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);
});
}
}
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,
);
}
g = new Game();
g.init();
</script>
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>