Added snake

2019-06-02 17:06:28 +02:00
parent c236524e62
commit 470d59872b
1 changed files with 164 additions and 0 deletions
--- a/uebung5/snake.html
+++ b/uebung5/snake.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Snake</title>
+    <style>
+        #canvas {
+            background-color: #D3D3D3;
+        }
+
+        canvas {
+            padding: 0;
+            margin: auto;
+            display: block;
+            width: 400px;
+            height: 400px;
+        }
+
+    </style>
+</head>
+<body>
+<canvas id="canvas" width="400" height="400">Der Browser scheint leider kein Canvas zu unterstützen.</canvas>
+<script>
+    let canvas = document.getElementById("canvas");
+    let snakefield = canvas.getContext("2d");
+
+    //Wird für mehrere Teilaufgaben benötigt. Deshalb global definiert
+    snakefield.textAlign = "center";
+    snakefield.lineWidth = 2;
+    snakefield.strokeStyle = "#D3D3D3";
+
+    // Koordinaten der Schlange, der erste Eintrag ist der Kopf der Schlange
+    let snake = [{x: 3, y: 2}, {x: 4, y: 2}, {x: 5, y: 2}];
+    // Koordinaten der Frucht
+    let fruit = {x: 5, y: 5};
+    // Richtung, in die sich die Schlange momentan bewegt
+    let currentDirection = {x: -1, y: 0};
+    let points = 0;
+
+
+    function drawFruit(fruit) {
+        snakefield.fillStyle = "#538700";
+        snakefield.fillRect(fruit.x * 20, fruit.y * 20, 20, 20)
+        snakefield.strokeRect(fruit.x * 20, fruit.y * 20, 19, 19)
+    }
+
+
+    function drawSnake(snake) {
+        for (let i = 0; i < snake.length; i++) {
+            snakefield.fillStyle = (i === 0) ? "#000000" : "#00538E";
+            snakefield.fillRect(snake[i].x * 20, snake[i].y * 20, 20, 20);
+            snakefield.strokeRect(snake[i].x * 20, snake[i].y * 20, 20, 20);
+        }
+    }
+
+
+    function drawGameOver(points) {
+        snakefield.fillStyle = "white";
+        snakefield.font = "50px Comic Sans";
+        snakefield.fillText("Game over!", canvas.width / 2, canvas.height / 2 - 20);
+        snakefield.font = "25px Comic Sans";
+        snakefield.fillText(points + " Punkte", canvas.width / 2, canvas.height / 2 + 20);
+    }
+
+
+    function fruitCollidesWithSnake(snake, fruit) {
+        for (let i = 0; i < snake.length; i++) {
+            if (snake[i].x === fruit.x && snake[i].y === fruit.y) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    function randomCoordinatesOutsideSnake(snake) {
+        let x = Math.floor(Math.random() * 20);
+        let y = Math.floor(Math.random() * 20);
+
+        for (let i = 0; i < snake.length; i++) {
+            if (snake[i].x === x && snake[i].y === y) {
+                return randomCoordinatesOutsideSnake(snake);
+            }
+        }
+
+        return {x: x, y: y};
+    }
+
+
+    function snakeHeadCollidesWithSnake(snake) {
+        for (let i = 1; i < snake.length; i++) {
+            if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    function moveSnake(snake, directionVector) {
+        let head = {x: 0, y: 0};
+        let tail = snake.pop();
+
+        head.x = snake[0].x + directionVector.x;
+        if (head.x < 0 || head.x >= 20) {
+            head.x = ((head.x % 20) + 20) % 20;
+        }
+
+        head.y = snake[0].y + directionVector.y;
+        if (head.y < 0 || head.y >= 20) {
+            head.y = ((head.y % 20) + 20) % 20;
+        }
+        snake.unshift(head);
+        return tail;
+    }
+
+
+    let intervalID = setInterval(function () {
+        let tail = moveSnake(snake, currentDirection);
+        if (fruitCollidesWithSnake(snake, fruit)) {
+            snake.push(tail);
+            fruit = randomCoordinatesOutsideSnake(snake);
+        }
+
+        snakefield.clearRect(0, 0, 400, 400);
+        drawSnake(snake);
+        drawFruit(fruit);
+
+        // Game Over mit Score anzeigen
+        if (snakeHeadCollidesWithSnake(snake)) {
+            drawGameOver(snake.length - 3);
+        }
+
+        // Bei Game Over das Intervall stoppen
+        if (snakeHeadCollidesWithSnake(snake)) {
+            clearInterval(intervalID);
+        }
+    }, 150);
+
+
+    document.body.addEventListener('keydown', function (event) {
+        // ... verändern der currentDirection ...
+        if (event.key === "ArrowLeft" && currentDirection.x !== 1) {
+            currentDirection.x = -1;
+            currentDirection.y = 0;
+        }
+        if (event.key === "ArrowRight" && currentDirection.x !== -1) {
+            currentDirection.x = 1;
+            currentDirection.y = 0;
+        }
+        if (event.key === "ArrowUp" && currentDirection.y !== 1) {
+            currentDirection.x = 0;
+            currentDirection.y = -1;
+        }
+        if (event.key === "ArrowDown" && currentDirection.y !== -1) {
+            currentDirection.x = 0;
+            currentDirection.y = 1;
+        }
+    });
+
+</script>
+</body>
+
+</html>