diff --git a/index.html b/index.html index 3eeb44e..b722920 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,19 @@ -
- +
+
English
+
Deutsch
+
+
0
+
+ +

Tetris.js

+ +
+ \ No newline at end of file diff --git a/language.js b/language.js index 966223d..5294c8c 100644 --- a/language.js +++ b/language.js @@ -1,13 +1,23 @@ const en = { controls: "Controls:" + "
" + - "Left+Right/A+D -> Move left/right or down\n" + + "Left+Right/A+D -> Move left/right" + "
" + "Q/E -> Rotate the tile" + "
" + "Down/S -> Drop the tile faster" }; +const de = { + controls: "Steuerung:" + + "
" + + "Links+Rechts/A+D -> Objekt nach links/rechts bewegen" + + "
" + + "Q/E -> Objekt drehen" + + "
" + + "Unten/S -> Objekt schneller fallen lassen" +}; + class Language { constructor(lang) { @@ -29,6 +39,25 @@ class Language { function switchLang(lang) { const l = new Language(lang); document.getElementById("controls").innerHTML = l.getStr("controls"); + switchActiveSelector(lang) } -switchLang("en"); \ No newline at end of file +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"); + +const langSelectors = document.getElementsByClassName("lang"); + +for (let i = 0; i < langSelectors.length; i++) { + langSelectors[i].addEventListener('click', () => { + switchLang(langSelectors[i].getAttribute("data-lang")) + }, false); +} \ No newline at end of file diff --git a/menu.js b/menu.js new file mode 100644 index 0000000..5877ca3 --- /dev/null +++ b/menu.js @@ -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(); +}); \ No newline at end of file diff --git a/style.css b/style.css index c29d7b1..c7e098f 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,57 @@ body { padding: 0; overflow: hidden; 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 { @@ -19,13 +70,10 @@ body { #score, #controls { position: absolute; - font-family: Roboto, Helvetica, Arial, sans-serif; font-weight: 900; - font-size: 40px; top: 50%; right: 75%; transform: translate(-50%, -50%); - color: #fff; } #score:before { diff --git a/tetris.js b/tetris.js index 71f8e3b..41e8874 100644 --- a/tetris.js +++ b/tetris.js @@ -3,6 +3,8 @@ const context = canvas.getContext('2d'); const fieldSize = {x: 12, y: 20}; + + function arenaSweep() { let rowCount = 1; outer: for(let y = arena.length - 1; y > 0; --y) { @@ -258,30 +260,10 @@ document.addEventListener('keydown', event => { 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) { - 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(); -update(); -updateScore(); \ No newline at end of file +function startGame() { + playerReset(); + update(); + updateScore(); +} \ No newline at end of file