ajout du jeu tetris
This commit is contained in:
@@ -22,6 +22,8 @@
|
||||
<nav class="game" aria-label="Game">
|
||||
<button class="game__item" data-action="new_game" aria-label="Start new game"
|
||||
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>
|
||||
|
||||
<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