Dots3-Note Preview (free)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #e6e6e6;
    overflow: hidden;
    padding: 20px;
  }

  .game-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }

  .score-board {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }

  .score-item {
    text-align: center;
  }

  .score-label {
    font-size: 0.9rem;
    color: #a0a0a0;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .score-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #4CAF50;
  }

  #best-score .score-value {
    color: #FFC107;
  }

  canvas {
    display: block;
    background: #0f3460;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: auto;
    max-width: 600px;
    max-height: 600px;
  }

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    z-index: 10;
    text-align: center;
    padding: 20px;
    backdrop-filter: blur(4px);
  }

  .overlay h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #ff5252;
    text-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
  }

  .overlay p {
    font-size: 1.2rem;
    margin-bottom: 25px;
    color: #e0e0e0;
  }

  .overlay .final-score {
    font-size: 1.8rem;
    font-weight: bold;
    color: #4CAF50;
    margin-bottom: 10px;
  }

  .overlay .best-score {
    font-size: 1.2rem;
    color: #FFC107;
    margin-bottom: 25px;
  }

  .controls {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #b0b0b0;
    line-height: 1.6;
  }

  .hidden {
    display: none;
  }

  .start-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20;
    background: rgba(0, 0, 0, 0.7);
    padding: 30px;
    border-radius: 10px;
    max-width: 90%;
    width: 400px;
  }

  .start-message h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #4CAF50;
  }

  .start-message p {
    margin-bottom: 20px;
    color: #e0e0e0;
  }

  .key {
    display: inline-block;
    padding: 5px 10px;
    background: #333;
    border-radius: 5px;
    margin: 0 3px;
    font-family: monospace;
    border: 1px solid #555;
  }
</style>
</head>
<body>
  <div class="game-container">
    <div class="score-board">
      <div class="score-item">
        <div class="score-label">Score</div>
        <div class="score-value" id="current-score">0</div>
      </div>
      <div class="score-item" id="best-score">
        <div class="score-label">Best</div>
        <div class="score-value" id="best-score-value">0</div>
      </div>
    </div>
    
    <div style="position: relative;">
      <canvas id="game-canvas" width="600" height="600"></canvas>
      
      <div class="start-message" id="start-message">
        <h2>Snake Game</h2>
        <p>Use <span class="key">Arrow Keys</span> or <span class="key">WASD</span> to control the snake.</p>
        <p>Eat the food to grow and earn points.</p>
        <p>Avoid walls and your own tail!</p>
        <p><span class="key">Space</span> or <span class="key">Enter</span> to start</p>
      </div>
      
      <div class="overlay hidden" id="game-over-overlay">
        <h2>Game Over</h2>
        <div class="final-score">Score: <span id="final-score">0</span></div>
        <div class="best-score">Best: <span id="game-best-score">0</span></div>
        <p>Press Space or Enter to restart</p>
      </div>
      
      <div class="overlay hidden" id="pause-overlay">
        <h2>Paused</h2>
        <p>Press P to resume</p>
      </div>
    </div>
    
    <div class="controls">
      <p><span class="key">↑</span> <span class="key">W</span> - Up | 
         <span class="key">↓</span> <span class="key">S</span> - Down | 
         <span class="key">←</span> <span class="key">A</span> - Left | 
         <span class="key">→</span> <span class="key">D</span> - Right</p>
      <p><span class="key">Space</span> / <span class="key">Enter</span> - Start/Restart | 
         <span class="key">P</span> - Pause</p>
    </div>
  </div>

