Snake Game AI Coding Test

Snake Game

Use arrow keys to control the snake. Eat the red food to grow and earn points. Avoid walls and yourself!

Score: 0

High Score: 0

Game Over!

Use Arrow Keys (↑, ↓, ←, →) to control direction

Source Code

<div class="snake-game-wrapper">
  <style>
    .snake-game-wrapper {
      max-width: 600px;
      margin: 0 auto;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
      text-align: center;
      color: #333;
    }
    
    .game-header {
      margin-bottom: 15px;
    }
    
    .instructions {
      background: #f8f9fa;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 15px;
      font-size: 14px;
      color: #666;
      border: 1px solid #e9ecef;
    }
    
    .score-container {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 15px;
      font-weight: bold;
      font-size: 18px;
    }
    
    .current-score {
      color: #4CAF50;
    }
    
    .high-score {
      color: #2196F3;
    }
    
    .game-container {
      position: relative;
      margin-bottom: 20px;
    }
    
    .game-canvas {
      background-color: #1a1a1a;
      border-radius: 8px;
      border: 2px solid #333;
      display: block;
      margin: 0 auto;
    }
    
    .game-button {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .game-button:hover {
      background: #45a049;
      transform: translateY(-2px);
      box-shadow: 0 6px 8px rgba(0,0,0,0.15);
    }
    
    .game-button:active {
      transform: translateY(0);
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .game-over {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.85);
      color: white;
      padding: 20px 30px;
      border-radius: 8px;
      font-size: 24px;
      font-weight: bold;
      display: none;
      box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    }
    
    .controls-info {
      font-size: 13px;
      color: #777;
      margin-top: 15px;
    }
  </style>

  <div class="game-header">
    <h2>Snake Game</h2>
    <div class="instructions">
      Use arrow keys to control the snake. Eat the red food to grow and earn points. Avoid walls and yourself!
    </div>
  </div>
  
  <div class="score-container">
    <div class="current-score">Score: <span id="currentScore">0</span></div>
    <div class="high-score">High Score: <span id="highScore">0</span></div>
  </div>
  
  <div class="game-container">
    <canvas class="game-canvas" width="400" height="400"></canvas>
    <div class="game-over" id="gameOverText">Game Over!</div>
  </div>
  
  <button class="game-button" id="startButton">Start Game</button>
  <div class="controls-info">Use Arrow Keys (↑, ↓, ←, →) to control direction</div>

  <script>
    // Game state and configuration
    const gameState = {
      canvas: null,
      ctx: null,
      snake: [],
      food: { x: 0, y: 0 },
      direction: { x: 1, y: 0 },
      nextDirection: { x: 1, y: 0 },
      gridSize: 20,
      gameLoopId: null,
      score: 0,
      highScore: 0,
      isRunning: false,
      speed: 100 // milliseconds per move
    };

    // Initialize game
    function initGame() {
      gameState.canvas = document.querySelector('.game-canvas');
      gameState.ctx = gameState.canvas.getContext('2d');
      
      // Load high score from localStorage
      gameState.highScore = parseInt(localStorage.getItem('snakeHighScore')) || 0;
      document.getElementById('highScore').textContent = gameState.highScore;
      
      // Set up event listeners
      document.addEventListener('keydown', handleKeyPress);
      document.getElementById('startButton').addEventListener('click', startGame);
      
      // Draw initial static state
      drawStatic();
    }

    // Draw static elements (border, initial text)
    function drawStatic() {
      gameState.ctx.fillStyle = '#1a1a1a';
      gameState.ctx.fillRect(0, 0, gameState.canvas.width, gameState.canvas.height);
      
      // Draw grid pattern (subtle)
      gameState.ctx.strokeStyle = '#222';
      gameState.ctx.lineWidth = 0.5;
      for (let x = 0; x <= gameState.canvas.width; x += gameState.gridSize) {
        gameState.ctx.beginPath();
        gameState.ctx.moveTo(x, 0);
        gameState.ctx.lineTo(x, gameState.canvas.height);
        gameState.ctx.stroke();
      }
      for (let y = 0; y <= gameState.canvas.height; y += gameState.gridSize) {
        gameState.ctx.beginPath();
        gameState.ctx.moveTo(0, y);
        gameState.ctx.lineTo(gameState.canvas.width, y);
        gameState.ctx.stroke();
      }
      
      // Initial instruction text
      gameState.ctx.fillStyle = '#666';
      gameState.ctx.font = '16px Arial';
      gameState.ctx.textAlign = 'center';
      gameState.ctx.fillText('Click "Start Game" to begin', 
                            gameState.canvas.width/2, 
                            gameState.canvas.height/2);
    }

    // Start or restart the game
    function startGame() {
      if (gameState.isRunning) {
        clearInterval(gameState.gameLoopId);
      }
      
      // Reset game state
      gameState.snake = [
        { x: 10, y: 10 },
        { x: 9, y: 10 },
        { x: 8, y: 10 }
      ];
      gameState.direction = { x: 1, y: 0 };
      gameState.nextDirection = { x: 1, y: 0 };
      gameState.score = 0;
      gameState.isRunning = true;
      
      // Update UI
      document.getElementById('currentScore').textContent = '0';
      document.getElementById('gameOverText').style.display = 'none';
      document.getElementById('startButton').textContent = 'Restart Game';
      
      // Generate initial food
      generateFood();
      
      // Start game loop
      gameState.gameLoopId = setInterval(gameLoop, gameState.speed);
      
      // Draw initial frame
      draw();
    }

    // Main game loop
    function gameLoop() {
      // Update direction from queued input
      gameState.direction = { ...gameState.nextDirection };
      
      // Calculate new head position
      const head = { ...gameState.snake[0] };
      head.x += gameState.direction.x;
      head.y += gameState.direction.y;
      
      // Check for collisions
      if (isCollision(head)) {
        gameOver();
        return;
      }
      
      // Add new head
      gameState.snake.unshift(head);
      
      // Check if food is eaten
      if (head.x === gameState.food.x && head.y === gameState.food.y) {
        // Increase score
        gameState.score += 10;
        document.getElementById('currentScore').textContent = gameState.score;
        
        // Update high score if needed
        if (gameState.score > gameState.highScore) {
          gameState.highScore = gameState.score;
          document.getElementById('highScore').textContent = gameState.highScore;
          localStorage.setItem('snakeHighScore', gameState.highScore.toString());
        }
        
        // Generate new food
        generateFood();
      } else {
        // Remove tail if no food eaten
        gameState.snake.pop();
      }
      
      // Draw updated game state
      draw();
    }

    // Check for collisions
    function isCollision(head) {
      // Wall collision
      if (head.x < 0 || head.x >= gameState.canvas.width / gameState.gridSize ||
          head.y < 0 || head.y >= gameState.canvas.height / gameState.gridSize) {
        return true;
      }
      
      // Self collision (skip head itself)
      for (let i = 1; i < gameState.snake.length; i++) {
        if (gameState.snake[i].x === head.x && gameState.snake[i].y === head.y) {
          return true;
        }
      }
      
      return false;
    }

    // Generate food at random location (not on snake)
    function generateFood() {
      let newFood;
      let foodOnSnake;
      
      do {
        foodOnSnake = false;
        newFood = {
          x: Math.floor(Math.random() * (gameState.canvas.width / gameState.gridSize)),
          y: Math.floor(Math.random() * (gameState.canvas.height / gameState.gridSize))
        };
        
        // Check if food would spawn on snake
        for (const segment of gameState.snake) {
          if (segment.x === newFood.x && segment.y === newFood.y) {
            foodOnSnake = true;
            break;
          }
        }
      } while (foodOnSnake);
      
      gameState.food = newFood;
    }

    // Draw everything on canvas
    function draw() {
      // Clear canvas
      gameState.ctx.fillStyle = '#1a1a1a';
      gameState.ctx.fillRect(0, 0, gameState.canvas.width, gameState.canvas.height);
      
      // Draw grid (subtle)
      gameState.ctx.strokeStyle = '#222';
      gameState.ctx.lineWidth = 0.5;
      for (let x = 0; x <= gameState.canvas.width; x += gameState.gridSize) {
        gameState.ctx.beginPath();
        gameState.ctx.moveTo(x, 0);
        gameState.ctx.lineTo(x, gameState.canvas.height);
        gameState.ctx.stroke();
      }
      for (let y = 0; y <= gameState.canvas.height; y += gameState.gridSize) {
        gameState.ctx.beginPath();
        gameState.ctx.moveTo(0, y);
        gameState.ctx.lineTo(gameState.canvas.width, y);
        gameState.ctx.stroke();
      }
      
      // Draw snake
      gameState.snake.forEach((segment, index) => {
        const x = segment.x * gameState.gridSize;
        const y = segment.y * gameState.gridSize;
        
        // Head is slightly brighter
        if (index === 0) {
          gameState.ctx.fillStyle = '#66BB6A';
        } else {
          gameState.ctx.fillStyle = '#4CAF50';
        }
        
        // Draw rounded segments
        gameState.ctx.beginPath();
        gameState.ctx.roundRect(x, y, gameState.gridSize, gameState.gridSize, 4);
        gameState.ctx.fill();
        
        // Add subtle border
        gameState.ctx.strokeStyle = '#388E3C';
        gameState.ctx.lineWidth = 1;
        gameState.ctx.stroke();
      });
      
      // Draw food
      const foodX = gameState.food.x * gameState.gridSize;
      const foodY = gameState.food.y * gameState.gridSize;
      
      gameState.ctx.fillStyle = '#f44336';
      gameState.ctx.beginPath();
      gameState.ctx.arc(foodX + gameState.gridSize/2, 
                       foodY + gameState.gridSize/2, 
                       gameState.gridSize/2 - 1, 0, Math.PI * 2);
      gameState.ctx.fill();
      
      // Add shine effect to food
      gameState.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
      gameState.ctx.beginPath();
      gameState.ctx.arc(foodX + gameState.gridSize/2 - 3, 
                       foodY + gameState.gridSize/2 - 3, 
                       gameState.gridSize/6, 0, Math.PI * 2);
      gameState.ctx.fill();
    }

    // Handle keyboard input
    function handleKeyPress(event) {
      if (!gameState.isRunning) return;
      
      // Prevent default behavior for arrow keys to avoid page scrolling
      if ([37, 38, 39, 40].includes(event.keyCode)) {
        event.preventDefault();
      }
      
      let newDirection = { ...gameState.nextDirection };
      
      // Update direction based on key press, prevent opposite direction
      switch (event.keyCode) {
        case 37: // Left arrow
          if (gameState.direction.x !== 1) newDirection = { x: -1, y: 0 };
          break;
        case 38: // Up arrow
          if (gameState.direction.y !== 1) newDirection = { x: 0, y: -1 };
          break;
        case 39: // Right arrow
          if (gameState.direction.x !== -1) newDirection = { x: 1, y: 0 };
          break;
        case 40: // Down arrow
          if (gameState.direction.y !== -1) newDirection = { x: 0, y: 1 };
          break;
      }
      
      // Only update if direction actually changed
      if (newDirection.x !== gameState.nextDirection.x || 
          newDirection.y !== gameState.nextDirection.y) {
        gameState.nextDirection = newDirection;
      }
    }

    // Handle game over
    function gameOver() {
      gameState.isRunning = false;
      clearInterval(gameState.gameLoopId);
      
      // Show game over text
      const gameOverElement = document.getElementById('gameOverText');
      gameOverElement.textContent = `Game Over! Score: ${gameState.score}`;
      gameOverElement.style.display = 'block';
    }

    // Initialize game when page loads
    window.addEventListener('DOMContentLoaded', initGame);
  </script>
</div>
</div>

Source Prompt (Used on DeepSeek

Create a fully functional Snake game as a SINGLE DIV suitable for embedding in a Blogger post. Critical requirements:

STRUCTURE:
- Start with <div class="snake-game-wrapper"> and end with </div>
- NO <!DOCTYPE>, <html>, <head>, or <body> tags
- Include <style> tag inside the div with scoped CSS
- Include <script> tag inside the div
- All code must be self-contained with no external dependencies

FUNCTIONALITY:
- Canvas-based Snake game (400x400px recommended)
- Arrow keys control direction (prevent opposite-direction moves)
- Snake starts at center, length 3, moving right automatically on game start
- Food spawns randomly (never on snake body)
- Snake grows one segment per food eaten
- Score increments with each food
- High score persists using localStorage
- Game over on wall collision or self-collision
- Clear "Start Game" button to begin/restart
- Display current score and high score

GAMEPLAY REQUIREMENTS:
- Game must start moving immediately when Start is clicked (don't wait for arrow key)
- Movement must be smooth and continuous at ~100ms intervals
- Direction changes must queue properly (no skipped inputs)
- Game loop must stop cleanly on game over

STYLE:
- Container max-width: 600px, centered
- Dark canvas background (#1a1a1a)
- Green snake (#4CAF50), red food (#f44336)
- Clean, modern UI with good contrast
- Brief instructions above canvas
- Professional button styling

CODE QUALITY:
- Clear comments explaining game logic
- Defensive coding (check boundaries, prevent bugs)
- Use const/let appropriately
- Test that the game actually works before returning

The game must be playable immediately when embedded - no debugging required.