[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import SnakeGame from "@/components/snake-game" export default function Home() { return (

Snake Game

) } [V0_FILE]typescriptreact:file="lib/snake/model.ts" export enum Direction { UP = 0, DOWN = 1, LEFT = 2, RIGHT = 3, } export interface Position { x: number y: number } export interface GameOptions { gridSize: number cellSize: number initialSpeed: number } export class Snake { body: Position[] direction: Direction newDirection: Direction constructor(initialPosition: Position) { this.body = [initialPosition] this.direction = Direction.RIGHT this.newDirection = Direction.RIGHT } setDirection(direction: Direction) { // Prevent 180-degree turns if ( (this.direction === Direction.UP && direction === Direction.DOWN) || (this.direction === Direction.DOWN && direction === Direction.UP) || (this.direction === Direction.LEFT && direction === Direction.RIGHT) || (this.direction === Direction.RIGHT && direction === Direction.LEFT) ) { return } this.newDirection = direction } move(grow = false) { // Update direction this.direction = this.newDirection // Get current head position const head = this.body[0] // Calculate new head position based on direction let newHead: Position switch (this.direction) { case Direction.UP: newHead = { x: head.x, y: head.y - 1 } break case Direction.DOWN: newHead = { x: head.x, y: head.y + 1 } break case Direction.LEFT: newHead = { x: head.x - 1, y: head.y } break case Direction.RIGHT: newHead = { x: head.x + 1, y: head.y } break } // Add new head to the beginning of the body this.body.unshift(newHead) // If not growing, remove the tail if (!grow) { this.body.pop() } return newHead } checkCollision(position: Position, ignoreHead = false): boolean { return this.body.some((segment, index) => { if (ignoreHead && index === 0) return false return segment.x === position.x && segment.y === position.y }) } checkSelfCollision(): boolean { const head = this.body[0] return this.checkCollision(head, true) } } export class Food { position: Position constructor(position: Position) { this.position = position } isEaten(position: Position): boolean { return this.position.x === position.x && this.position.y === position.y } } export class GameModel { snake: Snake food: Food gridSize: number score: number constructor(options: GameOptions) { this.gridSize = options.gridSize this.score = 0 // Initialize snake in the middle of the grid const initialPosition = { x: Math.floor(this.gridSize / 2), y: Math.floor(this.gridSize / 2), } this.snake = new Snake(initialPosition) // Place food at random position this.food = new Food(this.getRandomFoodPosition()) } update(): boolean { // Move snake const newHead = this.snake.move(false) // Check if snake hit the wall if (newHead.x < 0 || newHead.x >= this.gridSize || newHead.y < 0 || newHead.y >= this.gridSize) { return false // Game over } // Check if snake hit itself if (this.snake.checkSelfCollision()) { return false // Game over } // Check if snake ate food if (this.food.isEaten(newHead)) { // Grow snake this.snake.move(true) // Increase score this.score += 10 // Place new food this.food = new Food(this.getRandomFoodPosition()) } return true // Game continues } getRandomFoodPosition(): Position { let position: Position do { position = { x: Math.floor(Math.random() * this.gridSize), y: Math.floor(Math.random() * this.gridSize), } } while (this.snake.checkCollision(position)) return position } changeDirection(direction: Direction) { this.snake.setDirection(direction) } getScore(): number { return this.score } } [V0_FILE]typescriptreact:file="lib/snake/controller.ts" import { type Direction, GameModel, type GameOptions } from "./model" import { GameView } from "./view" interface ControllerOptions { onScoreChange?: (score: number) => void onGameOver?: () => void } export default class SnakeController { private model: GameModel private view: GameView private animationFrameId: number | null = null private lastUpdateTime = 0 private updateInterval = 150 // milliseconds private options: ControllerOptions private isPaused = true constructor(canvas: HTMLCanvasElement, options: ControllerOptions = {}) { // Calculate grid size based on canvas size const cellSize = 16 // pixels const gridSize = Math.floor(canvas.width / cellSize) // Adjust canvas size to match grid canvas.width = gridSize * cellSize canvas.height = gridSize * cellSize const gameOptions: GameOptions = { gridSize, cellSize, initialSpeed: 5, } this.model = new GameModel(gameOptions) this.view = new GameView(canvas, cellSize) this.options = options // Initial render this.view.render(this.model) } start() { if (!this.isPaused) return this.isPaused = false this.lastUpdateTime = performance.now() this.gameLoop() } pause() { this.isPaused = true if (this.animationFrameId !== null) { cancelAnimationFrame(this.animationFrameId) this.animationFrameId = null } } reset() { this.pause() // Calculate grid size based on current view const gridSize = this.model.gridSize const cellSize = 16 const gameOptions: GameOptions = { gridSize, cellSize, initialSpeed: 5, } this.model = new GameModel(gameOptions) this.view.render(this.model) if (this.options.onScoreChange) { this.options.onScoreChange(0) } } changeDirection(direction: Direction) { this.model.changeDirection(direction) } stop() { this.pause() } private gameLoop = (timestamp: number = performance.now()) => { if (this.isPaused) return this.animationFrameId = requestAnimationFrame(this.gameLoop) const elapsed = timestamp - this.lastUpdateTime if (elapsed > this.updateInterval) { this.lastUpdateTime = timestamp // Update game state const gameStatus = this.model.update() // Notify score change if (this.options.onScoreChange) { this.options.onScoreChange(this.model.getScore()) } // Check game over if (!gameStatus) { this.pause() if (this.options.onGameOver) { this.options.onGameOver() } return } // Render updated state this.view.render(this.model) } } } [V0_FILE]typescriptreact:file="components/snake-game.tsx" isFixed="true" "use client" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Play, Pause, RefreshCw } from "lucide-react" import SnakeController from "@/lib/snake/controller" import { Direction } from "@/lib/snake/model" export default function SnakeGame() { const canvasRef = useRef(null) const [score, setScore] = useState(0) const [highScore, setHighScore] = useState(0) const [isGameOver, setIsGameOver] = useState(false) const [isPaused, setIsPaused] = useState(true) const [controller, setController] = useState(null) // Load high score from localStorage on component mount useEffect(() => { const savedHighScore = localStorage.getItem("snakeHighScore") if (savedHighScore) { setHighScore(Number.parseInt(savedHighScore)) } }, []) useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current // Create a simple grass background image once const grassPattern = document.createElement("canvas") grassPattern.width = canvas.width grassPattern.height = canvas.height const patternCtx = grassPattern.getContext("2d") if (patternCtx) { // Draw base grass color patternCtx.fillStyle = "#8BC34A" patternCtx.fillRect(0, 0, grassPattern.width, grassPattern.height) // Add grass texture with small lines patternCtx.strokeStyle = "#689F38" patternCtx.lineWidth = 1 // Use a fixed seed for consistent pattern const seed = 12345 const seededRandom = (min, max, index) => { const x = Math.sin(seed + index) * 10000 return min + (x - Math.floor(x)) * (max - min) } // Draw grass blades for (let i = 0; i < 300; i++) { const x = seededRandom(0, grassPattern.width, i) const y = seededRandom(0, grassPattern.height, i + 300) const length = seededRandom(2, 5, i + 600) const angle = seededRandom(0, Math.PI, i + 900) patternCtx.beginPath() patternCtx.moveTo(x, y) patternCtx.lineTo(x + Math.cos(angle) * length, y + Math.sin(angle) * length) patternCtx.stroke() } // Add darker patches patternCtx.fillStyle = "rgba(104, 159, 56, 0.3)" for (let i = 0; i < 20; i++) { const x = seededRandom(0, grassPattern.width, i + 1200) const y = seededRandom(0, grassPattern.height, i + 1220) const size = seededRandom(10, 30, i + 1240) patternCtx.beginPath() patternCtx.arc(x, y, size, 0, Math.PI * 2) patternCtx.fill() } } // Initialize the game controller const snakeController = new SnakeController(canvas, { onScoreChange: (newScore) => { setScore(newScore) // Update high score if current score is higher if (newScore > highScore) { setHighScore(newScore) localStorage.setItem("snakeHighScore", newScore.toString()) } }, onGameOver: () => { setIsGameOver(true) setIsPaused(true) }, }) setController(snakeController) // Modify the view to use our grass background const ctx = canvas.getContext("2d") if (ctx) { // Store the original clear method const originalClear = ctx.clearRect // Override clearRect to draw our grass pattern instead of clearing to transparent ctx.clearRect = (x, y, width, height) => { originalClear.call(ctx, x, y, width, height) ctx.drawImage(grassPattern, 0, 0) } } const handleKeyDown = (e: KeyboardEvent) => { if (isGameOver) return switch (e.key) { case "ArrowUp": snakeController.changeDirection(Direction.UP) break case "ArrowDown": snakeController.changeDirection(Direction.DOWN) break case "ArrowLeft": snakeController.changeDirection(Direction.LEFT) break case "ArrowRight": snakeController.changeDirection(Direction.RIGHT) break case " ": togglePause() break } } window.addEventListener("keydown", handleKeyDown) return () => { window.removeEventListener("keydown", handleKeyDown) snakeController.stop() } }, [highScore, isGameOver]) const togglePause = () => { if (!controller) return if (isPaused) { controller.start() setIsPaused(false) } else { controller.pause() setIsPaused(true) } } const resetGame = () => { if (!controller) return controller.reset() setScore(0) setIsGameOver(false) setIsPaused(true) } return (

Score:{" "} 0 && score % 10 === 0 ? 1.5 : 1})`, textShadow: score > 0 ? "0 0 5px rgba(0,255,0,0.5)" : "none", }} > {score}

{score > 0 && (

+10

)}

) } [V0_FILE]typescriptreact:file="lib/snake/view.ts" import type { GameModel, Position } from "./model" export class GameView { private canvas: HTMLCanvasElement private ctx: CanvasRenderingContext2D private cellSize: number constructor(canvas: HTMLCanvasElement, cellSize: number) { this.canvas = canvas this.ctx = canvas.getContext("2d")! this.cellSize = cellSize } render(model: GameModel) { // Clear canvas - this will now draw our grass pattern due to the override this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // Draw grid this.drawGrid(model.gridSize) // Draw snake this.drawSnake(model.snake.body) // Draw food this.drawFood(model.food.position) } private drawGrid(gridSize: number) { this.ctx.strokeStyle = "rgba(255, 255, 255, 0.2)" this.ctx.lineWidth = 0.5 for (let i = 0; i <= gridSize; i++) { // Draw vertical lines this.ctx.beginPath() this.ctx.moveTo(i * this.cellSize, 0) this.ctx.lineTo(i * this.cellSize, gridSize * this.cellSize) this.ctx.stroke() // Draw horizontal lines this.ctx.beginPath() this.ctx.moveTo(0, i * this.cellSize) this.ctx.lineTo(gridSize * this.cellSize, i * this.cellSize) this.ctx.stroke() } } private drawSnake(body: Position[]) { // Draw head this.ctx.fillStyle = "rgba(76, 175, 80, 0.9)" this.drawCell(body[0]) // Draw body this.ctx.fillStyle = "rgba(139, 195, 74, 0.9)" for (let i = 1; i < body.length; i++) { this.drawCell(body[i]) } } private drawFood(position: Position) { // Create a radial gradient for the food const centerX = (position.x + 0.5) * this.cellSize const centerY = (position.y + 0.5) * this.cellSize const radius = this.cellSize * 0.4 const gradient = this.ctx.createRadialGradient(centerX, centerY, radius * 0.3, centerX, centerY, radius) gradient.addColorStop(0, "rgba(244, 67, 54, 0.9)") gradient.addColorStop(1, "rgba(244, 67, 54, 0.5)") this.ctx.fillStyle = gradient this.ctx.beginPath() this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2) this.ctx.fill() } private drawCell(position: Position) { const padding = 1 // Add a small padding for visual separation this.ctx.fillRect( position.x * this.cellSize + padding, position.y * this.cellSize + padding, this.cellSize - padding * 2, this.cellSize - padding * 2, ) } }