(wip) Add snake game

2023-12-04 19:29:55 +01:00
parent 4b1024f5ab
commit 63ba1db4c0
2 changed files with 108 additions and 0 deletions
--- a/src/snake.html
+++ b/src/snake.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en" style="width: 100%; height: 100%">
+<head>
+  <meta charset="UTF-8">
+  <title>Snake</title>
+  <script src="snake.js"></script>
+</head>
+<body onload="run()" style="width: 95%; height: 95%">
+<canvas id="welt" width="400" height="400"></canvas>
+</body>
+</html>
--- a/src/snake.js
+++ b/src/snake.js
@@ -0,0 +1,97 @@
+var y = 70
+var x = 70;
+var direction = "none"
+
+
+function run() {
+
+    document.addEventListener("keydown", (event) => {
+
+        if (event.key == "ArrowRight") {
+            direction = "right"
+        }
+        if (event.key == "ArrowLeft") {
+            direction = "left"
+
+        }
+        if (event.key == "ArrowDown") {
+            direction = "down"
+        }
+        if (event.key == "ArrowUp") {
+            direction = "up"
+        }
+    });
+
+
+    update()
+}
+
+async function update() {
+    controle()
+    checkeating()
+    draw()
+    await new Promise(() => setTimeout(update, 0.033333));
+}
+
+function checkeating() {
+
+    // x = 70
+    // y = 70
+    if (x > 150 && x < 220) {
+        if (y > 150 && y < 220) {
+            console.log("yummy")
+        }
+    }
+    if (x + 100 > 150 && x + 100 < 220) {
+        if (y > 150 && y < 220) {
+            console.log("yummy")
+        }
+    }
+    if (x + 100 > 150 && x + 100 < 220) {
+        if (y + 100 > 150 && y + 100 < 220) {
+            console.log("yummy")
+        }
+    }
+    if (x > 150 && x < 220) {
+        if (y + 100 > 150 && y + 100 < 220) {
+            console.log("yummy")
+        }
+    }
+}
+
+function controle() {
+    if (direction == "right") {
+        x = x + 0.08
+
+    }
+    if (direction == "left") {
+        x = x - 0.08
+
+    }
+    if (direction == "down") {
+        y = y + 0.08
+
+    }
+    if (direction == "up") {
+        y = y - 0.08
+    }
+}
+
+
+function draw() {
+    const canvas = document.getElementById("welt");
+    const ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "lightGreen"
+    ctx.fillRect(0, 0, canvas.width, canvas.height)
+
+    ctx.fillStyle = "purple";
+    ctx.fillRect(10, 10, 100, 100);
+
+    ctx.fillStyle = "red";
+    ctx.fillRect(x, y, 100, 100)
+
+    ctx.fillStyle = "yellow"
+    ctx.fillRect(150, 150, 70, 70)
+
+}