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>
<meta charset="utf-8" />
<title>Tetris on the web</title>
<link rel="stylesheet" href="./style/index.css" />
<script src="./script/index.js" defer></script>
<link rel="stylesheet" href="./style/index.css" />
</head>
<body>
<div class="container">
<div id="score" class="first">
<div id="left-part" class="first">
<p>
Score:
<span id="score-value">0</span>
</p>
</div>
<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 class="last"></div>
</div>

140
public/script/index.js
View File

@ -1,5 +1,14 @@
const board = document.getElementById('tetris-canvas');
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');
@ -9,11 +18,7 @@ boardContext.fillRect(0, 0, board.width, board.height);
const img = new Image();
img.src = '../img/PieceTetris.png';
let downInterval = setInterval(() => {
moveDown();
refresh();
}, 1000);
let downInterval;
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 = [
@ -136,10 +133,26 @@ let color = []
let boardData = [];
for (let i = 0; i < 10; i++) {
boardData[i] = [];
for (let j = 0; j < 20; j++) {
boardData[i][j] = [0, 0, 0, 255];
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] = [];
for (let j = 0; j < 20; j++) {
boardData[i][j] = [0, 0, 0, 255];
}
}
}
@ -434,65 +447,64 @@ function fasteDrop() {
history.push([MOVEDOWNFAST, 0]);
}
img.onload = () => {
initAndChangeSpeedDrop();
loadTetris();
refresh();
document.addEventListener('keydown', (event) => {
if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
rotate();
} else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
clearInterval(downInterval);
downInterval = setInterval(() => {
moveDown();
document.addEventListener('keydown', (event) => {
if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
rotate();
} else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
clearInterval(downInterval);
downInterval = setInterval(() => {
moveDown();
refresh();
}, 50);
} else if (event.key == 'ArrowLeft' && !keyPress.includes('ArrowLeft')) {
moveLeft();
refresh();
}, 50);
} else if (event.key == 'ArrowLeft' && !keyPress.includes('ArrowLeft')) {
leftInterval = setInterval(() => {
moveLeft();
leftInterval = setInterval(() => {
moveLeft();
refresh();
}, 100);
} else if (event.key == 'ArrowRight' && !keyPress.includes('ArrowRight')) {
moveRight();
refresh();
}, 100);
} else if (event.key == 'ArrowRight' && !keyPress.includes('ArrowRight')) {
rightInterval = setInterval(() => {
moveRight();
refresh();
}, 100);
} else if (event.key == ' ' && !keyPress.includes(' ')) {
fasteDrop();
}
rightInterval = setInterval(() => {
moveRight();
refresh();
}, 100);
} else if (event.key == ' ' && !keyPress.includes(' ')) {
fasteDrop();
}
refresh();
refresh();
console.log(event.key);
console.log(event.key);
keyPress.push(event.key);
});
keyPress.push(event.key);
document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowDown') {
clearInterval(downInterval);
downInterval = setInterval(() => {
moveDown();
refresh();
}, 1000);
} else if (event.key == 'ArrowLeft') {
clearInterval(leftInterval);
} else if (event.key == 'ArrowRight') {
clearInterval(rightInterval);
}
keyPress = keyPress.filter((key) => {
return key != event.key;
});
});
document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowDown') {
clearInterval(downInterval);
downInterval = setInterval(() => {
moveDown();
refresh();
}, 1000);
} else if (event.key == 'ArrowLeft') {
clearInterval(leftInterval);
} else if (event.key == 'ArrowRight') {
clearInterval(rightInterval);
}
keyPress = keyPress.filter((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 {
div {
background: #fff;
}
display: flex;
flex-direction: row;
}
@ -31,12 +28,78 @@ body {
.tetris {
width: 300px;
height: 600px;
background: #000000;
}
.first {
width: 150px;
background: white;
}
.last {
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;
}