From 2052f8ed3b361310cffc8ca80a32879b39863302 Mon Sep 17 00:00:00 2001
From: flo <>
Date: Wed, 23 Apr 2025 11:06:37 +0200
Subject: [PATCH] hologramme and pause menu
---
public/index.html | 1 +
public/script/index.js | 153 ++++++++---------------------------------
public/script/view.js | 144 ++++++++++++++++++++++++++++++++++++++
3 files changed, 173 insertions(+), 125 deletions(-)
create mode 100644 public/script/view.js
diff --git a/public/index.html b/public/index.html
index e226bcd..d8c2ae5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,7 @@
Tetris on the web
+
diff --git a/public/script/index.js b/public/script/index.js
index 7a9a4a8..21168ba 100644
--- a/public/script/index.js
+++ b/public/script/index.js
@@ -183,11 +183,7 @@ function startGame() {
speed = 1000;
scoreElement.innerText = score;
- mainMenu.classList.add('hidden');
- loadMenu.classList.add('hidden');
- board.classList.add('hidden');
-
- board.classList.remove('hidden');
+ displayGameBoard();
iniGame();
@@ -197,9 +193,11 @@ function startGame() {
function pauseGame() {
if (pause) {
pause = false;
+ displayGameBoard();
initAndChangeSpeedDrop();
} else {
pause = true;
+ displayPause();
clearDownInterval();
clearInterval(endDownInterval);
}
@@ -219,116 +217,6 @@ function iniGame() {
}, speed);
}
-function drawTetisWithOppacity(x, y, color, oppacity) {
- 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) {
- 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);
-}
-
-
-function drawTetris(x, y, color) {
- drawTetisWithOppacity(x, y, color, 255);
-}
-
-function drawCurrentPiece() {
- for (let i = 0 ; i < currentPiece.length - 1; i++) {
- let piece = currentPiece[i];
- drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, oppacity);
- }
-}
-
-function drawBoard() {
- for (let i = 0; i < 10; i++) {
- for (let j = 0; j < 20; j++) {
- if (!(boardData[i][j][0] == 0 && boardData[i][j][1] == 0 && boardData[i][j][2] == 0)) {
- drawTetris(i * board.width/10, j * board.width/10, boardData[i][j]);
- }
- }
- }
-}
-
-function clearBoard() {
- boardContext.fillStyle = 'black';
- boardContext.fillRect(0, 0, board.width, board.height);
-}
-
-function drawGrid() {
- boardContext.strokeStyle = 'gray'; // Couleur des lignes du quadrillage
- boardContext.lineWidth = 0.5; // Épaisseur des lignes
-
- // Dessiner les lignes verticales
- for (let x = 0; x <= board.width; x += board.width / 10) {
- boardContext.beginPath();
- boardContext.moveTo(x, 0);
- boardContext.lineTo(x, board.height);
- boardContext.stroke();
- }
-
- // Dessiner les lignes horizontales
- for (let y = 0; y <= board.height; y += board.height / 20) {
- boardContext.beginPath();
- boardContext.moveTo(0, y);
- boardContext.lineTo(board.width, y);
- boardContext.stroke();
- }
-}
-
-function displayPreview() {
- previewContext.fillStyle = 'black';
- previewContext.fillRect(0, 0, preview.width, preview.height);
-
- 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);
- }
-}
-
-function refresh() {
- clearBoard();
- drawGrid();
- drawBoard();
- drawCurrentPiece();
- displayPreview();
-}
-
function loadTetris() {
clearDownInterval();
clearInterval(endDownInterval);
@@ -609,16 +497,27 @@ function fasteDrop() {
}
document.addEventListener('keydown', (event) => {
- if (event.key == 'ArrowUp' && !keyPress.includes('ArrowUp')) {
+ if (event.key == 'Escape') {
+ pauseGame();
+ return;
+ }
+ if (pause) {
+ return;
+ }
+ if (gameOver) {
+ return;
+ }
+
+ if ((event.key == 'ArrowUp' || event.key == 'w' || event.key == 'z') && !keyPress.includes('ArrowUp') && !keyPress.includes('w') && !keyPress.includes('z')) {
rotate();
- } else if (event.key == 'ArrowDown' && !keyPress.includes('ArrowDown')) {
+ } else if ((event.key == 'ArrowDown' || event.key == 's') && !keyPress.includes('ArrowDown') && !keyPress.includes('s')) {
clearDownInterval();
downInterval = setInterval(() => {
moveDown();
refresh();
}, 50);
- } else if (event.key == 'ArrowLeft' && !keyPress.includes('ArrowLeft')) {
+ } else if ((event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') && !keyPress.includes('ArrowLeft') && !keyPress.includes('q') && !keyPress.includes('a')) {
moveLeft();
leftInterval = setInterval(() => {
@@ -626,7 +525,7 @@ document.addEventListener('keydown', (event) => {
refresh();
}, 100);
- } else if (event.key == 'ArrowRight' && !keyPress.includes('ArrowRight')) {
+ } else if (((event.key == 'ArrowRight') || event.key == 'd') && !keyPress.includes('ArrowRight') && !keyPress.includes('d')) {
moveRight();
rightInterval = setInterval(() => {
@@ -645,11 +544,17 @@ document.addEventListener('keydown', (event) => {
});
document.addEventListener('keyup', (event) => {
- if (event.key == 'ArrowDown') {
+ if (pause) {
+ return;
+ }
+ if (gameOver) {
+ return;
+ }
+ if (event.key == 'ArrowDown' || event.key == 's') {
initAndChangeSpeedDrop();
- } else if (event.key == 'ArrowLeft') {
+ } else if (event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') {
clearInterval(leftInterval);
- } else if (event.key == 'ArrowRight') {
+ } else if (event.key == 'ArrowRight' || event.key == 'd') {
clearInterval(rightInterval);
}
@@ -661,6 +566,4 @@ document.addEventListener('keyup', (event) => {
img.onload = () => {
loadMenu.classList.add('hidden');
mainMenu.classList.remove('hidden');
-}
-
-
+}
\ No newline at end of file
diff --git a/public/script/view.js b/public/script/view.js
new file mode 100644
index 0000000..5245375
--- /dev/null
+++ b/public/script/view.js
@@ -0,0 +1,144 @@
+function drawTetisWithOppacity(x, y, color, oppacity) {
+ 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) {
+ 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);
+}
+
+
+function drawTetris(x, y, color) {
+ drawTetisWithOppacity(x, y, color, 255);
+}
+
+function drawCurrentPiece() {
+ for (let i = 0 ; i < currentPiece.length - 1; i++) {
+ let piece = currentPiece[i];
+ drawTetisWithOppacity(piece[0] * board.width/10, piece[1] * board.width/10, color, oppacity);
+ }
+}
+
+function drawHologram() {
+ let hologramPiece = [];
+ for (let i = 0; i < currentPiece.length; i++) {
+ let piece = currentPiece[i];
+ hologramPiece.push([piece[0], piece[1]]);
+ }
+
+ while (canMoveTo(0, 1, hologramPiece)) {
+ moveToPiece(0, 1, hologramPiece);
+ }
+
+ 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);
+ }
+}
+
+function drawGrid() {
+ boardContext.strokeStyle = 'gray'; // Couleur des lignes du quadrillage
+ boardContext.lineWidth = 0.5; // Épaisseur des lignes
+
+ // Dessiner les lignes verticales
+ for (let x = 0; x <= board.width; x += board.width / 10) {
+ boardContext.beginPath();
+ boardContext.moveTo(x, 0);
+ boardContext.lineTo(x, board.height);
+ boardContext.stroke();
+ }
+
+ // Dessiner les lignes horizontales
+ for (let y = 0; y <= board.height; y += board.height / 20) {
+ boardContext.beginPath();
+ boardContext.moveTo(0, y);
+ boardContext.lineTo(board.width, y);
+ boardContext.stroke();
+ }
+}
+
+function drawBoard() {
+ for (let i = 0; i < 10; i++) {
+ for (let j = 0; j < 20; j++) {
+ if (!(boardData[i][j][0] == 0 && boardData[i][j][1] == 0 && boardData[i][j][2] == 0)) {
+ drawTetris(i * board.width/10, j * board.width/10, boardData[i][j]);
+ }
+ }
+ }
+}
+
+function clearBoard() {
+ boardContext.fillStyle = 'black';
+ boardContext.fillRect(0, 0, board.width, board.height);
+}
+
+
+function displayPreview() {
+ previewContext.fillStyle = 'black';
+ previewContext.fillRect(0, 0, preview.width, preview.height);
+
+ 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);
+ }
+}
+
+function refresh() {
+ clearBoard();
+ drawGrid();
+ drawBoard();
+ drawHologram();
+ drawCurrentPiece();
+ displayPreview();
+}
+
+function displayPause() {
+ mainMenu.classList.add('hidden');
+ loadMenu.classList.add('hidden');
+ board.classList.add('hidden');
+
+ pauseMenu.classList.remove('hidden');
+}
+
+function displayGameBoard() {
+ mainMenu.classList.add('hidden');
+ loadMenu.classList.add('hidden');
+ pauseMenu.classList.add('hidden');
+
+ board.classList.remove('hidden');
+}
\ No newline at end of file