Muhammad Atif.Snake game

Open In Editor Video Publish Your Code

<!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>

Muhammad Atif.Snake game

Recommended

Geometry Dash Game Clone HTML CSS JavaScript

Minecraft Game Code HTML CSS JavaScript

TicTacToe Game

HTML

CSS

JS

Recommended

Geometry Dash Game Clone HTML CSS JavaScript

Minecraft Game Code HTML CSS JavaScript

TicTacToe Game

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS