KingOfDog/tetris.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Major rework of basic game code - pre-work for multiplayer

Browse Source 
Includes automatic generation of required HTML elements and better responsiveness
This commit is contained in:
Marcel
2019-07-18 11:49:06 +02:00
committed by KingOfDog
parent 544b988a9b
commit 06a2e582fd
14 changed files with 627 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
js/menu.js
View File

@@ -6,69 +6,19 @@
let escState = 1;
window.onresize = () => {
scaleWindow();
game.redrawScreen();
manager.callAll('rescale', []);
};
function scaleWindow() {
const canvasContainer = document.getElementById("canvas-container");
let height = .8 * window.innerHeight - 40;
let width = height / (5 / 3);
let conWidth = width + (2 * (height / game.g.fieldSize.y * 5));
const ratio = width / conWidth;
if (conWidth > window.innerWidth * .8) {
conWidth = window.innerWidth * .8;
width = conWidth * ratio;
height = width * (5 / 3);
}
width = Math.floor(width);
height = Math.floor(height);
canvasContainer.style.height = height + "px";
canvasContainer.style.width = conWidth + "px";
const canvasScale = width / game.g.fieldSize.x;
game.g.canvasBg.height = height;
game.g.canvasBg.width = width;
game.g.contextBg.scale(canvasScale, canvasScale);
game.g.canvas.height = height;
game.g.canvas.width = width;
game.g.context.scale(canvasScale, canvasScale);
game.g.canvasHold.height = game.g.canvasHold.width = height / game.g.fieldSize.y * 5;
game.g.canvasHold.style.transform = "translate(-100%, -.2em) translateX(-" + width / 2 + "px)";
const contextHoldScale = Math.floor(game.g.canvasHold.width / 6);
game.g.contextHold.scale(contextHoldScale, contextHoldScale);
game.g.canvasUpcoming.width = height / game.g.fieldSize.y * 5;
game.g.canvasUpcoming.height = game.g.canvasUpcoming.width * 3;
game.g.canvasUpcoming.style.transform = "translate(100%, -.2em) translateX(" + width / 2 + "px)";
const contextUpcomingScale = Math.floor(game.g.canvasUpcoming.width / 6);
game.g.contextUpcoming.scale(contextUpcomingScale, contextUpcomingScale);
if (!firstRun && game.g.isPaused) {
game.draw();
}
}
scaleWindow();
document.addEventListener("keydown", (event) => {
if(event.keyCode === 32) {
if(firstRun) {
document.addEventListener('keyup', (event) => {
console.log(event.key);
if (event.key === ' ') {
if (firstRun) {
initGame();
} else {
if (!game.g.isPaused) {
showMenu();
} else {
hideMenu();
}
escState = escState === 0 ? 1 : 0;
toggleMenu();
}
} else if(event.keyCode === 27) {
} else if (event.keyCode === 27) {
escState++;
if (firstRun && escState % 3 === 0) {
escState++;
@@ -78,15 +28,15 @@ document.addEventListener("keydown", (event) => {
}
});
document.getElementById("game-play").addEventListener("click", () => {
if(firstRun) {
document.getElementById('game-play').addEventListener('click', () => {
if (firstRun) {
initGame();
} else {
hideMenu();
}
});
document.getElementById("game-reset").addEventListener("click", () => {
document.getElementById('game-reset').addEventListener('click', () => {
firstRun = true;
game.clearScreen();
hideMenu();
@@ -94,17 +44,21 @@ document.getElementById("game-reset").addEventListener("click", () => {
showMenu();
});
document.getElementsByName("theme").forEach((el) => {
el.addEventListener("change", (e) => {
game.g.theme = e.target.getAttribute("data-theme");
game.redrawScreen();
document.getElementsByName('theme').forEach((el) => {
el.addEventListener('change', (e) => {
const themeName = e.target.getAttribute('data-theme');
const theme = themes[themeName];
manager.callAll(instance => {
instance.g.theme = theme;
instance.redrawScreen();
});
});
});
let isActive = false;
const menuButton = document.getElementById("menu-opener");
const menuButton = document.getElementById('menu-opener');
menuButton.addEventListener("click", () => {
menuButton.addEventListener('click', () => {
toggleSettings();
});
@@ -112,120 +66,109 @@ function toggleSettings() {
if (isActive) {
escState = 1;
menuButton.classList.remove('active');
document.getElementsByTagName('body')[0].classList.remove('menu-open');
document.body.classList.remove('menu-open');
} else {
escState = 2;
menuButton.classList.add('active');
document.getElementsByTagName('body')[0].classList.add('menu-open');
document.body.classList.add('menu-open');
}
isActive = !isActive;
}
function toggleMenu() {
if (escState === 0) {
document.getElementsByTagName("body")[0].classList.remove("menu-open");
document.body.classList.remove('menu-open');
menuButton.classList.remove('active');
hideMenu();
} else if (escState === 1) {
document.getElementsByTagName("body")[0].classList.remove("menu-open");
document.body.classList.remove('menu-open');
menuButton.classList.remove('active');
showMenu();
} else {
document.getElementsByTagName("body")[0].classList.add("menu-open");
document.body.classList.add('menu-open');
menuButton.classList.add('active');
}
}
function fadeBlurIn() {
const blurEl = document.getElementById("f1").children[0];
const blurEl = document.getElementById('f1').children[0];
const finalVal = 15;
let currentVal = 0;
const id = setInterval(frame, 16);
const interval = 1000 / 60;
const id = setInterval(frame, interval);
function frame() {
if(currentVal >= finalVal) {
if (currentVal >= finalVal) {
clearInterval(id);
} else {
currentVal += 1.6;
blurEl.setAttribute("stdDeviation", currentVal);
currentVal += 0.5;
blurEl.setAttribute('stdDeviation', currentVal);
}
}
setTimeout(() => {
if (currentVal < finalVal) {
blurEl.setAttribute("stdDeviation", finalVal);
blurEl.setAttribute('stdDeviation', finalVal);
clearInterval(id);
console.log("Performance Issues: system couldn't hold up");
console.log('Performance Issues: system couldn\'t hold up');
}
}, 1000);
}
function fadeBlurOut() {
const blurEl = document.getElementById("f1").children[0];
const blurEl = document.getElementById('f1').children[0];
const finalVal = 0;
let currentVal = 15;
const id = setInterval(frame, 16);
const interval = 1000 / 60;
const id = setInterval(frame, interval);
function frame() {
if(currentVal <= finalVal) {
if (currentVal <= finalVal) {
clearInterval(id);
} else {
currentVal -= 1.6;
blurEl.setAttribute("stdDeviation", currentVal);
currentVal -= 0.5;
blurEl.setAttribute('stdDeviation', currentVal);
}
}
setTimeout(() => {
blurEl.setAttribute("stdDeviation", finalVal);
blurEl.setAttribute('stdDeviation', finalVal);
clearInterval(id);
if (currentVal < finalVal) {
console.log("Performance Issues: system couldn't hold up");
console.log('Performance Issues: system couldn\'t hold up');
}
}, 1000);
}
const scoreEl = document.getElementById("score");
const nativeTransform = getComputedStyle(scoreEl).transform;
function scoreUpdateAni() {
scoreEl.classList.add("update");
setTimeout(() => {
scoreEl.classList.remove("update");
}, 1500);
}
function showMenu() {
game.g.isPaused = true;
manager.pause();
escState = 1;
document.getElementById("game-title").style.display = "block";
document.getElementById("game-play").style.display = "block";
document.getElementById("game-reset").style.display = "block";
document.getElementById('game-title').style.display = 'block';
document.getElementById('game-play').style.display = 'block';
document.getElementById('game-reset').style.display = 'block';
document.getElementById("game-title").style.opacity = "1";
document.getElementById("game-play").style.opacity = "1";
document.getElementById('game-title').style.opacity = '1';
document.getElementById('game-play').style.opacity = '1';
fadeBlurIn();
if(!firstRun) {
document.getElementById("game-reset").style.opacity = "1";
if (!firstRun) {
document.getElementById('game-reset').style.opacity = '1';
}
}
function hideMenu() {
game.g.isPaused = false;
manager.resume();
escState = 0;
document.getElementById("game-title").style.opacity = "0";
document.getElementById("game-play").style.opacity = "0";
document.getElementById("game-reset").style.opacity = "0";
document.getElementById('game-title').style.opacity = '0';
document.getElementById('game-play').style.opacity = '0';
document.getElementById('game-reset').style.opacity = '0';
setTimeout(() => {
document.getElementById("game-title").style.display = "none";
document.getElementById("game-play").style.display = "none";
document.getElementById("game-reset").style.display = "none";
document.getElementById('game-title').style.display = 'none';
document.getElementById('game-play').style.display = 'none';
document.getElementById('game-reset').style.display = 'none';
}, 500);
game.g.lastTimeUpdate = Date.now();
fadeBlurOut();
if(!firstRun) {
game.update(game.g.lastTime);
}
}
function initGame() {
@@ -234,4 +177,4 @@ function initGame() {
firstRun = false;
switchLang(currentLang);
}
}