${upgrade.name}

${upgrade.description}

Level: ${upgrade.level}/${upgrade.maxLevel}

\n \n

\n `;\n \n const button = upgradeElement.querySelector('button');\n if (button && !isMaxLevel) {\n button.addEventListener('click', () => this.purchaseUpgrade(upgrade.id));\n }\n \n this.upgradesContainer.appendChild(upgradeElement);\n }\n }\n \n private renderStats(): void {\n const levelConfig = LEVEL_CONFIGS[this.state.level - 1];\n \n this.statsContainer.innerHTML = '';\n \n const stats = [\n { name: 'Grid Size', value: `${this.state.gridSize}x${this.state.gridSize}` },\n { name: 'Snakes', value: this.state.snakes.length.toString() },\n { name: 'Apples', value: this.state.apples.length.toString() },\n { name: 'Snake Speed', value: `${Math.round(1000 / this.state.tickSpeed)} cells/s` },\n { name: 'Score Multiplier', value: `${levelConfig.scoreMultiplier.toFixed(1)}x` },\n { name: 'Points per Apple', value: levelConfig.pointsPerApple.toString() },\n { name: 'Alive Snakes', value: this.state.snakes.filter(s => s.alive).length.toString() },\n { name: 'Longest Snake', value: Math.max(...this.state.snakes.map(s => s.body.length)).toString() }\n ];\n \n for (const stat of stats) {\n const statElement = document.createElement('div');\n statElement.className = 'bg-gray-700 p-2 rounded';\n statElement.innerHTML = `\n

${stat.name}

${stat.value}

Incremental Snake Game

Level: 1

Score: 0

Points: 0

\n\n

\n \n

\n\n \n

Upgrades

\n \n

\n\n \n

Game Stats

\n \n

\n\n \n\n",[],[151,181],{"_107":189,"_100":190,"_152":191,"_154":153,"_155":138,"_156":137,"_158":159,"_109":192,"_104":174,"_161":175,"_163":193,"_164":27,"_165":-5,"_166":194,"_103":195},"c6c7c578-34c6-11f0-af9e-9e149126039e","index.js","b7abb5e0-34c6-11f0-8e43-9e149126039e",["D",1747668879155],"import { GameController } from './game-controller.ts';\n\n// Wait for DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Get DOM elements\n const canvas = document.getElementById('game-canvas');\n const levelDisplay = document.getElementById('level-display');\n const scoreDisplay = document.getElementById('score-display');\n const pointsDisplay = document.getElementById('points-display');\n const upgradesContainer = document.getElementById('upgrades-container');\n const statsContainer = document.getElementById('stats-container');\n \n // Create game controller\n const gameController = new GameController(\n canvas,\n levelDisplay,\n scoreDisplay,\n pointsDisplay,\n upgradesContainer,\n statsContainer\n );\n \n // Start the game\n gameController.start();\n \n // Add keyboard controls for pause/resume\n document.addEventListener('keydown', (event) => {\n if (event.key === ' ' || event.key === 'Spacebar') {\n // Toggle pause/resume\n if (gameController.isPaused) {\n gameController.resume();\n } else {\n gameController.pause();\n }\n } else if (event.key === 'r' || event.key === 'R') {\n // Restart game\n gameController.restart();\n }\n });\n \n // Add a view source link\n const footer = document.createElement('footer');\n footer.className = 'mt-8 text-center text-gray-400 text-sm';\n footer.innerHTML = `\n

\n \n View Source\n \n

