add game logic, display functions, and menu controls for Tetris
This commit is contained in:
florian
parent
2d34f975bc
commit
154ef7f486
2
.gitignore
vendored
2
.gitignore
vendored
@ -148,3 +148,5 @@ fastdeliver.db
|
||||
api.http
|
||||
|
||||
node_modules
|
||||
|
||||
datas
|
||||
@ -4,8 +4,15 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Tetris on the web</title>
|
||||
<script src="./script/index.js" defer></script>
|
||||
<script src="./script/view.js" defer></script>
|
||||
<script src="./script/element.js" defer></script>
|
||||
<script src="./script/var.js" defer></script>
|
||||
<script src="./script/displayGameFunction.js" defer></script>
|
||||
<script src="./script/displayMenuFunction.js" defer></script>
|
||||
<script src="./script/contruct.js" defer></script>
|
||||
<script src="./script/magicVariable.js" defer></script>
|
||||
<script src="./script/gameFunction.js" defer></script>
|
||||
<script src="./script/controller.js" defer></script>
|
||||
<script src="./script/menuController.js" defer></script>
|
||||
<link rel="stylesheet" href="./style/index.css" />
|
||||
</head>
|
||||
|
||||
@ -37,7 +44,7 @@
|
||||
<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" id="main-menu" >
|
||||
<button id="start-button">Start</button>
|
||||
</div>
|
||||
<div class="gameOver hidden" id="game-over-menu">
|
||||
@ -50,7 +57,7 @@
|
||||
<button id="resume-button">Resume</button>
|
||||
<button id="main-menu">Main Menu</button>
|
||||
</div>
|
||||
<div class="load-menu" id="load-menu">
|
||||
<div class="load-menu hidden" id="load-menu">
|
||||
<span class="loader"></span>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
146
public/script/controller.js
Normal file
146
public/script/controller.js
Normal file
@ -0,0 +1,146 @@
|
||||
|
||||
function initGame() {
|
||||
displayGameBoard();
|
||||
|
||||
game = getGame();
|
||||
|
||||
setSpeed(game);
|
||||
|
||||
initOrChangeDropInterval(game.speed);
|
||||
|
||||
|
||||
// On rafraichit le plateau toutes les 16ms (environ 60 FPS)
|
||||
refreshInterval = setInterval(() => {
|
||||
refreshBoard(game.board);
|
||||
displayPreview(game);
|
||||
}, 16);
|
||||
}
|
||||
|
||||
function initOrChangeDropInterval(speed) {
|
||||
if (dropInterval) {
|
||||
clearInterval(dropInterval);
|
||||
}
|
||||
dropInterval = setInterval(() => {
|
||||
dropPiece();
|
||||
}, speed);
|
||||
}
|
||||
|
||||
function moveDownWithCheck(game) {
|
||||
let piece = game.currentPiece;
|
||||
|
||||
if (ifMoveDown(piece, game)) {
|
||||
opacityCurrentPiece = 1;
|
||||
|
||||
clearInterval(endDropInterval);
|
||||
|
||||
endDropInterval = null;
|
||||
|
||||
moveDown(piece);
|
||||
}
|
||||
|
||||
checkEnDrop(game);
|
||||
}
|
||||
|
||||
function checkEnDrop(game) {
|
||||
if (ifMoveDown(game.currentPiece, game)) {
|
||||
opacityCurrentPiece = 1;
|
||||
|
||||
clearInterval(endDropInterval);
|
||||
|
||||
endDropInterval = null;
|
||||
}
|
||||
else {
|
||||
endDrop(game);
|
||||
}
|
||||
}
|
||||
|
||||
function dropPiece() {
|
||||
moveDownWithCheck(game);
|
||||
}
|
||||
|
||||
function pauseGame() {
|
||||
if (game.paused) {
|
||||
game.paused = false;
|
||||
initOrChangeDropInterval(game.speed);
|
||||
refreshInterval = setInterval(() => {
|
||||
refreshBoard(game.board);
|
||||
displayPreview(game);
|
||||
}, 16);
|
||||
|
||||
displayGameBoard();
|
||||
} else {
|
||||
game.paused = true;
|
||||
clearInterval(dropInterval);
|
||||
clearInterval(refreshInterval);
|
||||
dropInterval = null;
|
||||
refreshInterval = null;
|
||||
endDropInterval = null;
|
||||
|
||||
displayPause()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
if (event.key == 'Escape' && !keyPress.includes('Escape')) {
|
||||
pauseGame();
|
||||
return;
|
||||
}
|
||||
if (game.paused) {
|
||||
return;
|
||||
}
|
||||
if (game.gameOver) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ((event.key == 'ArrowUp' || event.key == 'w' || event.key == 'z') && !keyPress.includes('ArrowUp') && !keyPress.includes('w') && !keyPress.includes('z')) {
|
||||
rotatePiece(game.currentPiece);
|
||||
checkEnDrop(game);
|
||||
|
||||
} else if ((event.key == 'ArrowDown' || event.key == 's') && !keyPress.includes('ArrowDown') && !keyPress.includes('s')) {
|
||||
initOrChangeDropInterval(60);
|
||||
} else if ((event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') && !keyPress.includes('ArrowLeft') && !keyPress.includes('q') && !keyPress.includes('a')) {
|
||||
moveLeft(game.currentPiece);
|
||||
checkEnDrop(game);
|
||||
|
||||
leftInterval = setInterval(() => {
|
||||
moveLeft(game.currentPiece);
|
||||
checkEnDrop(game);
|
||||
|
||||
}, 100);
|
||||
} else if (((event.key == 'ArrowRight') || event.key == 'd') && !keyPress.includes('ArrowRight') && !keyPress.includes('d')) {
|
||||
moveRight(game.currentPiece);
|
||||
|
||||
checkEnDrop(game);
|
||||
|
||||
|
||||
rightInterval = setInterval(() => {
|
||||
moveRight(game.currentPiece);
|
||||
|
||||
checkEnDrop(game);
|
||||
|
||||
}, 100);
|
||||
} else if (event.key == ' ' && !keyPress.includes(' ')) {
|
||||
fastDrop(game);
|
||||
}
|
||||
|
||||
console.log(event.key);
|
||||
|
||||
keyPress.push(event.key);
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', (event) => {
|
||||
if (!game.paused && !game.gameOver) {
|
||||
if (event.key == 'ArrowDown' || event.key == 's') {
|
||||
initOrChangeDropInterval(game.speed);
|
||||
} else if (event.key == 'ArrowLeft' || event.key == 'a' || event.key == 'q') {
|
||||
clearInterval(leftInterval);
|
||||
} else if (event.key == 'ArrowRight' || event.key == 'd') {
|
||||
clearInterval(rightInterval);
|
||||
}
|
||||
}
|
||||
|
||||
keyPress = keyPress.filter((key) => {
|
||||
return key != event.key;
|
||||
});
|
||||
});
|
||||
160
public/script/contruct.js
Normal file
160
public/script/contruct.js
Normal file
@ -0,0 +1,160 @@
|
||||
function getGame() {
|
||||
return {
|
||||
board: [],
|
||||
currentPiece: getRandomPiece(),
|
||||
nextPiece: getRandomPiece(),
|
||||
score: 0,
|
||||
level: 1,
|
||||
speed: 1000,
|
||||
lines: 0,
|
||||
linesCleared: 0,
|
||||
paused: false,
|
||||
gameOver: false
|
||||
}
|
||||
}
|
||||
|
||||
function getColor(r, g, b) {
|
||||
return {
|
||||
red: r,
|
||||
green: g,
|
||||
blue: b
|
||||
}
|
||||
}
|
||||
|
||||
function getSquare(xPos, yPos, c) {
|
||||
return {
|
||||
color: c,
|
||||
x: xPos,
|
||||
y: yPos
|
||||
}
|
||||
}
|
||||
|
||||
function getBarPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 0, getColor(240, 87, 84)),
|
||||
getSquare(4, 0, getColor(240, 87, 84)),
|
||||
getSquare(5, 0, getColor(240, 87, 84)),
|
||||
getSquare(6, 0, getColor(240, 87, 84))
|
||||
],
|
||||
xCenter: 4.5,
|
||||
yCenter: 0.5
|
||||
}
|
||||
}
|
||||
|
||||
function getLPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 1, getColor(254, 223, 92)),
|
||||
getSquare(4, 1, getColor(254, 223, 92)),
|
||||
getSquare(5, 1, getColor(254, 223, 92)),
|
||||
getSquare(5, 0, getColor(254, 223, 92))
|
||||
],
|
||||
xCenter: 4,
|
||||
yCenter: 1
|
||||
}
|
||||
}
|
||||
|
||||
function getJPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 1, getColor(27, 148, 118)),
|
||||
getSquare(4, 1, getColor(27, 148, 118)),
|
||||
getSquare(5, 1, getColor(27, 148, 118)),
|
||||
getSquare(3, 0, getColor(27, 148, 118))
|
||||
],
|
||||
xCenter: 4,
|
||||
yCenter: 1
|
||||
}
|
||||
}
|
||||
|
||||
function getTPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 1, getColor(36, 115, 155)),
|
||||
getSquare(4, 1, getColor(36, 115, 155)),
|
||||
getSquare(5, 1, getColor(36, 115, 155)),
|
||||
getSquare(4, 0, getColor(36, 115, 155))
|
||||
],
|
||||
xCenter: 4,
|
||||
yCenter: 1
|
||||
}
|
||||
}
|
||||
|
||||
function getZPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 1, getColor(106, 190, 178)),
|
||||
getSquare(4, 1, getColor(106, 190, 178)),
|
||||
getSquare(4, 0, getColor(106, 190, 178)),
|
||||
getSquare(5, 0, getColor(106, 190, 178))
|
||||
],
|
||||
xCenter: 4,
|
||||
yCenter: 1
|
||||
}
|
||||
}
|
||||
|
||||
function getSPiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 0, getColor(164, 199, 218)),
|
||||
getSquare(4, 0, getColor(164, 199, 218)),
|
||||
getSquare(4, 1, getColor(164, 199, 218)),
|
||||
getSquare(5, 1, getColor(164, 199, 218))
|
||||
],
|
||||
xCenter: 4,
|
||||
yCenter: 1
|
||||
}
|
||||
}
|
||||
|
||||
function getSquarePiece() {
|
||||
return {
|
||||
squares: [
|
||||
getSquare(3, 0, getColor(177, 225, 218)),
|
||||
getSquare(4, 0, getColor(177, 225, 218)),
|
||||
getSquare(3, 1, getColor(177, 225, 218)),
|
||||
getSquare(4, 1, getColor(177, 225, 218))
|
||||
],
|
||||
xCenter: 3.5,
|
||||
yCenter: 0.5
|
||||
}
|
||||
}
|
||||
|
||||
function getPiece(type) {
|
||||
switch (type) {
|
||||
case 'bar':
|
||||
return getBarPiece();
|
||||
case 'L':
|
||||
return getLPiece();
|
||||
case 'J':
|
||||
return getJPiece();
|
||||
case 'T':
|
||||
return getTPiece();
|
||||
case 'Z':
|
||||
return getZPiece();
|
||||
case 'S':
|
||||
return getSPiece();
|
||||
case 'square':
|
||||
return getSquarePiece();
|
||||
}
|
||||
}
|
||||
|
||||
function getRandomPiece() {
|
||||
const pieces = ['bar', 'L', 'J', 'T', 'Z', 'S', 'square'];
|
||||
const randomIndex = Math.floor(Math.random() * pieces.length);
|
||||
return getPiece(pieces[randomIndex]);
|
||||
}
|
||||
|
||||
function clonePiece(piece) {
|
||||
let newSquares = piece.squares.map(square => ({
|
||||
color: { ...square.color },
|
||||
x: square.x,
|
||||
y: square.y
|
||||
}));
|
||||
|
||||
return {
|
||||
squares: newSquares,
|
||||
xCenter: piece.xCenter,
|
||||
yCenter: piece.yCenter
|
||||
};
|
||||
}
|
||||
152
public/script/displayGameFunction.js
Normal file
152
public/script/displayGameFunction.js
Normal file
@ -0,0 +1,152 @@
|
||||
let boardContext = board.getContext('2d');
|
||||
let previewContext = preview.getContext('2d');
|
||||
|
||||
function clearBoard() {
|
||||
// Ajouter un motif subtil en arrière-plan
|
||||
|
||||
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 = '#6d728020'; // Encore plus sombre
|
||||
}
|
||||
else {
|
||||
boardContext.fillStyle = '#3d425020'; // Presque noir-bleuté
|
||||
}
|
||||
boardContext.fillRect(
|
||||
i * board.width/10,
|
||||
j * board.height/20,
|
||||
board.width/10,
|
||||
board.height/20
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 drawCurrentPiece() {
|
||||
let piece = game.currentPiece;
|
||||
let squares = piece.squares;
|
||||
|
||||
for (let i = 0; i < squares.length; i++) {
|
||||
let square = squares[i];
|
||||
drawSquare(square.x, square.y, square, opacityCurrentPiece);
|
||||
}
|
||||
}
|
||||
|
||||
function drawSquare(x, y, square, opacity = 1) {
|
||||
let color = square.color;
|
||||
|
||||
boardContext.fillStyle = '#303f4f'; // Couleur de fond
|
||||
boardContext.fillRect(
|
||||
x * board.width/10,
|
||||
y * board.height/20,
|
||||
board.width/10,
|
||||
board.height/20
|
||||
);
|
||||
|
||||
let margin = 3;
|
||||
|
||||
boardContext.fillStyle = `rgba(${color.red}, ${color.green}, ${color.blue}, ${opacity})`;
|
||||
boardContext.fillRect(
|
||||
x * board.width/10 + margin,
|
||||
y * board.height/20 + margin,
|
||||
board.width/10 - margin * 2,
|
||||
board.height/20 - margin * 2
|
||||
);
|
||||
}
|
||||
|
||||
function refreshBoard() {
|
||||
clearBoard();
|
||||
drawGrid();
|
||||
|
||||
for (let i = 0; i < game.board.length; i++) {
|
||||
let square = game.board[i];
|
||||
drawSquare(square.x, square.y, square);
|
||||
}
|
||||
|
||||
drawCurrentPiece();
|
||||
}
|
||||
|
||||
function displayPreview(game) {
|
||||
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 nextPiece = game.nextPiece;
|
||||
|
||||
let xDif = nextPiece.xCenter - 2;
|
||||
let yDif = nextPiece.yCenter - 2;
|
||||
|
||||
for (let i = 0; i < nextPiece.squares.length; i++) {
|
||||
let square = nextPiece.squares[i];
|
||||
|
||||
previewContext.fillStyle = '#303f4f'; // Couleur de fond
|
||||
previewContext.fillRect(
|
||||
(square.x - xDif) * preview.width/5,
|
||||
(square.y - yDif) * preview.height/5,
|
||||
preview.width/5,
|
||||
preview.height/5
|
||||
);
|
||||
|
||||
let margin = 3;
|
||||
|
||||
previewContext.fillStyle = `rgba(${square.color.red}, ${square.color.green}, ${square.color.blue}, 1)`;
|
||||
|
||||
previewContext.fillRect(
|
||||
(square.x - xDif) * preview.width/5 + margin,
|
||||
(square.y - yDif) * preview.height/5 + margin,
|
||||
preview.width/5 - margin * 2,
|
||||
preview.height/5 - margin * 2
|
||||
);
|
||||
}
|
||||
}
|
||||
39
public/script/displayMenuFunction.js
Normal file
39
public/script/displayMenuFunction.js
Normal file
@ -0,0 +1,39 @@
|
||||
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');
|
||||
boardContainer.classList.add('hidden');
|
||||
|
||||
pauseButton.classList.add('paused');
|
||||
pauseMenu.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function displayGameBoard() {
|
||||
mainMenu.classList.add('hidden');
|
||||
loadMenu.classList.add('hidden');
|
||||
pauseMenu.classList.add('hidden');
|
||||
gameOverMenu.classList.add('hidden');
|
||||
pauseButton.classList.remove('paused');
|
||||
buttonContainer.classList.remove('hidden');
|
||||
|
||||
boardContainer.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function displayGameOver() {
|
||||
mainMenu.classList.add('hidden');
|
||||
loadMenu.classList.add('hidden');
|
||||
boardContainer.classList.add('hidden');
|
||||
pauseButton.classList.remove('paused');
|
||||
buttonContainer.classList.add('hidden');
|
||||
|
||||
gameOverMenu.classList.remove('hidden');
|
||||
}
|
||||
24
public/script/element.js
Normal file
24
public/script/element.js
Normal file
@ -0,0 +1,24 @@
|
||||
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');
|
||||
const pauseMenu = document.getElementById('pause-menu');
|
||||
|
||||
const startButton = document.getElementById('start-button');
|
||||
const pauseButton = document.getElementById('pause-button');
|
||||
|
||||
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');
|
||||
|
||||
const highScoreTemplate = document.getElementById('high-score-template');
|
||||
|
||||
const highScoresList = document.getElementById('high-scores-list');
|
||||
301
public/script/gameFunction.js
Normal file
301
public/script/gameFunction.js
Normal file
@ -0,0 +1,301 @@
|
||||
function ifPieceInBoard(x, y, game) {
|
||||
let board = game.board;
|
||||
|
||||
if (x < 0 || x >= width || y >= height) {
|
||||
return true;
|
||||
}
|
||||
|
||||
for (let i = 0; i < board.length; i++) {
|
||||
if (board[i].x === x && board[i].y === y) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function ifMovePiece(x, y, piece, game) {
|
||||
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)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function ifMoveDown(piece, game) {
|
||||
return ifMovePiece(0, 1, piece, game);
|
||||
}
|
||||
|
||||
function ifMoveLeft(piece, game) {
|
||||
return ifMovePiece(-1, 0, piece, game);
|
||||
}
|
||||
|
||||
function ifMoveRight(piece, game) {
|
||||
return ifMovePiece(1, 0, piece, game);
|
||||
}
|
||||
|
||||
function ifRotate(piece, game) {
|
||||
let centerX = piece.xCenter;
|
||||
let centerY = piece.yCenter;
|
||||
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
let x = square.x - centerX;
|
||||
let y = square.y - centerY;
|
||||
|
||||
let newX = -y + centerX;
|
||||
let newY = x + centerY;
|
||||
|
||||
if (ifPieceInBoard(newX, newY, game)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function moveDown(piece) {
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
square.y += 1;
|
||||
}
|
||||
|
||||
piece.yCenter += 1;
|
||||
}
|
||||
|
||||
function moveLeft(piece) {
|
||||
if (!ifMoveLeft(piece, game)) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
square.x -= 1;
|
||||
}
|
||||
|
||||
piece.xCenter -= 1;
|
||||
}
|
||||
|
||||
function moveRight(piece) {
|
||||
if (!ifMoveRight(piece, game)) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
square.x += 1;
|
||||
}
|
||||
|
||||
piece.xCenter += 1;
|
||||
}
|
||||
|
||||
function ifCantRotate(piece, game) {
|
||||
let centerX = piece.xCenter;
|
||||
let centerY = piece.yCenter;
|
||||
|
||||
let moveX = [0, -1, 1, -2, 2];
|
||||
let moveY = [0, -1];
|
||||
|
||||
for (let i = 0; i < moveX.length; i++) {
|
||||
for (let j = 0; j < moveY.length; j++) {
|
||||
let pieceBis = clonePiece(piece);
|
||||
|
||||
pieceBis.xCenter += moveX[i];
|
||||
pieceBis.yCenter += moveY[j];
|
||||
|
||||
for (let k = 0; k < pieceBis.squares.length; k++) {
|
||||
let square = pieceBis.squares[k];
|
||||
square.x += moveX[i];
|
||||
square.y += moveY[j];
|
||||
}
|
||||
|
||||
if (ifRotate(pieceBis, game)) {
|
||||
return [false, moveX[i], moveY[j]];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return [true, centerX, centerY];
|
||||
}
|
||||
|
||||
function rotatePiece(piece) {
|
||||
if (!ifRotate(piece, game)) {
|
||||
let info = ifCantRotate(piece, game);
|
||||
let canRotate = info[0];
|
||||
let x = info[1];
|
||||
let y = info[2];
|
||||
|
||||
if (canRotate) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
square.x += x;
|
||||
square.y += y;
|
||||
}
|
||||
piece.xCenter += x;
|
||||
piece.yCenter += y;
|
||||
}
|
||||
|
||||
let centerX = piece.xCenter;
|
||||
let centerY = piece.yCenter;
|
||||
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
let x = square.x - centerX;
|
||||
let y = square.y - centerY;
|
||||
|
||||
square.x = -y + centerX;
|
||||
square.y = x + centerY;
|
||||
}
|
||||
}
|
||||
|
||||
function fixPieceToBoard(piece, game) {
|
||||
for (let i = 0; i < piece.squares.length; i++) {
|
||||
let square = piece.squares[i];
|
||||
game.board.push(square);
|
||||
}
|
||||
|
||||
opacityCurrentPiece = 1;
|
||||
|
||||
checkLine(game);
|
||||
// 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) {
|
||||
let lineFilled = [];
|
||||
|
||||
for (let i = 0; i < 20; i++) {
|
||||
let filled = true;
|
||||
for (let j = 0; j < 10; j++) {
|
||||
if (!ifPieceInBoard(j, i, game)) {
|
||||
filled = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (filled) {
|
||||
lineFilled.push(i);
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < game.board.length; i++) {
|
||||
let square = game.board[i];
|
||||
let y = square.y;
|
||||
|
||||
if (!ifNoFall) {
|
||||
for (let j = 0; j < lineFilled.length; j++) {
|
||||
if (lineFilled[j] > y) {
|
||||
square.y += 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (lineFilled.includes(y)) {
|
||||
game.board.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (lineFilled.length == 1) {
|
||||
game.score += 40;
|
||||
}
|
||||
else if (lineFilled.length == 2) {
|
||||
game.score += 100;
|
||||
}
|
||||
else if (lineFilled.length == 3) {
|
||||
game.score += 300;
|
||||
}
|
||||
else if (lineFilled.length == 4) {
|
||||
game.score += 1200;
|
||||
}
|
||||
|
||||
scoreElement.innerText = game.score;
|
||||
game.lines += lineFilled.length;
|
||||
game.level = Math.floor(game.lines / 10);
|
||||
}
|
||||
|
||||
function switchPiece(game) {
|
||||
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();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setSpeed(game) {
|
||||
if (game.level > 29) {
|
||||
game.speed = (speedSecondsToBotomPerLevel[29] / 20) * 1000;
|
||||
}
|
||||
else {
|
||||
game.speed = (speedSecondsToBotomPerLevel[game.level] / 20) * 1000;
|
||||
}
|
||||
}
|
||||
|
||||
function endDrop(game) {
|
||||
let piece = game.currentPiece;
|
||||
|
||||
// La pièce ne peut plus descendre, elle est fixée sur le plateau
|
||||
if (!endDropInterval) { // Vérifiez qu'il n'y a pas déjà un intervalle actif
|
||||
endDropInterval = setInterval(() => {
|
||||
opacityCurrentPiece -= 0.1;
|
||||
if (opacityCurrentPiece <= 0) {
|
||||
|
||||
fixPieceToBoard(piece, game);
|
||||
|
||||
clearInterval(endDropInterval);
|
||||
endDropInterval = null; // Réinitialisez après l'arrêt
|
||||
opacityCurrentPiece = 1;
|
||||
switchPiece(game);
|
||||
setSpeed(game);
|
||||
initOrChangeDropInterval(game.speed);
|
||||
}
|
||||
}, 60);
|
||||
}
|
||||
}
|
||||
|
||||
function fastDrop(game, piece = game.currentPiece) {
|
||||
if (piece) {
|
||||
let canMoveDown = true;
|
||||
|
||||
while (canMoveDown) {
|
||||
canMoveDown = ifMoveDown(piece, game);
|
||||
if (canMoveDown) {
|
||||
moveDown(piece);
|
||||
}
|
||||
}
|
||||
|
||||
fixPieceToBoard(piece, game);
|
||||
|
||||
clearInterval(endDropInterval);
|
||||
endDropInterval = null; // Réinitialisez après l'arrêt
|
||||
opacityCurrentPiece = 1;
|
||||
setSpeed(game);
|
||||
initOrChangeDropInterval(game.speed);
|
||||
switchPiece(game);
|
||||
}
|
||||
}
|
||||
35
public/script/magicVariable.js
Normal file
35
public/script/magicVariable.js
Normal file
@ -0,0 +1,35 @@
|
||||
const speedSecondsToBotomPerLevel = [
|
||||
15.974, //0
|
||||
14.31, //1
|
||||
12.646, //2
|
||||
10.982, //3
|
||||
9.318, //4
|
||||
7.654, //5
|
||||
5.99, //6
|
||||
4.326, //7
|
||||
2.662, //8
|
||||
1.997, //9
|
||||
1.664, //10
|
||||
1.664, //11
|
||||
1.664, //12
|
||||
1.331, //13
|
||||
1.331, //14
|
||||
1.331, //15
|
||||
0.998, //16
|
||||
0.998, //17
|
||||
0.998, //18
|
||||
0.666, //19
|
||||
0.666, //20
|
||||
0.666, //21
|
||||
0.666, //22
|
||||
0.666, //23
|
||||
0.666, //24
|
||||
0.666, //25
|
||||
0.666, //26
|
||||
0.666, //27
|
||||
0.666, //28
|
||||
0.333 //29
|
||||
];
|
||||
|
||||
const width = 10;
|
||||
const height = 20;
|
||||
9
public/script/menuController.js
Normal file
9
public/script/menuController.js
Normal file
@ -0,0 +1,9 @@
|
||||
startButton.addEventListener('click', function() {
|
||||
initGame();
|
||||
});
|
||||
pauseButton.addEventListener('click', function() {
|
||||
pauseGame();
|
||||
});
|
||||
restartButton.addEventListener('click', function() {
|
||||
initGame();
|
||||
});
|
||||
11
public/script/var.js
Normal file
11
public/script/var.js
Normal file
@ -0,0 +1,11 @@
|
||||
let game = null;
|
||||
let keyPress = [];
|
||||
let dropInterval = null;
|
||||
let leftInterval = null;
|
||||
let rightInterval = null;
|
||||
|
||||
let refreshInterval = null;
|
||||
|
||||
let endDropInterval = null;
|
||||
|
||||
let opacityCurrentPiece = 1;
|
||||
Loading…
x
Reference in New Issue
Block a user