adminflsu/Tetris-on-the-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first brick of menu

Browse Source
This commit is contained in:
flo 2025-04-02 17:41:44 +02:00
parent 0d8b03841b
commit a64f682ae3
3 changed files with 163 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/index.html
View File

@ -4,20 +4,37 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Tetris on the web</title> <title>Tetris on the web</title>
<link rel="stylesheet" href="./style/index.css" />
<script src="./script/index.js" defer></script> <script src="./script/index.js" defer></script>
<link rel="stylesheet" href="./style/index.css" />
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="score" class="first"> <div id="left-part" class="first">
<p> <p>
Score: Score:
<span id="score-value">0</span> <span id="score-value">0</span>
</p> </p>
</div> </div>
<div id="tetris" class="tetris"> <div id="tetris" class="tetris">
<canvas id="tetris-canvas" width="300" height="600"></canvas> <canvas class="hidden" id="tetris-canvas" width="300" height="600"></canvas>
<div class="main-menu hidden" id="main-menu" >
<button id="start-button">Start</button>
</div>
<div class="gameOver hidden">
<p>Game Over</p>
<button id="restart-button">Restart</button>
<button id="main-menu">Main Menu</button>
</div>
<div class="pause hidden">
<p>Paused</p>
<button id="resume-button">Resume</button>
<button id="main-menu">Main Menu</button>
</div>
<div class="load-menu" id="load-menu">
<span class="loader"></span>
<p>Loading...</p>
</div>
</div> </div>
<div class="last"></div> <div class="last"></div>
</div> </div>

58
public/script/index.js
View File

@ -1,5 +1,14 @@
const board = document.getElementById('tetris-canvas'); const board = document.getElementById('tetris-canvas');
const scoreElement = document.getElementById('score-value'); const scoreElement = document.getElementById('score-value');
const loadMenu = document.getElementById('load-menu');
const mainMenu = document.getElementById('main-menu');
const startButton = document.getElementById('start-button');
startButton.addEventListener('click', () =>
{
});
const boardContext = board.getContext('2d'); const boardContext = board.getContext('2d');
@ -9,11 +18,7 @@ boardContext.fillRect(0, 0, board.width, board.height);
const img = new Image(); const img = new Image();
img.src = '../img/PieceTetris.png'; img.src = '../img/PieceTetris.png';
let downInterval = setInterval(() => { let downInterval;
moveDown();
refresh();
}, 1000);
let rightInterval; let rightInterval;
@ -78,14 +83,6 @@ const templatePiece = [
] ]
]; ];
const MOVELEFT = 1;
const MOVERIGHT = 2;
const MOVEDOWN = 3;
const ROTATE = 4;
const MOVEDOWNFAST = 5;
const RESPAWN = 6;
const history = [];
const templateColor = [ const templateColor = [
@ -136,11 +133,27 @@ let color = []
let boardData = []; let boardData = [];
for (let i = 0; i < 10; i++) { const MOVELEFT = 1;
const MOVERIGHT = 2;
const MOVEDOWN = 3;
const ROTATE = 4;
const MOVEDOWNFAST = 5;
const RESPAWN = 6;
const history = [];
function startGame() {
boardData = [];
currentPiece = [];
color = [];
history = [];
for (let i = 0; i < 10; i++) {
boardData[i] = []; boardData[i] = [];
for (let j = 0; j < 20; j++) { for (let j = 0; j < 20; j++) {
boardData[i][j] = [0, 0, 0, 255]; boardData[i][j] = [0, 0, 0, 255];
} }
}
} }
function drawTetris(x, y, color) { function drawTetris(x, y, color) {
@ -434,12 +447,7 @@ function fasteDrop() {
history.push([MOVEDOWNFAST, 0]); history.push([MOVEDOWNFAST, 0]);
} }
img.onload = () => { document.addEventListener('keydown', (event) => {
initAndChangeSpeedDrop();
loadTetris();
refresh();
document.addEventListener('keydown', (event) => {
if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) { if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
rotate(); rotate();
} else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) { } else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
@ -473,9 +481,9 @@ img.onload = () => {
console.log(event.key); console.log(event.key);
keyPress.push(event.key); keyPress.push(event.key);
}); });
document.addEventListener('keyup', (event) => { document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowDown') { if (event.key == 'ArrowDown') {
clearInterval(downInterval); clearInterval(downInterval);
downInterval = setInterval(() => { downInterval = setInterval(() => {
@ -492,7 +500,11 @@ img.onload = () => {
keyPress = keyPress.filter((key) => { keyPress = keyPress.filter((key) => {
return key != event.key; return key != event.key;
}); });
}); });
img.onload = () => {
loadMenu.classList.add('hidden');
mainMenu.classList.remove('hidden');
} }

69
public/style/index.css
View File

@ -21,9 +21,6 @@ body {
} }
.container { .container {
div {
background: #fff;
}
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
@ -31,12 +28,78 @@ body {
.tetris { .tetris {
width: 300px; width: 300px;
height: 600px; height: 600px;
background: #000000;
} }
.first { .first {
width: 150px; width: 150px;
background: white;
} }
.last { .last {
width: 150px; width: 150px;
background: white;
}
.main-menu {
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
}
.load-menu {
height: 100%;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
justify-content: center;
color: white;
}
.loader {
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
position: relative;
animation: pulse 1s linear infinite;
}
.loader:after {
content: '';
position: absolute;
width: 48px;
height: 48px;
border: 5px solid #FFF;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: scaleUp 1s linear infinite;
}
@keyframes scaleUp {
0% { transform: translate(-50%, -50%) scale(0) }
60% , 100% { transform: translate(-50%, -50%) scale(1)}
}
@keyframes pulse {
0% , 60% , 100%{ transform: scale(1) }
80% { transform: scale(1.2)}
}
.hidden {
display: none;
} }