ajout du jeu tetris
This commit is contained in:
@@ -22,6 +22,8 @@
|
|||||||
<nav class="game" aria-label="Game">
|
<nav class="game" aria-label="Game">
|
||||||
<button class="game__item" data-action="new_game" aria-label="Start new game"
|
<button class="game__item" data-action="new_game" aria-label="Start new game"
|
||||||
onclick="window.location.href='game.html'">Start new game</button>
|
onclick="window.location.href='game.html'">Start new game</button>
|
||||||
|
<button class="game__item" data-action="tetris" aria-label="Tetris"
|
||||||
|
onclick="window.location.href='tetris.html'">Tetris</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<script type="module" src="app.js"></script>
|
<script type="module" src="app.js"></script>
|
||||||
|
|||||||
@@ -0,0 +1,862 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TETRIS</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #070712;
|
||||||
|
--panel: #0d0d1f;
|
||||||
|
--border: #1a1a3e;
|
||||||
|
--accent: #00ffe7;
|
||||||
|
--accent2:#ff00aa;
|
||||||
|
--dim: #3a3a6a;
|
||||||
|
--text: #c0c0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
font-family: 'Share Tech Mono', monospace;
|
||||||
|
color: var(--text);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(0,255,231,0.03) 1px, transparent 1px),
|
||||||
|
linear-gradient(90deg, rgba(0,255,231,0.03) 1px, transparent 1px);
|
||||||
|
background-size: 40px 40px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 2.2rem;
|
||||||
|
letter-spacing: 0.4em;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
align-items: flex-start;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: var(--panel);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 14px;
|
||||||
|
width: 130px;
|
||||||
|
box-shadow: 0 0 20px rgba(0,255,231,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--accent);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas { display: block; border-radius: 4px; }
|
||||||
|
|
||||||
|
#canvas-main {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
box-shadow: 0 0 30px rgba(0,255,231,0.08), inset 0 0 30px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas-next, #canvas-hold {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-block {
|
||||||
|
margin-top: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-label {
|
||||||
|
font-size: 0.55rem;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score-value {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--accent);
|
||||||
|
text-shadow: 0 0 10px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
padding: 10px 8px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
background: transparent;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-start { color: var(--accent); border-color: var(--accent); }
|
||||||
|
#btn-start:hover:not(:disabled) { background: var(--accent); color: var(--bg); box-shadow: 0 0 15px var(--accent); }
|
||||||
|
|
||||||
|
#btn-pause { color: var(--accent2); border-color: var(--accent2); }
|
||||||
|
#btn-pause:hover:not(:disabled) { background: var(--accent2); color: var(--bg); box-shadow: 0 0 15px var(--accent2); }
|
||||||
|
|
||||||
|
#btn-stop { color: #ef4444; border-color: #ef4444; }
|
||||||
|
#btn-stop:hover:not(:disabled) { background: #ef4444; color: var(--bg); box-shadow: 0 0 15px #ef4444; }
|
||||||
|
|
||||||
|
button:disabled { opacity: 0.3; cursor: not-allowed; }
|
||||||
|
|
||||||
|
.controls-list {
|
||||||
|
margin-top: 14px;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
line-height: 2;
|
||||||
|
color: var(--dim);
|
||||||
|
}
|
||||||
|
.controls-list span { color: var(--text); }
|
||||||
|
|
||||||
|
#main-wrapper { position: relative; }
|
||||||
|
|
||||||
|
#overlay {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 600px;
|
||||||
|
background: rgba(7,7,18,0.88);
|
||||||
|
border-radius: 4px;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#overlay.visible { display: flex; }
|
||||||
|
|
||||||
|
#overlay-title {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: var(--accent2);
|
||||||
|
text-shadow: 0 0 20px var(--accent2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay-score {
|
||||||
|
font-family: 'Orbitron', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>TETRIS</h1>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
|
||||||
|
<!-- Panneau gauche : Hold + Score + Boutons -->
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">Hold</div>
|
||||||
|
<canvas id="canvas-hold" width="100" height="80"></canvas>
|
||||||
|
|
||||||
|
<div class="score-block">
|
||||||
|
<div class="score-label">Score</div>
|
||||||
|
<div class="score-value" id="score-display">0</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-group">
|
||||||
|
<button id="btn-start">Start</button>
|
||||||
|
<button id="btn-pause" disabled>Pause</button>
|
||||||
|
<button id="btn-stop" disabled>Stop</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Grille principale -->
|
||||||
|
<div id="main-wrapper">
|
||||||
|
<canvas id="canvas-main" width="300" height="600"></canvas>
|
||||||
|
<div id="overlay">
|
||||||
|
<div id="overlay-title">GAME OVER</div>
|
||||||
|
<div id="overlay-score"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Panneau droit : Next + Contrôles -->
|
||||||
|
<div class="panel">
|
||||||
|
<div class="panel-title">Next</div>
|
||||||
|
<canvas id="canvas-next" width="100" height="80"></canvas>
|
||||||
|
|
||||||
|
<div class="controls-list">
|
||||||
|
<div><span>← →</span> Déplacer</div>
|
||||||
|
<div><span>↓</span> Descendre</div>
|
||||||
|
<div><span>Q</span> Rot. gauche</div>
|
||||||
|
<div><span>W</span> Rot. droite</div>
|
||||||
|
<div><span>Espace</span> Drop</div>
|
||||||
|
<div><span>C</span> Hold</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// PIÈCES
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
class Piece {
|
||||||
|
constructor(startX, startY) {
|
||||||
|
this.position = { x: startX, y: startY };
|
||||||
|
this.currentRotation = 0;
|
||||||
|
this.rotations = this.defineRotations();
|
||||||
|
this.shape = this.rotations[0];
|
||||||
|
this.color = this.getColor();
|
||||||
|
}
|
||||||
|
defineRotations() { return [[[1]]]; }
|
||||||
|
getColor() { return 1; }
|
||||||
|
getPosition() { return { ...this.position }; }
|
||||||
|
getShape() { return this.shape; }
|
||||||
|
moveDown() { this.position.y++; }
|
||||||
|
moveLeft() { this.position.x--; }
|
||||||
|
moveRight() { this.position.x++; }
|
||||||
|
rotateLeft() {
|
||||||
|
this.currentRotation = (this.currentRotation - 1 + this.rotations.length) % this.rotations.length;
|
||||||
|
this.shape = this.rotations[this.currentRotation];
|
||||||
|
}
|
||||||
|
rotateRight() {
|
||||||
|
this.currentRotation = (this.currentRotation + 1) % this.rotations.length;
|
||||||
|
this.shape = this.rotations[this.currentRotation];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceT extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,1,0],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,1],[0,1,0]],
|
||||||
|
[[0,0,0],[1,1,1],[0,1,0]],
|
||||||
|
[[0,1,0],[1,1,0],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceL extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,0,1],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,0],[0,1,1]],
|
||||||
|
[[0,0,0],[1,1,1],[1,0,0]],
|
||||||
|
[[1,1,0],[0,1,0],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceReverseL extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[1,0,0],[1,1,1],[0,0,0]],
|
||||||
|
[[0,1,1],[0,1,0],[0,1,0]],
|
||||||
|
[[0,0,0],[1,1,1],[0,0,1]],
|
||||||
|
[[0,1,0],[0,1,0],[1,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 3; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceI extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
|
||||||
|
[[0,0,1,0],[0,0,1,0],[0,0,1,0],[0,0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceZ extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[1,1,0],[0,1,1],[0,0,0]],
|
||||||
|
[[0,0,1],[0,1,1],[0,1,0]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceReverseZ extends Piece {
|
||||||
|
defineRotations() {
|
||||||
|
return [
|
||||||
|
[[0,1,1],[1,1,0],[0,0,0]],
|
||||||
|
[[0,1,0],[0,1,1],[0,0,1]]
|
||||||
|
];
|
||||||
|
}
|
||||||
|
getColor() { return 6; }
|
||||||
|
}
|
||||||
|
|
||||||
|
class PieceO extends Piece {
|
||||||
|
defineRotations() { return [[[1,1],[1,1]]]; }
|
||||||
|
getColor() { return 7; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// LOGIQUE TETRIS
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
class Tetris {
|
||||||
|
constructor(onRender, onGameOver) {
|
||||||
|
this.onRender = onRender;
|
||||||
|
this.onGameOver = onGameOver;
|
||||||
|
|
||||||
|
this.grid = this._createGrid(10, 20);
|
||||||
|
this.bufferGrid = this._createGrid(10, 5);
|
||||||
|
this.currentPiece = null;
|
||||||
|
this.storedPiece = null;
|
||||||
|
this.nextPiece = null;
|
||||||
|
|
||||||
|
this.score = 0;
|
||||||
|
this.timeToDown = 1000;
|
||||||
|
this.harding = 1000;
|
||||||
|
this.decrementTTD = 20;
|
||||||
|
|
||||||
|
this.isRunning = false;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.canStore = true;
|
||||||
|
|
||||||
|
this.animationFrameId = null;
|
||||||
|
this.lastTime = 0;
|
||||||
|
this.accumulator = 0;
|
||||||
|
|
||||||
|
this._keyHandler = this._handleKey.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_createGrid(w, h) {
|
||||||
|
return Array.from({ length: h }, () => Array(w).fill(0));
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
if (this.isRunning) return;
|
||||||
|
this.isRunning = true;
|
||||||
|
this.isPaused = false;
|
||||||
|
this.grid = this._createGrid(10, 20);
|
||||||
|
this.score = 0;
|
||||||
|
this.timeToDown = 1000;
|
||||||
|
this.storedPiece = null;
|
||||||
|
this.canStore = true;
|
||||||
|
this._spawnNewPiece();
|
||||||
|
document.addEventListener('keydown', this._keyHandler);
|
||||||
|
this._startGameLoop();
|
||||||
|
}
|
||||||
|
|
||||||
|
stop() {
|
||||||
|
this.isRunning = false;
|
||||||
|
this.isPaused = false;
|
||||||
|
if (this.animationFrameId !== null) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId);
|
||||||
|
this.animationFrameId = null;
|
||||||
|
}
|
||||||
|
this.accumulator = 0;
|
||||||
|
this.lastTime = 0;
|
||||||
|
document.removeEventListener('keydown', this._keyHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
pause() {
|
||||||
|
if (!this.isRunning) return;
|
||||||
|
this.isPaused = !this.isPaused;
|
||||||
|
if (!this.isPaused) {
|
||||||
|
this.lastTime = 0;
|
||||||
|
this._startGameLoop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_startGameLoop() {
|
||||||
|
this.lastTime = 0;
|
||||||
|
this.accumulator = 0;
|
||||||
|
|
||||||
|
const gameLoop = (currentTime) => {
|
||||||
|
if (!this.isRunning) return;
|
||||||
|
|
||||||
|
if (this.isPaused) {
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.lastTime === 0) {
|
||||||
|
this.lastTime = currentTime;
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const deltaTime = currentTime - this.lastTime;
|
||||||
|
this.lastTime = currentTime;
|
||||||
|
this.accumulator += deltaTime;
|
||||||
|
|
||||||
|
while (this.accumulator >= this.timeToDown) {
|
||||||
|
this._tick();
|
||||||
|
this.accumulator -= this.timeToDown;
|
||||||
|
if (this.accumulator > this.timeToDown * 3) {
|
||||||
|
this.accumulator = 0;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onRender();
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.animationFrameId = requestAnimationFrame(gameLoop);
|
||||||
|
}
|
||||||
|
|
||||||
|
_tick() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
if (this._canMoveDown()) {
|
||||||
|
this.currentPiece.moveDown();
|
||||||
|
} else {
|
||||||
|
this._lockPiece();
|
||||||
|
this.verifierLignes();
|
||||||
|
this._makeHarder();
|
||||||
|
this._spawnNewPiece();
|
||||||
|
this.canStore = true;
|
||||||
|
if (!this._canSpawn()) this._gameOver();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_handleKey(e) {
|
||||||
|
if (!this.isRunning || !this.currentPiece) return;
|
||||||
|
|
||||||
|
switch (e.key) {
|
||||||
|
case 'ArrowLeft':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveLeft()) this.currentPiece.moveLeft();
|
||||||
|
break;
|
||||||
|
case 'ArrowRight':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveRight()) this.currentPiece.moveRight();
|
||||||
|
break;
|
||||||
|
case 'ArrowDown':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused && this._canMoveDown()) {
|
||||||
|
this.currentPiece.moveDown();
|
||||||
|
this.score += 1;
|
||||||
|
this.accumulator = 0;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case ' ':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._hardDrop();
|
||||||
|
break;
|
||||||
|
case 'q': case 'Q':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._rotatePiece(-1);
|
||||||
|
break;
|
||||||
|
case 'w': case 'W':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._rotatePiece(1);
|
||||||
|
break;
|
||||||
|
case 'c': case 'C':
|
||||||
|
e.preventDefault();
|
||||||
|
if (!this.isPaused) this._storePiece();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onRender();
|
||||||
|
}
|
||||||
|
|
||||||
|
_hardDrop() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
let dist = 0;
|
||||||
|
while (this._canMoveDown()) { this.currentPiece.moveDown(); dist++; }
|
||||||
|
this.score += dist * 2;
|
||||||
|
this._lockPiece();
|
||||||
|
this.verifierLignes();
|
||||||
|
this._makeHarder();
|
||||||
|
this._spawnNewPiece();
|
||||||
|
this.canStore = true;
|
||||||
|
this.accumulator = 0;
|
||||||
|
if (!this._canSpawn()) this._gameOver();
|
||||||
|
}
|
||||||
|
|
||||||
|
_rotatePiece(direction) {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
const originalPos = { ...this.currentPiece.getPosition() };
|
||||||
|
|
||||||
|
if (direction === -1) this.currentPiece.rotateLeft();
|
||||||
|
else this.currentPiece.rotateRight();
|
||||||
|
|
||||||
|
if (!this._isValidPosition()) {
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveLeft();
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
this.currentPiece.moveRight();
|
||||||
|
this.currentPiece.position.y--;
|
||||||
|
if (this._isValidPosition()) return;
|
||||||
|
|
||||||
|
this.currentPiece.position.y = originalPos.y;
|
||||||
|
this.currentPiece.position.x = originalPos.x;
|
||||||
|
if (direction === -1) this.currentPiece.rotateRight();
|
||||||
|
else this.currentPiece.rotateLeft();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_storePiece() {
|
||||||
|
if (!this.canStore || !this.currentPiece) return;
|
||||||
|
|
||||||
|
if (this.storedPiece === null) {
|
||||||
|
this.storedPiece = this.currentPiece;
|
||||||
|
this._spawnNewPiece();
|
||||||
|
} else {
|
||||||
|
const temp = this.storedPiece;
|
||||||
|
this.storedPiece = this.currentPiece;
|
||||||
|
this.currentPiece = temp;
|
||||||
|
this.currentPiece.position.x = 3;
|
||||||
|
this.currentPiece.position.y = 0;
|
||||||
|
}
|
||||||
|
this.canStore = false;
|
||||||
|
this.accumulator = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_spawnNewPiece() {
|
||||||
|
this.currentPiece = this.nextPiece || this._createRandomPiece();
|
||||||
|
this.nextPiece = this._createRandomPiece();
|
||||||
|
this._updateBufferGrid();
|
||||||
|
}
|
||||||
|
|
||||||
|
_createRandomPiece() {
|
||||||
|
const types = [PieceT, PieceL, PieceReverseL, PieceI, PieceZ, PieceReverseZ, PieceO];
|
||||||
|
return new types[Math.floor(Math.random() * types.length)](3, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateBufferGrid() {
|
||||||
|
this.bufferGrid = this._createGrid(10, 5);
|
||||||
|
if (!this.nextPiece) return;
|
||||||
|
const shape = this.nextPiece.getShape();
|
||||||
|
const offsetX = Math.floor((10 - shape[0].length) / 2);
|
||||||
|
for (let y = 0; y < shape.length; y++)
|
||||||
|
for (let x = 0; x < shape[y].length; x++)
|
||||||
|
if (shape[y][x] !== 0)
|
||||||
|
this.bufferGrid[y + 1][x + offsetX] = this.nextPiece.getColor();
|
||||||
|
}
|
||||||
|
|
||||||
|
verifierLignes() {
|
||||||
|
let cleared = 0;
|
||||||
|
for (let y = this.grid.length - 1; y >= 0; y--) {
|
||||||
|
if (this.grid[y].every(c => c !== 0)) {
|
||||||
|
this.grid.splice(y, 1);
|
||||||
|
this.grid.unshift(Array(10).fill(0));
|
||||||
|
cleared++;
|
||||||
|
y++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const points = [0, 100, 300, 500, 800];
|
||||||
|
this.score += points[cleared] || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
_makeHarder() {
|
||||||
|
const prev = Math.floor((this.score - this.harding) / this.harding);
|
||||||
|
const curr = Math.floor(this.score / this.harding);
|
||||||
|
if (curr > prev && curr > 0)
|
||||||
|
this.timeToDown = Math.max(100, this.timeToDown - this.decrementTTD);
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveDown() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const ny = y + row + 1;
|
||||||
|
const nx = x + col;
|
||||||
|
if (ny >= this.grid.length || this.grid[ny][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveLeft() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const nx = x + col - 1;
|
||||||
|
if (nx < 0 || this.grid[y + row][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canMoveRight() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const nx = x + col + 1;
|
||||||
|
if (nx >= this.grid[0].length || this.grid[y + row][nx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_isValidPosition() {
|
||||||
|
if (!this.currentPiece) return false;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const gx = x + col;
|
||||||
|
const gy = y + row;
|
||||||
|
if (gx < 0 || gx >= this.grid[0].length ||
|
||||||
|
gy < 0 || gy >= this.grid.length ||
|
||||||
|
this.grid[gy][gx] !== 0) return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_canSpawn() { return this._isValidPosition(); }
|
||||||
|
|
||||||
|
_lockPiece() {
|
||||||
|
if (!this.currentPiece) return;
|
||||||
|
const { x, y } = this.currentPiece.getPosition();
|
||||||
|
const shape = this.currentPiece.getShape();
|
||||||
|
const color = this.currentPiece.getColor();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
this.grid[y + row][x + col] = color;
|
||||||
|
}
|
||||||
|
|
||||||
|
_gameOver() {
|
||||||
|
this.stop();
|
||||||
|
this.onGameOver(this.score);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// RENDU
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
const CELL = 30;
|
||||||
|
const COLORS = ['#070712','#a855f7','#f97316','#3b82f6','#06b6d4','#ef4444','#22c55e','#eab308'];
|
||||||
|
|
||||||
|
const ctxMain = document.getElementById('canvas-main').getContext('2d');
|
||||||
|
const ctxNext = document.getElementById('canvas-next').getContext('2d');
|
||||||
|
const ctxHold = document.getElementById('canvas-hold').getContext('2d');
|
||||||
|
|
||||||
|
function drawCell(ctx, x, y, colorIndex, size) {
|
||||||
|
const p = 1;
|
||||||
|
ctx.fillStyle = COLORS[colorIndex];
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, size - p * 2, size - p * 2);
|
||||||
|
// Highlight
|
||||||
|
ctx.fillStyle = 'rgba(255,255,255,0.25)';
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, size - p * 2, 3);
|
||||||
|
ctx.fillRect(x * size + p, y * size + p, 3, size - p * 2);
|
||||||
|
// Ombre
|
||||||
|
ctx.fillStyle = 'rgba(0,0,0,0.35)';
|
||||||
|
ctx.fillRect(x * size + p, (y + 1) * size - p - 3, size - p * 2, 3);
|
||||||
|
ctx.fillRect((x + 1) * size - p - 3, y * size + p, 3, size - p * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearCanvas(ctx, w, h) {
|
||||||
|
ctx.fillStyle = '#070712';
|
||||||
|
ctx.fillRect(0, 0, w, h);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGridLines(ctx, cols, rows, size) {
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.04)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let x = 0; x <= cols; x++) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(x * size, 0); ctx.lineTo(x * size, rows * size); ctx.stroke();
|
||||||
|
}
|
||||||
|
for (let y = 0; y <= rows; y++) {
|
||||||
|
ctx.beginPath(); ctx.moveTo(0, y * size); ctx.lineTo(cols * size, y * size); ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawGhost(ctx, piece, grid) {
|
||||||
|
if (!piece) return;
|
||||||
|
const ghost = { x: piece.getPosition().x, y: piece.getPosition().y };
|
||||||
|
const shape = piece.getShape();
|
||||||
|
|
||||||
|
while (true) {
|
||||||
|
ghost.y++;
|
||||||
|
let valid = true;
|
||||||
|
for (let row = 0; row < shape.length && valid; row++)
|
||||||
|
for (let col = 0; col < shape[row].length && valid; col++)
|
||||||
|
if (shape[row][col] !== 0) {
|
||||||
|
const ny = ghost.y + row;
|
||||||
|
const nx = ghost.x + col;
|
||||||
|
if (ny >= grid.length || grid[ny][nx] !== 0) valid = false;
|
||||||
|
}
|
||||||
|
if (!valid) { ghost.y--; break; }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ghost.y === piece.getPosition().y) return;
|
||||||
|
|
||||||
|
ctx.strokeStyle = 'rgba(255,255,255,0.15)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
ctx.strokeRect(
|
||||||
|
(ghost.x + col) * CELL + 2,
|
||||||
|
(ghost.y + row) * CELL + 2,
|
||||||
|
CELL - 4, CELL - 4
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawMiniPiece(ctx, piece, canvasW, canvasH) {
|
||||||
|
clearCanvas(ctx, canvasW, canvasH);
|
||||||
|
if (!piece) return;
|
||||||
|
const shape = piece.getShape();
|
||||||
|
const color = piece.getColor();
|
||||||
|
const s = 20;
|
||||||
|
const offsetX = Math.floor((canvasW / s - shape[0].length) / 2);
|
||||||
|
const offsetY = Math.floor((canvasH / s - shape.length) / 2);
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
drawCell(ctx, offsetX + col, offsetY + row, color, s);
|
||||||
|
}
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
// Grille principale
|
||||||
|
clearCanvas(ctxMain, 300, 600);
|
||||||
|
drawGridLines(ctxMain, 10, 20, CELL);
|
||||||
|
|
||||||
|
for (let y = 0; y < game.grid.length; y++)
|
||||||
|
for (let x = 0; x < game.grid[y].length; x++)
|
||||||
|
if (game.grid[y][x] !== 0)
|
||||||
|
drawCell(ctxMain, x, y, game.grid[y][x], CELL);
|
||||||
|
|
||||||
|
// Ghost + pièce courante
|
||||||
|
if (game.currentPiece) {
|
||||||
|
drawGhost(ctxMain, game.currentPiece, game.grid);
|
||||||
|
const { x, y } = game.currentPiece.getPosition();
|
||||||
|
const shape = game.currentPiece.getShape();
|
||||||
|
const color = game.currentPiece.getColor();
|
||||||
|
for (let row = 0; row < shape.length; row++)
|
||||||
|
for (let col = 0; col < shape[row].length; col++)
|
||||||
|
if (shape[row][col] !== 0)
|
||||||
|
drawCell(ctxMain, x + col, y + row, color, CELL);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Panneaux miniatures
|
||||||
|
drawMiniPiece(ctxNext, game.nextPiece, 100, 80);
|
||||||
|
drawMiniPiece(ctxHold, game.storedPiece, 100, 80);
|
||||||
|
|
||||||
|
// Score
|
||||||
|
document.getElementById('score-display').textContent = game.score;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// UI
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
const btnStart = document.getElementById('btn-start');
|
||||||
|
const btnPause = document.getElementById('btn-pause');
|
||||||
|
const btnStop = document.getElementById('btn-stop');
|
||||||
|
const overlay = document.getElementById('overlay');
|
||||||
|
|
||||||
|
function updateButtons() {
|
||||||
|
btnStart.disabled = game.isRunning;
|
||||||
|
btnPause.disabled = !game.isRunning;
|
||||||
|
btnStop.disabled = !game.isRunning;
|
||||||
|
btnPause.textContent = game.isPaused ? 'Resume' : 'Pause';
|
||||||
|
}
|
||||||
|
|
||||||
|
function showOverlay(title, score) {
|
||||||
|
document.getElementById('overlay-title').textContent = title;
|
||||||
|
document.getElementById('overlay-score').textContent = score !== undefined ? `Score : ${score}` : '';
|
||||||
|
overlay.classList.add('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideOverlay() {
|
||||||
|
overlay.classList.remove('visible');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
// INIT
|
||||||
|
// ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
const game = new Tetris(
|
||||||
|
() => { render(); updateButtons(); },
|
||||||
|
(score) => { render(); updateButtons(); showOverlay('GAME OVER', score); }
|
||||||
|
);
|
||||||
|
|
||||||
|
btnStart.addEventListener('click', () => {
|
||||||
|
hideOverlay();
|
||||||
|
game.start();
|
||||||
|
updateButtons();
|
||||||
|
render();
|
||||||
|
});
|
||||||
|
|
||||||
|
btnPause.addEventListener('click', () => {
|
||||||
|
game.pause();
|
||||||
|
updateButtons();
|
||||||
|
if (game.isPaused) showOverlay('PAUSE');
|
||||||
|
else hideOverlay();
|
||||||
|
});
|
||||||
|
|
||||||
|
btnStop.addEventListener('click', () => {
|
||||||
|
game.stop();
|
||||||
|
updateButtons();
|
||||||
|
render();
|
||||||
|
showOverlay('STOPPED');
|
||||||
|
});
|
||||||
|
|
||||||
|
render();
|
||||||
|
updateButtons();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user