<script>
  // Game constants
  const GRID_SIZE = 20;
  const CELL_SIZE = 30; // pixels per cell
  const GAME_SPEED = 120; // milliseconds between moves

  // Game state
  let canvas, ctx;
  let snake, food, direction, nextDirection;
  let score, bestScore;
  let gameRunning, gamePaused, gameStarted;
  let particles;
  let lastMoveTime;

  // Initialize the game
  function init() {
    canvas = document.getElementById('game-canvas');
    ctx = canvas.getContext('2d');
    
    // Set canvas dimensions based on grid size
    canvas.width = GRID_SIZE * CELL_SIZE;
    canvas.height = GRID_SIZE * CELL_SIZE;
    
    // Initialize game variables
    snake = [];
    food = {};
    direction = { x: 0, y: 0 };
    nextDirection = { x: 0, y: 0 };
    score = 0;
    bestScore = localStorage.getItem('snakeBestScore') || 0;
    document.getElementById('best-score-value').textContent = bestScore;
    gameRunning = false;
    gamePaused = false;
    gameStarted = false;
    particles = [];
    lastMoveTime = 0;
    
    // Update score display
    updateScore();
    
    // Initialize snake starting position
    resetSnake();
    
    // Generate first food
    generateFood();
    
    // Draw initial state
    draw();
    
    // Set up event listeners
    setupEventListeners();
    
    // Start the game loop
    requestAnimationFrame(gameLoop);
  }

  // Reset snake to starting position
  function resetSnake() {
    snake = [
      { x: 10, y: 10 },
      { x: 9, y: 10 },
      { x: 8, y: 10 }
    ];
    direction = { x: 1, y: 0 }; // Start moving right
    nextDirection = { x: 1, y: 0 };
  }

  // Generate food at a random position not occupied by the snake
  function generateFood() {
    let newFood;
    let validPosition = false;
    
    while (!validPosition) {
      newFood = {
        x: Math.floor(Math.random() * GRID_SIZE),
        y: Math.floor(Math.random() * GRID_SIZE)
      };
      
      // Check if food spawns on snake
      validPosition = !snake.some(segment => 
        segment.x === newFood.x && segment.y === newFood.y
      );
    }
    
    food = newFood;
  }

  // Update score display
  function updateScore() {
    document.getElementById('current-score').textContent = score;
    document.getElementById('final-score').textContent = score;
    document.getElementById('game-best-score').textContent = bestScore;
  }

  // Create particle burst when eating food
  function createParticles(x, y) {
    const particleCount = 15;
    const colors = ['#4CAF50', '#8BC34A', '#CDDC39', '#FFEB3B'];
    
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: x * CELL_SIZE + CELL_SIZE / 2,
        y: y * CELL_SIZE + CELL_SIZE / 2,
        size: Math.random() * 4 + 2,
        speedX: (Math.random() - 0.5) * 8,
        speedY: (Math.random() - 0.5) * 8,
        life: 30, // frames
        maxLife: 30,
        color: colors[Math.floor(Math.random() * colors.length)]
      });
    }
  }

  // Update particles
  function updateParticles() {
    for (let i = particles.length - 1; i >= 0; i--) {
      const p = particles[i];
      
      p.x += p.speedX;
      p.y += p.speedY;
      p.life--;
      
      if (p.life <= 0) {
        particles.splice(i, 1);
      }
    }
  }

  // Draw particles
  function drawParticles() {
    for (const p of particles) {
      const alpha = p.life / p.maxLife;
      ctx.globalAlpha = alpha;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }

  // Move the snake
  function moveSnake() {
    // Update direction
    direction = nextDirection;
    
    // Calculate new head position
    const head = { ...snake[0] };
    head.x += direction.x;
    head.y += direction.y;
    
    // Check wall collision
    if (head.x < 0 || head.x >= GRID_SIZE || head.y < 0 || head.y >= GRID_SIZE) {
      gameOver();
      return;
    }
    
    // Check self collision
    for (let i = 0; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        gameOver();
        return;
      }
    }
    
    // Add new head
    snake.unshift(head);
    
    // Check food collision
    if (head.x === food.x && head.y === food.y) {
      // Increase score
      score += 10;
      updateScore();
      
      // Create particle effect
      createParticles(food.x, food.y);
      
      // Generate new food
      generateFood();
    } else {
      // Remove tail if no food eaten
      snake.pop();
    }
  }

  // Draw the snake with direction-aware head and eyes
  function drawSnake() {
    // Draw snake body
    for (let i = 0; i < snake.length; i++) {
      const segment = snake[i];
      const x = segment.x * CELL_SIZE;
      const y = segment.y * CELL_SIZE;
      
      // Draw body segment with gradient
      const gradient = ctx.createLinearGradient(x, y, x + CELL_SIZE, y + CELL_SIZE);
      
      if (i === 0) {
        // Head is slightly different color
        gradient.addColorStop(0, '#4CAF50');
        gradient.addColorStop(1, '#2E7D32');
      } else {
        // Body segments get progressively darker
        const intensity = Math.max(0.3, 1 - (i / snake.length) * 0.5);
        gradient.addColorStop(0, `rgba(76, 175, 80, ${intensity})`);
        gradient.addColorStop(1, `rgba(46, 125, 50, ${intensity})`);
      }
      
      ctx.fillStyle = gradient;
      ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      
      // Add subtle border
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';
      ctx.lineWidth = 1;
      ctx.strokeRect(x, y, CELL_SIZE, CELL_SIZE);
    }
    
    // Draw head details (eyes based on direction)
    drawSnakeHead();
  }

  // Draw snake head with eyes facing the current direction
  function drawSnakeHead() {
    const head = snake[0];
    const x = head.x * CELL_SIZE;
    const y = head.y * CELL_SIZE;
    const eyeSize = CELL_SIZE / 6;
    const eyeOffset = CELL_SIZE / 4;
    
    ctx.fillStyle = '#FFFFFF';
    
    // Position eyes based on direction
    let eye1X, eye1Y, eye2X, eye2Y;
    
    switch (direction.x) {
      case 1: // Right
        eye1X = x + CELL_SIZE - eyeOffset;
        eye1Y = y + eyeOffset;
        eye2X = x + CELL_SIZE - eyeOffset;
        eye2Y = y + CELL_SIZE - eyeOffset;
        break;
      case -1: // Left
        eye1X = x + eyeOffset;
        eye1Y = y + eyeOffset;
        eye2X = x + eyeOffset;
        eye2Y = y + CELL_SIZE - eyeOffset;
        break;
      case 0:
        if (direction.y === 1) { // Down
          eye1X = x + eyeOffset;
          eye1Y = y + CELL_SIZE - eyeOffset;
          eye2X = x + CELL_SIZE - eyeOffset;
          eye2Y = y + CELL_SIZE - eyeOffset;
        } else { // Up
          eye1X = x + eyeOffset;
          eye1Y = y + eyeOffset;
          eye2X = x + CELL_SIZE - eyeOffset;
          eye2Y = y + eyeOffset;
        }
        break;
    }
    
    // Draw eyes
    ctx.beginPath();
    ctx.arc(eye1X, eye1Y, eyeSize, 0, Math.PI * 2);
    ctx.arc(eye2X, eye2Y, eyeSize, 0, Math.PI * 2);
    ctx.fill();
    
    // Draw pupils
    ctx.fillStyle = '#000000';
    const pupilSize = eyeSize / 2;
    
    // Adjust pupil position slightly in the direction of movement
    let pupil1X = eye1X + direction.x * eyeSize/2;
    let pupil1Y = eye1Y + direction.y * eyeSize/2;
    let pupil2X = eye2X + direction.x * eyeSize/2;
    let pupil2Y = eye2Y + direction.y * eyeSize/2;
    
    ctx.beginPath();
    ctx.arc(pupil1X, pupil1Y, pupilSize, 0, Math.PI * 2);
    ctx.arc(pupil2X, pupil2Y, pupilSize, 0, Math.PI * 2);
    ctx.fill();
  }

  // Draw the food
  function drawFood() {
    const x = food.x * CELL_SIZE;
    const y = food.y * CELL_SIZE;
    
    // Draw apple-like food with gradient
    const gradient = ctx.createRadialGradient(
      x + CELL_SIZE/2, y + CELL_SIZE/2, 2,
      x + CELL_SIZE/2, y + CELL_SIZE/2, CELL_SIZE/2
    );
    gradient.addColorStop(0, '#FF5252');
    gradient.addColorStop(1, '#D32F2F');
    
    ctx.fillStyle = gradient;
    ctx.beginPath();
    ctx.arc(
      x + CELL_SIZE/2, 
      y + CELL_SIZE/2, 
      CELL_SIZE/2 - 2, 
      0, 
      Math.PI * 2
    );
    ctx.fill();
    
    // Add highlight
    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
    ctx.beginPath();
    ctx.arc(
      x + CELL_SIZE/3, 
      y + CELL_SIZE/3, 
      CELL_SIZE/6, 
      0, 
      Math.PI * 2
    );
    ctx.fill();
    
    // Add stem
    ctx.strokeStyle = '#5D4037';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(x + CELL_SIZE/2, y + 4);
    ctx.lineTo(x + CELL_SIZE/2, y);
    ctx.stroke();
  }

  // Draw grid lines
  function drawGrid() {
    ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
    ctx.lineWidth = 1;
    
    // Vertical lines
    for (let i = 0; i <= GRID_SIZE; i++) {
      ctx.beginPath();
      ctx.moveTo(i * CELL_SIZE, 0);
      ctx.lineTo(i * CELL_SIZE, GRID_SIZE * CELL_SIZE);
      ctx.stroke();
    }
    
    // Horizontal lines
    for (let i = 0; i <= GRID_SIZE; i++) {
      ctx.beginPath();
      ctx.moveTo(0, i * CELL_SIZE);
      ctx.lineTo(GRID_SIZE * CELL_SIZE, i * CELL_SIZE);
      ctx.stroke();
    }
  }

  // Main draw function
  function draw() {
    // Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Draw grid
    drawGrid();
    
    // Draw food
    drawFood();
    
    // Draw snake
    drawSnake();
    
    // Draw particles
    drawParticles();
  }

  // Game over handler
  function gameOver() {
    gameRunning = false;
    
    // Update best score
    if (score > bestScore) {
      bestScore = score;
      localStorage.setItem('snakeBestScore', bestScore);
      document.getElementById('best-score-value').textContent = bestScore;
    }
    
    // Show game over overlay
    document.getElementById('final-score').textContent = score;
    document.getElementById('game-best-score').textContent = bestScore;
    document.getElementById('game-over-overlay').classList.remove('hidden');
  }

  // Pause the game
  function pauseGame() {
    if (!gameStarted) return;
    
    gamePaused = !gamePaused;
    
    if (gamePaused) {
      document.getElementById('pause-overlay').classList.remove('hidden');
    } else {
      document.getElementById('pause-overlay').classList.add('hidden');
      lastMoveTime = performance.now(); // Reset timing to avoid large jumps
    }
  }

  // Start/restart the game
  function startGame() {
    // Reset game state
    score = 0;
    updateScore();
    resetSnake();
    generateFood();
    particles = [];
    
    // Hide overlays
    document.getElementById('start-message').classList.add('hidden');
    document.getElementById('game-over-overlay').classList.add('hidden');
    document.getElementById('pause-overlay').classList.add('hidden');
    
    // Start the game
    gameRunning = true;
    gamePaused = false;
    gameStarted = true;
    lastMoveTime = performance.now();
  }

  // Game loop
  function gameLoop(currentTime) {
    if (!gameStarted) {
      // Just draw the initial state until game starts
      draw();
      requestAnimationFrame(gameLoop);
      return;
    }
    
    if (gameRunning && !gamePaused) {
      // Calculate time elapsed since last move
      const elapsed = currentTime - lastMoveTime;
      
      // Move snake at defined intervals
      if (elapsed > GAME_SPEED) {
        moveSnake();
        lastMoveTime = currentTime;
      }
    }
    
    // Always update particles and draw
    updateParticles();
    draw();
    
    requestAnimationFrame(gameLoop);
  }

  // Set up event listeners
  function setupEventListeners() {
    document.addEventListener('keydown', (e) => {
      // Handle start/restart keys
      if ((e.key === ' ' || e.key === 'Enter') && (!gameStarted || !gameRunning)) {
        startGame();
        e.preventDefault();
        return;
      }
      
      // Handle pause key
      if (e.key === 'p' || e.key === 'P') {
        if (gameStarted) {
          pauseGame();
        }
        return;
      }
      
      // Handle direction keys only when game is running and not paused
      if (!gameRunning || gamePaused) return;
      
      let newDirection = null;
      
      // Arrow keys
      if (e.key === 'ArrowUp' && direction.y !== 1) {
        newDirection = { x: 0, y: -1 };
      } else if (e.key === 'ArrowDown' && direction.y !== -1) {
        newDirection = { x: 0, y: 1 };
      } else if (e.key === 'ArrowLeft' && direction.x !== 1) {
        newDirection = { x: -1, y: 0 };
      } else if (e.key === 'ArrowRight' && direction.x !== -1) {
        newDirection = { x: 1, y: 0 };
      }
      
      // WASD keys
      if (e.key === 'w' || e.key === 'W') {
        if (direction.y !== 1) newDirection = { x: 0, y: -1 };
      } else if (e.key === 's' || e.key === 'S') {
        if (direction.y !== -1) newDirection = { x: 0, y: 1 };
      } else if (e.key === 'a' || e.key === 'A') {
        if (direction.x !== 1) newDirection = { x: -1, y: 0 };
      } else if (e.key === 'd' || e.key === 'D') {
        if (direction.x !== -1) newDirection = { x: 1, y: 0 };
      }
      
      // Update next direction if valid
      if (newDirection) {
        nextDirection = newDirection;
        e.preventDefault();
      }
    });
  }

  // Initialize the game when the page loads
  window.addEventListener('load', init);
</script>
</body>
</html>