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

Function to pause the game with options to resume and reset

Browse Source
This commit is contained in:
Marcel
2017-12-17 13:41:14 +01:00
parent 31a0d63cd0
commit 2d869aee1f
5 changed files with 139 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -10,11 +10,12 @@
<div id="lang-en" class="lang active" data-lang="en">English</div>
<div id="lang-de" class="lang" data-lang="de">Deutsch</div>
</div>
<div id="score">0</div>
<div id="score" data-prefix="Score: ">0</div>
<div id="container">
<canvas id="tetris" width="240" height="400"></canvas>
<h1 id="game-title">Tetris.js</h1>
<button id="game-play">Play!</button>
<button id="game-reset">Reset</button>
</div>
<div id="controls"></div>
<script src="language.js"></script>

31
language.js
View File

@@ -5,7 +5,12 @@ const en = {
"<br>" +
"Q/E -> Rotate the tile" +
"<br>" +
"Down/S -> Drop the tile faster"
"Down/S -> Drop the tile faster",
play: "Play!",
score: "Score: ",
paused: "Paused",
resume: "Resume",
title: "Tetris.js"
};
const de = {
@@ -15,9 +20,16 @@ const de = {
"<br>" +
"Q/E -> Objekt drehen" +
"<br>" +
"Unten/S -> Objekt schneller fallen lassen"
"Unten/S -> Objekt schneller fallen lassen",
play: "Spielen!",
score: "Punkte: ",
paused: "Pausiert",
resume: "Weiterspielen"
};
let currentLang = "en";
let firstRun = true;
class Language {
constructor(lang) {
@@ -37,9 +49,18 @@ class Language {
}
function switchLang(lang) {
const l = new Language(lang);
currentLang = lang;
const l = new Language(currentLang);
document.getElementById("score").setAttribute("data-prefix", l.getStr("score"));
document.getElementById("controls").innerHTML = l.getStr("controls");
switchActiveSelector(lang)
if(firstRun) {
document.getElementById("game-title").innerHTML = l.getStr("title");
document.getElementById("game-play").innerHTML = l.getStr("play");
} else {
document.getElementById("game-title").innerHTML = l.getStr("paused");
document.getElementById("game-play").innerHTML = l.getStr("resume");
}
switchActiveSelector(currentLang)
}
function switchActiveSelector(newSelector) {
@@ -52,7 +73,7 @@ function switchActiveSelector(newSelector) {
document.getElementById("lang-" + newSelector).classList.add("active");
}
switchLang("en");
switchLang(currentLang);
const langSelectors = document.getElementsByClassName("lang");

76
menu.js
View File

@@ -1,7 +1,4 @@
// const canvas = document.getElementById("tetris");
// const context = canvas.getContext('2d');
window.onresize = function (event) {
window.onresize = () => {
scaleWindow();
};
@@ -9,12 +6,75 @@ function scaleWindow() {
canvas.height = window.innerHeight - 40;
canvas.width = canvas.height / (5 / 3);
context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
if(!firstRun && isPaused) {
draw();
}
}
scaleWindow();
document.getElementById("game-play").addEventListener("click", (event) => {
document.getElementById("game-title").parentNode.removeChild(document.getElementById("game-title"));
document.getElementById("game-play").parentNode.removeChild(document.getElementById("game-play"));
document.addEventListener("keydown", (event) => {
if(event.keyCode === 32) {
if(firstRun) {
initGame();
} else {
if(!isPaused){
showMenu();
} else {
hideMenu();
}
}
} else if(event.keyCode === 27) {
toggleMenu();
}
});
document.getElementById("game-play").addEventListener("click", () => {
if(firstRun) {
initGame();
} else {
hideMenu();
}
});
document.getElementById("game-reset").addEventListener("click", () => {
firstRun = true;
clearArena();
hideMenu();
switchLang(currentLang);
showMenu();
});
function toggleMenu() {
if(!isPaused){
showMenu();
} else {
hideMenu();
}
}
function showMenu() {
isPaused = true;
document.getElementById("game-title").style.display = "block";
document.getElementById("game-play").style.display = "block";
if(!firstRun) {
document.getElementById("game-reset").style.display = "block";
}
}
function hideMenu() {
isPaused = false;
document.getElementById("game-title").style.display = "none";
document.getElementById("game-play").style.display = "none";
document.getElementById("game-reset").style.display = "none";
if(!firstRun) {
update(lastTime);
}
}
function initGame() {
hideMenu();
startGame();
});
firstRun = false;
switchLang(currentLang);
}

13
style.css
View File

@@ -35,12 +35,13 @@ body {
transform: translate(-50%, -25%);
}
#game-play {
#game-play, #game-reset {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 100px;
width: 300px;
height: 75px;
font-size: 30px;
box-shadow: none;
color: #ffff;
@@ -51,6 +52,12 @@ body {
cursor: pointer;
}
#game-reset {
display: none;
background-color: #FF0D72;
transform: translate(-50%, -50%) translateY(85px);
}
#game-play:hover, #game-play:active, #game-play:focus {
outline: none;
box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2);
@@ -77,7 +84,7 @@ body {
}
#score:before {
content: 'Score: ';
content: attr(data-prefix);
}
#controls {

59
tetris.js
View File

@@ -3,13 +3,17 @@ const context = canvas.getContext('2d');
const fieldSize = {x: 12, y: 20};
let isPaused = true;
function clearArena() {
context.clearRect(0, 0, canvas.width, canvas.height);
}
function arenaSweep() {
let rowCount = 1;
outer: for(let y = arena.length - 1; y > 0; --y) {
for(let x = 0; x < arena[y].length; ++x) {
if(arena[y][x] === 0) {
outer: for (let y = arena.length - 1; y > 0; --y) {
for (let x = 0; x < arena[y].length; ++x) {
if (arena[y][x] === 0) {
continue outer;
}
}
@@ -27,9 +31,9 @@ function arenaSweep() {
function collide(arena, player) {
const [m, o] = [player.matrix, player.pos];
for(let y = 0; y < m.length; ++y) {
for(let x = 0; x < m[y].length; ++x) {
if(m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
for (let y = 0; y < m.length; ++y) {
for (let x = 0; x < m[y].length; ++x) {
if (m[y][x] !== 0 && (arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
return true;
}
}
@@ -39,14 +43,14 @@ function collide(arena, player) {
function createMatrix(w, h) {
const matrix = [];
while(h--) {
while (h--) {
matrix.push(new Array(w).fill(0));
}
return matrix;
}
function createPiece(type) {
switch(type) {
switch (type) {
case 'T':
return [
[0, 0, 0],
@@ -114,7 +118,7 @@ function drawMatrix(matrix, offset) {
function merge(arena, player) {
player.matrix.forEach((row, y) => {
row.forEach((value, x) => {
if(value !== 0) {
if (value !== 0) {
arena[y + player.pos.y][x + player.pos.x] = value;
}
});
@@ -123,7 +127,7 @@ function merge(arena, player) {
function playerDrop() {
player.pos.y++;
if(collide(arena, player)) {
if (collide(arena, player)) {
player.pos.y--;
merge(arena, player);
playerReset();
@@ -135,7 +139,7 @@ function playerDrop() {
function playerMove(dir) {
player.pos.x += dir;
if(collide(arena, player)) {
if (collide(arena, player)) {
player.pos.x -= dir;
}
}
@@ -145,7 +149,7 @@ function playerReset() {
player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
player.pos.y = 0;
player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
if(collide(arena, player)) {
if (collide(arena, player)) {
arena.forEach(row => row.fill(0));
player.score = 0;
dropInterval = 1000;
@@ -158,10 +162,10 @@ function playerRotate(dir) {
const pos = player.pos.x;
let offset = 1;
while(collide(arena, player )) {
while (collide(arena, player)) {
player.pos.x += offset;
offset = -(offset + (offset > 0 ? 1 : -1));
if(offset > player.matrix[0].length) {
if (offset > player.matrix[0].length) {
rotate(player.matrix, -dir);
player.pos.x = pos;
return;
@@ -170,8 +174,8 @@ function playerRotate(dir) {
}
function rotate(matrix, dir) {
for(let y = 0; y < matrix.length; ++y) {
for(let x = 0; x < y; ++x) {
for (let y = 0; y < matrix.length; ++y) {
for (let x = 0; x < y; ++x) {
[
matrix[x][y],
matrix[y][x]
@@ -182,7 +186,7 @@ function rotate(matrix, dir) {
}
}
if(dir > 0) {
if (dir > 0) {
matrix.forEach(row => row.reverse());
} else {
matrix.reverse();
@@ -193,17 +197,20 @@ let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
function update(time = 0) {
const deltaTime = time - lastTime;
lastTime = time;
if(!isPaused) {
const deltaTime = time - lastTime;
lastTime = time;
dropCounter += deltaTime;
if(dropCounter > dropInterval) {
playerDrop();
dropCounter += deltaTime;
if (dropCounter > dropInterval) {
playerDrop();
}
draw();
requestAnimationFrame(update);
}
draw();
requestAnimationFrame(update);
}
function updateScore() {
@@ -256,7 +263,7 @@ const keys = {
document.addEventListener('keydown', event => {
Object.keys(keys).map((objKey, index) => {
const keyBind = keys[objKey];
if(keyBind.keys.includes(event.keyCode)) {
if (keyBind.keys.includes(event.keyCode)) {
keyBind.action();
}
});