const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.textAlign(p.CENTER); p.textFont('Arial'); const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.mousePressed = () => { const pointer = toDesignSpace(p.mouseX, p.mouseY); if (gameState === 'menu') { // Start game button if (pointer.x > 250 && pointer.x < 550 && pointer.y > 450 && pointer.y < 500) { gameState = 'playing'; enemies = []; // Reset enemies attackAnim.active = false; } // Shop button if (pointer.x > 50 && pointer.x < 250 && pointer.y > 450 && pointer.y < 500) { gameState = 'shop'; } } else if (gameState === 'playing') { // Attack at mouse position if (pointer.x > 200 && pointer.x < DESIGN_WIDTH) { attackAnim.active = true; attackAnim.time = 0; attackAnim.targetX = pointer.x; attackAnim.targetY = pointer.y; } } else if (gameState === 'shop') { // Character buttons let yOffset = 200; Object.entries(characters).forEach(([key, char]) => { if (pointer.x > DESIGN_WIDTH / 2 - 80 && pointer.x < DESIGN_WIDTH / 2 + 80 && pointer.y > yOffset + 90 && pointer.y < yOffset + 120) { if (char.cost <= coins || char.cost === 0) { selectedCharacter = key; } } yOffset += 160; }); // Back button if (pointer.x > 50 && pointer.x < 250 && pointer.y > 500 && pointer.y < 550) { gameState = 'menu'; } } }; // Game state let coins = 0; let enemies = []; let selectedCharacter = 'naruto'; // Default character let gameState = 'playing'; // 'menu', 'playing', 'shop' // Characters data const characters = { naruto: { name: 'Naruto', cost: 0, color: [255, 165, 0], attack: 20, moves: ['punch', 'rasengan'] }, luffy: { name: 'Luffy', cost: 100, color: [255, 140, 0], attack: 35, moves: ['punch', 'gomu-gomu'] }, gojo: { name: 'Gojo', cost: 250, color: [0, 191, 255], attack: 50, moves: ['punch', 'infinity'] } }; // Enemy class class Enemy { constructor() { this.x = p.random(DESIGN_WIDTH * 0.8, DESIGN_WIDTH); this.y = p.random(100, DESIGN_HEIGHT - 100); this.size = 40; this.health = 3; this.speed = p.random(0.5, 1.5); this.color = [200, 50, 50]; } update() { this.x -= this.speed; } draw() { p.fill(...this.color); p.circle(this.x, this.y, this.size); p.fill(255, 0, 0); p.textAlign(p.CENTER); p.textSize(12); p.text(this.health, this.x, this.y - 20); } isDead() { return this.health <= 0; } offscreen() { return this.x < -50; } } // Attack animation let attackAnim = { active: false, time: 0, targetX: 0, targetY: 0 }; p.draw = () => { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); const pointer = toDesignSpace(p.mouseX, p.mouseY); if (gameState === 'menu') { // Main menu p.fill(255); p.textAlign(p.CENTER); p.textSize(48); p.text('Anime Fighter', DESIGN_WIDTH / 2, 150); p.textSize(24); p.text(`Coins: ${coins}`, DESIGN_WIDTH / 2, 200); // Character preview const char = characters[selectedCharacter]; p.fill(...char.color); p.circle(DESIGN_WIDTH / 2, 300, 120); p.fill(255); p.textSize(28); p.text(char.name, DESIGN_WIDTH / 2, 380); p.textSize(20); p.text(`Attack: ${char.attack}`, DESIGN_WIDTH / 2, 420); // Buttons p.fill(96, 165, 250); if (pointer.x > 250 && pointer.x < 550 && pointer.y > 450 && pointer.y < 500) { p.fill(147, 197, 253); } p.rect(250, 450, 300, 50, 10); p.fill(255); p.textSize(24); p.text('START GAME', DESIGN_WIDTH / 2, 485); p.fill(34, 197, 94); if (pointer.x > 50 && pointer.x < 250 && pointer.y > 450 && pointer.y < 500) { p.fill(74, 222, 128); } p.rect(50, 450, 200, 50, 10); p.fill(255); p.text('SHOP', 150, 485); } else if (gameState === 'playing') { // Game screen p.fill(255); p.textSize(24); p.textAlign(p.LEFT); p.text(`Coins: ${coins}`, 20, 40); p.text(`Character: ${characters[selectedCharacter].name}`, 20, 70); // Player character const char = characters[selectedCharacter]; p.fill(...char.color); p.circle(150, DESIGN_HEIGHT / 2, 80); p.fill(255); p.textAlign(p.CENTER); p.textSize(16); p.text('YOU', 150, DESIGN_HEIGHT / 2 + 5); // Update enemies if (p.frameCount % 60 === 0) { enemies.push(new Enemy()); } for (let i = enemies.length - 1; i >= 0; i--) { enemies[i].update(); enemies[i].draw(); // Attack enemies if (attackAnim.active && p.dist(enemies[i].x, enemies[i].y, attackAnim.targetX, attackAnim.targetY) < 60) { enemies[i].health -= char.attack / 20; if (enemies[i].isDead()) { coins += 10; enemies.splice(i, 1); } } if (enemies[i].offscreen()) { enemies.splice(i, 1); } } // Attack animation if (attackAnim.active) { attackAnim.time += 0.2; p.fill(255, 255, 0, 150); p.circle(attackAnim.targetX, attackAnim.targetY, 60 * p.sin(attackAnim.time)); if (attackAnim.time > Math.PI) { attackAnim.active = false; } } // Attack on click if (pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT) { p.fill(255, 255, 0, 100); p.circle(pointer.x, pointer.y, 20); } } else if (gameState === 'shop') { // Shop screen p.fill(255); p.textAlign(p.CENTER); p.textSize(36); p.text('CHARACTER SHOP', DESIGN_WIDTH / 2, 100); p.textSize(24); p.text(`Coins: ${coins}`, DESIGN_WIDTH / 2, 150); let yOffset = 200; Object.entries(characters).forEach(([key, char]) => { p.fill(char.cost > coins ? [100, 100, 100] : char.color); p.circle(DESIGN_WIDTH / 2, yOffset, 100); p.fill(255); p.textSize(20); p.text(char.name, DESIGN_WIDTH / 2, yOffset + 40); p.textSize(16); p.text(`Cost: ${char.cost} | Attack: ${char.attack}`, DESIGN_WIDTH / 2, yOffset + 70); // Buy button p.fill(char.cost <= coins ? [34, 197, 94] : [100, 100, 100]); if (pointer.x > DESIGN_WIDTH / 2 - 80 && pointer.x < DESIGN_WIDTH / 2 + 80 && pointer.y > yOffset + 90 && pointer.y < yOffset + 120) { p.fill(char.cost <= coins ? [74, 222, 128] : [150, 150, 150]); } p.rect(DESIGN_WIDTH / 2 - 80, yOffset + 90, 160, 30, 5); p.fill(255); p.textSize(16); p.text('SELECT', DESIGN_WIDTH / 2, yOffset + 112); if (key === selectedCharacter) { p.fill(255, 255, 0); p.circle(DESIGN_WIDTH / 2 - 120, yOffset, 20); } yOffset += 160; }); // Back button p.fill(96, 165, 250); if (pointer.x > 50 && pointer.x < 250 && pointer.y > 500 && pointer.y < 550) { p.fill(147, 197, 253); } p.rect(50, 500, 200, 50, 10); p.fill(255); p.text('BACK TO MENU', 150, 535); } p.pop(); }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

Ummm I tried

How to play