1
0
Fork 0
This repository has been archived on 2024-02-17. You can view files and clone it, but cannot push or open issues or pull requests.
Snake/sources/js/index.js

153 lines
4.1 KiB
JavaScript
Raw Normal View History

2021-03-18 10:29:12 +01:00
import { Game } from "./Game.js"
2021-03-23 09:23:37 +01:00
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");
const score = document.getElementById("score");
const lives = document.getElementById("lives");
2021-03-25 09:26:04 +01:00
const gameOver = document.getElementById("gameovermodal");
2021-03-25 09:48:57 +01:00
const scoreBoard = document.getElementById("scoreboard");
const playerName = document.querySelector("input");
const audio = new Audio("sources/sound/main.mp3");
const startSound = new Audio("sources/sound/onStart.mp3");
const eatSound = new Audio("sources/sound/onEat.mp3");
const dieSound = new Audio("sources/sound/onDie.mp3");
const gameOverSound = new Audio("sources/sound/onGameOver.mp3");
const game = new Game(canvas);
2021-03-25 09:48:57 +01:00
const scores = [];
2021-03-25 09:26:04 +01:00
let gameOverModal;
2021-03-25 09:26:04 +01:00
audio.loop = true;
2021-03-26 22:49:00 +01:00
audio.volume = 0.1;
startSound.volume = 0.2;
eatSound.volume = 0.2;
dieSound.volume = 0.2;
gameOverSound.volume = 0.2;
2021-03-23 09:23:37 +01:00
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);
};
2021-03-23 09:23:37 +01:00
req.send();
game.onStart = () => {
updateLives(game.lives);
updateScore(game.score);
menu.classList.add("invisible");
2021-03-26 22:49:00 +01:00
gameZone.classList.remove("invisible");
canvas.width = gameZone.clientWidth;
canvas.height = gameZone.clientHeight;
};
game.onStop = () => {
menu.classList.remove("invisible");
2021-03-26 22:49:00 +01:00
gameZone.classList.add("invisible");
};
game.onEat = (score) => {
eatSound.play();
updateScore(score);
};
game.onDie = lives => {
2021-03-26 22:49:00 +01:00
dieSound.currentTime = 0;
dieSound.play();
updateLives(lives);
};
game.onGameOver = (score) => {
2021-03-26 22:49:00 +01:00
dieSound.pause();
gameOverSound.play();
2021-03-25 09:26:04 +01:00
gameOver.querySelector("span").innerText = score;
gameOverModal.open();
2021-03-26 22:49:00 +01:00
updateLives(0);
2021-03-25 09:48:57 +01:00
if (score > 0) {
scores.push({name: playerName.value, score: score});
reloadScoreBoard();
}
};
2021-03-23 09:23:37 +01:00
function loadLevels(levels) {
if (!levels) {
menuLevel.innerHTML = "";
menuLevel.insertAdjacentHTML("beforeend", "<button class=\"col s8 offset-s2\" disabled>Fail to load levels :/</button>")
} 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))
}
}
}
function loadGame(data) {
game.load(data);
2021-03-23 09:23:37 +01:00
game.start();
startSound.play();
2021-03-25 09:26:04 +01:00
}
2021-03-11 09:39:52 +01:00
function updateScore(s) {
2021-03-26 22:49:00 +01:00
score.innerText = `Score: ${s}`;
}
function updateLives(l) {
2021-03-26 22:49:00 +01:00
lives.innerText = `Lives: ${l}`;
}
2021-03-25 09:48:57 +01:00
function reloadScoreBoard() {
scoreBoard.querySelectorAll("div").forEach(d => d.remove());
for (const s of scores.sort(s => s.score).reverse()) {
const e = document.createElement("div");
e.classList.add("row-score");
const p1 = document.createElement("p");
p1.classList.add("player-score");
p1.innerText = s.score;
e.insertAdjacentElement("beforeend", p1);
const p2 = document.createElement("p");
p2.classList.add("pseudo");
p2.innerText = s.name ? s.name : "Unknown";
e.insertAdjacentElement("beforeend", p2);
scoreBoard.insertAdjacentElement("beforeend", e);
}
}
2021-03-11 09:39:52 +01:00
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
2021-03-25 09:26:04 +01:00
gameOverModal = M.Modal.getInstance(gameOver);
});
audio.addEventListener("canplaythrough", () => {
audio.play();
2021-03-11 09:39:52 +01:00
});
2021-03-25 09:48:57 +01:00
scoreBoard.addEventListener("mousemove", () => {
scoreBoard.classList.remove("close");
});
scoreBoard.addEventListener("mouseout", () => {
scoreBoard.classList.add("close");
});
playerName.addEventListener("focusin", () => {
playerName.placeholder = "";
});
playerName.addEventListener("focusout", () => {
playerName.placeholder = "Choose a nickname :";
});