Diamond Rush 320x240 [ COMPLETE • GUIDE ]

// tile types const TILE_EMPTY = 0; const TILE_WALL = 1; const TILE_DIAMOND = 2; const TILE_PLAYER = 3; const TILE_GOAL = 4; // exit / rush crystal const TILE_ENEMY = 5; // rolling skull / boulder // global state let map = Array(MAP_H).fill().map(() => Array(MAP_W).fill(TILE_EMPTY)); let playerX = 1, playerY = 1; let score = 0; let gemsCollected = 0; let gameOver = false; let gameWin = false; let stepLock = false; // prevent multiple moves per frame const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // DOM elements const scoreSpan = document.getElementById('scoreValue'); const gemsSpan = document.getElementById('gemsValue'); const statusDiv = document.getElementById('statusMsg'); const startHintDiv = document.getElementById('startHint'); // helper: update UI function updateUI() scoreSpan.innerText = score; gemsSpan.innerText = gemsCollected; // helper: draw pixel solid retro look function drawTile(x, y, type) const px = x * CELL_SIZE; const py = y * CELL_SIZE; switch(type) case TILE_EMPTY: ctx.fillStyle = "#1a1f2c"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#10131e"; ctx.fillRect(px+1, py+1, CELL_SIZE-2, CELL_SIZE-2); break; case TILE_WALL: ctx.fillStyle = "#4a3a2c"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#2f241b"; ctx.fillRect(px+2, py+2, CELL_SIZE-4, CELL_SIZE-4); ctx.fillStyle = "#6b4e38"; ctx.fillRect(px+1, py+1, CELL_SIZE-2, 2); break; case TILE_DIAMOND: ctx.fillStyle = "#0f2120"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#2cd4a8"; ctx.beginPath(); ctx.moveTo(px+10, py+3); ctx.lineTo(px+16, py+10); ctx.lineTo(px+10, py+17); ctx.lineTo(px+4, py+10); ctx.fill(); ctx.fillStyle = "#f3e35c"; ctx.beginPath(); ctx.moveTo(px+10, py+5); ctx.lineTo(px+13, py+10); ctx.lineTo(px+10, py+15); ctx.lineTo(px+7, py+10); ctx.fill(); break; case TILE_PLAYER: ctx.fillStyle = "#2c3e66"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#5dade2"; ctx.fillRect(px+3, py+3, 14, 14); ctx.fillStyle = "#f5c542"; ctx.beginPath(); ctx.arc(px+7, py+10, 2, 0, Math.PI*2); ctx.arc(px+13, py+10, 2, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = "#2c2c2c"; ctx.fillRect(px+8, py+14, 4, 3); break; case TILE_GOAL: ctx.fillStyle = "#432c1f"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#e67e22"; ctx.font = `bold $CELL_SIZE-4px monospace`; ctx.fillText("⭐", px+3, py+16); break; case TILE_ENEMY: ctx.fillStyle = "#4a2020"; ctx.fillRect(px, py, CELL_SIZE-0.5, CELL_SIZE-0.5); ctx.fillStyle = "#bc5a2c"; ctx.beginPath(); ctx.ellipse(px+10, py+10, 7, 8, 0, 0, Math.PI*2); ctx.fill(); ctx.fillStyle = "#fff0d0"; ctx.fillRect(px+6, py+7, 3, 3); ctx.fillRect(px+11, py+7, 3, 3); ctx.fillStyle = "#000"; ctx.fillRect(px+7, py+14, 6, 2); break; default: break; function renderGame() ctx.clearRect(0, 0, 320, 240); // draw all tiles for (let row = 0; row < MAP_H; row++) for (let col = 0; col < MAP_W; col++) let tile = map[row][col]; if (tile !== TILE_PLAYER) // player drawn separately drawTile(col, row, tile); // draw player above everything drawTile(playerX, playerY, TILE_PLAYER); // extra pixel grain / scanlines for solid retro feel ctx.globalCompositeOperation = 'lighter'; ctx.fillStyle = "#ffffff08"; for(let i=0;i<60;i++) ctx.fillRect( (i*13)%320, (i*7)%240, 1, 1); ctx.globalCompositeOperation = 'source-over'; // check win condition function checkWin() if(map[playerY][playerX] === TILE_GOAL && gemsCollected >= 5) gameWin = true; gameOver = true; statusDiv.innerText = "✨ VICTORY! DIAMOND RUSH MASTER! ✨"; startHintDiv.style.display = "none"; return true; if(map[playerY][playerX] === TILE_ENEMY) gameOver = true; statusDiv.innerText = "💀 CRUSHED BY GUARDIAN... PRESS R 💀"; startHintDiv.style.display = "none"; return true; return false; // move logic (solid collision & diamond pickup) function tryMove(dx, dy) newX >= MAP_W // ---------- BUILD A SOLID DIAMOND RUSH LEVEL (320x240 retro) ---------- function buildLevel() // reset arrays for(let i=0; i<MAP_H; i++) for(let j=0; j<MAP_W; j++) map[i][j] = TILE_EMPTY; // outer walls for(let i=0; i<MAP_W; i++) map[0][i] = TILE_WALL; map[MAP_H-1][i] = TILE_WALL; for(let i=0; i<MAP_H; i++) map[i][0] = TILE_WALL; map[i][MAP_W-1] = TILE_WALL; // interior obstacles (solid walls) const walls = [[4,3],[5,3],[6,3],[10,5],[11,5],[12,5],[7,8],[8,8],[9,8],[3,9],[3,10],[12,9],[12,10],[8,2],[8,3]]; walls.forEach(w => if(w[1]>=1 && w[1]<MAP_H-1 && w[0]>=1 && w[0]<MAP_W-1) map[w[1]][w[0]] = TILE_WALL; ); // diamonds const diamondPos = [[5,5],[6,5],[9,4],[10,7],[4,9],[13,7],[2,7],[14,4],[8,10],[11,2],[3,5],[7,6],[12,3],[1,8],[5,10]]; diamondPos.forEach(d => if(map[d[1]][d[0]] === TILE_EMPTY) map[d[1]][d[0]] = TILE_DIAMOND; ); // enemies (rolling skulls) const enemyPos = [[7,4],[4,7],[12,8],[9,9],[2,3],[13,10]]; enemyPos.forEach(e => if(map[e[1]][e[0]] === TILE_EMPTY) map[e[1]][e[0]] = TILE_ENEMY; ); // goal (magic rush crystal) map[10][14] = TILE_GOAL; // near bottom right corner // player start playerX = 1; playerY = 1; map[1][1] = TILE_PLAYER; // ensure no accidental overlap: if start is blocked, fix if(map[1][1] !== TILE_PLAYER) map[1][1] = TILE_PLAYER; score = 0; gemsCollected = 0; gameOver = false; gameWin = false; stepLock = false; updateUI(); statusDiv.innerText = "⚡ COLLECT 5+ GEMS & REACH STAR ⚡"; startHintDiv.style.display = "flex"; setTimeout(() => if(startHintDiv) startHintDiv.style.opacity = "0"; setTimeout(() => if(startHintDiv) startHintDiv.style.display = "none"; , 800); , 2200); renderGame(); // reset full game function resetGame() buildLevel(); gameOver = false; gameWin = false; statusDiv.innerText = "RESTART! COLLECT DIAMONDS!"; setTimeout(() => if(!gameOver) statusDiv.innerText = "▲ ▼ ◀ ▶ MOVE"; , 1200); renderGame(); // ----- Input handling (solid and responsive) ----- function handleKey(e) key === 's' // also add touch / click simulation? but we preserve keyboard solidness. window.addEventListener('keydown', handleKey); // optional click on canvas focus canvas.addEventListener('click', () => canvas.focus()); canvas.focus(); // for any touch prevent drag canvas.addEventListener('touchstart', (e) => e.preventDefault(); ); // init game world buildLevel(); // extra: animate blinking cursor hint fades out setTimeout(() => if(startHintDiv) startHintDiv.style.transition = "opacity 0.6s"; startHintDiv.style.opacity = "0"; setTimeout(() => if(startHintDiv) startHintDiv.style.display = "none"; , 700); , 2500); // small extra: render loop for animation (just rerender when needed but any state changes already call render) // also call render on window focus window.addEventListener('focus', () => renderGame()); renderGame(); console.log("DIAMOND RUSH 320x240 — SOLID EDITION"); )(); </script> </body> </html>

