/** @jsxImportSource https://esm.sh/react */ import React, { useRef, useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; class BubbleShooterGame { canvas: HTMLCanvasElement; ctx: CanvasRenderingContext2D; width: number; height: number; bubbles: Bubble[]; shooter: Shooter; projectile: Projectile | null; score: number; gameOver: boolean; colors: string[]; mouseX: number; mouseY: number; constructor(canvas: HTMLCanvasElement) { this.canvas = canvas; this.ctx = canvas.getContext('2d')!; this.width = canvas.width; this.height = canvas.height; this.colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FDCB6E', '#6C5CE7']; this.mouseX = this.width / 2; this.mouseY = this.height - 100; this.reset(); this.setupEventListeners(); } setupEventListeners() { this.canvas.addEventListener('mousemove', (e) => { const rect = this.canvas.getBoundingClientRect(); this.mouseX = e.clientX - rect.left; this.mouseY = e.clientY - rect.top; }); this.canvas.addEventListener('click', () => { if (!this.projectile) { this.shoot(); } }); } reset() { this.bubbles = this.generateInitialBubbles(); this.shooter = new Shooter(this.width / 2, this.height - 50); this.projectile = null; this.score = 0; this.gameOver = false; } generateInitialBubbles(): Bubble[] { const bubbles: Bubble[] = []; const rows = 5; const bubblesPerRow = 10; const bubbleRadius = 25; const spacing = 5; for (let row = 0; row < rows; row++) { for (let col = 0; col < bubblesPerRow; col++) { const x = col * (bubbleRadius * 2 + spacing) + bubbleRadius + (row % 2 ? bubbleRadius + spacing/2 : 0); const y = row * (bubbleRadius * 2 + spacing) + bubbleRadius; bubbles.push(new Bubble(x, y, this.getRandomColor(), bubbleRadius)); } } return bubbles; } getRandomColor(): string { return this.colors[Math.floor(Math.random() * this.colors.length)]; } shoot() { const angle = Math.atan2( this.mouseY - this.shooter.y, this.mouseX - this.shooter.x ); this.projectile = new Projectile( this.shooter.x, this.shooter.y - 30, angle, this.shooter.currentBubbleColor ); this.shooter.currentBubbleColor = this.getRandomColor(); } checkCollisions() { if (!this.projectile) return; // Check wall collisions if (this.projectile.x <= 0 || this.projectile.x >= this.width) { this.projectile.bounceX(); } // Check bubble collisions for (let i = 0; i < this.bubbles.length; i++) { const bubble = this.bubbles[i]; const distance = Math.sqrt( Math.pow(this.projectile.x - bubble.x, 2) + Math.pow(this.projectile.y - bubble.y, 2) ); if (distance < bubble.radius + this.projectile.radius) { // Collision detected if (bubble.color === this.projectile.color) { // Remove bubble and increase score this.bubbles.splice(i, 1); this.score += 10; } else { // Stick the projectile to the nearest bubble this.bubbles.push( new Bubble( this.projectile.x, this.projectile.y, this.projectile.color, this.projectile.radius ) ); } // Reset projectile this.projectile = null; break; } } // Check top wall collision (game over condition) if (this.projectile && this.projectile.y <= 0) { this.bubbles.push( new Bubble( this.projectile.x, this.projectile.y, this.projectile.color, this.projectile.radius ) ); this.projectile = null; } } update() { // Update projectile position if (this.projectile) { this.projectile.update(); this.checkCollisions(); } // Check game over condition if (this.bubbles.some(bubble => bubble.y > this.height - 100)) { this.gameOver = true; } this.draw(); } draw() { this.ctx.clearRect(0, 0, this.width, this.height); // Draw bubbles this.bubbles.forEach(bubble => bubble.draw(this.ctx)); // Draw projectile if (this.projectile) { this.projectile.draw(this.ctx); } // Draw shooter this.shooter.draw(this.ctx); // Draw aim line this.ctx.beginPath(); this.ctx.moveTo(this.shooter.x, this.shooter.y - 30); this.ctx.lineTo(this.mouseX, this.mouseY); this.ctx.strokeStyle = 'rgba(0,0,0,0.2)'; this.ctx.stroke(); // Draw score this.ctx.fillStyle = 'black'; this.ctx.font = '20px Arial'; this.ctx.fillText(`Score: ${this.score}`, 10, 30); // Draw game over if (this.gameOver) { this.ctx.fillStyle = 'rgba(0,0,0,0.5)'; this.ctx.fillRect(0, 0, this.width, this.height); this.ctx.fillStyle = 'white'; this.ctx.font = '40px Arial'; this.ctx.textAlign = 'center'; this.ctx.fillText('Game Over', this.width / 2, this.height / 2); this.ctx.font = '20px Arial'; this.ctx.fillText(`Score: ${this.score}`, this.width / 2, this.height / 2 + 50); } } } class Bubble { x: number; y: number; radius: number; color: string; constructor(x: number, y: number, color: string, radius: number) { this.x = x; this.y = y; this.color = color; this.radius = radius; } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); } } class Projectile { x: number; y: number; radius: number; color: string; speed: number; angle: number; constructor(x: number, y: number, angle: number, color: string) { this.x = x; this.y = y; this.radius = 15; this.color = color; this.speed = 10; this.angle = angle; } update() { this.x += this.speed * Math.cos(this.angle); this.y += this.speed * Math.sin(this.angle); } bounceX() { this.angle = Math.PI - this.angle; } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.stroke(); ctx.closePath(); } } class Shooter { x: number; y: number; currentBubbleColor: string; constructor(x: number, y: number) { this.x = x; this.y = y; this.currentBubbleColor = this.getRandomColor(); } getRandomColor(): string { const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FDCB6E', '#6C5CE7']; return colors[Math.floor(Math.random() * colors.length)]; } draw(ctx: CanvasRenderingContext2D) { // Draw shooter base ctx.beginPath(); ctx.fillStyle = '#2C3E50'; ctx.moveTo(this.x - 25, this.y); ctx.lineTo(this.x + 25, this.y); ctx.lineTo(this.x, this.y + 50); ctx.closePath(); ctx.fill(); // Draw current bubble ctx.beginPath(); ctx.arc(this.x, this.y - 30, 20, 0, Math.PI * 2); ctx.fillStyle = this.currentBubbleColor; ctx.fill(); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.stroke(); } } function App() { const canvasRef = useRef(null); const [game, setGame] = useState(null); useEffect(() => { if (canvasRef.current) { const newGame = new BubbleShooterGame(canvasRef.current); setGame(newGame); const gameLoop = () => { newGame.update(); requestAnimationFrame(gameLoop); }; gameLoop(); } }, []); return (

Bubble Shooter

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Bubble Shooter

`, { headers: { "content-type": "text/html" } }); }

yuhbuh505