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

Blurred background on menu

Browse Source
This commit is contained in:
Marcel
2017-12-17 15:30:25 +01:00
parent 35426e088f
commit e796c26fd1
5 changed files with 40 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.idea/vcs.xml generated Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

13
index.html
View File

@@ -6,18 +6,27 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"/>
</filter>
</defs>
</svg>
<div id="language-selector"> <div id="language-selector">
<div id="lang-en" class="lang active" data-lang="en">English</div> <div id="lang-en" class="lang active" data-lang="en">English</div>
<div id="lang-de" class="lang" data-lang="de">Deutsch</div> <div id="lang-de" class="lang" data-lang="de">Deutsch</div>
</div> </div>
<div id="background" class="blurred">
<div id="score" data-prefix="Score: ">0</div> <div id="score" data-prefix="Score: ">0</div>
<div id="container">
<canvas id="tetris" width="240" height="400"></canvas> <canvas id="tetris" width="240" height="400"></canvas>
<div id="controls"></div>
</div>
<div id="container">
<h1 id="game-title">Tetris.js</h1> <h1 id="game-title">Tetris.js</h1>
<button id="game-play">Play!</button> <button id="game-play">Play!</button>
<button id="game-reset">Reset</button> <button id="game-reset">Reset</button>
</div> </div>
<div id="controls"></div>
<script src="language.js"></script> <script src="language.js"></script>
<script src="tetris.js"></script> <script src="tetris.js"></script>
<script src="menu.js"></script> <script src="menu.js"></script>

7
language.js
View File

@@ -10,7 +10,8 @@ const en = {
score: "Score: ", score: "Score: ",
paused: "Paused", paused: "Paused",
resume: "Resume", resume: "Resume",
title: "Tetris.js" title: "Tetris.js",
reset: "Reset"
}; };
const de = { const de = {
@@ -24,7 +25,8 @@ const de = {
play: "Spielen!", play: "Spielen!",
score: "Punkte: ", score: "Punkte: ",
paused: "Pausiert", paused: "Pausiert",
resume: "Weiterspielen" resume: "Weiterspielen",
reset: "Zurücksetzen"
}; };
let currentLang = "en"; let currentLang = "en";
@@ -59,6 +61,7 @@ function switchLang(lang) {
} else { } else {
document.getElementById("game-title").innerHTML = l.getStr("paused"); document.getElementById("game-title").innerHTML = l.getStr("paused");
document.getElementById("game-play").innerHTML = l.getStr("resume"); document.getElementById("game-play").innerHTML = l.getStr("resume");
document.getElementById("game-reset").innerHTML = l.getStr("reset");
} }
switchActiveSelector(currentLang) switchActiveSelector(currentLang)
} }

6
menu.js
View File

@@ -25,8 +25,10 @@ document.addEventListener("keydown", (event) => {
} }
} }
} else if(event.keyCode === 27) { } else if(event.keyCode === 27) {
if(!firstRun) {
toggleMenu(); toggleMenu();
} }
}
}); });
document.getElementById("game-play").addEventListener("click", () => { document.getElementById("game-play").addEventListener("click", () => {
@@ -39,7 +41,7 @@ document.getElementById("game-play").addEventListener("click", () => {
document.getElementById("game-reset").addEventListener("click", () => { document.getElementById("game-reset").addEventListener("click", () => {
firstRun = true; firstRun = true;
clearArena(); clearScreen();
hideMenu(); hideMenu();
switchLang(currentLang); switchLang(currentLang);
showMenu(); showMenu();
@@ -55,6 +57,7 @@ function toggleMenu() {
function showMenu() { function showMenu() {
isPaused = true; isPaused = true;
document.getElementById("background").classList.add("blurred");
document.getElementById("game-title").style.display = "block"; document.getElementById("game-title").style.display = "block";
document.getElementById("game-play").style.display = "block"; document.getElementById("game-play").style.display = "block";
if(!firstRun) { if(!firstRun) {
@@ -64,6 +67,7 @@ function showMenu() {
function hideMenu() { function hideMenu() {
isPaused = false; isPaused = false;
document.getElementById("background").classList.remove("blurred");
document.getElementById("game-title").style.display = "none"; document.getElementById("game-title").style.display = "none";
document.getElementById("game-play").style.display = "none"; document.getElementById("game-play").style.display = "none";
document.getElementById("game-reset").style.display = "none"; document.getElementById("game-reset").style.display = "none";

11
style.css
View File

@@ -62,6 +62,17 @@ body {
outline: none; outline: none;
box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2); box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2);
} }
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#background.blurred {
filter: url(#f1);
}
#tetris { #tetris {
position: absolute; position: absolute;