Snake Game

Open In Editor Publish Your Code

Snake Game

Recommended

13 January 2024

Tic Tac Toe Game

27 February 2025

STACK GAME by TONY

15 October 2025

Guessing Game HTML JavaScript Code

HTML

CSS

JS

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);