\n `;\n document.querySelector('.container').appendChild(footer);\n});",[],[151,190],{"_107":197,"_100":198,"_152":199,"_154":153,"_155":138,"_156":200,"_158":159,"_109":201,"_104":31,"_161":184,"_163":202,"_164":27,"_165":-5,"_166":203,"_103":204},"50a6b836-34c6-11f0-83a4-9e149126039e","style.css","50a6b8cc-34c6-11f0-83a4-9e149126039e",3,["D",1747668680970],"/* Additional custom styles beyond Tailwind */\nbody {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n}\n\ncanvas {\n image-rendering: pixelated;\n aspect-ratio: 1 / 1;\n}\n\n.upgrade-button {\n transition: all 0.2s ease;\n}\n\n.upgrade-button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n.upgrade-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Animation for score increases */\n@keyframes score-pop {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n}\n\n.score-increase {\n animation: score-pop 0.3s ease;\n}\n\n/* Snake colors - will be used in the game */\n:root {\n --snake-green: #4ade80;\n --snake-blue: #60a5fa;\n --snake-red: #f87171;\n --snake-yellow: #facc15;\n --snake-purple: #c084fc;\n --snake-orange: #fb923c;\n --snake-pink: #f472b6;\n --snake-teal: #2dd4bf;\n}",[],[151,198],[151],{"_107":207,"_100":208,"_152":209,"_154":-5,"_155":138,"_156":210,"_158":159,"_109":211,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_166":212,"_103":248},"56aba160-34c6-11f0-9167-9e149126039e","shared","3902dd10-4095-4092-91dd-5eebd1fa9739",4,["D",1747668691066],[213,222,231,240],{"_107":214,"_100":215,"_152":216,"_154":209,"_155":138,"_156":217,"_158":159,"_109":218,"_104":31,"_161":175,"_163":219,"_164":27,"_165":-5,"_166":220,"_103":221},"6c0dfcd8-34c6-11f0-877c-9e149126039e","config.ts","6c0dfd78-34c6-11f0-877c-9e149126039e",5,["D",1747668726947],"import { AIType, LevelConfig, Upgrade } from './types';\n\n// Available snake colors\nexport const SNAKE_COLORS = [\n '#4ade80', // green\n '#60a5fa', // blue\n '#f87171', // red\n '#facc15', // yellow\n '#c084fc', // purple\n '#fb923c', // orange\n '#f472b6', // pink\n '#2dd4bf', // teal\n];\n\n// Level configurations - each level increases difficulty and rewards\nexport const LEVEL_CONFIGS: LevelConfig[] = [\n // Level 1 - Starting level\n {\n gridSize: 15,\n snakeCount: 1,\n appleCount: 3,\n tickSpeed: 200, // ms per tick\n scoreMultiplier: 1,\n snakeColors: [SNAKE_COLORS[0]],\n aiTypes: [AIType.BASIC],\n pointsPerApple: 1\n },\n // Level 2\n {\n gridSize: 20,\n snakeCount: 2,\n appleCount: 4,\n tickSpeed: 180,\n scoreMultiplier: 1.2,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1]],\n aiTypes: [AIType.BASIC, AIType.BASIC],\n pointsPerApple: 2\n },\n // Level 3\n {\n gridSize: 25,\n snakeCount: 2,\n appleCount: 5,\n tickSpeed: 160,\n scoreMultiplier: 1.5,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS],\n pointsPerApple: 3\n },\n // Level 4\n {\n gridSize: 30,\n snakeCount: 3,\n appleCount: 6,\n tickSpeed: 150,\n scoreMultiplier: 1.8,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1], SNAKE_COLORS[2]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE],\n pointsPerApple: 4\n },\n // Level 5\n {\n gridSize: 35,\n snakeCount: 4,\n appleCount: 8,\n tickSpeed: 140,\n scoreMultiplier: 2,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1], SNAKE_COLORS[2], SNAKE_COLORS[3]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM],\n pointsPerApple: 5\n },\n // Level 6\n {\n gridSize: 40,\n snakeCount: 5,\n appleCount: 10,\n tickSpeed: 130,\n scoreMultiplier: 2.5,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1], SNAKE_COLORS[2], SNAKE_COLORS[3], SNAKE_COLORS[4]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM, AIType.BASIC],\n pointsPerApple: 6\n },\n // Level 7\n {\n gridSize: 45,\n snakeCount: 6,\n appleCount: 12,\n tickSpeed: 120,\n scoreMultiplier: 3,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1], SNAKE_COLORS[2], SNAKE_COLORS[3], SNAKE_COLORS[4], SNAKE_COLORS[5]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM, AIType.BASIC, AIType.CAUTIOUS],\n pointsPerApple: 7\n },\n // Level 8\n {\n gridSize: 50,\n snakeCount: 7,\n appleCount: 15,\n tickSpeed: 110,\n scoreMultiplier: 3.5,\n snakeColors: [SNAKE_COLORS[0], SNAKE_COLORS[1], SNAKE_COLORS[2], SNAKE_COLORS[3], SNAKE_COLORS[4], SNAKE_COLORS[5], SNAKE_COLORS[6]],\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM, AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE],\n pointsPerApple: 8\n },\n // Level 9\n {\n gridSize: 55,\n snakeCount: 8,\n appleCount: 18,\n tickSpeed: 100,\n scoreMultiplier: 4,\n snakeColors: SNAKE_COLORS,\n aiTypes: [AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM, AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM],\n pointsPerApple: 9\n },\n // Level 10 - Final level\n {\n gridSize: 60,\n snakeCount: 10,\n appleCount: 20,\n tickSpeed: 90,\n scoreMultiplier: 5,\n snakeColors: [...SNAKE_COLORS, SNAKE_COLORS[0], SNAKE_COLORS[1]],\n aiTypes: [\n AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM,\n AIType.BASIC, AIType.CAUTIOUS, AIType.AGGRESSIVE, AIType.RANDOM,\n AIType.BASIC, AIType.CAUTIOUS\n ],\n pointsPerApple: 10\n }\n];\n\n// Define available upgrades\nexport const UPGRADES: Upgrade[] = [\n {\n id: 'more_apples',\n name: 'More Apples',\n description: 'Increase the number of apples on the board',\n cost: 10,\n level: 0,\n maxLevel: 10,\n effect: (state) => {\n const currentLevel = LEVEL_CONFIGS[state.level - 1];\n const newAppleCount = currentLevel.appleCount + 1;\n \n // Add a new apple\n const newApples = [...state.apples];\n const newApple = generateApple(state.gridSize, [...state.snakes.flatMap(s => s.body), ...newApples.map(a => a.position)]);\n if (newApple) {\n newApples.push({ position: newApple, value: 1 });\n }\n \n return {\n ...state,\n apples: newApples\n };\n }\n },\n {\n id: 'faster_snakes',\n name: 'Faster Snakes',\n description: 'Increase the speed of all snakes',\n cost: 15,\n level: 0,\n maxLevel: 10,\n effect: (state) => {\n return {\n ...state,\n tickSpeed: Math.max(50, state.tickSpeed - 10)\n };\n }\n },\n {\n id: 'more_snakes',\n name: 'More Snakes',\n description: 'Add another snake to the game',\n cost: 25,\n level: 0,\n maxLevel: 5,\n effect: (state) => {\n if (state.snakes.length >= 10) return state;\n \n const newSnake = createSnake(\n state.snakes.length,\n state.gridSize,\n [...state.snakes.flatMap(s => s.body), ...state.apples.map(a => a.position)],\n SNAKE_COLORS[state.snakes.length % SNAKE_COLORS.length],\n Object.values(AIType)[state.snakes.length % 4]\n );\n \n return {\n ...state,\n snakes: [...state.snakes, newSnake]\n };\n }\n },\n {\n id: 'bigger_grid',\n name: 'Bigger Grid',\n description: 'Increase the size of the game grid',\n cost: 20,\n level: 0,\n maxLevel: 10,\n effect: (state) => {\n return {\n ...state,\n gridSize: state.gridSize + 5\n };\n }\n },\n {\n id: 'score_multiplier',\n name: 'Score Multiplier',\n description: 'Increase the points earned per apple',\n cost: 30,\n level: 0,\n maxLevel: 10,\n effect: (state) => {\n const currentLevel = LEVEL_CONFIGS[state.level - 1];\n return {\n ...state,\n // Increase the score multiplier by 0.5\n scoreMultiplier: (currentLevel.scoreMultiplier || 1) + 0.5\n };\n }\n }\n];\n\n// Helper function to generate a random apple position\nfunction generateApple(gridSize: number, occupiedPositions: Point[]): Point | null {\n // Try to find an unoccupied position for the apple\n let attempts = 0;\n const maxAttempts = gridSize * gridSize;\n \n while (attempts < maxAttempts) {\n const position = {\n x: Math.floor(Math.random() * gridSize),\n y: Math.floor(Math.random() * gridSize)\n };\n \n // Check if position is occupied\n const isOccupied = occupiedPositions.some(\n pos => pos.x === position.x && pos.y === position.y\n );\n \n if (!isOccupied) {\n return position;\n }\n \n attempts++;\n }\n \n return null; // Could not find an unoccupied position\n}\n\n// Helper function to create a new snake\nfunction createSnake(id: number, gridSize: number, occupiedPositions: Point[], color: string, aiType: AIType) {\n // Try to find an unoccupied position for the snake head\n let attempts = 0;\n const maxAttempts = gridSize * gridSize;\n let head: Point | null = null;\n \n while (attempts < maxAttempts && !head) {\n const position = {\n x: Math.floor(Math.random() * (gridSize - 4)) + 2, // Keep away from edges\n y: Math.floor(Math.random() * (gridSize - 4)) + 2\n };\n \n // Check if position is occupied\n const isOccupied = occupiedPositions.some(\n pos => pos.x === position.x && pos.y === position.y\n );\n \n if (!isOccupied) {\n head = position;\n }\n \n attempts++;\n }\n \n if (!head) {\n head = { x: Math.floor(gridSize / 2), y: Math.floor(gridSize / 2) };\n }\n \n // Create the snake with initial body segments\n return {\n id,\n body: [head, { x: head.x - 1, y: head.y }, { x: head.x - 2, y: head.y }],\n direction: Direction.RIGHT,\n color,\n score: 0,\n alive: true,\n aiType\n };\n}",[],[208,215],{"_107":223,"_100":224,"_152":225,"_154":209,"_155":138,"_156":226,"_158":159,"_109":227,"_104":31,"_161":175,"_163":228,"_164":27,"_165":-5,"_166":229,"_103":230},"8f0ddda2-34c6-11f0-820f-9e149126039e","game-engine.ts","8f0ddfb4-34c6-11f0-820f-9e149126039e",6,["D",1747668785666],"import { AIType, Apple, Direction, GameState, Point, Snake } from './types';\nimport { LEVEL_CONFIGS } from './config';\n\n// Initialize a new game state\nexport function initializeGameState(level: number = 1): GameState {\n const levelConfig = LEVEL_CONFIGS[level - 1];\n const gridSize = levelConfig.gridSize;\n \n // Create initial snakes\n const snakes: Snake[] = [];\n const occupiedPositions: Point[] = [];\n \n for (let i = 0; i < levelConfig.snakeCount; i++) {\n const snake = createSnake(\n i,\n gridSize,\n occupiedPositions,\n levelConfig.snakeColors[i],\n levelConfig.aiTypes[i]\n );\n \n snakes.push(snake);\n occupiedPositions.push(...snake.body);\n }\n \n // Create initial apples\n const apples: Apple[] = [];\n for (let i = 0; i < levelConfig.appleCount; i++) {\n const apple = generateApple(gridSize, occupiedPositions);\n if (apple) {\n apples.push({ position: apple, value: 1 });\n occupiedPositions.push(apple);\n }\n }\n \n return {\n level,\n score: 0,\n points: 0,\n snakes,\n apples,\n gridSize,\n tickSpeed: levelConfig.tickSpeed,\n isGameOver: false,\n isPaused: false\n };\n}\n\n// Update the game state for one tick\nexport function updateGameState(state: GameState): GameState {\n if (state.isGameOver || state.isPaused) {\n return state;\n }\n \n const levelConfig = LEVEL_CONFIGS[state.level - 1];\n let newState = { ...state };\n \n // Update each snake\n const newSnakes = state.snakes.map(snake => {\n if (!snake.alive) return snake;\n \n // Determine next direction using AI\n const nextDirection = determineNextDirection(snake, state);\n \n // Move the snake\n const newSnake = moveSnake(snake, nextDirection, state);\n \n return newSnake;\n });\n \n newState.snakes = newSnakes;\n \n // Check for collisions with apples\n newState = checkAppleCollisions(newState);\n \n // Check for collisions with walls and other snakes\n newState = checkCollisions(newState);\n \n // Check if all snakes are dead\n const allSnakesDead = newState.snakes.every(snake => !snake.alive);\n if (allSnakesDead) {\n newState.isGameOver = true;\n }\n \n // Check if level should be increased\n const totalScore = newState.snakes.reduce((sum, snake) => sum + snake.score, 0);\n if (totalScore >= levelConfig.snakeCount * 10 && newState.level < LEVEL_CONFIGS.length) {\n newState = levelUp(newState);\n }\n \n return newState;\n}\n\n// Move a snake in the specified direction\nfunction moveSnake(snake: Snake, nextDirection: Direction, state: GameState): Snake {\n // Don't move dead snakes\n if (!snake.alive) return snake;\n \n // Get the current head position\n const head = snake.body[0];\n \n // Calculate the new head position based on direction\n let newHead: Point;\n switch (nextDirection) {\n case Direction.UP:\n newHead = { x: head.x, y: head.y - 1 };\n break;\n case Direction.DOWN:\n newHead = { x: head.x, y: head.y + 1 };\n break;\n case Direction.LEFT:\n newHead = { x: head.x - 1, y: head.y };\n break;\n case Direction.RIGHT:\n newHead = { x: head.x + 1, y: head.y };\n break;\n }\n \n // Create a new body with the new head at the front\n const newBody = [newHead, ...snake.body.slice(0, -1)];\n \n // Check if snake ate an apple\n const appleIndex = state.apples.findIndex(\n apple => apple.position.x === newHead.x && apple.position.y === newHead.y\n );\n \n // If snake ate an apple, don't remove the tail\n if (appleIndex !== -1) {\n return {\n ...snake,\n body: [newHead, ...snake.body],\n direction: nextDirection,\n score: snake.score + 1\n };\n }\n \n return {\n ...snake,\n body: newBody,\n direction: nextDirection\n };\n}\n\n// Determine the next direction for a snake based on its AI type\nfunction determineNextDirection(snake: Snake, state: GameState): Direction {\n const head = snake.body[0];\n const { aiType, direction } = snake;\n \n // Get valid directions (can't go backwards)\n const validDirections = getValidDirections(direction);\n \n switch (aiType) {\n case AIType.BASIC:\n // Find the closest apple and move toward it\n return moveTowardClosestApple(head, validDirections, state.apples);\n \n case AIType.CAUTIOUS:\n // Avoid walls and other snakes, then move toward apples\n return cautionousMove(snake, validDirections, state);\n \n case AIType.AGGRESSIVE:\n // Move toward apples even if risky\n return aggressiveMove(snake, validDirections, state);\n \n case AIType.RANDOM:\n // Move in semi-random directions with some bias toward apples\n return randomMove(snake, validDirections, state);\n \n default:\n return direction;\n }\n}\n\n// Get valid directions (can't go backwards)\nfunction getValidDirections(currentDirection: Direction): Direction[] {\n switch (currentDirection) {\n case Direction.UP:\n return [Direction.UP, Direction.LEFT, Direction.RIGHT];\n case Direction.DOWN:\n return [Direction.DOWN, Direction.LEFT, Direction.RIGHT];\n case Direction.LEFT:\n return [Direction.UP, Direction.DOWN, Direction.LEFT];\n case Direction.RIGHT:\n return [Direction.UP, Direction.DOWN, Direction.RIGHT];\n }\n}\n\n// Move toward the closest apple\nfunction moveTowardClosestApple(head: Point, validDirections: Direction[], apples: Apple[]): Direction {\n if (apples.length === 0) {\n return validDirections[Math.floor(Math.random() * validDirections.length)];\n }\n \n // Find the closest apple\n let closestApple = apples[0].position;\n let closestDistance = calculateDistance(head, closestApple);\n \n for (let i = 1; i < apples.length; i++) {\n const distance = calculateDistance(head, apples[i].position);\n if (distance < closestDistance) {\n closestDistance = distance;\n closestApple = apples[i].position;\n }\n }\n \n // Determine the best direction to move toward the apple\n const horizontalDiff = closestApple.x - head.x;\n const verticalDiff = closestApple.y - head.y;\n \n // Prioritize the larger difference\n if (Math.abs(horizontalDiff) > Math.abs(verticalDiff)) {\n if (horizontalDiff > 0 && validDirections.includes(Direction.RIGHT)) {\n return Direction.RIGHT;\n } else if (horizontalDiff < 0 && validDirections.includes(Direction.LEFT)) {\n return Direction.LEFT;\n }\n } else {\n if (verticalDiff < 0 && validDirections.includes(Direction.UP)) {\n return Direction.UP;\n } else if (verticalDiff > 0 && validDirections.includes(Direction.DOWN)) {\n return Direction.DOWN;\n }\n }\n \n // If we can't move in the optimal direction, try the other axis\n if (horizontalDiff > 0 && validDirections.includes(Direction.RIGHT)) {\n return Direction.RIGHT;\n } else if (horizontalDiff < 0 && validDirections.includes(Direction.LEFT)) {\n return Direction.LEFT;\n } else if (verticalDiff < 0 && validDirections.includes(Direction.UP)) {\n return Direction.UP;\n } else if (verticalDiff > 0 && validDirections.includes(Direction.DOWN)) {\n return Direction.DOWN;\n }\n \n // If all else fails, choose a random valid direction\n return validDirections[Math.floor(Math.random() * validDirections.length)];\n}\n\n// Cautious movement - avoid walls and other snakes\nfunction cautionousMove(snake: Snake, validDirections: Direction[], state: GameState): Direction {\n const head = snake.body[0];\n const gridSize = state.gridSize;\n \n // Filter out directions that would lead to immediate collision\n const safeDirections = validDirections.filter(dir => {\n let nextPos: Point;\n switch (dir) {\n case Direction.UP:\n nextPos = { x: head.x, y: head.y - 1 };\n break;\n case Direction.DOWN:\n nextPos = { x: head.x, y: head.y + 1 };\n break;\n case Direction.LEFT:\n nextPos = { x: head.x - 1, y: head.y };\n break;\n case Direction.RIGHT:\n nextPos = { x: head.x + 1, y: head.y };\n break;\n }\n \n // Check for wall collision\n if (nextPos.x < 0 || nextPos.x >= gridSize || nextPos.y < 0 || nextPos.y >= gridSize) {\n return false;\n }\n \n // Check for collision with any snake body\n for (const otherSnake of state.snakes) {\n for (let i = 0; i < otherSnake.body.length; i++) {\n const segment = otherSnake.body[i];\n // Skip checking against own head\n if (otherSnake.id === snake.id && i === 0) continue;\n \n if (nextPos.x === segment.x && nextPos.y === segment.y) {\n return false;\n }\n }\n }\n \n return true;\n });\n \n // If there are safe directions, move toward the closest apple\n if (safeDirections.length > 0) {\n return moveTowardClosestApple(head, safeDirections, state.apples);\n }\n \n // If no safe directions, just pick a random valid direction\n return validDirections[Math.floor(Math.random() * validDirections.length)];\n}\n\n// Aggressive movement - prioritize apples even if risky\nfunction aggressiveMove(snake: Snake, validDirections: Direction[], state: GameState): Direction {\n const head = snake.body[0];\n \n // Always move toward the closest apple\n const direction = moveTowardClosestApple(head, validDirections, state.apples);\n \n // 80% chance to follow the apple direction, 20% chance to be cautious\n if (Math.random() < 0.8) {\n return direction;\n } else {\n return cautionousMove(snake, validDirections, state);\n }\n}\n\n// Random movement with some bias toward apples\nfunction randomMove(snake: Snake, validDirections: Direction[], state: GameState): Direction {\n // 30% chance to move toward an apple, 70% chance to move randomly\n if (Math.random() < 0.3) {\n return moveTowardClosestApple(snake.body[0], validDirections, state.apples);\n } else {\n return validDirections[Math.floor(Math.random() * validDirections.length)];\n }\n}\n\n// Calculate distance between two points\nfunction calculateDistance(p1: Point, p2: Point): number {\n return Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y); // Manhattan distance\n}\n\n// Check for collisions with apples\nfunction checkAppleCollisions(state: GameState): GameState {\n const levelConfig = LEVEL_CONFIGS[state.level - 1];\n let newApples = [...state.apples];\n let newScore = state.score;\n let newPoints = state.points;\n \n // Check each snake for apple collisions\n for (const snake of state.snakes) {\n if (!snake.alive) continue;\n \n const head = snake.body[0];\n const appleIndex = newApples.findIndex(\n apple => apple.position.x === head.x && apple.position.y === head.y\n );\n \n if (appleIndex !== -1) {\n // Remove the eaten apple\n newApples.splice(appleIndex, 1);\n \n // Update score and points\n newScore += 1 * (levelConfig.scoreMultiplier || 1);\n newPoints += levelConfig.pointsPerApple || 1;\n \n // Generate a new apple\n const occupiedPositions = [\n ...state.snakes.flatMap(s => s.body),\n ...newApples.map(a => a.position)\n ];\n \n const newApplePos = generateApple(state.gridSize, occupiedPositions);\n if (newApplePos) {\n newApples.push({ position: newApplePos, value: 1 });\n }\n }\n }\n \n return {\n ...state,\n apples: newApples,\n score: newScore,\n points: newPoints\n };\n}\n\n// Check for collisions with walls and other snakes\nfunction checkCollisions(state: GameState): GameState {\n const newSnakes = state.snakes.map(snake => {\n if (!snake.alive) return snake;\n \n const head = snake.body[0];\n \n // Check for wall collisions\n if (\n head.x < 0 ||\n head.x >= state.gridSize ||\n head.y < 0 ||\n head.y >= state.gridSize\n ) {\n return { ...snake, alive: false };\n }\n \n // Check for collisions with other snakes\n for (const otherSnake of state.snakes) {\n // Skip checking against own head\n if (otherSnake.id === snake.id) {\n // Check for self-collision (head hitting own body)\n for (let i = 1; i < otherSnake.body.length; i++) {\n const segment = otherSnake.body[i];\n if (head.x === segment.x && head.y === segment.y) {\n return { ...snake, alive: false };\n }\n }\n } else {\n // Check for collision with other snake's body\n for (const segment of otherSnake.body) {\n if (head.x === segment.x && head.y === segment.y) {\n return { ...snake, alive: false };\n }\n }\n }\n }\n \n return snake;\n });\n \n return { ...state, snakes: newSnakes };\n}\n\n// Level up the game\nfunction levelUp(state: GameState): GameState {\n const newLevel = state.level + 1;\n if (newLevel > LEVEL_CONFIGS.length) {\n return state; // Max level reached\n }\n \n const levelConfig = LEVEL_CONFIGS[newLevel - 1];\n \n // Create new snakes for the level\n const snakes: Snake[] = [];\n const occupiedPositions: Point[] = [];\n \n for (let i = 0; i < levelConfig.snakeCount; i++) {\n const snake = createSnake(\n i,\n levelConfig.gridSize,\n occupiedPositions,\n levelConfig.snakeColors[i],\n levelConfig.aiTypes[i]\n );\n \n snakes.push(snake);\n occupiedPositions.push(...snake.body);\n }\n \n // Create new apples for the level\n const apples: Apple[] = [];\n for (let i = 0; i < levelConfig.appleCount; i++) {\n const apple = generateApple(levelConfig.gridSize, occupiedPositions);\n if (apple) {\n apples.push({ position: apple, value: 1 });\n occupiedPositions.push(apple);\n }\n }\n \n return {\n ...state,\n level: newLevel,\n snakes,\n apples,\n gridSize: levelConfig.gridSize,\n tickSpeed: levelConfig.tickSpeed,\n isGameOver: false\n };\n}\n\n// Helper function to generate a random apple position\nfunction generateApple(gridSize: number, occupiedPositions: Point[]): Point | null {\n // Try to find an unoccupied position for the apple\n let attempts = 0;\n const maxAttempts = gridSize * gridSize;\n \n while (attempts < maxAttempts) {\n const position = {\n x: Math.floor(Math.random() * gridSize),\n y: Math.floor(Math.random() * gridSize)\n };\n \n // Check if position is occupied\n const isOccupied = occupiedPositions.some(\n pos => pos.x === position.x && pos.y === position.y\n );\n \n if (!isOccupied) {\n return position;\n }\n \n attempts++;\n }\n \n return null; // Could not find an unoccupied position\n}\n\n// Helper function to create a new snake\nfunction createSnake(id: number, gridSize: number, occupiedPositions: Point[], color: string, aiType: AIType): Snake {\n // Try to find an unoccupied position for the snake head\n let attempts = 0;\n const maxAttempts = gridSize * gridSize;\n let head: Point | null = null;\n \n while (attempts < maxAttempts && !head) {\n const position = {\n x: Math.floor(Math.random() * (gridSize - 4)) + 2, // Keep away from edges\n y: Math.floor(Math.random() * (gridSize - 4)) + 2\n };\n \n // Check if position is occupied\n const isOccupied = occupiedPositions.some(\n pos => pos.x === position.x && pos.y === position.y\n );\n \n if (!isOccupied) {\n head = position;\n }\n \n attempts++;\n }\n \n if (!head) {\n head = { x: Math.floor(gridSize / 2), y: Math.floor(gridSize / 2) };\n }\n \n // Create the snake with initial body segments\n return {\n id,\n body: [head, { x: head.x - 1, y: head.y }, { x: head.x - 2, y: head.y }],\n direction: Direction.RIGHT,\n color,\n score: 0,\n alive: true,\n aiType\n };\n}",[],[208,224],{"_107":232,"_100":233,"_152":234,"_154":209,"_155":138,"_156":235,"_158":159,"_109":236,"_104":31,"_161":175,"_163":237,"_164":27,"_165":-5,"_166":238,"_103":239},"9e2b2d94-34c6-11f0-af7e-9e149126039e","renderer.ts","9e2b2e2a-34c6-11f0-af7e-9e149126039e",7,["D",1747668811025],"import { GameState, Point } from './types';\n\nexport class GameRenderer {\n private canvas: HTMLCanvasElement;\n private ctx: CanvasRenderingContext2D;\n private cellSize: number;\n private gridSize: number;\n \n constructor(canvas: HTMLCanvasElement) {\n this.canvas = canvas;\n const ctx = canvas.getContext('2d');\n if (!ctx) {\n throw new Error('Could not get canvas context');\n }\n this.ctx = ctx;\n this.cellSize = 0; // Will be calculated in render\n this.gridSize = 0; // Will be set in render\n }\n \n public render(state: GameState): void {\n this.gridSize = state.gridSize;\n \n // Calculate the cell size based on the canvas size and grid size\n const canvasSize = Math.min(this.canvas.width, this.canvas.height);\n this.cellSize = canvasSize / this.gridSize;\n \n // Clear the canvas\n this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);\n \n // Draw the grid\n this.drawGrid();\n \n // Draw the apples\n for (const apple of state.apples) {\n this.drawApple(apple.position);\n }\n \n // Draw the snakes\n for (const snake of state.snakes) {\n this.drawSnake(snake.body, snake.color, snake.alive);\n }\n \n // Draw game over message if game is over\n if (state.isGameOver) {\n this.drawGameOver();\n }\n }\n \n private drawGrid(): void {\n this.ctx.strokeStyle = '#2d3748'; // Tailwind gray-800\n this.ctx.lineWidth = 0.5;\n \n // Draw vertical lines\n for (let x = 0; x <= this.gridSize; x++) {\n this.ctx.beginPath();\n this.ctx.moveTo(x * this.cellSize, 0);\n this.ctx.lineTo(x * this.cellSize, this.gridSize * this.cellSize);\n this.ctx.stroke();\n }\n \n // Draw horizontal lines\n for (let y = 0; y <= this.gridSize; y++) {\n this.ctx.beginPath();\n this.ctx.moveTo(0, y * this.cellSize);\n this.ctx.lineTo(this.gridSize * this.cellSize, y * this.cellSize);\n this.ctx.stroke();\n }\n }\n \n private drawApple(position: Point): void {\n const x = position.x * this.cellSize;\n const y = position.y * this.cellSize;\n const radius = this.cellSize / 2.5;\n \n // Draw apple body (red circle)\n this.ctx.fillStyle = '#f56565'; // Tailwind red-500\n this.ctx.beginPath();\n this.ctx.arc(\n x + this.cellSize / 2,\n y + this.cellSize / 2,\n radius,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n \n // Draw apple stem\n this.ctx.fillStyle = '#68d391'; // Tailwind green-400\n this.ctx.fillRect(\n x + this.cellSize / 2 - 1,\n y + this.cellSize / 2 - radius - 3,\n 2,\n 4\n );\n \n // Draw apple shine (small white circle)\n this.ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';\n this.ctx.beginPath();\n this.ctx.arc(\n x + this.cellSize / 2 - radius / 3,\n y + this.cellSize / 2 - radius / 3,\n radius / 4,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n }\n \n private drawSnake(body: Point[], color: string, alive: boolean): void {\n // If snake is dead, make it semi-transparent\n this.ctx.globalAlpha = alive ? 1 : 0.5;\n \n // Draw each segment of the snake\n for (let i = 0; i < body.length; i++) {\n const segment = body[i];\n const x = segment.x * this.cellSize;\n const y = segment.y * this.cellSize;\n \n // Head is slightly larger and has a different color\n if (i === 0) {\n // Draw snake head\n this.ctx.fillStyle = alive ? color : '#718096'; // Gray if dead\n this.ctx.fillRect(\n x + 1,\n y + 1,\n this.cellSize - 2,\n this.cellSize - 2\n );\n \n // Draw eyes\n this.ctx.fillStyle = '#1a202c'; // Tailwind gray-900\n \n // Left eye\n this.ctx.beginPath();\n this.ctx.arc(\n x + this.cellSize / 3,\n y + this.cellSize / 3,\n this.cellSize / 10,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n \n // Right eye\n this.ctx.beginPath();\n this.ctx.arc(\n x + this.cellSize * 2 / 3,\n y + this.cellSize / 3,\n this.cellSize / 10,\n 0,\n Math.PI * 2\n );\n this.ctx.fill();\n } else {\n // Draw snake body\n this.ctx.fillStyle = alive ? color : '#718096'; // Gray if dead\n \n // Make segments rounded\n this.ctx.beginPath();\n this.ctx.roundRect(\n x + 2,\n y + 2,\n this.cellSize - 4,\n this.cellSize - 4,\n 4\n );\n this.ctx.fill();\n }\n }\n \n // Reset global alpha\n this.ctx.globalAlpha = 1;\n }\n \n private drawGameOver(): void {\n const text = 'GAME OVER';\n \n // Set up text style\n this.ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';\n this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);\n \n this.ctx.font = 'bold 48px Arial';\n this.ctx.fillStyle = '#ffffff';\n this.ctx.textAlign = 'center';\n this.ctx.textBaseline = 'middle';\n \n // Draw text in the center of the canvas\n this.ctx.fillText(\n text,\n this.canvas.width / 2,\n this.canvas.height / 2\n );\n \n // Draw restart message\n this.ctx.font = '24px Arial';\n this.ctx.fillText(\n 'Click to restart',\n this.canvas.width / 2,\n this.canvas.height / 2 + 50\n );\n }\n \n // Resize the canvas to maintain aspect ratio\n public resizeCanvas(): void {\n const container = this.canvas.parentElement;\n if (!container) return;\n \n const containerWidth = container.clientWidth;\n \n // Set canvas size to maintain a square aspect ratio\n this.canvas.width = containerWidth;\n this.canvas.height = containerWidth;\n }\n}",[],[208,233],{"_107":241,"_100":242,"_152":243,"_154":209,"_155":138,"_156":210,"_158":159,"_109":244,"_104":31,"_161":175,"_163":245,"_164":27,"_165":-5,"_166":246,"_103":247},"56ab7faa-34c6-11f0-9167-9e149126039e","types.ts","56ab8072-34c6-11f0-9167-9e149126039e",["D",1747668691066],"// Game types and interfaces\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface Snake {\n id: number;\n body: Point[];\n direction: Direction;\n color: string;\n score: number;\n alive: boolean;\n aiType: AIType;\n}\n\nexport interface Apple {\n position: Point;\n value: number;\n}\n\nexport enum Direction {\n UP = 'up',\n DOWN = 'down',\n LEFT = 'left',\n RIGHT = 'right'\n}\n\nexport enum AIType {\n BASIC = 'basic', // Moves toward closest apple\n CAUTIOUS = 'cautious', // Avoids walls and other snakes\n AGGRESSIVE = 'aggressive', // Targets apples even if risky\n RANDOM = 'random' // Moves in semi-random directions\n}\n\nexport interface GameState {\n level: number;\n score: number;\n points: number;\n snakes: Snake[];\n apples: Apple[];\n gridSize: number;\n tickSpeed: number;\n isGameOver: boolean;\n isPaused: boolean;\n}\n\nexport interface LevelConfig {\n gridSize: number;\n snakeCount: number;\n appleCount: number;\n tickSpeed: number;\n scoreMultiplier: number;\n snakeColors: string[];\n aiTypes: AIType[];\n pointsPerApple: number;\n}\n\nexport interface Upgrade {\n id: string;\n name: string;\n description: string;\n cost: number;\n level: number;\n maxLevel: number;\n effect: (state: GameState) => GameState;\n}\n\nexport interface GameStats {\n totalApplesEaten: number;\n longestSnake: number;\n totalPoints: number;\n highestLevel: number;\n snakeDeaths: number;\n timeElapsed: number;\n}",[],[208,242],[208],{"_107":250,"_100":251,"_152":252,"_154":-5,"_155":138,"_156":174,"_158":159,"_109":253,"_104":31,"_161":184,"_163":254,"_164":27,"_165":-5,"_166":255,"_103":256},"45cc1a00-34c6-11f0-8dde-9e149126039e","README.md","45cc1ad2-34c6-11f0-8dde-9e149126039e",["D",1747668662761],"# Incremental Snake Game\n\nAn incremental snake game where snakes move on autopilot. The game features:\n\n- Multiple snakes moving automatically\n- Dynamic level size based on progression\n- Variable apple density\n- Different snake colors\n- Incremental progression system\n\n## Project Structure\n\n- `/frontend/` - Contains the HTML, CSS, and frontend JavaScript\n- `/shared/` - Contains shared types and game logic\n- `/backend/` - Contains API endpoints (if needed for future features)\n\n## How to Play\n\n1. Watch as the snakes navigate the board automatically\n2. As snakes eat apples, you earn points\n3. Use points to upgrade various aspects of the game\n4. Progress through levels with increasing difficulty and rewards\n\n## Game Parameters\n\nThe game dynamically adjusts these parameters as you progress:\n- Level size (grid dimensions)\n- Number of snakes\n- Snake colors\n- Apple density\n- Snake speed\n- Score multipliers\n\n## Technologies Used\n\n- HTML Canvas for rendering\n- TypeScript for game logic\n- TailwindCSS for styling",[],[251],{"_107":258,"_100":259,"_152":260,"_154":-5,"_155":138,"_156":261,"_158":159,"_109":262,"_104":174,"_161":263,"_163":264,"_164":27,"_165":-5,"_166":265,"_103":266},"be793726-34c6-11f0-8ab7-9e149126039e","index.ts","bc5c636e-34c6-11f0-ab14-9e149126039e",11,["D",1747668865221],"http","import { Hono } from 'https://esm.sh/hono@3.11.7';\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve the main HTML page\napp.get('/', async (c) => {\n const html = await readFile('/frontend/index.html', import.meta.url);\n return c.html(html);\n});\n\n// Serve static files from frontend and shared directories\napp.get('/frontend/*', c => serveFile(c.req.path, import.meta.url));\napp.get('/shared/*', c => serveFile(c.req.path, import.meta.url));\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[259],"files",[149,168,179,188,196,206,213,222,231,240,249,257],"counts",{"_271":31,"_272":174,"_273":31,"_274":31},"pulls","branches","forks","envVars","contents",[277,280,283,286],{"_107":150,"_100":151,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_109":278,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":279},["D",1747668673461],[151],{"_107":207,"_100":208,"_152":209,"_154":-5,"_155":138,"_156":210,"_158":159,"_109":281,"_104":31,"_161":162,"_163":-5,"_164":27,"_165":-5,"_103":282},["D",1747668691066],[208],{"_107":250,"_100":251,"_152":252,"_154":-5,"_155":138,"_156":174,"_158":159,"_109":284,"_104":31,"_161":184,"_163":254,"_164":27,"_165":-5,"_103":285},["D",1747668662761],[251],{"_107":258,"_100":259,"_152":260,"_154":-5,"_155":138,"_156":261,"_158":159,"_109":287,"_104":174,"_161":263,"_163":264,"_164":27,"_165":-5,"_103":288},["D",1747668865221],[259],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_98":99,"_100":101,"_102":42,"_105":295,"_299":300,"_380":31,"_381":27},{"_107":108,"_100":101,"_109":296,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":-5,"_119":27,"_120":-5,"_121":31,"_14":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_21":297,"_135":298,"_146":27},["D",1747668597579],{"_98":99,"_133":134},{"_104":137,"_100":42,"_107":138,"_139":108,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":101,"_145":99},"history",[301,306,311,316,323,331,339,344,349,354,362,367,375],{"_152":191,"_104":137,"_109":302,"_155":138,"_267":303},["D",1747668879155],[304],{"_107":189,"_155":138,"_152":191,"_100":190,"_163":193,"_161":175,"_104":174,"_154":153,"_109":302,"_156":137,"_165":-5,"_158":159,"_164":27,"_103":305},[151,190],{"_152":171,"_104":172,"_109":307,"_155":138,"_267":308},["D",1747668874914],[309],{"_107":169,"_155":138,"_152":171,"_100":170,"_163":176,"_161":175,"_104":174,"_154":153,"_109":307,"_156":172,"_165":-5,"_158":159,"_164":27,"_103":310},[151,170],{"_152":260,"_104":261,"_109":312,"_155":138,"_267":313},["D",1747668865221],[314],{"_107":258,"_155":138,"_152":260,"_100":259,"_163":264,"_161":263,"_104":174,"_154":-5,"_109":312,"_156":261,"_165":-5,"_158":159,"_164":27,"_103":315},[259],{"_152":260,"_104":317,"_109":318,"_155":138,"_267":319},10,["D",1747668861680],[320],{"_107":321,"_155":138,"_152":260,"_100":259,"_163":264,"_161":175,"_104":31,"_154":-5,"_109":318,"_156":317,"_165":-5,"_158":27,"_164":27,"_103":322},"bc5c62c4-34c6-11f0-ab14-9e149126039e",[259],{"_152":191,"_104":324,"_109":325,"_155":138,"_267":326},9,["D",1747668853810],[327],{"_107":328,"_155":138,"_152":191,"_100":190,"_163":329,"_161":175,"_104":31,"_154":153,"_109":325,"_156":324,"_165":-5,"_158":27,"_164":27,"_103":330},"b7abb54a-34c6-11f0-8e43-9e149126039e","import { GameController } from './game-controller.js';\n\n// Wait for DOM to be fully loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n // Get DOM elements\n const canvas = document.getElementById('game-canvas');\n const levelDisplay = document.getElementById('level-display');\n const scoreDisplay = document.getElementById('score-display');\n const pointsDisplay = document.getElementById('points-display');\n const upgradesContainer = document.getElementById('upgrades-container');\n const statsContainer = document.getElementById('stats-container');\n \n // Create game controller\n const gameController = new GameController(\n canvas,\n levelDisplay,\n scoreDisplay,\n pointsDisplay,\n upgradesContainer,\n statsContainer\n );\n \n // Start the game\n gameController.start();\n \n // Add keyboard controls for pause/resume\n document.addEventListener('keydown', (event) => {\n if (event.key === ' ' || event.key === 'Spacebar') {\n // Toggle pause/resume\n if (gameController.isPaused) {\n gameController.resume();\n } else {\n gameController.pause();\n }\n } else if (event.key === 'r' || event.key === 'R') {\n // Restart game\n gameController.restart();\n }\n });\n \n // Add a view source link\n const footer = document.createElement('footer');\n footer.className = 'mt-8 text-center text-gray-400 text-sm';\n footer.innerHTML = `\n

