Compare commits
2 Commits
7b5119d266
...
ed94e946e9
| Author | SHA1 | Date |
|---|---|---|
 Brian Fertig
|
ed94e946e9 | |
|
Brian Fertig
|
6a633956a4 |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,802 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>NEON BLOCKS: Cyberpunk Tetris</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--neon-cyan: #0ff;
|
||||||
|
--neon-pink: #f0f;
|
||||||
|
--neon-yellow: #ffeb3b;
|
||||||
|
--neon-green: #0f0;
|
||||||
|
--bg-color: #050510;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
color: white;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-container {
|
||||||
|
position: relative;
|
||||||
|
border: 2px solid #333;
|
||||||
|
box-shadow: 0 0 20px var(--neon-pink), inset 0 0 50px rgba(0,0,0,1);
|
||||||
|
padding: 10px;
|
||||||
|
background-image:
|
||||||
|
linear-gradient(rgba(18, 16, 16, 1) 50%, rgba(0, 0, 0, 1) 50%),
|
||||||
|
linear-gradient(90deg, rgba(255, 0, 255, .2), rgba(0, 255, 255, .1));
|
||||||
|
background-size: 100% 4px, 4px 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
display: block;
|
||||||
|
background-color: #0a0a14;
|
||||||
|
box-shadow: inset 0 0 30px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-panel {
|
||||||
|
position: absolute;
|
||||||
|
right: -250px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-box {
|
||||||
|
background: rgba(0, 20, 40, 0.8);
|
||||||
|
border-left: 4px solid var(--neon-cyan);
|
||||||
|
padding: 15px;
|
||||||
|
box-shadow: -5px 5px 15px rgba(0,255,255,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
color: #aaa;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--neon-cyan);
|
||||||
|
text-shadow: 0 0 10px var(--neon-cyan);
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#level-indicator {
|
||||||
|
border-left-color: var(--neon-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
#level-value {
|
||||||
|
color: var(--neon-yellow);
|
||||||
|
text-shadow: 0 0 10px var(--neon-yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(5, 5, 16, 0.9);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--neon-pink);
|
||||||
|
text-shadow:
|
||||||
|
3px 3px 0px #0ff,
|
||||||
|
-3px -3px 0px var(--neon-yellow);
|
||||||
|
animation: glitch-skew 1s infinite linear alternate-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--neon-green);
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
padding: 15px 40px;
|
||||||
|
border: 2px solid var(--neon-green);
|
||||||
|
box-shadow: 0 0 15px var(--neon-green), inset 0 0 15px var(--neon-green);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background: var(--neon-green);
|
||||||
|
color: black;
|
||||||
|
box-shadow: 0 0 30px var(--neon-green), inset 0 0 30px var(--neon-green);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls-hint {
|
||||||
|
margin-top: 40px;
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CRT Scanline Effect */
|
||||||
|
.scanlines {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
rgba(255,255,255,0),
|
||||||
|
rgba(255,255,255,0) 50%,
|
||||||
|
rgba(0,0,0,0.1) 50%,
|
||||||
|
rgba(0,0,0,0.1)
|
||||||
|
);
|
||||||
|
background-size: 100% 4px;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch-skew {
|
||||||
|
0% { transform: skewX(0); text-shadow: 2px 2px var(--neon-pink); }
|
||||||
|
25% { transform: skewX(-5deg); text-shadow: -2px -2px var(--neon-cyan); }
|
||||||
|
50% { transform: skewX(5deg); text-shadow: 2px -2px var(--neon-yellow); }
|
||||||
|
75% { transform: skewX(-3deg); text-shadow: -2px 2px var(--neon-green); }
|
||||||
|
100% { transform: skewX(0); text-shadow: 2px 2px var(--neon-pink); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Neon‑blue pulsing & glitch background (placed behind the game) */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.bg-effect {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0; /* fill the whole viewport */
|
||||||
|
background: #001f3f; /* deep blue base */
|
||||||
|
z-index: -1; /* sit behind everything */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulsing neon glow */
|
||||||
|
.bg-effect::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at 50% 50%,
|
||||||
|
rgba(0, 255, 255, 0.3),
|
||||||
|
transparent 70%);
|
||||||
|
animation: pulse 4s ease‑in‑out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glitch “slice” effect */
|
||||||
|
.bg-effect::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
0deg,
|
||||||
|
rgba(0,255,255,0.15) 0,
|
||||||
|
rgba(0,255,255,0.15) 2px,
|
||||||
|
transparent 2px,
|
||||||
|
transparent 4px
|
||||||
|
);
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
animation: glitch 2s steps(2, end) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse animation – expands/brightens then contracts */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% { transform: scale(1); opacity: 0.6; }
|
||||||
|
50% { transform: scale(1.05); opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glitch animation – quickly shifts horizontal slices */
|
||||||
|
@keyframes glitch {
|
||||||
|
0% { transform: translateX(0); }
|
||||||
|
20% { transform: translateX(-2px); }
|
||||||
|
40% { transform: translateX(2px); }
|
||||||
|
60% { transform: translateX(-2px); }
|
||||||
|
80% { transform: translateX(2px); }
|
||||||
|
100% { transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
/* Level‑Up text effect */
|
||||||
|
/* ------------------------------------------------------------------ */
|
||||||
|
.level-up {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-family: 'Orbitron', sans-serif;
|
||||||
|
font-size: 4rem;
|
||||||
|
color: var(--neon-yellow);
|
||||||
|
text-shadow: 0 0 20px var(--neon-yellow), 0 0 40px var(--neon-yellow);
|
||||||
|
pointer‑events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* animation: shake → grow → fade */
|
||||||
|
@keyframes levelUpAnim {
|
||||||
|
0% { opacity: 0; transform: scale(0.5) translateY(0); }
|
||||||
|
10% { opacity: 1; transform: scale(0.7) translateY(-5px) rotate(-2deg); }
|
||||||
|
20% { opacity: 1; transform: scale(0.8) translateY(5px) rotate(2deg); }
|
||||||
|
30% { opacity: 1; transform: scale(0.9) translateY(-5px) rotate(-1deg); }
|
||||||
|
40% { opacity: 1; transform: scale(1) translateY(0); }
|
||||||
|
70% { opacity: 1; transform: scale(1.5) translateY(-30px); }
|
||||||
|
100% { opacity: 0; transform: scale(2) translateY(-80px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* class added by JS to start the animation */
|
||||||
|
.level-up.active {
|
||||||
|
animation: levelUpAnim 1.5s forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<audio id="bg-music" loop></audio>
|
||||||
|
<audio id="sfx-place" src="fx/place.mp3" preload="auto"></audio>
|
||||||
|
<audio id="sfx-explode" src="fx/explode.mp3" preload="auto"></audio>
|
||||||
|
<audio id="sfx-levelUp" src="fx/levelUp.mp3" preload="auto"></audio>
|
||||||
|
|
||||||
|
<div class="bg-effect"></div>
|
||||||
|
|
||||||
|
<div id="level-up-overlay" class="level-up">Level Up!</div>
|
||||||
|
|
||||||
|
<div class="scanlines"></div>
|
||||||
|
|
||||||
|
<div id="game-container">
|
||||||
|
<canvas id="tetris" width="300" height="600"></canvas>
|
||||||
|
|
||||||
|
<div class="ui-panel">
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="stat-label">Score</div>
|
||||||
|
<div id="score" class="stat-value">0</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box" id="level-indicator">
|
||||||
|
<div class="stat-label">System Level</div>
|
||||||
|
<div id="level-value" class="stat-value">1</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="stat-label">Lines</div>
|
||||||
|
<div id="lines" class="stat-value">0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="start-screen" class="overlay">
|
||||||
|
<h1>NEON BLOCKS</h1>
|
||||||
|
<button onclick="startGame()">Initialize System</button>
|
||||||
|
<div class="controls-hint">
|
||||||
|
ARROWS to Move & Rotate<br>
|
||||||
|
DOWN to Accelerate<br>
|
||||||
|
SPACE to Hard Drop
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="game-over-screen" class="overlay" style="display: none;">
|
||||||
|
<h1 style="color: red; text-shadow: 0 0 20px red;">SYSTEM FAILURE</h1>
|
||||||
|
<button onclick="resetGame()">Reboot System</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const canvas = document.getElementById('tetris');
|
||||||
|
const context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Scale up everything by 30 for the block size
|
||||||
|
context.scale(30, 30);
|
||||||
|
|
||||||
|
// Neon Palette
|
||||||
|
const COLORS = [
|
||||||
|
null,
|
||||||
|
'#FF0D72', // T - Magenta
|
||||||
|
'#0DC2FF', // I - Cyan
|
||||||
|
'#0DFF72', // S - Green
|
||||||
|
'#F538FF', // Z - Purple
|
||||||
|
'#FF8E0D', // L - Orange
|
||||||
|
'#FFE138', // O - Yellow
|
||||||
|
'#3877FF', // J - Blue
|
||||||
|
];
|
||||||
|
|
||||||
|
const GLOW_COLORS = [
|
||||||
|
null,
|
||||||
|
'magenta',
|
||||||
|
'cyan',
|
||||||
|
'lime',
|
||||||
|
'violet',
|
||||||
|
'orange',
|
||||||
|
'yellow',
|
||||||
|
'blue',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Game State
|
||||||
|
let dropCounter = 0;
|
||||||
|
let dropInterval = 1000;
|
||||||
|
let lastTime = 0;
|
||||||
|
let score = 0;
|
||||||
|
let linesClearedTotal = 0;
|
||||||
|
let level = 1;
|
||||||
|
|
||||||
|
// Particle System Array
|
||||||
|
let particles = [];
|
||||||
|
|
||||||
|
const arena = createMatrix(10, 20);
|
||||||
|
|
||||||
|
const player = {
|
||||||
|
pos: {x: 0, y: 0},
|
||||||
|
matrix: null,
|
||||||
|
score: 0,
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- PIECES GENERATORS ---
|
||||||
|
function createPiece(type) {
|
||||||
|
if (type === 'I') {
|
||||||
|
return [
|
||||||
|
[0, 1, 0, 0],
|
||||||
|
[0, 1, 0, 0],
|
||||||
|
[0, 1, 0, 0],
|
||||||
|
[0, 1, 0, 0],
|
||||||
|
];
|
||||||
|
} else if (type === 'L') {
|
||||||
|
return [
|
||||||
|
[0, 2, 0],
|
||||||
|
[0, 2, 0],
|
||||||
|
[0, 2, 2],
|
||||||
|
];
|
||||||
|
} else if (type === 'J') {
|
||||||
|
return [
|
||||||
|
[0, 3, 0],
|
||||||
|
[0, 3, 0],
|
||||||
|
[3, 3, 0],
|
||||||
|
];
|
||||||
|
} else if (type === 'O') {
|
||||||
|
return [
|
||||||
|
[4, 4],
|
||||||
|
[4, 4],
|
||||||
|
];
|
||||||
|
} else if (type === 'Z') {
|
||||||
|
return [
|
||||||
|
[5, 5, 0],
|
||||||
|
[0, 5, 5],
|
||||||
|
[0, 0, 0],
|
||||||
|
];
|
||||||
|
} else if (type === 'S') {
|
||||||
|
return [
|
||||||
|
[0, 6, 6],
|
||||||
|
[6, 6, 0],
|
||||||
|
[0, 0, 0],
|
||||||
|
];
|
||||||
|
} else if (type === 'T') {
|
||||||
|
return [
|
||||||
|
[0, 7, 0],
|
||||||
|
[7, 7, 7],
|
||||||
|
[0, 0, 0],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ----- MUSIC PLAYLIST -------------------------------------------------
|
||||||
|
const MUSIC_PLAYLIST = [
|
||||||
|
// Add or remove URLs as you like – they can be relative paths or full URLs
|
||||||
|
'music/track01.mp3',
|
||||||
|
'music/track02.mp3',
|
||||||
|
'music/track03.mp3',
|
||||||
|
'music/track04.mp3',
|
||||||
|
];
|
||||||
|
|
||||||
|
let currentTrackIndex = 0;
|
||||||
|
const musicPlayer = document.getElementById('bg-music');
|
||||||
|
|
||||||
|
// Load the first track (but don’t start playing until the game begins)
|
||||||
|
function loadCurrentTrack() {
|
||||||
|
musicPlayer.src = MUSIC_PLAYLIST[currentTrackIndex];
|
||||||
|
musicPlayer.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Advance to the next track in the playlist (wrap around)
|
||||||
|
function nextTrack() {
|
||||||
|
currentTrackIndex = (currentTrackIndex + 1) % MUSIC_PLAYLIST.length;
|
||||||
|
loadCurrentTrack();
|
||||||
|
musicPlayer.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call this once when the game starts
|
||||||
|
function startMusic() {
|
||||||
|
loadCurrentTrack();
|
||||||
|
musicPlayer.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call this when the game ends (optional – mute/stop)
|
||||||
|
function stopMusic() {
|
||||||
|
musicPlayer.pause();
|
||||||
|
musicPlayer.currentTime = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Play the “piece placed” sound effect
|
||||||
|
function playSFX(effect) {
|
||||||
|
const sfx = document.getElementById(effect);
|
||||||
|
// Re‑start the sound even if it’s still playing
|
||||||
|
sfx.currentTime = 0;
|
||||||
|
sfx.play().catch(() => {}); // silence any autoplay errors
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CORE LOGIC ---
|
||||||
|
|
||||||
|
function createMatrix(w, h) {
|
||||||
|
const matrix = [];
|
||||||
|
while (h--) {
|
||||||
|
matrix.push(new Array(w).fill(0));
|
||||||
|
}
|
||||||
|
return matrix;
|
||||||
|
}
|
||||||
|
|
||||||
|
function collide(arena, player) {
|
||||||
|
const m = player.matrix;
|
||||||
|
const o = player.pos;
|
||||||
|
for (let y = 0; y < m.length; ++y) {
|
||||||
|
for (let x = 0; x < m[y].length; ++x) {
|
||||||
|
if (m[y][x] !== 0 &&
|
||||||
|
(arena[y + o.y] && arena[y + o.y][x + o.x]) !== 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw() {
|
||||||
|
// Clear Canvas
|
||||||
|
context.fillStyle = '#050510';
|
||||||
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
|
// Draw Arena (Locked pieces)
|
||||||
|
drawMatrix(arena, {x: 0, y: 0});
|
||||||
|
|
||||||
|
// Draw Active Piece
|
||||||
|
drawMatrix(player.matrix, player.pos);
|
||||||
|
|
||||||
|
// Draw Particles
|
||||||
|
updateAndDrawParticles();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawMatrix(matrix, offset) {
|
||||||
|
matrix.forEach((row, y) => {
|
||||||
|
row.forEach((value, x) => {
|
||||||
|
if (value !== 0) {
|
||||||
|
// The Core Block
|
||||||
|
context.fillStyle = COLORS[value];
|
||||||
|
context.fillRect(x + offset.x, y + offset.y, 1, 1);
|
||||||
|
|
||||||
|
// The Neon Glow Effect (Inner)
|
||||||
|
context.shadowBlur = 15;
|
||||||
|
context.shadowColor = GLOW_COLORS[value];
|
||||||
|
|
||||||
|
// Bevel effect simulation
|
||||||
|
context.strokeStyle = 'rgba(255,255,255,0.5)';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset shadow for performance/cleanliness
|
||||||
|
context.shadowBlur = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function merge(arena, player) {
|
||||||
|
player.matrix.forEach((row, y) => {
|
||||||
|
row.forEach((value, x) => {
|
||||||
|
if (value !== 0) {
|
||||||
|
arena[y + player.pos.y][x + player.pos.x] = value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function rotate(matrix, dir) {
|
||||||
|
for (let y = 0; y < matrix.length; ++y) {
|
||||||
|
for (let x = 0; x < y; ++x) {
|
||||||
|
[matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (dir > 0) {
|
||||||
|
matrix.forEach(row => row.reverse());
|
||||||
|
} else {
|
||||||
|
matrix.reverse();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playerDrop() {
|
||||||
|
player.pos.y++;
|
||||||
|
if (collide(arena, player)) {
|
||||||
|
player.pos.y--;
|
||||||
|
merge(arena, player);
|
||||||
|
playSFX('sfx-place');
|
||||||
|
playerReset();
|
||||||
|
arenaSweep();
|
||||||
|
updateScore();
|
||||||
|
}
|
||||||
|
dropCounter = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function playerMove(offset) {
|
||||||
|
player.pos.x += offset;
|
||||||
|
if (collide(arena, player)) {
|
||||||
|
player.pos.x -= offset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playerReset() {
|
||||||
|
const pieces = 'ILJOTSZ';
|
||||||
|
player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
|
||||||
|
player.pos.y = 0;
|
||||||
|
player.pos.x = (arena[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
|
||||||
|
|
||||||
|
if (collide(arena, player)) {
|
||||||
|
gameOver();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function playerRotate(dir) {
|
||||||
|
const pos = player.pos.x;
|
||||||
|
let offset = 1;
|
||||||
|
rotate(player.matrix, dir);
|
||||||
|
while (collide(arena, player)) {
|
||||||
|
player.pos.x += offset;
|
||||||
|
offset = -(offset + (offset > 0 ? 1 : -1));
|
||||||
|
if (offset > player.matrix[0].length) {
|
||||||
|
rotate(player.matrix, -dir);
|
||||||
|
player.pos.x = pos;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- GAME MECHANICS ---
|
||||||
|
|
||||||
|
function arenaSweep() {
|
||||||
|
let rowCount = 0;
|
||||||
|
outer: for (let y = arena.length - 1; y > 0; --y) {
|
||||||
|
for (let x = 0; x < arena[y].length; ++x) {
|
||||||
|
if (arena[y][x] === 0) {
|
||||||
|
continue outer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ROW CLEARED
|
||||||
|
const row = arena.splice(y, 1)[0];
|
||||||
|
|
||||||
|
// Create Explosion Effect for the cleared row
|
||||||
|
createExplosion(y, row);
|
||||||
|
playSFX('sfx-explode');
|
||||||
|
|
||||||
|
arena.unshift(row.fill(0));
|
||||||
|
++y;
|
||||||
|
rowCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rowCount > 0) {
|
||||||
|
// Scoring: 100, 300, 500, 800
|
||||||
|
const points = [100, 300, 500, 800];
|
||||||
|
score += points[rowCount - 1] * level;
|
||||||
|
|
||||||
|
linesClearedTotal += rowCount;
|
||||||
|
|
||||||
|
// Level Up Logic: Every 8 rows
|
||||||
|
if (linesClearedTotal % 6 === 0) {
|
||||||
|
levelUp();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function levelUp() {
|
||||||
|
level++;
|
||||||
|
|
||||||
|
// Increase Speed (Decrease interval)
|
||||||
|
// Cap at minimum 100ms
|
||||||
|
dropInterval = Math.max(100, 1000 - (level * 120));
|
||||||
|
|
||||||
|
// Visual feedback on UI
|
||||||
|
document.getElementById('level-value').innerText = level;
|
||||||
|
|
||||||
|
// Flash border effect
|
||||||
|
const container = document.getElementById('game-container');
|
||||||
|
container.style.borderColor = '#fff';
|
||||||
|
setTimeout(() => {
|
||||||
|
container.style.borderColor = '#333';
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
playSFX('sfx-levelUp');
|
||||||
|
|
||||||
|
// *** advance to next music track ***
|
||||||
|
nextTrack();
|
||||||
|
|
||||||
|
// ----- NEW: show “Level Up!” animation -----
|
||||||
|
const overlay = document.getElementById('level-up-overlay');
|
||||||
|
overlay.classList.remove('active'); // reset (in case it’s still there)
|
||||||
|
// Force reflow so the removal takes effect
|
||||||
|
void overlay.offsetWidth;
|
||||||
|
overlay.classList.add('active');
|
||||||
|
|
||||||
|
// Remove the class after the animation finishes (1.5 s)
|
||||||
|
setTimeout(() => overlay.classList.remove('active'), 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateScore() {
|
||||||
|
document.getElementById('score').innerText = score;
|
||||||
|
document.getElementById('lines').innerText = linesClearedTotal;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- PARTICLE SYSTEM (The Cool Stuff) ---
|
||||||
|
|
||||||
|
class Particle {
|
||||||
|
constructor(x, y, color) {
|
||||||
|
this.x = x;
|
||||||
|
this.y = y;
|
||||||
|
this.vx = (Math.random() - 0.5) * 1; // Velocity X
|
||||||
|
this.vy = (Math.random() - 0.5) * 1 - 0.5; // Velocity Y (upward bias)
|
||||||
|
this.life = 1.0; // Opacity/Life
|
||||||
|
this.color = color;
|
||||||
|
this.size = Math.random() * 0.8 + 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
this.x += this.vx;
|
||||||
|
this.y += this.vy;
|
||||||
|
this.vy += 0.05; // Gravity
|
||||||
|
this.life -= 0.02; // Fade out
|
||||||
|
}
|
||||||
|
|
||||||
|
draw(ctx) {
|
||||||
|
ctx.save();
|
||||||
|
ctx.globalAlpha = this.life;
|
||||||
|
ctx.fillStyle = this.color;
|
||||||
|
|
||||||
|
// Glow for particles
|
||||||
|
ctx.shadowBlur = 10;
|
||||||
|
ctx.shadowColor = this.color;
|
||||||
|
|
||||||
|
// Draw Particle (Square or Circle)
|
||||||
|
if (Math.random() > 0.5) {
|
||||||
|
ctx.fillRect(this.x, this.y, this.size, this.size);
|
||||||
|
} else {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(this.x, this.y, this.size/2, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw "Tech" line fragments
|
||||||
|
if (this.life > 0.5) {
|
||||||
|
context.strokeStyle = '#fff';
|
||||||
|
context.lineWidth = 0.1;
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(this.x, this.y);
|
||||||
|
context.lineTo(this.x + (Math.random()-0.5), this.y + (Math.random()-0.5));
|
||||||
|
context.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createExplosion(rowY, rowData) {
|
||||||
|
// Iterate through the row that was cleared
|
||||||
|
for (let x = 0; x < rowData.length; x++) {
|
||||||
|
// Create multiple particles per block
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
// Convert grid coordinates to pixels (approximate)
|
||||||
|
const colorIndex = rowData[x];
|
||||||
|
if(colorIndex !== 0) {
|
||||||
|
const color = COLORS[colorIndex];
|
||||||
|
particles.push(new Particle(x + Math.random()*0.5, rowY + Math.random()*0.5, color));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Add some white sparks
|
||||||
|
for(let i=0; i<10; i++) {
|
||||||
|
particles.push(new Particle(Math.random() * 10, rowY + 0.5, '#ffffff'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateAndDrawParticles() {
|
||||||
|
// Iterate backwards to remove dead particles safely
|
||||||
|
for (let i = particles.length - 1; i >= 0; i--) {
|
||||||
|
const p = particles[i];
|
||||||
|
p.update();
|
||||||
|
p.draw(context);
|
||||||
|
|
||||||
|
if (p.life <= 0) {
|
||||||
|
particles.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- GAME LOOP ---
|
||||||
|
|
||||||
|
function update(time = 0) {
|
||||||
|
const deltaTime = time - lastTime;
|
||||||
|
lastTime = time;
|
||||||
|
|
||||||
|
dropCounter += deltaTime;
|
||||||
|
if (dropCounter > dropInterval) {
|
||||||
|
playerDrop();
|
||||||
|
}
|
||||||
|
|
||||||
|
draw();
|
||||||
|
requestAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CONTROLS & STATE MANAGEMENT ---
|
||||||
|
|
||||||
|
document.addEventListener('keydown', event => {
|
||||||
|
if(event.keyCode === 37) { // Left
|
||||||
|
playerMove(-1);
|
||||||
|
} else if (event.keyCode === 39) { // Right
|
||||||
|
playerMove(1);
|
||||||
|
} else if (event.keyCode === 40) { // Down
|
||||||
|
playerDrop();
|
||||||
|
} else if (event.keyCode === 81) { // Q (Rotate Left - optional)
|
||||||
|
playerRotate(-1);
|
||||||
|
} else if (event.keyCode === 87 || event.keyCode === 38) { // W or Up (Rotate Right)
|
||||||
|
playerRotate(1);
|
||||||
|
} else if (event.keyCode === 32) { // Space (Hard Drop - instant to bottom)
|
||||||
|
while (!collide(arena, player)) {
|
||||||
|
player.pos.y++;
|
||||||
|
}
|
||||||
|
player.pos.y--;
|
||||||
|
merge(arena, player);
|
||||||
|
playerReset();
|
||||||
|
arenaSweep();
|
||||||
|
updateScore();
|
||||||
|
dropCounter = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function startGame() {
|
||||||
|
document.getElementById('start-screen').style.display = 'none';
|
||||||
|
document.getElementById('game-over-screen').style.display = 'none';
|
||||||
|
|
||||||
|
// Reset Game State
|
||||||
|
arena.forEach(row => row.fill(0));
|
||||||
|
score = 0;
|
||||||
|
linesClearedTotal = 0;
|
||||||
|
level = 1;
|
||||||
|
dropInterval = 1000;
|
||||||
|
particles = [];
|
||||||
|
|
||||||
|
updateScore();
|
||||||
|
playerReset();
|
||||||
|
startMusic();
|
||||||
|
update();
|
||||||
|
}
|
||||||
|
|
||||||
|
function gameOver() {
|
||||||
|
document.getElementById('game-over-screen').style.display = 'flex';
|
||||||
|
cancelAnimationFrame(update);
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetGame() {
|
||||||
|
startGame();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue