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> <!doctype html>
<body style="background-color: #282a36; margin: 0; width: 100vw; height: 100vh"> <html lang="fr">
<h2 <head>
id="status" <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=" style="
color: white; background-color: #282a36;
position: absolute; margin: 0;
top: 50%; width: 100vw;
left: 50%; height: 100vh;
transform: translate(-50%, -50%);
text-align: center;
" "
></h2> >
<canvas <h2
style=" id="status"
border-radius: 10px; style="
display: flex; color: white;
margin: auto; position: absolute;
width: 100%; top: 50%;
height: 100%; left: 50%;
" transform: translate(-50%, -50%);
id="canvas" text-align: center;
></canvas> "
</body> ></h2>
<script> <canvas
class Game { style="
constructor() { border-radius: 10px;
const { width, height } = document display: flex;
.getElementById("canvas") margin: auto;
.getBoundingClientRect(); width: 100%;
document.getElementById("canvas").setAttribute("width", width); height: 100%;
document.getElementById("canvas").setAttribute("height", height); "
this.boxSize = 15; id="canvas"
this.canvasWidth = width; ></canvas>
this.canvasHeight = height; </body>
this.p = 0; <script>
this.score = 0; class Game {
this.board = new Board( constructor() {
this.canvasWidth, const { width, height } = document
this.canvasHeight, .getElementById("canvas")
this.boxSize, .getBoundingClientRect();
this.p, document.getElementById("canvas").setAttribute("width", width);
); document
this.snake = new Snake(0, 0); .getElementById("canvas")
this.apple = new Apple(0, 0); .setAttribute("height", height);
this.gridWidth = this.canvasWidth / this.boxSize; this.boxSize = 15;
this.gridHeight = this.canvasHeight / this.boxSize; this.canvasWidth = width;
this.LastInput = "ArrowDown"; this.canvasHeight = height;
this.input = "ArrowDown"; this.p = 0;
} this.score = 0;
this.board = new Board(
init() { this.canvasWidth,
let x = Math.floor(Math.random() * this.gridWidth); this.canvasHeight,
let y = Math.floor(Math.random() * this.gridHeight); this.boxSize,
this.apple.position = [x, y]; this.p,
this.board.drawBoard(); );
document.addEventListener("keydown", (event) => { this.snake = new Snake(0, 0);
const keyName = event.key; this.apple = new Apple(0, 0);
if ( this.gridWidth = this.canvasWidth / this.boxSize;
keyName === "ArrowUp" || this.gridHeight = this.canvasHeight / this.boxSize;
keyName === "ArrowDown" || this.LastInput = "ArrowDown";
keyName === "ArrowLeft" || this.input = "ArrowDown";
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) => { init() {
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 x = Math.floor(Math.random() * this.gridWidth);
let y = Math.floor(Math.random() * this.gridHeight); let y = Math.floor(Math.random() * this.gridHeight);
this.apple.position = [x, y]; 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) { computeMovement(keypressed) {
this.snake.tail.shift(0); 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() { class Apple {
this.computeMovement(this.input); constructor(x, y) {
this.board.clear(); this.color = "#6272a4";
//this.board.drawScore(this.score); this.position = [x, y];
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 { class Snake {
constructor(x, y) { constructor(x, y) {
this.color = "#6272a4"; this.color = "#bd93f9";
this.position = [x, y]; this.head = [x, y];
} this.tailLenght = 1;
} this.tail = [[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) { class Board {
this.context.moveTo(this.p, 0 + x + this.p); constructor(canvasWidth, canvasHeight, boxSize, padding) {
this.context.lineTo(this.canvasWidth + this.p, 0 + x + this.p); 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"; clear() {
this.context.stroke(); this.context.clearRect(
} 0,
fillBox(x, y, color) { 0,
this.context.fillStyle = color; this.canvas.width,
this.context.fillRect( this.canvas.height,
x * this.boxSize + this.p, );
y * this.boxSize + this.p, }
this.boxSize, drawBoard() {
this.boxSize, for (let x = 0; x <= this.canvasWidth; x += this.boxSize) {
); this.context.moveTo(0 + x + this.p, this.p);
} this.context.lineTo(
drawScore(score) { 0 + x + this.p,
this.context.font = "200px serif"; this.canvasHeight + this.p,
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(); for (let x = 0; x <= this.canvasHeight; x += this.boxSize) {
g.init(); this.context.moveTo(this.p, 0 + x + this.p);
</script> 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>