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

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 loadMenu = document.getElementById('load-menu');
const mainMenu = document.getElementById('main-menu');
@ -7,15 +8,21 @@ const pauseMenu = document.getElementById('pause-menu');
const startButton = document.getElementById('start-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 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', () =>
{
displayGameBoard();
iniGame();
startGame();
refresh();
}
);
@ -30,8 +37,8 @@ pauseButton.addEventListener('click', () =>
pauseGame();
});
const boardContext = board.getContext('2d');
const previewContext = preview.getContext('2d');
let boardContext = board.getContext('2d');
let previewContext = preview.getContext('2d');
boardContext.fillStyle = 'black';
boardContext.fillRect(0, 0, board.width, board.height);
@ -57,7 +64,7 @@ let lines = 0;
let speed = 1000;
let pause = false;
let gameOver = false;
let gameOver = true;
const templatePiece = [
[ // ok
@ -200,10 +207,14 @@ function startGame() {
}
function pauseGame() {
if (gameOver) {
return;
}
if (pause) {
pause = false;
displayGameBoard();
initAndChangeSpeedDrop();
//initAndChangeSpeedDrop();
} else {
pause = true;
displayPause();
@ -521,7 +532,7 @@ function fasteDrop() {
}
document.addEventListener('keydown', (event) => {
if (event.key == 'Escape') {
if (event.key == 'Escape' && !keyPress.includes('Escape')) {
pauseGame();
return;
}
@ -588,6 +599,5 @@ document.addEventListener('keyup', (event) => {
});
img.onload = () => {
loadMenu.classList.add('hidden');
mainMenu.classList.remove('hidden');
displayMainMenu();
}

96
public/script/view.js
View File

@ -8,31 +8,10 @@ function drawTetisWithOppacity(x, y, color, oppacity) {
}
function drawTetrisOnThePreview(x, y, color) {
let width = 0;
let height = 0;
for (let i = 0; i < nextPiece.length - 1; i++) {
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);
previewContext.fillStyle = '#303f4f'; // Couleur de fond
previewContext.fillRect(x, y, preview.width/5, preview.width/5);
previewContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity})`
previewContext.fillRect(x + gapPiece/2, y + gapPiece/2, preview.width/5 - gapPiece, preview.width/5 - gapPiece);
}
@ -97,14 +76,20 @@ function drawBoard() {
function clearBoard() {
// 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 j = 0; j < 20; j++) {
if ((i + j) % 2 === 0) {
boardContext.fillStyle = '#5d6270'; // Encore plus sombre
boardContext.fillStyle = '#6d728020'; // Encore plus sombre
}
else {
boardContext.fillStyle = '#3d4250'; // Presque noir-bleuté
boardContext.fillStyle = '#3d425020'; // Presque noir-bleuté
}
boardContext.fillRect(
i * board.width/10,
@ -118,12 +103,40 @@ function clearBoard() {
function displayPreview() {
previewContext.fillStyle = 'black';
previewContext.fillRect(0, 0, preview.width, preview.height);
previewContainer.innerHTML = '';
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++) {
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();
}
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() {
mainMenu.classList.add('hidden');
loadMenu.classList.add('hidden');
board.classList.add('hidden');
boardContainer.classList.add('hidden');
pauseButton.classList.add('paused');
pauseMenu.classList.remove('hidden');
}
@ -149,14 +173,18 @@ function displayGameBoard() {
loadMenu.classList.add('hidden');
pauseMenu.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() {
mainMenu.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');
}

87
public/style/index.css
View File

@ -20,29 +20,62 @@ body {
}
.container {
display: flex;
flex-direction: row;
gap: 1rem;
display: flex;
flex-direction: row;
}
.tetris {
width: 300px;
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 {
width: 150px;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: end;
width: 100px;
}
.last {
width: 150px;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: start;
width: 100px;
justify-content: space-between;
}
.main-menu {
@ -67,6 +100,44 @@ body {
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 {
width: 48px;
height: 48px;