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

continu change style

Browse Source
This commit is contained in:
flo 2025-04-25 09:36:40 +02:00
parent 60f424ce1e
commit d8dcb08a46
5 changed files with 179 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/pause.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 376 B

23
public/index.html
View File

@ -12,19 +12,21 @@
<body> <body>
<div class="container"> <div class="container">
<div id="left-part" class="first"> <div id="left-part" class="first">
<p> <p class="frame">
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="frame tetris">
<canvas class="hidden" id="tetris-canvas" width="300" height="600"></canvas> <div class="hidden" id="board-container">
<canvas id="tetris-canvas" width="300" height="600"></canvas>
</div>
<div class="main-menu hidden" id="main-menu" > <div class="main-menu hidden" id="main-menu" >
<button id="start-button">Start</button> <button id="start-button">Start</button>
</div> </div>
<div class="gameOver hidden" id="game-over-menu"> <div class="gameOver hidden" id="game-over-menu">
<p>Game Over</p> <p>Game Over</p>
<button id="restart-button">Restart</button> <label id="restart-button">Restart</label>
<button id="main-menu">Main Menu</button> <button id="main-menu">Main Menu</button>
</div> </div>
<div class="pause hidden" id="pause-menu"> <div class="pause hidden" id="pause-menu">
@ -38,8 +40,17 @@
</div> </div>
</div> </div>
<div class="last"> <div class="last">
<label id="pause-button">Pause And Resume</label> <div class="frame">
<canvas id="preview-canvas" width="100" height="100"></canvas> <p>Next</p>
<div id="preview-container">
<canvas id="preview-canvas" width="100" height="100"></canvas>
</div>
</div>
<div class="frame pauseContainer" id="pause-container">
<div id="pause-button" class="icon play-pause">
</div>
</div>
</div> </div>
</div> </div>

30
public/script/index.js
View File

