116 lines
2.4 KiB
HTML
116 lines
2.4 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.fruit {
|
|
background-color: gold;
|
|
}
|
|
|
|
.tile.head {
|
|
background-color: red;
|
|
}
|
|
</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();
|
|
}
|
|
});
|
|
|
|
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");
|
|
}
|
|
}, 1000);
|
|
|
|
// this is where your implementation starts
|
|
|
|
function gameUpdate() {
|
|
}
|
|
|
|
function leftPressed() {
|
|
}
|
|
|
|
function rightPressed() {
|
|
}
|
|
|
|
function upPressed() {
|
|
}
|
|
|
|
function downPressed() {
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<template id="tile-template">
|
|
<div class="tile"></div>
|
|
</template>
|
|
<div id="game">
|
|
</div>
|
|
</body>
|
|
</html>
|