\n \n View Source\n \n

\n `;\n document.querySelector('.container').appendChild(footer);\n});",[151,190],{"_152":171,"_104":332,"_109":333,"_155":138,"_267":334},8,["D",1747668844287],[335],{"_107":336,"_155":138,"_152":171,"_100":170,"_163":337,"_161":175,"_104":31,"_154":153,"_109":333,"_156":332,"_165":-5,"_158":27,"_164":27,"_103":338},"b1fe8e1a-34c6-11f0-bd88-9e149126039e","import { GameRenderer } from '../shared/renderer';\nimport { GameState, Upgrade } from '../shared/types';\nimport { initializeGameState, updateGameState } from '../shared/game-engine';\nimport { LEVEL_CONFIGS, UPGRADES } from '../shared/config';\n\nexport class GameController {\n private state: GameState;\n private renderer: GameRenderer;\n private gameLoop: number | null = null;\n private upgrades: Upgrade[];\n private levelDisplay: HTMLElement;\n private scoreDisplay: HTMLElement;\n private pointsDisplay: HTMLElement;\n private upgradesContainer: HTMLElement;\n private statsContainer: HTMLElement;\n \n constructor(\n canvas: HTMLCanvasElement,\n levelDisplay: HTMLElement,\n scoreDisplay: HTMLElement,\n pointsDisplay: HTMLElement,\n upgradesContainer: HTMLElement,\n statsContainer: HTMLElement\n ) {\n this.state = initializeGameState();\n this.renderer = new GameRenderer(canvas);\n this.upgrades = JSON.parse(JSON.stringify(UPGRADES)); // Deep clone\n this.levelDisplay = levelDisplay;\n this.scoreDisplay = scoreDisplay;\n this.pointsDisplay = pointsDisplay;\n this.upgradesContainer = upgradesContainer;\n this.statsContainer = statsContainer;\n \n // Set up event listeners\n window.addEventListener('resize', this.handleResize.bind(this));\n canvas.addEventListener('click', this.handleCanvasClick.bind(this));\n \n // Initial render\n this.handleResize();\n this.renderUI();\n this.renderer.render(this.state);\n }\n \n public start(): void {\n if (this.gameLoop !== null) {\n return; // Game is already running\n }\n \n this.gameLoop = window.setInterval(() => {\n this.update();\n }, this.state.tickSpeed);\n }\n \n public pause(): void {\n if (this.gameLoop === null) {\n return; // Game is already paused\n }\n \n window.clearInterval(this.gameLoop);\n this.gameLoop = null;\n this.state.isPaused = true;\n this.renderer.render(this.state);\n }\n \n public resume(): void {\n if (this.gameLoop !== null) {\n return; // Game is already running\n }\n \n this.state.isPaused = false;\n this.gameLoop = window.setInterval(() => {\n this.update();\n }, this.state.tickSpeed);\n }\n \n public restart(): void {\n if (this.gameLoop !== null) {\n window.clearInterval(this.gameLoop);\n this.gameLoop = null;\n }\n \n this.state = initializeGameState();\n this.upgrades = JSON.parse(JSON.stringify(UPGRADES)); // Reset upgrades\n this.renderUI();\n this.renderer.render(this.state);\n this.start();\n }\n \n private update(): void {\n // Update game state\n const oldState = this.state;\n this.state = updateGameState(this.state);\n \n // If tick speed changed, restart the game loop\n if (oldState.tickSpeed !== this.state.tickSpeed) {\n window.clearInterval(this.gameLoop!);\n this.gameLoop = window.setInterval(() => {\n this.update();\n }, this.state.tickSpeed);\n }\n \n // Update UI if score or level changed\n if (\n oldState.score !== this.state.score ||\n oldState.points !== this.state.points ||\n oldState.level !== this.state.level\n ) {\n this.renderUI();\n \n // Add animation to score if it increased\n if (oldState.score !== this.state.score) {\n this.scoreDisplay.classList.add('score-increase');\n setTimeout(() => {\n this.scoreDisplay.classList.remove('score-increase');\n }, 300);\n }\n }\n \n // Render the game\n this.renderer.render(this.state);\n \n // If game is over, stop the game loop\n if (this.state.isGameOver && this.gameLoop !== null) {\n window.clearInterval(this.gameLoop);\n this.gameLoop = null;\n }\n }\n \n private renderUI(): void {\n // Update level, score, and points displays\n this.levelDisplay.textContent = this.state.level.toString();\n this.scoreDisplay.textContent = Math.floor(this.state.score).toString();\n this.pointsDisplay.textContent = Math.floor(this.state.points).toString();\n \n // Render upgrades\n this.renderUpgrades();\n \n // Render stats\n this.renderStats();\n }\n \n private renderUpgrades(): void {\n this.upgradesContainer.innerHTML = '';\n \n for (const upgrade of this.upgrades) {\n const cost = Math.floor(upgrade.cost * Math.pow(1.5, upgrade.level));\n const canAfford = this.state.points >= cost;\n const isMaxLevel = upgrade.level >= upgrade.maxLevel;\n \n const upgradeElement = document.createElement('div');\n upgradeElement.className = 'bg-gray-700 p-3 rounded-lg';\n \n upgradeElement.innerHTML = `\n

