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

Add title screen

Browse Source 
Multi-language support
This commit is contained in:
Marcel
2017-12-17 11:58:10 +01:00
parent 3950345a04
commit 31a0d63cd0
5 changed files with 120 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@@ -6,10 +6,19 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="score"></div> <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">0</div>
<div id="container">
<canvas id="tetris" width="240" height="400"></canvas> <canvas id="tetris" width="240" height="400"></canvas>
<h1 id="game-title">Tetris.js</h1>
<button id="game-play">Play!</button>
</div>
<div id="controls"></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>
</body> </body>
</html> </html>

31
language.js
View File

@@ -1,13 +1,23 @@
const en = { const en = {
controls: "Controls:" + controls: "Controls:" +
"<br>" + "<br>" +
"Left+Right/A+D -> Move left/right or down\n" + "Left+Right/A+D -> Move left/right" +
"<br>" + "<br>" +
"Q/E -> Rotate the tile" + "Q/E -> Rotate the tile" +
"<br>" + "<br>" +
"Down/S -> Drop the tile faster" "Down/S -> Drop the tile faster"
}; };
const de = {
controls: "Steuerung:" +
"<br>" +
"Links+Rechts/A+D -> Objekt nach links/rechts bewegen" +
"<br>" +
"Q/E -> Objekt drehen" +
"<br>" +
"Unten/S -> Objekt schneller fallen lassen"
};
class Language { class Language {
constructor(lang) { constructor(lang) {
@@ -29,6 +39,25 @@ class Language {
function switchLang(lang) { function switchLang(lang) {
const l = new Language(lang); const l = new Language(lang);
document.getElementById("controls").innerHTML = l.getStr("controls"); document.getElementById("controls").innerHTML = l.getStr("controls");
switchActiveSelector(lang)
}
function switchActiveSelector(newSelector) {
const selectors = document.getElementsByClassName("lang");
for (let i = 0; i < selectors.length; i++) {
selectors[i].classList.remove("active");
}
document.getElementById("lang-" + newSelector).classList.add("active");
} }
switchLang("en"); switchLang("en");
const langSelectors = document.getElementsByClassName("lang");
for (let i = 0; i < langSelectors.length; i++) {
langSelectors[i].addEventListener('click', () => {
switchLang(langSelectors[i].getAttribute("data-lang"))
}, false);
}

20
menu.js Normal file
View File

@@ -0,0 +1,20 @@
// const canvas = document.getElementById("tetris");
// const context = canvas.getContext('2d');
window.onresize = function (event) {
scaleWindow();
};
function scaleWindow() {
canvas.height = window.innerHeight - 40;
canvas.width = canvas.height / (5 / 3);
context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
}
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"));
startGame();
});

54
style.css
View File

@@ -3,6 +3,57 @@ body {
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
background: #202028; background: #202028;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-size: 40px;
color: #fff;
}
#language-selector {
position: absolute;
right: 10px;
top: 10px;
font-size: 14px;
font-weight: 300;
}
.lang {
display: inline;
margin-left: 10px;
border-radius: 2px;
padding: 4px 8px;
cursor: pointer;
}
.lang.active {
background-color: #3877FF;
}
#game-title {
position: absolute;
left: 50%;
top: 25%;
transform: translate(-50%, -25%);
}
#game-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 100px;
font-size: 30px;
box-shadow: none;
color: #ffff;
background: #3877FF;
border: 0;
border-radius: 0;
transition: box-shadow .2s;
cursor: pointer;
}
#game-play:hover, #game-play:active, #game-play:focus {
outline: none;
box-shadow: 3px 4px 0 3px rgba(0,0,0,0.2);
} }
#tetris { #tetris {
@@ -19,13 +70,10 @@ body {
#score, #controls { #score, #controls {
position: absolute; position: absolute;
font-family: Roboto, Helvetica, Arial, sans-serif;
font-weight: 900; font-weight: 900;
font-size: 40px;
top: 50%; top: 50%;
right: 75%; right: 75%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
color: #fff;
} }
#score:before { #score:before {

26
tetris.js
View File

@@ -3,6 +3,8 @@ const context = canvas.getContext('2d');
const fieldSize = {x: 12, y: 20}; const fieldSize = {x: 12, y: 20};
function arenaSweep() { function arenaSweep() {
let rowCount = 1; let rowCount = 1;
outer: for(let y = arena.length - 1; y > 0; --y) { outer: for(let y = arena.length - 1; y > 0; --y) {
@@ -258,30 +260,10 @@ document.addEventListener('keydown', event => {
keyBind.action(); keyBind.action();
} }
}); });
// if(event.keyCode === 37) {
// playerMove(-1);
// } else if(event.keyCode === 39) {
// playerMove(1);
// } else if(event.keyCode === 40) {
// playerDrop();
// } else if(event.keyCode === 81) {
// playerRotate(-1);
// } else if(event.keyCode === 87) {
// playerRotate(1);
// }
}); });
window.onresize = function (event) { function startGame() {
scaleWindow();
};
function scaleWindow() {
canvas.height = window.innerHeight - 40;
canvas.width = canvas.height / (5 / 3);
context.scale(canvas.width / fieldSize.x, canvas.height / fieldSize.y);
}
scaleWindow();
playerReset(); playerReset();
update(); update();
updateScore(); updateScore();
}