diff --git a/index.html b/index.html index 6ec0ddd..2765af8 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ KyFlo Snake + @@ -14,13 +15,13 @@
- - - - +
+
- +
+ +
diff --git a/sources/css/style.css b/sources/css/style.css index 096a23e..2500932 100644 --- a/sources/css/style.css +++ b/sources/css/style.css @@ -2,6 +2,10 @@ html{ height: 100%; + width: 100%; + margin: 0; + padding: 0; + overflow: hidden; } body{ @@ -26,7 +30,7 @@ h1{ #menu{ margin: 0; margin-top: 150px; - + } #menu>div{ @@ -58,16 +62,16 @@ h1{ background-color: rgba(0, 0, 0, 0.8); } -.linear-wipe { - background: linear-gradient(to right, rgb(255, 136, 0) 20%, #FF0 40%, #FF0 45%, rgb(255, 136, 0) 80%); +.linear-wipe { + background: linear-gradient(to right, #FF4294 20%, #d919ff 35%, #3af8ff 40%, #d919ff 65%, #FF4294 80%); background-size: 200% auto; - + background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - - animation: shine 1s linear infinite; + + animation: shine 1.5s linear infinite; } @keyframes shine { @@ -94,3 +98,59 @@ h1{ text-align: center; } +.menu-level{ + height: 25vh; + overflow-y: auto; + overflow-x: hidden; +} + +::-webkit-scrollbar { + width: 7px; + height: 7px; +} +::-webkit-scrollbar-button { + width: 0px; + height: 0px; +} +::-webkit-scrollbar-thumb { + background: #FF4294; + border: 0px none #ffffff; + border-radius: 0px; +} +::-webkit-scrollbar-thumb:hover { + background: #FF4294; +} +::-webkit-scrollbar-thumb:active { + background: #a800a3; +} +::-webkit-scrollbar-track { + background: #000000; + border: 0px none #ffffff; + border-radius: 50px; +} +::-webkit-scrollbar-track:hover { + background: #000000; +} +::-webkit-scrollbar-track:active { + background: #000000; +} +::-webkit-scrollbar-corner { + background: transparent; +} +#canvas { + display: block; + margin: 0 auto; + border: 3px double rgb(0, 255, 200); + color: rgb(0, 255, 200); + background-color: rgba(0, 0, 0, 0.5); +} + +.invisible{ + display: none !important; +} + +#game{ + height: 75vh; + width: 75vh; + margin: auto; +} diff --git a/sources/js/Game.js b/sources/js/Game.js index 85b7ea3..1145588 100644 --- a/sources/js/Game.js +++ b/sources/js/Game.js @@ -24,7 +24,7 @@ export class Game { throw new InvalidGameOption("size"); if (direction && Object.values(directions).find(([x,y]) => direction[0] === x && direction[1] === y)) - this.direction = this.lastDirection = direction; + this.direction = this.startDirection = this.lastDirection = direction; else throw new InvalidGameOption("direction"); @@ -42,6 +42,8 @@ export class Game { this.apple = false; this.score = 0; this.lives = lives; + this.onStart = null; + this.onStop = null; } /** @@ -60,9 +62,6 @@ export class Game { * Init the canvas */ initCanvas() { - this.ctx.canvas.width = window.innerWidth; - this.ctx.canvas.height = window.innerHeight; - this.ctx.canvas.ownerDocument.addEventListener("keyup", ev => { switch (ev.key) { case "ArrowUp": @@ -98,6 +97,10 @@ export class Game { * Start the party */ start() { + if (this.onStart && typeof this.onStart === "function") + this.onStart(); + + this.direction = this.lastDirection = this.startDirection; this.snake = new Snake({startPos: this.size.map(s => Math.floor(s/2))}); this.initWorld(); @@ -120,6 +123,8 @@ export class Game { this.ctx.globalCompositeOperation = "destination-out"; this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); this.ctx.globalCompositeOperation = "source-over"; + if (this.onStop && typeof this.onStop === "function") + this.onStop(); } /** diff --git a/sources/js/Tile.js b/sources/js/Tile.js index bdd0837..714b936 100644 --- a/sources/js/Tile.js +++ b/sources/js/Tile.js @@ -44,7 +44,7 @@ export class Tile { switch (this.type) { case tiles.EMPTY: - this.game.ctx.strokeStyle = "#000000"; + this.game.ctx.strokeStyle = "#999999"; this.game.ctx.rect(...canvasPos, ...size); break; case tiles.APPLE: diff --git a/sources/js/index.js b/sources/js/index.js index 53a4e9f..3790915 100644 --- a/sources/js/index.js +++ b/sources/js/index.js @@ -1,8 +1,59 @@ import { Game } from "./Game.js" +const req = new XMLHttpRequest(); +const canvas = document.getElementById("canvas"); +const menu = document.getElementById("menu"); +const menuLevel = document.querySelector(".menu-level"); +const gameZone = document.getElementById("game"); +let game; + +req.open("GET", "sources/levels.json"); +req.onerror = () => console.error("Fail to load XML request"); + +req.onload = () => { + let levels; + if (req.status === 200) + levels = JSON.parse(req.responseText); + else + levels = null; + loadLevels(levels); +} + +req.send(); + +function loadLevels(levels) { + if (!levels) { + menuLevel.innerHTML = ""; + menuLevel.insertAdjacentHTML("beforeend", "") + } else { + for (const [name, level] of Object.entries(levels)) { + const b = document.createElement("button"); + b.classList.add("col", "s8", "offset-s2"); + b.innerText = name; + menuLevel.insertAdjacentElement("beforeend", b); + b.addEventListener("click", () => loadGame(level)) + } + } +} + +const loadGame = data => { + game = new Game(canvas, data); + + game.onStart = () => { + menu.classList.add("invisible"); + canvas.classList.remove("invisible"); + }; + + game.onStop = () => { + menu.classList.remove("invisible"); + canvas.classList.add("invisible"); + }; + + game.start(); +}; -const game = new Game(document.getElementById("canvas"), {snakeSpeed: 200}); document.addEventListener('DOMContentLoaded', function() { M.AutoInit(); - game.start(); + canvas.width = gameZone.offsetWidth; + canvas.height = gameZone.offsetHeight; }); diff --git a/sources/levels.json b/sources/levels.json new file mode 100644 index 0000000..31bf356 --- /dev/null +++ b/sources/levels.json @@ -0,0 +1,5 @@ +{ + "Level 1": { + "snakeSpeed": 500 + } +}