WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Jeu du serpent
755
Anes_unk
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
23 September 2024
Societe de vente de produit locaux
17 May 2025
jeu du serpent
20 April 2025
le jeu de balle pour le plaisir (par M.)
HTML
Copy
Snake Game - Realistic
Score: 0
Game Over! Press F5 to Restart
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: 'Arial', sans-serif; color: white; } canvas { border: 2px solid white; background-color: #222; } .score { position: absolute; top: 20px; left: 20px; font-size: 20px; color: white; } .game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; color: white; display: none; }
JS
Copy
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; const blockSize = 20; let speed = 100; let snake = [ { x: 240, y: 240 }, { x: 220, y: 240 }, { x: 200, y: 240 } ]; let direction = 'RIGHT'; let food = generateFood(); let score = 0; let gameOver = false; function moveSnake() { const head = { ...snake[0] }; if (direction === 'UP') head.y -= blockSize; if (direction === 'DOWN') head.y += blockSize; if (direction === 'LEFT') head.x -= blockSize; if (direction === 'RIGHT') head.x += blockSize; snake.unshift(head); if (head.x === food.x && head.y === food.y) { score += 10; food = generateFood(); updateScore(); if (score % 50 === 0) { speed -= 10; } } else { snake.pop(); } } function generateFood() { let x = Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize; let y = Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize; return { x, y }; } function drawSnake() { ctx.fillStyle = 'green'; snake.forEach((segment, index) => { if (index === 0) { ctx.fillStyle = 'darkgreen'; } else { ctx.fillStyle = 'green'; } ctx.fillRect(segment.x, segment.y, blockSize, blockSize); }); } function drawFood() { ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, blockSize, blockSize); } function checkCollisions() { const head = snake[0]; if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) { gameOver = true; } for (let i = 1; i < snake.length; i++) { if (head.x === snake[i].x && head.y === snake[i].y) { gameOver = true; } } } function updateScore() { document.getElementById('scoreDisplay').innerText = `Score: ${score}`; } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawSnake(); drawFood(); } function gameLoop() { if (gameOver) return showGameOver(); moveSnake(); checkCollisions(); draw(); } function showGameOver() { document.getElementById('gameOverText').style.display = 'block'; } document.addEventListener('keydown', (e) => { if (e.code === 'ArrowUp' && direction !== 'DOWN') { direction = 'UP'; } else if (e.code === 'ArrowDown' && direction !== 'UP') { direction = 'DOWN'; } else if (e.code === 'ArrowLeft' && direction !== 'RIGHT') { direction = 'LEFT'; } else if (e.code === 'ArrowRight' && direction !== 'LEFT') { direction = 'RIGHT'; } }); setInterval(gameLoop, speed);