<script> (function() // ---------- SOLID DIAMOND RUSH ---------- // 320x240 fixed grid: 16x12 cells (each cell 20x20px) const CELL_SIZE = 20; const MAP_W = 16; // 16 20 = 320 const MAP_H = 12; // 12 20 = 240

/* main canvas for diamond rush action */ .game-canvas display: block; width: 100%; height: 100%; background: #0b0e16; cursor: pointer; diamond rush 320x240

/* UI overlays – solid retro style */ .hud position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 10; padding: 8px 10px; display: flex; justify-content: space-between; text-shadow: 2px 2px 0 #000000aa;

.controls-info position: absolute; bottom: 4px; right: 6px; font-size: 8px; background: #00000099; color: #aaa; padding: 2px 5px; border-radius: 2px; font-family: monospace; pointer-events: none; // tile types const TILE_EMPTY = 0; const

/* pixel perfect button simulation */ @keyframes blink 0% opacity: 1; 50% opacity: 0.6; 100% opacity: 1;

.gems-box color: #6ef0b0; border-left-color: #2ecc71; PRESS R 💀"; startHintDiv

/* SOLID GAME CONTAINER - EXACT 320x240 */ .game-container width: 320px; height: 240px; background: #1a1e2a; position: relative; box-shadow: 0 0 0 4px #5f4c3c, 0 0 0 8px #2e241f, 0 8px 20px rgba(0,0,0,0.6); border-radius: 4px; overflow: hidden; image-rendering: crisp-edges; image-rendering: pixelated; image-rendering: pixelated;

.status-text position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 12px; background: #010101cc; color: #b9f6ca; padding: 3px; font-weight: bold; font-family: monospace; letter-spacing: 1px; pointer-events: none; backdrop-filter: blur(2px);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>DIAMOND RUSH - 320x240</title> <style> * margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; body background: #0a0f1e; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Courier New', 'VT323', 'Monaco', monospace;