[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Updated theme for retro pixel art game aesthetic */ :root { --background: oklch(0.15 0.02 250); --foreground: oklch(0.98 0.01 90); --card: oklch(0.22 0.03 250); --card-foreground: oklch(0.98 0.01 90); --popover: oklch(0.22 0.03 250); --popover-foreground: oklch(0.98 0.01 90); --primary: oklch(0.65 0.2 140); --primary-foreground: oklch(0.98 0.01 90); --secondary: oklch(0.75 0.18 50); --secondary-foreground: oklch(0.15 0.02 250); --muted: oklch(0.3 0.03 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.7 0.22 30); --accent-foreground: oklch(0.98 0.01 90); --destructive: oklch(0.6 0.25 20); --destructive-foreground: oklch(0.98 0.01 90); --border: oklch(0.35 0.03 250); --input: oklch(0.35 0.03 250); --ring: oklch(0.65 0.2 140); --chart-1: oklch(0.65 0.2 140); --chart-2: oklch(0.75 0.18 50); --chart-3: oklch(0.7 0.22 30); --chart-4: oklch(0.6 0.18 200); --chart-5: oklch(0.55 0.2 280); --radius: 0.25rem; --sidebar: oklch(0.22 0.03 250); --sidebar-foreground: oklch(0.98 0.01 90); --sidebar-primary: oklch(0.65 0.2 140); --sidebar-primary-foreground: oklch(0.98 0.01 90); --sidebar-accent: oklch(0.3 0.03 250); --sidebar-accent-foreground: oklch(0.98 0.01 90); --sidebar-border: oklch(0.35 0.03 250); --sidebar-ring: oklch(0.65 0.2 140); } .dark { --background: oklch(0.15 0.02 250); --foreground: oklch(0.98 0.01 90); --card: oklch(0.22 0.03 250); --card-foreground: oklch(0.98 0.01 90); --popover: oklch(0.22 0.03 250); --popover-foreground: oklch(0.98 0.01 90); --primary: oklch(0.65 0.2 140); --primary-foreground: oklch(0.98 0.01 90); --secondary: oklch(0.75 0.18 50); --secondary-foreground: oklch(0.15 0.02 250); --muted: oklch(0.3 0.03 250); --muted-foreground: oklch(0.65 0.02 250); --accent: oklch(0.7 0.22 30); --accent-foreground: oklch(0.98 0.01 90); --destructive: oklch(0.6 0.25 20); --destructive-foreground: oklch(0.98 0.01 90); --border: oklch(0.35 0.03 250); --input: oklch(0.35 0.03 250); --ring: oklch(0.65 0.2 140); --chart-1: oklch(0.65 0.2 140); --chart-2: oklch(0.75 0.18 50); --chart-3: oklch(0.7 0.22 30); --chart-4: oklch(0.6 0.18 200); --chart-5: oklch(0.55 0.2 280); --sidebar: oklch(0.22 0.03 250); --sidebar-foreground: oklch(0.98 0.01 90); --sidebar-primary: oklch(0.65 0.2 140); --sidebar-primary-foreground: oklch(0.98 0.01 90); --sidebar-accent: oklch(0.3 0.03 250); --sidebar-accent-foreground: oklch(0.98 0.01 90); --sidebar-border: oklch(0.35 0.03 250); --sidebar-ring: oklch(0.65 0.2 140); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/game-component.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" import Phaser from "phaser" import { GameScene } from "@/lib/game/scenes/game-scene" import { TitleScene } from "@/lib/game/scenes/title-scene" import { VictoryScene } from "@/lib/game/scenes/victory-scene" export default function GameComponent() { const gameRef = useRef(null) const containerRef = useRef(null) useEffect(() => { if (typeof window === "undefined" || gameRef.current) return const config: Phaser.Types.Core.GameConfig = { type: Phaser.AUTO, width: 800, height: 600, parent: containerRef.current!, backgroundColor: "#1a1a2e", physics: { default: "arcade", arcade: { gravity: { x: 0, y: 800 }, debug: false, }, }, scene: [TitleScene, GameScene, VictoryScene], pixelArt: true, scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, }, } gameRef.current = new Phaser.Game(config) return () => { if (gameRef.current) { gameRef.current.destroy(true) gameRef.current = null } } }, []) return (

) } [V0_FILE]typescript:file="lib/game/scenes/title-scene.ts" isMerged="true" import Phaser from "phaser" export class TitleScene extends Phaser.Scene { constructor() { super({ key: "TitleScene" }) } create() { const { width, height } = this.cameras.main // Title this.add .text(width / 2, height / 3, "SUPER MATH BROS.", { fontSize: "48px", color: "#4ade80", fontFamily: "monospace", fontStyle: "bold", }) .setOrigin(0.5) // Instructions this.add .text(width / 2, height / 2, "Press SPACE to Start", { fontSize: "24px", color: "#fbbf24", fontFamily: "monospace", }) .setOrigin(0.5) // Controls const controls = ["Arrow Keys / A,D - Move", "Spacebar - Jump", "Number Keys - Answer Math"] controls.forEach((text, i) => { this.add .text(width / 2, height / 2 + 60 + i * 30, text, { fontSize: "16px", color: "#94a3b8", fontFamily: "monospace", }) .setOrigin(0.5) }) // Start on spacebar this.input.keyboard?.once("keydown-SPACE", () => { this.scene.start("GameScene") }) } } [V0_FILE]typescript:file="lib/game/scenes/victory-scene.ts" isMerged="true" import Phaser from "phaser" export class VictoryScene extends Phaser.Scene { constructor() { super({ key: "VictoryScene" }) } create() { const { width, height } = this.cameras.main // Victory text this.add .text(width / 2, height / 3, "LEVEL COMPLETE!", { fontSize: "48px", color: "#4ade80", fontFamily: "monospace", fontStyle: "bold", }) .setOrigin(0.5) this.add .text(width / 2, height / 2, "Great job solving those math problems!", { fontSize: "20px", color: "#fbbf24", fontFamily: "monospace", }) .setOrigin(0.5) // Replay option this.add .text(width / 2, height / 2 + 60, "Press SPACE to play again", { fontSize: "18px", color: "#94a3b8", fontFamily: "monospace", }) .setOrigin(0.5) this.input.keyboard?.once("keydown-SPACE", () => { this.scene.start("GameScene") }) } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "super-math-bros", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "phaser": "^3.87.0", "tw-animate-css": "1.4.0", "next": "16.0.1", "react": "19.2.0", "react-dom": "19.2.0", "class-variance-authority": "0.7.1", "clsx": "2.1.1", "lucide-react": "0.548.0", "tailwind-merge": "3.3.1", "tailwindcss-animate": "1.0.7" }, "devDependencies": { "@types/react": "19.2.2", "@types/react-dom": "19.2.2", "@types/node": "24.9.2", "tailwindcss": "4.1.16", "typescript": "5.9.3", "postcss": "8.5.6" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import dynamic from "next/dynamic" const GameComponent = dynamic(() => import("@/components/game-component"), { ssr: false, }) export default function Home() { const [gameStarted, setGameStarted] = useState(false) return (

{!gameStarted ? (

SUPER MATH BROS.

Jump through platforms by solving multiplication problems!

How to Play:

• Solve math problems to earn jump power
• Use Arrow Keys or A/D to move left/right
• Press SPACEBAR to jump (costs 1 jump power)
• Build up 5 jump power units to earn a checkpoint
• First wrong answer is free, then -0.5 jump power

) : ( )}

) } [V0_FILE]typescript:file="lib/game/scenes/game-scene.ts" isEdit="true" isQuickEdit="true" import Phaser from "phaser" interface MathProblem { num1: number num2: number answer: number } export class GameScene extends Phaser.Scene { private player!: Phaser.GameObjects.Rectangle & { body: Phaser.Physics.Arcade.Body } private platforms!: Phaser.Physics.Arcade.StaticGroup private cursors!: Phaser.Types.Input.Keyboard.CursorKeys private jumpPower = 1 // Start with 1 jump power instead of 0 private currentProblem!: MathProblem private currentAnswer = "" private wrongAnswerCount = 0 private problemText!: Phaser.GameObjects.Text private answerText!: Phaser.GameObjects.Text private jumpPowerText!: Phaser.GameObjects.Text private feedbackText!: Phaser.GameObjects.Text private checkpoints: { x: number; y: number }[] = [] private lastCheckpointIndex = 0 private earnedCheckpoint = false private checkpointIndicator!: Phaser.GameObjects.Text private wasdKeys!: { [key: string]: Phaser.Input.Keyboard.Key } private goalX = 700 private platformRectangles: Phaser.GameObjects.Rectangle[] = [] constructor() { super({ key: "GameScene" }) } create() { const { width, height } = this.cameras.main this.checkpoints.push({ x: 50, y: height - 100 }) // Create platforms this.platforms = this.physics.add.staticGroup() // Starting area (platforms 1-3) this.createPlatform(0, height - 50, 200, 20) this.createPlatform(280, height - 50, 150, 20) this.createPlatform(520, height - 80, 120, 20) this.checkpoints.push({ x: 540, y: height - 110 }) // Early section (platforms 4-6) - small gaps this.createPlatform(720, height - 80, 100, 20) this.createPlatform(900, height - 110, 120, 20) this.createPlatform(1100, height - 110, 100, 20) this.checkpoints.push({ x: 1120, y: height - 140 }) // Mid section (platforms 7-10) - medium gaps and height changes this.createPlatform(1300, height - 140, 100, 20) this.createPlatform(1500, height - 100, 120, 20) this.createPlatform(1720, height - 140, 100, 20) this.createPlatform(1920, height - 180, 110, 20) this.checkpoints.push({ x: 1940, y: height - 210 }) // Challenge section (platforms 11-14) - larger gaps this.createPlatform(2150, height - 180, 90, 20) this.createPlatform(2360, height - 150, 100, 20) this.createPlatform(2580, height - 120, 90, 20) this.createPlatform(2800, height - 160, 100, 20) this.checkpoints.push({ x: 2820, y: height - 190 }) // Advanced section (platforms 15-18) - mixed heights this.createPlatform(3020, height - 200, 100, 20) this.createPlatform(3240, height - 160, 90, 20) this.createPlatform(3450, height - 200, 100, 20) this.createPlatform(3680, height - 240, 110, 20) this.checkpoints.push({ x: 3700, y: height - 270 }) // Final stretch (platforms 19-22) - victory approach this.createPlatform(3920, height - 200, 100, 20) this.createPlatform(4140, height - 160, 120, 20) this.createPlatform(4380, height - 120, 100, 20) this.createPlatform(4600, height - 80, 200, 20) // Final platform // Update goal position to end of level this.goalX = 4700 const playerRect = this.add.rectangle(50, height - 100, 20, 30, 0xffa500) this.physics.add.existing(playerRect) this.player = playerRect as any this.player.body.setBounce(0) this.player.body.setCollideWorldBounds(false) // Collisions this.physics.add.collider(this.player, this.platforms) // Input this.cursors = this.input.keyboard!.createCursorKeys() this.wasdKeys = { A: this.input.keyboard!.addKey(Phaser.Input.Keyboard.KeyCodes.A), D: this.input.keyboard!.addKey(Phaser.Input.Keyboard.KeyCodes.D), } // Listen to all keyboard events and filter for numbers this.input.keyboard!.on("keydown", (event: KeyboardEvent) => { // Top row number keys (Digit0-Digit9) if (event.code.startsWith("Digit")) { const digit = event.code.replace("Digit", "") this.handleNumberInput(digit) } // Numpad keys (Numpad0-Numpad9) else if (event.code.startsWith("Numpad")) { const digit = event.code.replace("Numpad", "") this.handleNumberInput(digit) } // Backspace else if (event.code === "Backspace") { this.currentAnswer = this.currentAnswer.slice(0, -1) this.updateAnswerDisplay() } // Enter to submit else if (event.code === "Enter" && this.currentAnswer.length > 0) { this.checkAnswer() } }) // UI Setup this.setupUI() // Generate first problem this.generateNewProblem() this.updatePlayerColor() // Camera follow this.cameras.main.setBounds(0, 0, 4900, height) this.cameras.main.startFollow(this.player, true, 0.1, 0.1) } private createPlatform(x: number, y: number, width: number, height: number) { const platform = this.add.rectangle(x + width / 2, y + height / 2, width, height, 0xfbbf24) this.platforms.add(platform) platform.setStrokeStyle(2, 0xf59e0b) this.platformRectangles.push(platform) const platformNumber = this.platforms.getChildren().length this.add .text(x + width / 2, y + height / 2, `${platformNumber}`, { fontSize: "14px", color: "#000000", fontFamily: "monospace", fontStyle: "bold", }) .setOrigin(0.5) } private setupUI() { const { width } = this.cameras.main this.jumpPowerText = this.add .text(20, 20, "", { fontSize: "20px", color: "#4ade80", fontFamily: "monospace", backgroundColor: "#1a1a2e", padding: { x: 10, y: 5 }, }) .setScrollFactor(0) this.problemText = this.add .text(width / 2, 120, "", { fontSize: "32px", color: "#fbbf24", fontFamily: "monospace", fontStyle: "bold", }) .setOrigin(0.5) .setScrollFactor(0) this.answerText = this.add .text(width / 2, 165, "", { fontSize: "36px", color: "#4ade80", fontFamily: "monospace", fontStyle: "bold", backgroundColor: "#1a1a2e", padding: { x: 20, y: 10 }, }) .setOrigin(0.5) .setScrollFactor(0) this.feedbackText = this.add .text(width / 2, 220, "", { fontSize: "20px", color: "#ef4444", fontFamily: "monospace", }) .setOrigin(0.5) .setScrollFactor(0) // Checkpoint indicator this.checkpointIndicator = this.add .text(20, 60, "", { fontSize: "16px", color: "#fbbf24", fontFamily: "monospace", backgroundColor: "#1a1a2e", padding: { x: 10, y: 5 }, }) .setScrollFactor(0) this.updateJumpPowerDisplay() } private generateNewProblem() { const num1 = Phaser.Math.Between(2, 9) const num2 = Phaser.Math.Between(2, 9) this.currentProblem = { num1, num2, answer: num1 * num2, } this.currentAnswer = "" this.wrongAnswerCount = 0 this.problemText.setText(`${num1} × ${num2} = ?`) this.updateAnswerDisplay() this.feedbackText.setText("") } private handleNumberInput(digit: string) { this.currentAnswer += digit this.updateAnswerDisplay() const expectedDigits = this.currentProblem.answer.toString().length if (this.currentAnswer.length >= expectedDigits) { this.checkAnswer() } } private updateAnswerDisplay() { if (this.currentAnswer === "") { this.answerText.setText("Type your answer...").setColor("#64748b") } else { this.answerText.setText(this.currentAnswer).setColor("#4ade80") } } private checkAnswer() { const userAnswer = Number.parseInt(this.currentAnswer) if (userAnswer === this.currentProblem.answer) { // Correct! this.jumpPower += 1 this.feedbackText.setText("✓ Correct!").setColor("#4ade80") if (this.jumpPower >= 5 && !this.earnedCheckpoint) { this.earnedCheckpoint = true // Find nearest platform to player const nearestPlatform = this.findNearestPlatform() if (nearestPlatform) { const platformRect = nearestPlatform as Phaser.GameObjects.Rectangle platformRect.setFillStyle(0xffc0cb) // Light pink platformRect.setStrokeStyle(2, 0xffb6c1) // Slightly darker pink for border // Add checkpoint at the platform position this.checkpoints.push({ x: platformRect.x, y: platformRect.y - 30 }) this.lastCheckpointIndex = this.checkpoints.length - 1 // Show checkpoint toast notification this.createCheckpointToast() } } this.updateJumpPowerDisplay() this.updatePlayerColor() this.time.delayedCall(500, () => { this.generateNewProblem() }) } else { // Wrong answer this.wrongAnswerCount++ if (this.wrongAnswerCount === 1) { // First wrong - no penalty this.feedbackText.setText("✗ Try again (no penalty)").setColor("#fbbf24") this.currentAnswer = "" this.updateAnswerDisplay() } else { // Subsequent wrongs - penalty this.jumpPower = Math.max(0, this.jumpPower - 0.5) this.feedbackText.setText("✗ Wrong! -0.5 Jump Power").setColor("#ef4444") this.earnedCheckpoint = false this.updateJumpPowerDisplay() this.updatePlayerColor() this.time.delayedCall(1000, () => { this.generateNewProblem() }) } } } private updateJumpPowerDisplay() { const bars = "█".repeat(Math.floor(this.jumpPower)) const half = this.jumpPower % 1 >= 0.5 ? "▌" : "" this.jumpPowerText.setText(`Jump Power: (${this.jumpPower.toFixed(1)}) ${bars}${half}`) if (this.jumpPower >= 5) { this.jumpPowerText.setColor("#fbbf24") } else { this.jumpPowerText.setColor("#4ade80") } } private findNearestPlatform(): Phaser.GameObjects.GameObject | null { let nearestPlatform: Phaser.GameObjects.GameObject | null = null let minDistance = Number.POSITIVE_INFINITY this.platforms.getChildren().forEach((platform) => { const rect = platform as Phaser.GameObjects.Rectangle const distance = Math.abs(rect.x - this.player.x) if (distance < minDistance) { minDistance = distance nearestPlatform = platform } }) return nearestPlatform } private createCheckpointToast() { const toast = this.add .text(this.player.x, this.player.y - 50, "★ CHECKPOINT SAVED! ★", { fontSize: "24px", color: "#fbbf24", fontFamily: "monospace", fontStyle: "bold", backgroundColor: "#1a1a2e", padding: { x: 15, y: 8 }, }) .setOrigin(0.5) this.tweens.add({ targets: toast, y: toast.y - 100, alpha: 0, delay: 3000, // Wait 3 seconds before starting animation duration: 2000, ease: "Power2", onComplete: () => { toast.destroy() }, }) } private updatePlayerColor() { const rect = this.player as any as Phaser.GameObjects.Rectangle if (this.jumpPower >= 2) { // Green when jump power is 2 or more rect.setFillStyle(0x4ade80) } else if (this.jumpPower >= 1) { // Orange when jump power is 1 or 1.5 rect.setFillStyle(0xffa500) } else { // Red when jump power is 0 or 0.5 rect.setFillStyle(0xff0000) } } update() { // Movement const moveSpeed = 160 const body = this.player.body as Phaser.Physics.Arcade.Body if (this.cursors.left.isDown || this.wasdKeys.A.isDown) { body.setVelocity(-moveSpeed, body.velocity.y) } else if (this.cursors.right.isDown || this.wasdKeys.D.isDown) { body.setVelocity(moveSpeed, body.velocity.y) } else { body.setVelocity(0, body.velocity.y) } // Jump if (Phaser.Input.Keyboard.JustDown(this.cursors.space!)) { if (this.jumpPower >= 1 && body.touching.down) { body.setVelocity(body.velocity.x, -400) this.jumpPower -= 1 this.earnedCheckpoint = false this.updateJumpPowerDisplay() this.updatePlayerColor() } } for (let i = this.lastCheckpointIndex + 1; i < this.checkpoints.length; i++) { if (this.player.x >= this.checkpoints[i].x - 50) { this.lastCheckpointIndex = i } } // Check for death (falling off) if (this.player.y > this.cameras.main.height + 50) { this.respawn() } // Check for victory if (this.player.x >= this.goalX) { this.scene.start("VictoryScene") } } private respawn() { const checkpoint = this.checkpoints[this.lastCheckpointIndex] const body = this.player.body as Phaser.Physics.Arcade.Body this.player.setPosition(checkpoint.x, 50) body.setVelocity(0, 0) // Jump power is preserved! this.feedbackText.setText("Respawned at checkpoint").setColor("#94a3b8") this.time.delayedCall(2000, () => { this.feedbackText.setText("") }) } }