स्नेक गेम HTML/CSS/JS

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>स्नेक गेम - क्लासिक</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; } body { background: linear-gradient(145deg, #1a2a3a 0%, #0f1a24 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .game-container { background: rgba(20, 30, 45, 0.85); backdrop-filter: blur(4px); border-radius: 24px; padding: 24px 28px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); text-align: center; max-width: 600px; width: 100%; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: #e0f0ff; font-weight: 600; letter-spacing: 0.5px; } .score-box { background: #0f1a2a; padding: 8px 18px; border-radius: 40px; border: 1px solid #3a5f7a; font-size: 1.3rem; color: #f5e9a0; box-shadow: 0 0 10px rgba(245, 233, 160, 0.3); } .status-badge { background: #1e3b4f; padding: 6px 16px; border-radius: 30px; font-size: 1rem; color: #b0e0ff; border: 1px solid #4f7b9a; } canvas { display: block; margin: 0 auto; background: #0b121c; border-radius: 16px; border: 2px solid #2e4d66; box-shadow: 0 0 25px rgba(0, 180, 255, 0.2); width: 100%; height: auto; aspect-ratio: 1 / 1; } .controls { display: flex; justify-content: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; } .btn { background: #1f3a4e; color: #d0f0ff; border: 1px solid #3f6680; padding: 10px 22px; border-radius: 40px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); letter-spacing: 0.3px; } .btn:hover { background: #2a4a66; border-color: #5a8fb0; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); } .btn:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } .btn-restart { background: #3d2b1f; color: #ffd9a0; border-color: #a07040; } .btn-restart:hover { background: #5a3f2e; border-color: #c09060; } .instruction { margin-top: 12px; color: #9fb8d0; font-size: 0.9rem; background: #0f1a2a; padding: 8px 12px; border-radius: 30px; border: 1px solid #2e4a66; display: inline-block; } .instruction i { color: #f5e9a0; font-style: normal; background: #1e3b4f; padding: 2px 10px; border-radius: 20px; margin: 0 4px; } @media (max-width: 500px) { .game-container { padding: 16px; } .header { font-size: 0.9rem; } .score-box { font-size: 1.1rem; padding: 6px 14px; } .btn { padding: 8px 16px; font-size: 0.9rem; } } </style> </head> <body> <div class="game-container"> <div class="header"> <span class="status-badge">🐍 स्नेक</span> <span class="score-box">स्कोर: <span id="scoreDisplay">0</span></span> </div> <canvas id="gameCanvas" width="400" height="400"></canvas> <div class="controls"> <button class="btn" id="restartBtn">🔄 नया खेल</button> <button class="btn" id="pauseBtn">⏸️ रोकें</button> </div> <div class="instruction"> <span>← ↑ → ↓</span> से खेलें </div> </div> <script> (function() { // ---------- कॉन्फ़िगरेशन ---------- const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreSpan = document.getElementById('scoreDisplay'); // ग्रिड सेटिंग (20x20) const GRID_SIZE = 20; const CELL_SIZE = canvas.width / GRID_SIZE; // 20px // गेम स्टेट let snake = [ { x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 }, { x: 7, y: 10 } ]; let food = { x: 15, y: 10 }; let direction = 'RIGHT'; // प्रारंभिक दिशा let nextDirection = 'RIGHT'; let score = 0; let gameRunning = true; let gamePaused = false; let gameOver = false; let gameSpeed = 140; // मिलीसेकंड प्रति टिक // ---------- यादृच्छिक भोजन उत्पन्न करें ---------- function generateFood() { const maxAttempts = 500; for (let attempt = 0; attempt < maxAttempts; attempt++) { const randX = Math.floor(Math.random() * GRID_SIZE); const randY = Math.floor(Math.random() * GRID_SIZE); // सुनिश्चित करें कि भोजन साँप के शरीर पर नहीं है const collision = snake.some(segment => segment.x === randX && segment.y === randY); if (!collision) { food = { x: randX, y: randY }; return; } } // अगर कोई खाली जगह नहीं मिली (लगभग असंभव) तो भोजन को स्थानांतरित करें for (let y = 0; y < GRID_SIZE; y++) { for (let x = 0; x < GRID_SIZE; x++) { const occupied = snake.some(seg => seg.x === x && seg.y === y); if (!occupied) { food = { x, y }; return; } } } // अगर पूरा ग्रिड भर गया है (जीत) - गेम ओवर मानें gameOver = true; gameRunning = false; } // ---------- गेम रीसेट ---------- function resetGame() { snake = [ { x: 10, y: 10 }, { x: 9, y: 10 }, { x: 8, y: 10 }, { x: 7, y: 10 } ]; direction = 'RIGHT'; nextDirection = 'RIGHT'; score = 0; gameRunning = true; gamePaused = false; gameOver = false; scoreSpan.textContent = '0'; // भोजन को सुरक्षित स्थान पर रखें food = { x: 15, y: 10 }; // जाँचें कि कहीं भोजन साँप पर तो नहीं if (snake.some(seg => seg.x === food.x && seg.y === food.y)) { generateFood(); } drawGame(); } // ---------- गेम ओवर ---------- function setGameOver() { gameOver = true; gameRunning = false; // स्कोर दिखाएँ (पहले से अपडेटेड) } // ---------- गेम टिक (मुख्य तर्क) ---------- function gameTick() { if (!gameRunning || gamePaused || gameOver) return; // दिशा अपडेट करें (विपरीत दिशा में तुरंत नहीं जा सकते) if (nextDirection === 'UP' && direction !== 'DOWN') direction = 'UP'; else if (nextDirection === 'DOWN' && direction !== 'UP') direction = 'DOWN'; else if (nextDirection === 'LEFT' && direction !== 'RIGHT') direction = 'LEFT'; else if (nextDirection === 'RIGHT' && direction !== 'LEFT') direction = 'RIGHT'; // नया सिर const head = { ...snake[0] }; switch (direction) { case 'UP': head.y--; break; case 'DOWN': head.y++; break; case 'LEFT': head.x--; break; case 'RIGHT': head.x++; break; } // दीवार से टकराना if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) { setGameOver(); drawGame(); return; } // खुद से टकराना (सिर को छोड़कर बाकी शरीर से) const selfCollision = snake.some((segment, index) => { // index 0 पुराना सिर है, लेकिन हम नए सिर की तुलना कर रहे हैं return segment.x === head.x && segment.y === head.y; }); if (selfCollision) { setGameOver(); drawGame(); return; } // साँप की बॉडी बनाएँ snake.unshift(head); // भोजन खाना if (head.x === food.x && head.y === food.y) { score++; scoreSpan.textContent = score; // भोजन नया बनाएँ generateFood(); // अगर गेम ओवर हो गया (ग्रिड भरा) तो रोकें if (gameOver) { drawGame(); return; } } else { // पूंछ हटाएँ snake.pop(); } drawGame(); } // ---------- ड्रॉइंग ---------- function drawGame() { ctx.clearRect(0, 0, canvas.width, canvas.height); // ग्रिड बैकग्राउंड (हल्का) ctx.fillStyle = '#0b121c'; ctx.fillRect(0, 0, canvas.width, canvas.height); // ग्रिड लाइन्स (बहुत हल्की) ctx.strokeStyle = '#1a2a3a'; ctx.lineWidth = 0.5; for (let i = 0; i <= GRID_SIZE; i++) { ctx.beginPath(); ctx.moveTo(i * CELL_SIZE, 0); ctx.lineTo(i * CELL_SIZE, canvas.height); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, i * CELL_SIZE); ctx.lineTo(canvas.width, i * CELL_SIZE); ctx.stroke(); } // भोजन (सेब जैसा) ctx.fillStyle = '#e74c3c'; ctx.shadowColor = '#ff6b6b'; ctx.shadowBlur = 8; ctx.beginPath(); ctx.arc(food.x * CELL_SIZE + CELL_SIZE / 2, food.y * CELL_SIZE + CELL_SIZE / 2, CELL_SIZE * 0.4, 0, 2 * Math.PI); ctx.fill(); // हाइलाइट ctx.fillStyle = '#ff8a7a'; ctx.beginPath(); ctx.arc(food.x * CELL_SIZE + CELL_SIZE / 2 - 2, food.y * CELL_SIZE + CELL_SIZE / 2 - 2, CELL_SIZE * 0.15, 0, 2 * Math.PI); ctx.fill(); ctx.shadowBlur = 0; // साँप का शरीर for (let i = 0; i < snake.length; i++) { const seg = snake[i]; const x = seg.x * CELL_SIZE; const y = seg.y * CELL_SIZE; // सिर अलग रंग if (i === 0) { ctx.fillStyle = '#2ecc71'; // हरा सिर ctx.shadowColor = '#27ae60'; ctx.shadowBlur = 6; } else { ctx.fillStyle = '#1e8a4a'; // गहरा हरा ctx.shadowBlur = 3; } // गोल कोने वाला आयत ctx.beginPath(); ctx.roundRect(x + 1, y + 1, CELL_SIZE - 2, CELL_SIZE - 2, 5); ctx.fill(); } ctx.shadowBlur = 0; // आँखें (सिर पर) if (snake.length > 0) { const head = snake[0]; const hx = head.x * CELL_SIZE; const hy = head.y * CELL_SIZE; ctx.fillStyle = '#ffffff'; ctx.beginPath(); ctx.arc(hx + CELL_SIZE * 0.35, hy + CELL_SIZE * 0.35, 2.5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(hx + CELL_SIZE * 0.65, hy + CELL_SIZE * 0.35, 2.5, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#000000'; ctx.beginPath(); ctx.arc(hx + CELL_SIZE * 0.35, hy + CELL_SIZE * 0.35, 1.2, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(hx + CELL_SIZE * 0.65, hy + CELL_SIZE * 0.35, 1.2, 0, 2 * Math.PI); ctx.fill(); } // गेम ओवर टेक्स्ट if (gameOver) { ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0, canvas.height/2 - 30, canvas.width, 60); ctx.fillStyle = '#f1c40f'; ctx.font = 'bold 24px "Segoe UI", sans-serif'; ctx.textAlign = 'center'; ctx.shadowColor = '#000'; ctx.shadowBlur = 8; ctx.fillText('गेम ओवर', canvas.width/2, canvas.height/2 + 8); ctx.shadowBlur = 0; } else if (gamePaused) { ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillRect(0, canvas.height/2 - 25, canvas.width, 50); ctx.fillStyle = '#b0e0ff'; ctx.font = 'bold 20px "Segoe UI", sans-serif'; ctx.textAlign = 'center'; ctx.fillText('रोका गया', canvas.width/2, canvas.height/2 + 7); } } // roundRect सहायक CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) { if (w < 2 * r) r = w / 2; if (h < 2 * r) r = h / 2; this.moveTo(x + r, y); this.arcTo(x + w - r, y, x + w, y + r, r); this.arcTo(x + w, y + h - r, x + w - r, y + h, r); this.arcTo(x + r, y + h, x, y + h - r, r); this.arcTo(x, y + r, x + r, y, r); this.closePath(); return this; }; // ---------- कीबोर्ड नियंत्रण ---------- function handleKeyPress(e) { const key = e.key; // केवल तीर कुंजियाँ if (key === 'ArrowUp') { e.preventDefault(); if (direction !== 'DOWN') nextDirection = 'UP'; } else if (key === 'ArrowDown') { e.preventDefault(); if (direction !== 'UP') nextDirection = 'DOWN'; } else if (key === 'ArrowLeft') { e.preventDefault(); if (direction !== 'RIGHT') nextDirection = 'LEFT'; } else if (key === 'ArrowRight') { e.preventDefault(); if (direction !== 'LEFT') nextDirection = 'RIGHT'; } } // ---------- बटन इवेंट्स ---------- function initControls() { const restartBtn = document.getElementById('restartBtn'); const pauseBtn = document.getElementById('pauseBtn'); restartBtn.addEventListener('click', () => { resetGame(); // अगर पॉज़ था तो हटाएँ gamePaused = false; pauseBtn.textContent = '⏸️ रोकें'; drawGame(); }); pauseBtn.addEventListener('click', () => { if (gameOver) return; gamePaused = !gamePaused; pauseBtn.textContent = gamePaused ? '▶️ जारी रखें' : '⏸️ रोकें'; drawGame(); }); } // ---------- मुख्य लूप ---------- let gameLoopInterval; function startGameLoop() { if (gameLoopInterval) clearInterval(gameLoopInterval); gameLoopInterval = setInterval(gameTick, gameSpeed); } // ---------- प्रारंभिकरण ---------- function init() { // भोजन सुरक्षित स्थान पर रखें generateFood(); drawGame(); initControls(); startGameLoop(); window.addEventListener('keydown', handleKeyPress); } // पेज लोड होने पर window.addEventListener('load', init); // क्लीनअप (वैकल्पिक) window.addEventListener('beforeunload', () => { if (gameLoopInterval) clearInterval(gameLoopInterval); }); })(); </script> </body> </html>