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>

15
index.html
View File

@@ -6,18 +6,27 @@
<link rel="stylesheet" href="style.css">
</head>
<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="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" data-prefix="Score: ">0</div>
<div id="container">
<div id="background" class="blurred">
<div id="score" data-prefix="Score: ">0</div>
<canvas id="tetris" width="240" height="400"></canvas>
<div id="controls"></div>
</div>
<div id="container">
<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>
<script src="tetris.js"></script>
<script src="menu.js"></script>

7
language.js
View File

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

8
menu.js
View File

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

11
style.css
View File

@@ -62,6 +62,17 @@ body {
outline: none;
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 {
position: absolute;