@ -1,4 +1,5 @@
const board = document.getElementById('tetris-canvas'); let board = document.getElementById('tetris-canvas');
const boardBis = document.getElementById('tetris-canvas').cloneNode(true);
const scoreElement = document.getElementById('score-value'); const scoreElement = document.getElementById('score-value');
const loadMenu = document.getElementById('load-menu'); const loadMenu = document.getElementById('load-menu');
const mainMenu = document.getElementById('main-menu'); const mainMenu = document.getElementById('main-menu');
@ -7,15 +8,21 @@ const pauseMenu = document.getElementById('pause-menu');
const startButton = document.getElementById('start-button'); const startButton = document.getElementById('start-button');
const pauseButton = document.getElementById('pause-button'); const pauseButton = document.getElementById('pause-button');
const preview = document.getElementById('preview-canvas'); let preview = document.getElementById('preview-canvas');
const previewBis = document.getElementById('preview-canvas').cloneNode(true);
const gameOverMenu = document.getElementById('game-over-menu'); const gameOverMenu = document.getElementById('game-over-menu');
const restartButton = document.getElementById('restart-button'); const restartButton = document.getElementById('restart-button');
const boardContainer = document.getElementById('board-container');
const previewContainer = document.getElementById('preview-container');
const buttonContainer = document.getElementById('pause-container');
restartButton.addEventListener('click', () => restartButton.addEventListener('click', () =>
{ {
displayGameBoard(); displayGameBoard();
iniGame(); startGame();
refresh(); refresh();
} }
); );
@ -30,8 +37,8 @@ pauseButton.addEventListener('click', () =>
pauseGame(); pauseGame();
}); });
const boardContext = board.getContext('2d'); let boardContext = board.getContext('2d');
const previewContext = preview.getContext('2d'); let previewContext = preview.getContext('2d');
boardContext.fillStyle = 'black'; boardContext.fillStyle = 'black';
boardContext.fillRect(0, 0, board.width, board.height); boardContext.fillRect(0, 0, board.width, board.height);
@ -57,7 +64,7 @@ let lines = 0;
let speed = 1000; let speed = 1000;
let pause = false; let pause = false;
let gameOver = false; let gameOver = true;
const templatePiece = [ const templatePiece = [
[ // ok [ // ok
@ -200,10 +207,14 @@ function startGame() {
} }
function pauseGame() { function pauseGame() {
if (gameOver) {
return;
}
if (pause) { if (pause) {
pause = false; pause = false;
displayGameBoard(); displayGameBoard();
initAndChangeSpeedDrop(); //initAndChangeSpeedDrop();
} else { } else {
pause = true; pause = true;
displayPause(); displayPause();
@ -521,7 +532,7 @@ function fasteDrop() {
} }
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
if (event.key == 'Escape') { if (event.key == 'Escape' && !keyPress.includes('Escape')) {
pauseGame(); pauseGame();
return; return;
} }
@ -588,6 +599,5 @@ document.addEventListener('keyup', (event) => {
}); });
img.onload = () => { img.onload = () => {
loadMenu.classList.add('hidden'); displayMainMenu();
mainMenu.classList.remove('hidden');
} }

96
public/script/view.js
View File

@ -8,31 +8,10 @@ function drawTetisWithOppacity(x, y, color, oppacity) {
} }
function drawTetrisOnThePreview(x, y, color) { function drawTetrisOnThePreview(x, y, color) {
let width = 0; previewContext.fillStyle = '#303f4f'; // Couleur de fond
let height = 0; previewContext.fillRect(x, y, preview.width/5, preview.width/5);
previewContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity})`
for (let i = 0; i < nextPiece.length - 1; i++) { previewContext.fillRect(x + gapPiece/2, y + gapPiece/2, preview.width/5 - gapPiece, preview.width/5 - gapPiece);
let piece = nextPiece[i];
width = Math.max(width, piece[0]);
height = Math.max(height, piece[1]);
}
x = x + (preview.width/5 - width * preview.width/5) / 2;
y = y + (preview.height/5 - height * preview.width/10) / 2;
previewContext.drawImage(img, x, y, preview.width/5, preview.width/5);
const imageData = previewContext.getImageData(x, y, preview.width/5, preview.width/5);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] = data[i] * color[0] / 255;
data[i + 1] = data[i + 1] * color[1] / 255;
data[i + 2] = data[i + 2] * color[2] / 255;
data[i + 3] = data[i + 3] * color[3] / 255;
}
previewContext.putImageData(imageData, x, y);
} }
@ -97,14 +76,20 @@ function drawBoard() {
function clearBoard() { function clearBoard() {
// Ajouter un motif subtil en arrière-plan // Ajouter un motif subtil en arrière-plan
boardContext.fillStyle = 'rgba(255, 255, 255)';
boardContainer.innerHTML = '';
board = boardBis.cloneNode(true);
boardContainer.appendChild(board);
boardContext = board.getContext('2d');
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
for (let j = 0; j < 20; j++) { for (let j = 0; j < 20; j++) {
if ((i + j) % 2 === 0) { if ((i + j) % 2 === 0) {
boardContext.fillStyle = '#5d6270'; // Encore plus sombre boardContext.fillStyle = '#6d728020'; // Encore plus sombre
} }
else { else {
boardContext.fillStyle = '#3d4250'; // Presque noir-bleuté boardContext.fillStyle = '#3d425020'; // Presque noir-bleuté
} }
boardContext.fillRect( boardContext.fillRect(
i * board.width/10, i * board.width/10,
@ -118,12 +103,40 @@ function clearBoard() {
function displayPreview() { function displayPreview() {
previewContext.fillStyle = 'black'; previewContainer.innerHTML = '';
previewContext.fillRect(0, 0, preview.width, preview.height);
preview = previewBis.cloneNode(true);
previewContainer.appendChild(preview);
previewContext = preview.getContext('2d');
// make damier
for (let x = 0; x < 5 ; x++) {
for (let y = 0;y < 5; y++) {
if ((x + y) % 2 === 0) {
previewContext.fillStyle = '#6d728020'; // Encore plus sombre
}
else {
previewContext.fillStyle = '#3d425020'; // Presque noir-bleuté
}
previewContext.fillRect(
x * preview.width/5,
y * preview.height/5,
preview.width/5,
preview.height/5
);
}
}
let xDif = nextPiece[nextPiece.length - 1][0] - 2;
let yDif = nextPiece[nextPiece.length - 1][1] + 0.5;
for (let i = 0; i < nextPiece.length - 1; i++) { for (let i = 0; i < nextPiece.length - 1; i++) {
let piece = nextPiece[i]; let piece = nextPiece[i];
drawTetrisOnThePreview(piece[0] * preview.width/5, piece[1] * preview.width/5, nextColor); drawTetrisOnThePreview((piece[0] - xDif) * preview.width/5, (piece[1] + yDif) * preview.width/5, nextColor);
} }
} }
@ -136,11 +149,22 @@ function refresh() {
displayPreview(); displayPreview();
} }
function displayMainMenu() {
mainMenu.classList.remove('hidden');
loadMenu.classList.add('hidden');
boardContainer.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.add('hidden');
gameOverMenu.classList.add('hidden');
}
function displayPause() { function displayPause() {
mainMenu.classList.add('hidden'); mainMenu.classList.add('hidden');
loadMenu.classList.add('hidden'); loadMenu.classList.add('hidden');
board.classList.add('hidden'); boardContainer.classList.add('hidden');
pauseButton.classList.add('paused');
pauseMenu.classList.remove('hidden'); pauseMenu.classList.remove('hidden');
} }
@ -149,14 +173,18 @@ function displayGameBoard() {
loadMenu.classList.add('hidden'); loadMenu.classList.add('hidden');
pauseMenu.classList.add('hidden'); pauseMenu.classList.add('hidden');
gameOverMenu.classList.add('hidden'); gameOverMenu.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.remove('hidden');
board.classList.remove('hidden'); boardContainer.classList.remove('hidden');
} }
function displayGameOver() { function displayGameOver() {
mainMenu.classList.add('hidden'); mainMenu.classList.add('hidden');
loadMenu.classList.add('hidden'); loadMenu.classList.add('hidden');
board.classList.add('hidden'); boardContainer.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.add('hidden');
gameOverMenu.classList.remove('hidden'); gameOverMenu.classList.remove('hidden');
} }

87
public/style/index.css
View File

@ -20,29 +20,62 @@ body {
} }
.container { .container {
display: flex; gap: 1rem;
flex-direction: row; display: flex;
flex-direction: row;
} }
.tetris { .tetris {
width: 300px; width: 300px;
height: 600px; height: 600px;
}
padding: 10px; .frame {
padding: 10px;
margin: 0px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
background: #4E4F4D; background: #414241a0;
position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
p {
padding: 0px;
margin: 0px;
}
}
.frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #4E4F4DA0;
border-radius: 10px; /* Même border-radius que le parent */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); /* Pour Safari */
z-index: -1; /* Assure que le fond est derrière le contenu */
} }
.first { .first {
width: 150px; display: flex;
flex-direction: column;
gap: 1rem;
align-items: end;
width: 100px;
} }
.last { .last {
width: 150px; display: flex;
flex-direction: column;
gap: 1rem;
align-items: start;
width: 100px;
justify-content: space-between;
} }
.main-menu { .main-menu {
@ -67,6 +100,44 @@ body {
color: white; color: white;
} }
.icon.play-pause {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 37px; /* Réduit de moitié (était 74px) */
border-color: transparent transparent transparent #74dc74;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 18.5px 0 18.5px 30px; /* Réduit proportionnellement (était 37px 0 37px 60px) */
&.paused {
border-style: double;
border-width: 0px 0 0px 30px; /* Réduit (était 60px) */
border-color: transparent transparent transparent #ff5e5e;
}
}
.icon.play-pause.play::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pauseContainer {
width: min-content;
height: min-content;
}
.loader { .loader {
width: 48px; width: 48px;
height: 48px; height: 48px;