${upgrade.name}

${upgrade.description}

Level: ${upgrade.level}/${upgrade.maxLevel}

\n \n

${stat.name}

${stat.value}

\n `;\n this.statsContainer.appendChild(statElement);\n }\n }\n \n private purchaseUpgrade(upgradeId: string): void {\n const upgradeIndex = this.upgrades.findIndex(u => u.id === upgradeId);\n if (upgradeIndex === -1) return;\n \n const upgrade = this.upgrades[upgradeIndex];\n const cost = Math.floor(upgrade.cost * Math.pow(1.5, upgrade.level));\n \n if (this.state.points < cost || upgrade.level >= upgrade.maxLevel) {\n return;\n }\n \n // Apply the upgrade effect\n this.state = upgrade.effect(this.state);\n \n // Update upgrade level and deduct points\n this.upgrades[upgradeIndex].level++;\n this.state.points -= cost;\n \n // Update UI\n this.renderUI();\n this.renderer.render(this.state);\n }\n \n private handleResize(): void {\n this.renderer.resizeCanvas();\n this.renderer.render(this.state);\n }\n \n private handleCanvasClick(): void {\n if (this.state.isGameOver) {\n this.restart();\n }\n }\n}",[151,170],{"_152":234,"_104":235,"_109":340,"_155":138,"_267":341},["D",1747668811025],[342],{"_107":232,"_155":138,"_152":234,"_100":233,"_163":237,"_161":175,"_104":31,"_154":209,"_109":340,"_156":235,"_165":-5,"_158":159,"_164":27,"_103":343},[208,233],{"_152":225,"_104":226,"_109":345,"_155":138,"_267":346},["D",1747668785666],[347],{"_107":223,"_155":138,"_152":225,"_100":224,"_163":228,"_161":175,"_104":31,"_154":209,"_109":345,"_156":226,"_165":-5,"_158":159,"_164":27,"_103":348},[208,224],{"_152":216,"_104":217,"_109":350,"_155":138,"_267":351},["D",1747668726947],[352],{"_107":214,"_155":138,"_152":216,"_100":215,"_163":219,"_161":175,"_104":31,"_154":209,"_109":350,"_156":217,"_165":-5,"_158":159,"_164":27,"_103":353},[208,215],{"_152":209,"_104":210,"_109":355,"_155":138,"_267":356},["D",1747668691066],[357,359],{"_107":207,"_155":138,"_152":209,"_100":208,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":355,"_156":210,"_165":-5,"_158":159,"_164":27,"_103":358},[208],{"_107":241,"_155":138,"_152":243,"_100":242,"_163":245,"_161":175,"_104":31,"_154":209,"_109":360,"_156":210,"_165":-5,"_158":159,"_164":27,"_103":361},["D",1747668691066],[208,242],{"_152":199,"_104":200,"_109":363,"_155":138,"_267":364},["D",1747668680970],[365],{"_107":197,"_155":138,"_152":199,"_100":198,"_163":202,"_161":184,"_104":31,"_154":153,"_109":363,"_156":200,"_165":-5,"_158":159,"_164":27,"_103":366},[151,198],{"_152":182,"_104":157,"_109":368,"_155":138,"_267":369},["D",1747668673461],[370,372],{"_107":180,"_155":138,"_152":182,"_100":181,"_163":185,"_161":184,"_104":31,"_154":153,"_109":368,"_156":157,"_165":-5,"_158":159,"_164":27,"_103":371},[151,181],{"_107":150,"_155":138,"_152":153,"_100":151,"_163":-5,"_161":162,"_104":31,"_154":-5,"_109":373,"_156":157,"_165":-5,"_158":159,"_164":27,"_103":374},["D",1747668673461],[151],{"_152":252,"_104":174,"_109":376,"_155":138,"_267":377},["D",1747668662761],[378],{"_107":250,"_155":138,"_152":252,"_100":251,"_163":254,"_161":184,"_104":31,"_154":-5,"_109":376,"_156":174,"_165":-5,"_158":159,"_164":27,"_103":379},[251],"page","hasNext","routes/_app","actionData","errors"]

History