structix/intecsync
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added snake

Browse Source
This commit is contained in:
structix
2019-06-02 17:06:28 +02:00
parent c236524e62
commit 470d59872b
1 changed files with 164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
uebung5/snake.html Normal file
View File

@@ -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>