+
-
+
-
Game Over
- - + +
+
-
Paused
- - + +
+
@@ -66,7 +66,7 @@
Loading...
Next
-
+
diff --git a/public/script/controller.js b/public/script/controller.js
index 48be882..2fe6153 100644
--- a/public/script/controller.js
+++ b/public/script/controller.js
@@ -13,7 +13,10 @@ function initGame() {
refreshInterval = setInterval(() => {
refreshBoard(game.board);
displayPreview(game);
+ scoreElement.innerText = game.score;
}, 16);
+
+ history = [];
}
function initOrChangeDropInterval(speed) {
@@ -36,7 +39,7 @@ function moveDownWithCheck(game) {
endDropInterval = null;
moveDown(piece);
- }
+ }
checkEnDrop(game);
}
diff --git a/public/script/displayGameFunction.js b/public/script/displayGameFunction.js
index 124e507..025f97a 100644
--- a/public/script/displayGameFunction.js
+++ b/public/script/displayGameFunction.js
@@ -90,8 +90,8 @@ function refreshBoard() {
drawSquare(square.x, square.y, square);
}
- drawCurrentPiece();
drawHologram();
+ drawCurrentPiece();
}
function drawHologram() {
diff --git a/public/script/displayMenuFunction.js b/public/script/displayMenuFunction.js
index e47b7fa..5d09fc1 100644
--- a/public/script/displayMenuFunction.js
+++ b/public/script/displayMenuFunction.js
@@ -4,7 +4,7 @@ function displayMainMenu() {
boardContainer.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.add('hidden');
-
+
gameOverMenu.classList.add('hidden');
}
@@ -12,7 +12,7 @@ function displayPause() {
mainMenu.classList.add('hidden');
loadMenu.classList.add('hidden');
boardContainer.classList.add('hidden');
-
+
pauseButton.classList.add('paused');
pauseMenu.classList.remove('hidden');
}
@@ -24,7 +24,7 @@ function displayGameBoard() {
gameOverMenu.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.remove('hidden');
-
+
boardContainer.classList.remove('hidden');
}
diff --git a/public/script/element.js b/public/script/element.js
index e65c46b..6393a49 100644
--- a/public/script/element.js
+++ b/public/script/element.js
@@ -21,4 +21,8 @@ const buttonContainer = document.getElementById('pause-container');
const highScoreTemplate = document.getElementById('high-score-template');
-const highScoresList = document.getElementById('high-scores-list');
\ No newline at end of file
+const highScoresList = document.getElementById('high-scores-list');
+
+const resumeButton = document.getElementById('resume-button');
+const mainMenuButton = document.getElementById('main-menu-button');
+const mainMenuButtonBis = document.getElementById('main-menu-button2');
\ No newline at end of file
diff --git a/public/script/gameFunction.js b/public/script/gameFunction.js
index 176f430..794c1c0 100644
--- a/public/script/gameFunction.js
+++ b/public/script/gameFunction.js
@@ -1,4 +1,4 @@
-function ifPieceInBoard(x, y, game) {
+function ifPieceInBoard(x, y) {
let board = game.board;
if (x < 0 || x >= width || y >= height) {
@@ -14,32 +14,32 @@ function ifPieceInBoard(x, y, game) {
return false;
}
-function ifMovePiece(x, y, piece, game) {
+function ifMovePiece(x, y, piece = game.currentPiece) {
for (let i = 0; i < piece.squares.length; i++) {
let square = piece.squares[i];
let newX = square.x + x;
let newY = square.y + y;
- if (ifPieceInBoard(newX, newY, game)) {
+ if (ifPieceInBoard(newX, newY)) {
return false;
}
}
return true;
}
-function ifMoveDown(piece, game) {
- return ifMovePiece(0, 1, piece, game);
+function ifMoveDown(piece = game.currentPiece) {
+ return ifMovePiece(0, 1, piece);
}
-function ifMoveLeft(piece, game) {
- return ifMovePiece(-1, 0, piece, game);
+function ifMoveLeft(piece = game.currentPiece) {
+ return ifMovePiece(-1, 0, piece);
}
-function ifMoveRight(piece, game) {
- return ifMovePiece(1, 0, piece, game);
+function ifMoveRight(piece = game.currentPiece) {
+ return ifMovePiece(1, 0, piece);
}
-function ifRotate(piece, game) {
+function ifRotate(piece = game.currentPiece) {
let centerX = piece.xCenter;
let centerY = piece.yCenter;
@@ -51,14 +51,14 @@ function ifRotate(piece, game) {
let newX = -y + centerX;
let newY = x + centerY;
- if (ifPieceInBoard(newX, newY, game)) {
+ if (ifPieceInBoard(newX, newY)) {
return false;
}
}
return true;
}
-function moveDown(piece) {
+function moveDown(piece = game.currentPiece) {
for (let i = 0; i < piece.squares.length; i++) {
let square = piece.squares[i];
square.y += 1;
@@ -67,8 +67,8 @@ function moveDown(piece) {
piece.yCenter += 1;
}
-function moveLeft(piece) {
- if (!ifMoveLeft(piece, game)) {
+function moveLeft(piece = game.currentPiece) {
+ if (!ifMoveLeft(piece)) {
return;
}
@@ -80,8 +80,8 @@ function moveLeft(piece) {
piece.xCenter -= 1;
}
-function moveRight(piece) {
- if (!ifMoveRight(piece, game)) {
+function moveRight(piece = game.currentPiece) {
+ if (!ifMoveRight(piece)) {
return;
}
@@ -96,7 +96,7 @@ function moveRight(piece) {
function ifCantRotate(piece, game) {
let centerX = piece.xCenter;
let centerY = piece.yCenter;
-
+
let moveX = [0, -1, 1, -2, 2];
let moveY = [0, -1];
@@ -155,7 +155,7 @@ function rotatePiece(piece) {
}
}
-function fixPieceToBoard(piece, game) {
+function fixPieceToBoard(piece = game.currentPiece) {
for (let i = 0; i < piece.squares.length; i++) {
let square = piece.squares[i];
game.board.push(square);
@@ -163,18 +163,18 @@ function fixPieceToBoard(piece, game) {
opacityCurrentPiece = 1;
- checkLine(game);
+ checkLine();
// Vous pouvez également gérer ici la création d'une nouvelle pièce
// ou vérifier si des lignes doivent être supprimées.
}
-function checkLine(game, ifNoFall = false) {
+function checkLine(ifNoFall = false) {
let lineFilled = [];
for (let i = 0; i < 20; i++) {
let filled = true;
for (let j = 0; j < 10; j++) {
- if (!ifPieceInBoard(j, i, game)) {
+ if (!ifPieceInBoard(j, i)) {
filled = false;
break;
}
@@ -217,46 +217,108 @@ function checkLine(game, ifNoFall = false) {
game.score += 1200;
}
- scoreElement.innerText = game.score;
game.lines += lineFilled.length;
game.level = Math.floor(game.lines / 10);
}
-function switchPiece(game) {
+function switchPiece() {
game.currentPiece = game.nextPiece;
game.nextPiece = getRandomPiece();
for (let i = 0; i < game.currentPiece.squares.length; i++) {
- if (ifPieceInBoard(game.currentPiece.squares[i].x, game.currentPiece.squares[i].y, game)) {
- game.gameOver = true;
- clearInterval(dropInterval);
- clearInterval(leftInterval);
- clearInterval(rightInterval);
- clearInterval(refreshInterval);
-
- clearInterval(endDropInterval);
- endDropInterval = null;
- opacityCurrentPiece = 1;
- game.currentPiece = null;
- dropInterval = null;
- refreshInterval = null;
-
- displayGameOver();
+ let x = game.currentPiece.squares[i].x;
+ let y = game.currentPiece.squares[i].y;
+ if (ifPieceInBoard(x, y)) {
+ finishGame();
return;
}
}
}
-function setSpeed(game) {
- if (game.level > 29) {
- game.speed = (speedSecondsToBotomPerLevel[29] / 20) * 1000;
+function finishGame(sendScore = true, gameOver = true) {
+ game.gameOver = true;
+ clearInterval(dropInterval);
+ clearInterval(leftInterval);
+ clearInterval(rightInterval);
+ clearInterval(refreshInterval);
+
+ clearInterval(endDropInterval);
+ endDropInterval = null;
+ opacityCurrentPiece = 1;
+ game.currentPiece = null;
+ dropInterval = null;
+ refreshInterval = null;
+
+ if (gameOver) {
+ displayGameOver();
+ } else {
+ displayMainMenu();
}
- else {
- game.speed = (speedSecondsToBotomPerLevel[game.level] / 20) * 1000;
+
+ if (sendScore) {
+ const playerName = prompt('Enter your name:');
+
+ sendScore(game, playerName);
}
}
-function endDrop(game) {
+async function sendScore(playerName) {
+ if (playerName) {
+
+ const data = {
+ score: game.score,
+ lines: game.lines,
+ playerName
+ };
+ console.log(data);
+
+ try {
+ // Send a PUT request to the server
+ const query = await fetch('/api/sendScore', {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify(data)
+ });
+
+ // Check if the response is ok before parsing
+ if (!query.ok) {
+ throw new Error(`Server returned ${query.status}: ${query.statusText}`);
+ }
+
+ // Check the content type to ensure it's JSON
+ const contentType = query.headers.get('content-type');
+ if (!contentType || !contentType.includes('application/json')) {
+ throw new Error('Server did not return JSON');
+ }
+
+ // Get the response body
+ const response = await query.json();
+
+ if (response.success) {
+ console.log('Score and history saved successfully');
+ }
+ else {
+ console.error('Error saving score and history:', response.error);
+ }
+ } catch (error) {
+ console.error('Failed to save score:', error.message);
+ alert('Could not save your score. Please try again later.');
+ }
+ }
+}
+
+function setSpeed() {
+ if (game.level > 29) {
+ game.speed = (speedSecondsToBottomPerLevel[29] / 20) * 1000;
+ }
+ else {
+ game.speed = (speedSecondsToBottomPerLevel[game.level] / 20) * 1000;
+ }
+}
+
+function endDrop() {
let piece = game.currentPiece;
// La pièce ne peut plus descendre, elle est fixée sur le plateau
@@ -278,18 +340,18 @@ function endDrop(game) {
}
}
-function fastDrop(game, piece = game.currentPiece) {
+function fastDrop(piece = game.currentPiece) {
if (piece) {
let canMoveDown = true;
while (canMoveDown) {
- canMoveDown = ifMoveDown(piece, game);
+ canMoveDown = ifMoveDown();
if (canMoveDown) {
- moveDown(piece);
+ moveDown();
}
}
- fixPieceToBoard(piece, game);
+ fixPieceToBoard();
clearInterval(endDropInterval);
endDropInterval = null; // Réinitialisez après l'arrêt
diff --git a/public/script/index.js b/public/script/index.js
index 3135ef0..a2985b3 100644
--- a/public/script/index.js
+++ b/public/script/index.js
@@ -231,7 +231,7 @@ function pauseGame() {
function iniGame() {
// Initialisation de la vitesse de chute
- speed = (speedSecondsToBotomPerLevel[level]/20) * 1000;
+ speed = (speedSecondsToBottomPerLevel[level]/20) * 1000;
spawnPiece();
@@ -521,10 +521,10 @@ function checkLine() {
function initAndChangeSpeedDrop() {
if (level > 29) {
- speed = (speedSecondsToBotomPerLevel[29]/20) * 1000;
+ speed = (speedSecondsToBottomPerLevel[29]/20) * 1000;
}
else {
- speed = (speedSecondsToBotomPerLevel[level]/20) * 1000;
+ speed = (speedSecondsToBottomPerLevel[level]/20) * 1000;
}
clearDownInterval();
downInterval = setInterval(() => {
diff --git a/public/script/magicVariable.js b/public/script/magicVariable.js
index b1d3581..c7772b7 100644
--- a/public/script/magicVariable.js
+++ b/public/script/magicVariable.js
@@ -1,4 +1,4 @@
-const speedSecondsToBotomPerLevel = [
+const speedSecondsToBottomPerLevel = [
15.974, //0
14.31, //1
12.646, //2
@@ -32,4 +32,11 @@ const speedSecondsToBotomPerLevel = [
];
const width = 10;
-const height = 20;
\ No newline at end of file
+const height = 20;
+
+const DOWNHISTORY = 1;
+const LEFTHISTORY = 2;
+const RIGHTHISTORY = 3;
+const ROTATEHISTORY = 4;
+const ENDPARTYHISTORY = 5;
+const ISNEXTHISTORY = 6;
\ No newline at end of file
diff --git a/public/script/menuController.js b/public/script/menuController.js
index ec99405..e1b2019 100644
--- a/public/script/menuController.js
+++ b/public/script/menuController.js
@@ -6,4 +6,13 @@ pauseButton.addEventListener('click', function() {
});
restartButton.addEventListener('click', function() {
initGame();
+});
+resumeButton.addEventListener('click', function() {
+ pauseGame();
+});
+mainMenuButton.addEventListener('click', function() {
+ finishGame(false, false);
+});
+mainMenuButtonBis.addEventListener('click', function() {
+ finishGame(false, false);
});
\ No newline at end of file
diff --git a/public/script/var.js b/public/script/var.js
index 0144f07..f3c8323 100644
--- a/public/script/var.js
+++ b/public/script/var.js
@@ -8,4 +8,6 @@ let refreshInterval = null;
let endDropInterval = null;
-let opacityCurrentPiece = 1;
\ No newline at end of file
+let opacityCurrentPiece = 1;
+
+let history = [];
\ No newline at end of file
diff --git a/public/style/index.css b/public/style/index.css
index 1ec2ed2..3821756 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -1,24 +1,30 @@
+@font-face {
+ font-family: 'PixelatedElegance';
+ src: url('../font/Pixeboy-z8XGD.ttf') format('truetype');
+}
+
body {
- margin: 0;
- display: flex;
- height: 100svh;
- place-items: center;
- background: repeating-conic-gradient(
- from 45deg,
+ margin: 0;
+ display: flex;
+ height: 100svh;
+ place-items: center;
+ background: repeating-conic-gradient(from 45deg,
#7FB196 0% 25%,
- #3C425A 0% 50%
- );
- background-size: max(10vw, 10svh) max(10vw, 10svh);
+ #3C425A 0% 50%);
+ background-size: max(10vw, 10svh) max(10vw, 10svh);
- font-family: 'Roboto', sans-serif;
-
- align-self: center;
- justify-content: center;
- flex-direction: row;
+ font-family: 'Roboto', sans-serif;
- justify-content: space-evenly;
+ align-self: center;
+ justify-content: center;
+ flex-direction: row;
- gap: 1rem;
+ justify-content: space-evenly;
+
+ gap: 1rem;
+
+ font-family: 'PixelatedElegance', monospace;
+ font-size: 1.5rem;
}
.container {
@@ -28,8 +34,8 @@ body {
}
.tetris {
- width: 300px;
- height: 600px;
+ width: 300px;
+ height: 600px;
}
.frame {
@@ -41,7 +47,8 @@ body {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
background: #414241a0;
- position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
+ position: relative;
+ /* Nécessaire pour le positionnement du pseudo-élément */
p {
padding: 0px;
@@ -57,10 +64,13 @@ body {
right: 0;
bottom: 0;
background: #4E4F4DA0;
- border-radius: 10px; /* Même border-radius que le parent */
+ 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 */
+ -webkit-backdrop-filter: blur(8px);
+ /* Pour Safari */
+ z-index: -1;
+ /* Assure que le fond est derrière le contenu */
}
.first {
@@ -81,25 +91,25 @@ body {
}
.main-menu {
- height: 100%;
-
- display: flex;
- flex-direction: column;
- gap: 1rem;
- align-items: center;
- justify-content: center;
+ height: 100%;
+
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+ justify-content: center;
}
.load-menu {
- height: 100%;
+ height: 100%;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- align-items: center;
- justify-content: center;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+ justify-content: center;
- color: white;
+ color: white;
}
.icon.play-pause {
@@ -107,18 +117,21 @@ body {
background: transparent;
box-sizing: border-box;
width: 0;
- height: 37px; /* Réduit de moitié (était 74px) */
+ 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) */
+ 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-width: 0px 0 0px 30px;
+ /* Réduit (était 60px) */
border-color: transparent transparent transparent #ff5e5e;
}
}
@@ -138,41 +151,53 @@ body {
}
.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;
+ 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)
}
- .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;
+
+ 60%,
+ 100% {
+ transform: translate(-50%, -50%) scale(1)
}
-
- @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)
}
- @keyframes pulse {
- 0% , 60% , 100%{ transform: scale(1) }
- 80% { transform: scale(1.2)}
+
+ 80% {
+ transform: scale(1.2)
}
-
- .hidden {
- display: none;
}
.scoreboard {
@@ -188,4 +213,37 @@ body {
.options {
width: 200px;
height: 600px;
+}
+
+.button {
+ background: #4E4F4DA0;
+ border-radius: 10px;
+ padding: 10px;
+ margin: 0px;
+
+ cursor: pointer;
+
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+}
+
+.menu {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ align-items: center;
+ justify-content: center;
+
+ height: 100%;
+ width: 100%;
+
+ color: white;
+}
+
+.hidden {
+ display: none;
}
\ No newline at end of file