178 lines
3.8 KiB
HTML
178 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Pátek snake</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
#game {
|
|
width: 100vmin;
|
|
height: 100vmin;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.tile {
|
|
width: calc(100vmin/10);
|
|
height: calc(100vmin/10);
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tile.body {
|
|
background-color: green;
|
|
}
|
|
|
|
.tile.head {
|
|
background-color: red;
|
|
}
|
|
|
|
.tile.fruit {
|
|
background-color: gold;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const game = document.getElementById("game");
|
|
const tileTemplate = document.getElementById("tile-template");
|
|
for (let x = 0; x < 10; x++) {
|
|
for (let y = 0; y < 10; y++) {
|
|
const tile = tileTemplate.content.cloneNode(true);
|
|
tile.querySelector(".tile").classList.add(y + "-" + x);
|
|
game.appendChild(tile);
|
|
}
|
|
}
|
|
document.dispatchEvent(new Event("gameReady"));
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener("gameReady", () => {
|
|
let snake = [{x: 0, y: 0}];
|
|
let fruit = null;
|
|
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "ArrowLeft") {
|
|
leftPressed();
|
|
} else if (e.key === "ArrowRight") {
|
|
rightPressed();
|
|
} else if (e.key === "ArrowUp") {
|
|
upPressed();
|
|
} else if (e.key === "ArrowDown") {
|
|
downPressed();
|
|
} else if (e.key === "Escape") {
|
|
escPressed();
|
|
}
|
|
});
|
|
|
|
window.setInterval(() => {
|
|
|
|
gameUpdate();
|
|
|
|
for (const tile of document.querySelectorAll(".body, .head, .fruit")) {
|
|
tile.classList.remove("body", "head", "fruit");
|
|
}
|
|
|
|
for (let i = 1; i < snake.length; i++) {
|
|
const tile = snake[i];
|
|
document.getElementsByClassName(tile.x + "-" + tile.y)[0].classList.add("body");
|
|
}
|
|
|
|
document.getElementsByClassName(snake[0].x + "-" + snake[0].y)[0].classList.add("head");
|
|
if (fruit !== null) {
|
|
document.getElementsByClassName(fruit.x + "-" + fruit.y)[0].classList.add("fruit");
|
|
}
|
|
}, 300);
|
|
|
|
// this is where your implementation starts
|
|
let dir = 1; //orientation variable, 0 = up, 1 = right, 2 = down, 3 = left
|
|
let paused = false;
|
|
let justAte = false;
|
|
function getRand(x) {
|
|
return Math.floor(Math.random() * x);
|
|
}
|
|
function gameUpdate() {
|
|
if(paused){
|
|
return;
|
|
}
|
|
|
|
if (fruit === null) {
|
|
fruit = {x: getRand(10), y: getRand(10)};
|
|
}
|
|
//console.log(dir);
|
|
|
|
if (fruit.x === snake[0].x && fruit.y === snake[0].y) {
|
|
justAte = true;
|
|
fruit = null;
|
|
snake.unshift({...snake[0]});
|
|
}
|
|
if (!justAte) {
|
|
for (let i = snake.length - 1; i > 0; i--){
|
|
snake[i].x = snake[i-1].x;
|
|
snake[i].y = snake[i-1].y;
|
|
}
|
|
}
|
|
switch (dir) {
|
|
case 1:
|
|
snake[0].x += 1
|
|
break;
|
|
case 2:
|
|
snake[0].y += 1
|
|
break;
|
|
case 3:
|
|
snake[0].x -= 1
|
|
break;
|
|
case 0:
|
|
snake[0].y -= 1
|
|
break;
|
|
|
|
}
|
|
for (let index = snake.length - 1; index > 0; index--) {
|
|
const element = snake[index];
|
|
if (snake[0].x === element.x && snake[0].y === element.y){
|
|
alert('You suck at snake');
|
|
window.location.replace('https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=PLahKLy8pQdCM0SiXNn3EfGIXX19QGzUG3');
|
|
|
|
}
|
|
|
|
}
|
|
snake[0].x = (snake[0].x + 10) % 10;
|
|
snake[0].y = (snake[0].y + 10) % 10;
|
|
justAte = false;
|
|
}
|
|
function leftPressed() {
|
|
dir = 3;
|
|
}
|
|
|
|
function rightPressed() {
|
|
dir = 1;
|
|
}
|
|
|
|
function upPressed() {
|
|
dir = 0;
|
|
}
|
|
|
|
function downPressed() {
|
|
dir = 2;
|
|
}
|
|
function escPressed() {
|
|
paused = !paused
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<template id="tile-template">
|
|
<div class="tile"></div>
|
|
</template>
|
|
<div id="game">
|
|
</div>
|
|
</body>
|
|
</html>
|