Game Over
diff --git a/public/script/index.js b/public/script/index.js index 21168ba..9ac44c2 100644 --- a/public/script/index.js +++ b/public/script/index.js @@ -9,6 +9,17 @@ const pauseButton = document.getElementById('pause-button'); const preview = document.getElementById('preview-canvas'); +const gameOverMenu = document.getElementById('game-over-menu'); +const restartButton = document.getElementById('restart-button'); + +restartButton.addEventListener('click', () => +{ + displayGameBoard(); + iniGame(); + refresh(); +} +); + startButton.addEventListener('click', () => { startGame(); @@ -100,16 +111,14 @@ const templatePiece = [ ] ]; - - const templateColor = [ - [255, 0, 0, 255], - [0, 255, 0, 255], - [0, 0, 255, 255], - [255, 255, 0, 255], - [0, 255, 255, 255], - [255, 0, 255, 255], - [255, 40, 130, 255] + [240, 87, 84, 255], + [254, 223, 92, 255], + [27, 148, 118, 255], + [36, 115, 155, 255], + [106, 190, 178, 255], + [164, 199, 218, 255], + [177, 225, 218, 255] ]; const speedSecondsToBotomPerLevel = [ @@ -225,6 +234,8 @@ function loadTetris() { currentPieceToBoard(); checkLine(); spawnPiece(); + + checkEndDrop(); } function currentPieceToBoard() { @@ -246,6 +257,20 @@ function spawnPiece() { nextColor = templateColor[random]; } currentPiece = nextPiece; + + for (let i = 0; i < currentPiece.length - 1; i++) { + if (boardData[currentPiece[i][0]][currentPiece[i][1]][0] != 0 && + boardData[currentPiece[i][0]][currentPiece[i][1]][1] != 0 && + boardData[currentPiece[i][0]][currentPiece[i][1]][2] != 0) { + + gameOver = true; + clearDownInterval(); + clearInterval(endDownInterval); + oppacity = 255; + displayGameOver(); + return; + } + } nextPiece = []; @@ -367,7 +392,6 @@ function checkEndDrop() { } } - function clearDownInterval() { clearInterval(downInterval); downInterval = null; diff --git a/public/script/view.js b/public/script/view.js index 317dbfc..3e2e059 100644 --- a/public/script/view.js +++ b/public/script/view.js @@ -1,21 +1,10 @@ let gapPiece = 6; function drawTetisWithOppacity(x, y, color, oppacity) { + boardContext.fillStyle = '#303f4f'; // Couleur de fond + boardContext.fillRect(x, y, board.width/10, board.width/10); boardContext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${oppacity/255})` boardContext.fillRect(x + gapPiece/2, y + gapPiece/2, board.width/10 - gapPiece, board.width/10 - gapPiece); - // boardContext.drawImage(img, x, y, board.width/10, board.width/10); - - // const imageData = boardContext.getImageData(x, y, board.width/10, board.width/10); - // 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] * oppacity / 255; - // } - - // boardContext.putImageData(imageData, x, y); } function drawTetrisOnThePreview(x, y, color) { @@ -71,7 +60,7 @@ function drawHologram() { for (let i = 0; i < hologramPiece.length - 1; i++) { let piece = hologramPiece[i]; - drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, 80); + drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, 120); } } @@ -107,8 +96,24 @@ function drawBoard() { } function clearBoard() { - boardContext.fillStyle = 'black'; - boardContext.fillRect(0, 0, board.width, board.height); + // Ajouter un motif subtil en arrière-plan + boardContext.fillStyle = 'rgba(255, 255, 255)'; + 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 + } + else { + boardContext.fillStyle = '#3d4250'; // Presque noir-bleuté + } + boardContext.fillRect( + i * board.width/10, + j * board.height/20, + board.width/10, + board.height/20 + ); + } + } } @@ -143,6 +148,15 @@ function displayGameBoard() { mainMenu.classList.add('hidden'); loadMenu.classList.add('hidden'); pauseMenu.classList.add('hidden'); + gameOverMenu.classList.add('hidden'); board.classList.remove('hidden'); +} + +function displayGameOver() { + mainMenu.classList.add('hidden'); + loadMenu.classList.add('hidden'); + board.classList.add('hidden'); + + gameOverMenu.classList.remove('hidden'); } \ No newline at end of file diff --git a/public/style/index.css b/public/style/index.css index 290c7d7..bd8e584 100644 --- a/public/style/index.css +++ b/public/style/index.css @@ -5,11 +5,10 @@ body { place-items: center; background: repeating-conic-gradient( from 45deg, - #fff34f 0% 25%, - #ff8b07 0% 50% + #7FB196 0% 25%, + #3C425A 0% 50% ); background-size: max(10vw, 10svh) max(10vw, 10svh); - background-color: #3c5e8b; font-family: 'Roboto', sans-serif; @@ -35,7 +34,7 @@ body { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); - background: rgb(34, 34, 34); + background: #4E4F4D; } .first { @@ -54,8 +53,6 @@ body { gap: 1rem; align-items: center; justify-content: center; - - background-color: black; } .load-menu {