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

Refactor files and fix layout bugs on mobile devices

Browse Source
This commit is contained in:
Marcel
2018-01-21 18:40:23 +01:00
parent 59e3dfd87b
commit 7b18a66b00
7 changed files with 162 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tetris</title> <title>Tetris</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head> </head>
<body> <body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
@@ -14,9 +15,19 @@
</defs> </defs>
<!--<animate id="animate1" xlink:href="#f1" attributeName="stdDeviation" from="15" to="0" begin="" dur="1s" />--> <!--<animate id="animate1" xlink:href="#f1" attributeName="stdDeviation" from="15" to="0" begin="" dur="1s" />-->
</svg> </svg>
<div id="language-selector"> <div id="menu">
<div id="lang-en" class="lang active" data-lang="en">English</div> <div id="language-selector">
<div id="lang-de" class="lang" data-lang="de">Deutsch</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>
<div id="theme-selector">
</div>
</div>
<div id="menu-opener">
<button class="js-menu menu" type="button">
<span class="bar"></span>
</button>
</div> </div>
<div id="background" class="blurred"> <div id="background" class="blurred">
<div id="game-stats"> <div id="game-stats">
@@ -41,9 +52,9 @@
</div> </div>
</div> </div>
<script src="https://hammerjs.github.io/dist/hammer.js"></script> <script src="https://hammerjs.github.io/dist/hammer.js"></script>
<script src="language.js"></script> <script src="js/language.js"></script>
<script src="tetris.js"></script> <script src="js/tetris.js"></script>
<script src="menu.js"></script> <script src="js/menu.js"></script>
<script src="touch-control.js"></script> <script src="js/touch-control.js"></script>
</body> </body>
</html> </html>

0
language.js → js/language.js
View File

0
main.js → js/main.js
View File

15
menu.js → js/menu.js
View File

@@ -52,6 +52,21 @@ document.getElementById("game-reset").addEventListener("click", () => {
showMenu(); showMenu();
}); });
let isActive = false;
const menuButton = document.getElementById("menu-opener");
menuButton.addEventListener("click", () => {
if (isActive) {
menuButton.classList.remove('active');
document.getElementsByTagName('body')[0].classList.remove('menu-open');
} else {
menuButton.classList.add('active');
document.getElementsByTagName('body')[0].classList.add('menu-open');
}
isActive = !isActive;
});
function toggleMenu() { function toggleMenu() {
if(!isPaused){ if(!isPaused){
showMenu(); showMenu();

0
tetris.js → js/tetris.js
View File

8
touch-control.js → js/touch-control.js
View File

@@ -1,15 +1,15 @@
const hammertime = new Hammer(document.getElementById("tetris")); const hammertime = new Hammer(document.getElementById("tetris"));
hammertime.on('swipeleft', () => { hammertime.on('swipeleft', (e) => {
keys.left.action(); keys.left.action();
}); });
hammertime.on('swiperight', () => { hammertime.on('swiperight', (e) => {
keys.right.action(); keys.right.action();
}); });
hammertime.on('pandown', (e) => { hammertime.on('pandown swipedown', (e) => {
console.log(e.direction); console.log(e);
keys.down.action(); keys.down.action();
}); });

125
style.css
View File

@@ -160,6 +160,88 @@ body {
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
#menu-opener {
display: none;
}
.menu {
-webkit-transition: 0.1s -webkit-transform linear;
transition: 0.1s -webkit-transform linear;
transition: 0.1s transform linear;
transition: 0.1s transform linear, 0.1s -webkit-transform linear;
position: absolute;
background: 0;
float: left;
height: 2.7rem;
width: 3.5rem;
z-index: 1;
outline: 0;
padding: 0;
border: 0;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}
.bar, .bar::before, .bar::after {
-webkit-transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s -webkit-transform linear;
transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear;
transition: 0.2s background linear 0.1s, 0.2s top linear 0.2s, 0.2s transform linear, 0.2s -webkit-transform linear;
position: absolute;
background: #fff;
margin: auto;
width: 100%;
height: 0.3rem;
content: '';
top: 50%;
left: 0;
}
.bar {
margin-top: -0.2rem;
}
.bar::before {
top: -1.2rem;
}
.bar::after {
top: 1.2rem;
}
.bar::before, .bar::after {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.active .bar {
background: 0;
}
.active .bar::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.active .bar::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.active .bar::before, .active .bar::after {
top: 0;
}
.active .bar, .active .bar::before, .active .bar::after {
-webkit-transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s;
transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s -webkit-transform linear 0.2s;
transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s;
transition: 0.2s background linear 0.1s, 0.2s top linear, 0.2s transform linear 0.2s, 0.2s -webkit-transform linear 0.2s;
}
@media (max-width: 1400px) { @media (max-width: 1400px) {
#tetris, #tetris-background { #tetris, #tetris-background {
height: 75%; height: 75%;
@@ -195,4 +277,47 @@ body {
#language-selector { #language-selector {
font-size: 20px; font-size: 20px;
} }
}
@media (max-width: 840px) {
#game-stats {
font-size: 20px;
text-align: center;
}
#game-stats > div {
margin-right: 0;
display: block;
}
#control-text {
font-size: 14px;
}
#menu {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .75);
transform: translateX(-100%);
-webkit-transition: transform .5s;
-moz-transition: transform .5s;
-ms-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
z-index: 100;
top: 0;
}
.menu-open #menu {
transform: none;
}
#menu-opener {
position: absolute;
display: block;
left: 10px;
top: 10px;
z-index: 101;
}
} }