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

58
projects/snake.html
View File

@ -1,5 +1,24 @@
<!doctype html>
<body style="background-color: #282a36; margin: 0; width: 100vw; height: 100vh">
<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="
@ -21,15 +40,17 @@
"
id="canvas"
></canvas>
</body>
<script>
</body>
<script>
class Game {
constructor() {
const { width, height } = document
.getElementById("canvas")
.getBoundingClientRect();
document.getElementById("canvas").setAttribute("width", width);
document.getElementById("canvas").setAttribute("height", height);
document
.getElementById("canvas")
.setAttribute("height", height);
this.boxSize = 15;
this.canvasWidth = width;
this.canvasHeight = height;
@ -71,11 +92,14 @@
computeMovement(keypressed) {
this.snake.tail.push(this.snake.head);
if (
(keypressed === "ArrowUp" && this.LastInput == "ArrowDown") ||
(keypressed === "ArrowDown" && this.LastInput == "ArrowUp") ||
(keypressed === "ArrowUp" &&
this.LastInput == "ArrowDown") ||
(keypressed === "ArrowDown" &&
this.LastInput == "ArrowUp") ||
(keypressed === "ArrowLeft" &&
this.LastInput == "ArrowRight") ||
(keypressed === "ArrowRight" && this.LastInput == "ArrowLeft")
(keypressed === "ArrowRight" &&
this.LastInput == "ArrowLeft")
) {
keypressed = this.LastInput;
} else {
@ -187,17 +211,28 @@
this.context = canvas.getContext("2d");
}
clear() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
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);
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.lineTo(
this.canvasWidth + this.p,
0 + x + this.p,
);
}
this.context.strokeStyle = "#44475a";
this.context.stroke();
@ -228,4 +263,5 @@
g = new Game();
g.init();
</script>
</script>
</html>