Muhammad Atif.Snake game

347 Atif.designer.developer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snake Game with Start & Restart</title>
  <style>
    body {
      background: #111;
      color: #fff;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

canvas {
      background: #000;
      border: 2px solid #00ff99;
      margin: 10px 0;
    }

button {
      padding: 10px 18px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      background: #00ff99;
      border: none;
      border-radius: 6px;
      margin: 5px;
    }

.controls {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 60px 60px 60px;
      grid-gap: 8px;
      justify-content: center;
    }

.empty {
      visibility: hidden;
    }
  </style>
</head>
<body>

<h2>paint Game</h2>
  <p>Score: <span id="score">0</span></p>

<div>
    <button onclick="startGame()">START</button>
    <button onclick="restartGame()">RESTART</button>
  </div>

<div class="controls">
    <div class="empty"></div>
    <button onclick="setDirection('UP')">⬆</button>
    <div class="empty"></div>

const box = 15;
    let score = 0; 
    let game = null;
    let running = false;

let snake;
    let direction;
    let food;

function initGame() {
      score = 0;
      document.getElementById("score").innerText = score;

snake = [{ x: 150, y: 150 }];
      direction = "RIGHT";

food = {
        x: Math.floor(Math.random() * 20) * box,
        y: Math.floor(Math.random() * 20) * box
      };

draw();
    }

function startGame() {
      if (!running) {
        running = true;
        game = setInterval(draw, 120);
      }
    }

function restartGame() {
      clearInterval(game);
      running = false;
      initGame();
    }

document.addEventListener("keydown", (e) => {
      if (e.key === "Enter") startGame();
      if (e.key === "ArrowUp" && direction !== "DOWN") direction = "UP";
      if (e.key === "ArrowDown" && direction !== "UP") direction = "DOWN";
      if (e.key === "ArrowLeft" && direction !== "RIGHT") direction = "LEFT";
      if (e.key === "ArrowRight" && direction !== "LEFT") direction = "RIGHT";
    });

function setDirection(dir) {
      if (dir === "UP" && direction !== "DOWN") direction = "UP";
      if (dir === "DOWN" && direction !== "UP") direction = "DOWN";
      if (dir === "LEFT" && direction !== "RIGHT") direction = "LEFT";
      if (dir === "RIGHT" && direction !== "LEFT") direction = "RIGHT";
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Snake
      for (let i = 0; i < snake.length; i++) {
        ctx.fillStyle = i === 0 ? "#00ff99" : "#00cc77";
        ctx.fillRect(snake[i].x, snake[i].y, box, box);
      }

// Food
      ctx.fillStyle = "red";
      ctx.fillRect(food.x, food.y, box, box);

let headX = snake[0].x;
      let headY = snake[0].y;

if (direction === "UP") headY -= box;
      if (direction === "DOWN") headY += box;
      if (direction === "LEFT") headX -= box;
      if (direction === "RIGHT") headX += box;

// Eat food
      if (headX === food.x && headY === food.y) {
        score++;
        document.getElementById("score").innerText = score;
        food = {
          x: Math.floor(Math.random() * 20) * box,
          y: Math.floor(Math.random() * 20) * box
        };
      } else {
        snake.pop();
      }

let newHead = { x: headX, y: headY };

// Game Over
      if (
        headX < 0 || headY < 0 ||
        headX >= canvas.width || headY >= canvas.height ||
        collision(newHead, snake)
      ) {
        clearInterval(game);
        running = false;
        alert("Game Over! Score: " + score);
      }

snake.unshift(newHead);
    }

function collision(head, body) {
      return body.some(part => head.x === part.x && head.y === part.y);
    }

initGame();
  </script>

</body>
</html>

CSS

Muhammad Atif.Snake game

Recommended