leo/tetris
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

crlf fix, add README.md

Browse Source
This commit is contained in:
leo 2024-08-03 05:32:52 +05:00
parent 8d07427dfa
commit 28e413eed5
3 changed files with 1217 additions and 1214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md Normal file
View File

@ -0,0 +1,3 @@
## My first game Tetris
Optimized for Firefox mobile for android

316
index.html
View File

@ -1,159 +1,159 @@
<!-- Leo Tetris Version 0.1 --> <!-- Leo Tetris Version 0.1 -->
<!-- http://rozenlab.com/tetris --> <!-- http://rozenlab.com/tetris -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ru"> <html lang="ru">
<head> <head>
<title>Tetris</title> <title>Tetris</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.png">
<meta name="viewport" content="width=545, user-scalable=no"> <meta name="viewport" content="width=545, user-scalable=no">
<style> <style>
html, body { html, body {
width: 100%; width: 100%;
//height: 100%; //height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
} }
body { body {
background-image: url("background/restaurant_icons.webp"); background-image: url("background/restaurant_icons.webp");
} }
.container { .container {
width: 525px; width: 525px;
user-select: none; user-select: none;
zoom: 0.79; zoom: 0.79;
margin-left: 20px; margin-left: 20px;
} }
.tetrisLogo { .tetrisLogo {
width: 100%; width: 100%;
padding-top: 20px; padding-top: 20px;
padding-bottom: 10px; padding-bottom: 10px;
text-align: center; text-align: center;
font-size: 35px; font-size: 35px;
font-family: digital-7-italic; font-family: digital-7-italic;
color: #863064; color: #863064;
letter-spacing: 20px; letter-spacing: 20px;
} }
@font-face { @font-face {
font-family: 'digital-7-italic'; font-family: 'digital-7-italic';
src: url('digital-7-italic.ttf'); src: url('digital-7-italic.ttf');
} }
.keyboard { .keyboard {
height: 300px; height: 300px;
width: 525px; width: 525px;
margin: 50px 0 70px 0; margin: 50px 0 70px 0;
position: relative; position: relative;
} }
.key { .key {
border: 1px solid #c19d9d; border: 1px solid #c19d9d;
border-radius: 100%; border-radius: 100%;
position: absolute; position: absolute;
box-shadow: 2px 2px 4px rgba(0,0,0,0.4); box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
background: -webkit-linear-gradient(top, #f6ea95 0%,#fce239 100%); background: -webkit-linear-gradient(top, #f6ea95 0%,#fce239 100%);
} }
.key:active { .key:active {
box-shadow: none; box-shadow: none;
} }
.med { .med {
height: 80px; height: 80px;
width: 80px; width: 80px;
} }
.big { .big {
height: 121px; height: 121px;
width: 121px; width: 121px;
} }
.small { .small {
height: 40px; height: 40px;
width: 40px; width: 40px;
} }
.keyLabel { .keyLabel {
position: absolute; position: absolute;
font-size: 11px; font-size: 11px;
font-family: Arial; font-family: Arial;
color: #522892; color: #522892;
} }
.start { .start {
z-index: 999999; z-index: 999999;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #292929; background-color: #292929;
background-image: url("background/use_your_illusion.webp"); background-image: url("background/use_your_illusion.webp");
font-size: 60px; font-size: 60px;
color: #522892; color: #522892;
text-align: center; text-align: center;
padding-top: 450px; padding-top: 450px;
font-family: digital-7-italic; font-family: digital-7-italic;
letter-spacing: 20px; letter-spacing: 20px;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="scrRes" style="position: absolute; padding: 5px 0 0 5px; width: 80px; height: 25px; z-index: 999;"></div> <div id="scrRes" style="position: absolute; padding: 5px 0 0 5px; width: 80px; height: 25px; z-index: 999;"></div>
<div class="start" onclick="openFullscreen(); newGameTetris(); this.style.display = 'none'">-tetris-</div> <div class="start" onclick="openFullscreen(); newGameTetris(); this.style.display = 'none'">-tetris-</div>
<div id="container" class="container" onclick="openFullscreen();"> <div id="container" class="container" onclick="openFullscreen();">
<div class="tetrisLogo">-Tetris-</div> <div class="tetrisLogo">-Tetris-</div>
<canvas id="screen"></canvas> <canvas id="screen"></canvas>
<hr style=" margin: 30px 40px 0 20px;"> <hr style=" margin: 30px 40px 0 20px;">
<div class="keyboard"> <div class="keyboard">
<div id="leftKeyEvent" class="key med" style="top: 103px; left: 15px;"> <div id="leftKeyEvent" class="key med" style="top: 103px; left: 15px;">
<div class="keyLabel" style="top: 100px; left: 0;">LEFT</div> <div class="keyLabel" style="top: 100px; left: 0;">LEFT</div>
</div> </div>
<div id="rightKeyEvent" class="key med" style="top: 103px; left: 160px;"> <div id="rightKeyEvent" class="key med" style="top: 103px; left: 160px;">
<div class="keyLabel" style="top: 100px; left: 22px;">RIGHT</div> <div class="keyLabel" style="top: 100px; left: 22px;">RIGHT</div>
</div> </div>
<div id="quickKeyEvent" class="key med" style="top: 30px; left: 87px;"> <div id="quickKeyEvent" class="key med" style="top: 30px; left: 87px;">
<div class="keyLabel" style="top: 35px; left: 95px;">QUICK</div> <div class="keyLabel" style="top: 35px; left: 95px;">QUICK</div>
</div> </div>
<div id="downKeyEvent" class="key med" style="top: 176px; left: 87px;"> <div id="downKeyEvent" class="key med" style="top: 176px; left: 87px;">
<div class="keyLabel" style="top: 100px; left: 22px;">DOWN</div> <div class="keyLabel" style="top: 100px; left: 22px;">DOWN</div>
</div> </div>
<div id="rotateKeyEvent" class="key big" style="top: 110px; left: 305px;"> <div id="rotateKeyEvent" class="key big" style="top: 110px; left: 305px;">
<div class="keyLabel" style="top: 140px; left: 35px;">ROTATE</div> <div class="keyLabel" style="top: 140px; left: 35px;">ROTATE</div>
</div> </div>
<div id="resetKeyEvent" class="key small" style="top: 30px; left: 260px;"> <div id="resetKeyEvent" class="key small" style="top: 30px; left: 260px;">
<div class="keyLabel" style="top: 50px; left: 0;">RESET</div> <div class="keyLabel" style="top: 50px; left: 0;">RESET</div>
</div> </div>
<div id="muteSoundKeyEvent" class="key small" style="top: 30px; left: 315px;"> <div id="muteSoundKeyEvent" class="key small" style="top: 30px; left: 315px;">
<div class="keyLabel" style="top: 50px; left: 0;">SOUND</div> <div class="keyLabel" style="top: 50px; left: 0;">SOUND</div>
</div> </div>
<div id="pauseKeyEvent" class="key small" style="top: 30px; left: 375px;"> <div id="pauseKeyEvent" class="key small" style="top: 30px; left: 375px;">
<div class="keyLabel" style="top: 50px; left: 0;">PAUSE</div> <div class="keyLabel" style="top: 50px; left: 0;">PAUSE</div>
</div> </div>
<div id="optionsKeyEvent" class="key small" style="top: 30px; left: 440px;"> <div id="optionsKeyEvent" class="key small" style="top: 30px; left: 440px;">
<div class="keyLabel" style="top: 50px; left: 0;">OPTIONS</div> <div class="keyLabel" style="top: 50px; left: 0;">OPTIONS</div>
</div> </div>
</div> </div>
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

2112
main.js
View File

File diff suppressed because it is too large Load Diff