165 lines
4.6 KiB
HTML
165 lines
4.6 KiB
HTML
<!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>
|