Back to Game

Snake Game - Source Code

Play Game
JavaScript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake = [{ x: 10, y: 10 }];
let food = {};
let dx = 0;
let dy = 0;
let score = 0;

function randomTile() {
  return Math.floor(Math.random() * tileCount);
}

function generateFood() {
  food = { x: randomTile(), y: randomTile() };
  
  for (let segment of snake) {
    if (segment.x === food.x && segment.y === food.y) {
      generateFood();
      return;
    }
  }
}

function drawGame() {
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  ctx.fillStyle = 'lime';
  for (let segment of snake) {
    ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
  }
  
  ctx.fillStyle = 'red';
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}

function moveSnake() {
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  snake.unshift(head);
  
  if (head.x === food.x && head.y === food.y) {
    score += 10;
    scoreElement.textContent = score;
    generateFood();
  } else {
    snake.pop();
  }
}

function checkCollision() {
  const head = snake[0];
  
  if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
    return true;
  }
  
  for (let i = 1; i < snake.length; i++) {
    if (head.x === snake[i].x && head.y === snake[i].y) {
      return true;
    }
  }
  
  return false;
}

function gameLoop() {
  if (checkCollision()) {
    alert('Game Over! Score: ' + score);
    resetGame();
    return;
  }
  
  moveSnake();
  drawGame();
  setTimeout(gameLoop, 100);
}

function resetGame() {
  snake = [{ x: 10, y: 10 }];
  dx = 0;
  dy = 0;
  score = 0;
  scoreElement.textContent = score;
  generateFood();
}

document.addEventListener('keydown', (event) => {
  const LEFT_KEY = 37, RIGHT_KEY = 39, UP_KEY = 38, DOWN_KEY = 40;
  const keyPressed = event.keyCode;
  
  if (keyPressed === LEFT_KEY && dx !== 1) { dx = -1; dy = 0; }
  if (keyPressed === UP_KEY && dy !== 1) { dx = 0; dy = -1; }
  if (keyPressed === RIGHT_KEY && dx !== -1) { dx = 1; dy = 0; }
  if (keyPressed === DOWN_KEY && dy !== -1) { dx = 0; dy = 1; }
});

generateFood();
gameLoop();

This code demonstrates the core game logic. The actual implementation may include additional features and optimizations.