const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; // Game state let gameState = 'selection'; // 'selection', 'battle', 'attackAnim' let selectedCharacter = null; let player = null; let enemy = null; let playerHP = 100; let enemyHP = 100; let turn = 'player'; let message = 'Select your character:'; let enemyLevel = 1; let battleCount = 0; let enemyBaseHP = 100; let enemyBaseDamage = 10; let currentEnemyHP = enemyBaseHP; let enemyAttackType = null; let pendingDamage = 0; let pendingHeal = 0; let pendingDefenseSuccess = null; // Animation state let animationTimer = 0; let currentMove = null; let attackType = null; let attackStartX = 0; let attackStartY = 0; let attackEndX = 0; let attackEndY = 0; // Characters const characters = [ { name: 'Warrior', color: '#FF6B6B', moves: ['Slash', 'Defend', 'Heal', 'Charge'], icon: '⚔️' }, { name: 'Mage', color: '#4ECDC4', moves: ['Fireball', 'Shield', 'Mana Burst', 'Teleport'], icon: '🔮' }, { name: 'Archer', color: '#45B7D1', moves: ['Arrow', 'Dodge', 'Poison', 'Rapid Fire'], icon: '🏹' }, { name: 'Rogue', color: '#96CEB4', moves: ['Stab', 'Stealth', 'Trap', 'Backstab'], icon: '🗡️' }, { name: 'Beast', color: '#8B4513', moves: ['Claw', 'Roar', 'Regenerate', 'Frenzy'], icon: '🐺' }, { name: 'Ninja', color: '#000000', moves: ['Shuriken', 'Smoke Bomb', 'Shadow Strike', 'Kunai'], icon: '🥷' }, { name: 'Robot', color: '#C0C0C0', moves: ['Laser', 'Shield', 'Repair', 'Overload'], icon: '🤖' } ]; 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); // Mobile-friendly scaling - prioritize height on portrait let fitScale; if (width < height) { // Portrait mode fitScale = Math.min(height / DESIGN_HEIGHT, width / (DESIGN_WIDTH * 0.8)); } else { // Landscape mode fitScale = Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT); } fitScale = Math.max(0.3, fitScale || 1); // Minimum scale for readability 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, }); // Draw character selection const drawSelection = () => { // Background p.fill(50, 100, 200); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); // Title p.fill(255); p.textAlign(p.CENTER); p.textSize(28); p.text('Character Selection', DESIGN_WIDTH / 2, 60); // Updated layout for 7 characters (3x2 + 1) const charWidth = DESIGN_WIDTH / 3; const charHeight = 100; const startY = 100; const spacing = 15; characters.forEach((char, i) => { const row = Math.floor(i / 3); const col = i % 3; const x = col * (charWidth + spacing) + (DESIGN_WIDTH - 3 * (charWidth + spacing)) / 2 + spacing; const y = startY + row * (charHeight + 25); // Highlight if selected if (selectedCharacter === i) { p.fill(255, 255, 0, 120); p.rect(x - 8, y - 8, charWidth + 16, charHeight + 16, 8); } // Character box if (char.color === '#000000') { // Dark mode for ninja - use dark gray with white border p.fill(30, 30, 30); p.stroke(255); p.strokeWeight(2); p.rect(x, y, charWidth, charHeight, 8); p.noStroke(); } else { p.fill(char.color); p.rect(x, y, charWidth, charHeight, 8); } // Icon p.fill(0); p.textAlign(p.CENTER); p.textSize(32); p.text(char.icon, x + charWidth / 2, y + 30); // Name p.fill(0); p.textAlign(p.CENTER); p.textSize(16); p.text(char.name, x + charWidth / 2, y + 55); // Moves (show first 3 to fit smaller cards) p.textSize(12); p.textAlign(p.LEFT); for (let j = 0; j < Math.min(3, char.moves.length); j++) { p.text(char.moves[j], x + 10, y + 70 + j * 14); } // Show "+1" if more moves if (char.moves.length > 3) { p.text('+1 more', x + 10, y + 70 + 3 * 14); } }); // Instructions p.fill(255); p.textSize(20); p.textAlign(p.CENTER); p.text('Tap a character to select', DESIGN_WIDTH / 2, DESIGN_HEIGHT - 60); }; // Draw battle scene const drawBattle = () => { // Field background p.fill(34, 139, 34); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); // Player side p.fill(0, 100, 0); p.rect(0, DESIGN_HEIGHT / 2, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); // Enemy side p.fill(100, 0, 0); p.rect(DESIGN_WIDTH / 2, 0, DESIGN_WIDTH / 2, DESIGN_HEIGHT); // Player character - larger with class-specific appearance if (player) { p.textAlign(p.CENTER); p.textSize(48); if (player.icon) { p.text(player.icon, 120, DESIGN_HEIGHT - 100); } else { p.fill(player.color); p.circle(120, DESIGN_HEIGHT - 120, 80); } p.fill(255); p.textSize(16); p.text(player.name, 120, DESIGN_HEIGHT - 60); } // Enemy character - larger p.fill(255, 0, 0); p.circle(DESIGN_WIDTH - 120, 120, 80); p.fill(0); p.textAlign(p.CENTER); p.textSize(16); p.text('Enemy', DESIGN_WIDTH - 120, 90); // HP bars - larger and better positioned drawHPBar(50, DESIGN_HEIGHT - 220, playerHP, 100, 'Player HP'); drawHPBar(DESIGN_WIDTH - 200, 180, enemyHP, 100, 'Enemy HP'); // Moves buttons - larger and better spaced for mobile if (turn === 'player' && player) { const btnWidth = DESIGN_WIDTH * 0.4; const btnHeight = 60; const startX = (DESIGN_WIDTH - 2 * btnWidth - 20) / 2; const startY = DESIGN_HEIGHT - 250; const spacing = 20; player.moves.forEach((move, i) => { const x = startX + (i % 2) * (btnWidth + spacing); const y = startY + Math.floor(i / 2) * (btnHeight + 15); // Touch-friendly hover (disabled on mobile but keeps visual) p.fill(100, 150, 255); p.noStroke(); p.rect(x, y, btnWidth, btnHeight, 10); // Button text p.fill(0); p.textAlign(p.CENTER, p.CENTER); p.textSize(16); p.text(move, x + btnWidth / 2, y + btnHeight / 2 + 4); }); } // Message - larger p.fill(255); p.textAlign(p.CENTER); p.textSize(24); p.text(message, DESIGN_WIDTH / 2, 60); }; const drawHPBar = (x, y, current, max, label) => { const barWidth = 180; const barHeight = 25; // Ensure current HP doesn't go below 0 const clampedCurrent = Math.max(0, current); // Label p.fill(255); p.textAlign(p.CENTER); p.textSize(14); p.text(label, x + barWidth / 2, y - 10); // Background p.fill(80); p.noStroke(); p.rect(x, y, barWidth, barHeight, 5); // Fill - clamp to prevent negative width p.noStroke(); const fillWidth = Math.max(0, (clampedCurrent / max) * barWidth); if (clampedCurrent / max > 0.5) { p.fill(0, 255, 0); } else if (clampedCurrent / max > 0.25) { p.fill(255, 255, 0); } else { p.fill(255, 0, 0); } if (fillWidth > 0) { p.rect(x, y, fillWidth, barHeight, 5); } // Border p.stroke(255); p.strokeWeight(2); p.noFill(); p.rect(x, y, barWidth, barHeight, 5); p.noStroke(); // Text - show clamped value p.fill(0); p.textAlign(p.CENTER); p.textSize(14); p.text(`${Math.round(clampedCurrent)}/${max}`, x + barWidth / 2, y + barHeight / 2 + 4); }; // Handle touch/mouse clicks const handleClick = (mx, my) => { const pos = toDesignSpace(mx, my); if (gameState === 'selection') { // Mobile-friendly character selection (3x2 grid) const charWidth = DESIGN_WIDTH / 3; const charHeight = 100; const startY = 100; const spacing = 15; for (let i = 0; i < characters.length; i++) { const row = Math.floor(i / 3); const col = i % 3; const x = col * (charWidth + spacing) + (DESIGN_WIDTH - 3 * (charWidth + spacing)) / 2 + spacing; const y = startY + row * (charHeight + 25); if (pos.x > x && pos.x < x + charWidth && pos.y > y && pos.y < y + charHeight) { selectedCharacter = i; player = { ...characters[i] }; gameState = 'battle'; enemy = { name: 'Enemy', color: '#FF0000', hp: 100 }; playerHP = 100; enemyHP = 100; turn = 'player'; message = `You chose ${player.name}! Battle starts!`; return; } } // Handle the 7th character (Robot) in the bottom row if (characters.length > 6) { const i = 6; const row = 2; const col = 1; const x = col * (charWidth + spacing) + (DESIGN_WIDTH - 3 * (charWidth + spacing)) / 2 + spacing; const y = startY + row * (charHeight + 25); if (pos.x > x && pos.x < x + charWidth && pos.y > y && pos.y < y + charHeight) { selectedCharacter = i; player = { ...characters[i] }; gameState = 'battle'; enemy = { name: 'Enemy', color: '#FF0000', hp: 100 }; playerHP = 100; enemyHP = 100; turn = 'player'; message = `You chose ${player.name}! Battle starts!`; return; } } } else if (gameState === 'battle' && turn === 'player') { // Mobile-friendly button detection const btnWidth = DESIGN_WIDTH * 0.4; const btnHeight = 60; const startX = (DESIGN_WIDTH - 2 * btnWidth - 20) / 2; const startY = DESIGN_HEIGHT - 250; const spacing = 20; for (let i = 0; i < player.moves.length; i++) { const x = startX + (i % 2) * (btnWidth + spacing); const y = startY + Math.floor(i / 2) * (btnHeight + 15); if (pos.x > x && pos.x < x + btnWidth && pos.y > y && pos.y < y + btnHeight) { performMove(player.moves[i]); return; } } } }; const performMove = (move) => { // Enhanced move effects with visual feedback and animation let damage = 0; let effect = ''; const isAttack = ['Slash', 'Stab', 'Arrow', 'Fireball', 'Backstab', 'Charge', 'Rapid Fire', 'Teleport', 'Claw', 'Frenzy', 'Shuriken', 'Shadow Strike', 'Kunai', 'Laser', 'Overload'].includes(move); const isDefend = ['Defend', 'Shield', 'Dodge', 'Stealth', 'Roar', 'Smoke Bomb'].includes(move); const isHeal = ['Heal', 'Mana Burst', 'Poison', 'Trap', 'Regenerate', 'Repair'].includes(move); if (move === 'Arrow') { damage = p.random(8, 18); effect = `🏹 ${move}! Dealt ${Math.floor(damage)} damage!`; currentMove = { type: 'projectile', icon: '🏹', startX: 120, startY: DESIGN_HEIGHT - 120, endX: DESIGN_WIDTH - 120, endY: 120 }; enemyHP -= damage; } else if (move === 'Claw' || move === 'Frenzy') { damage = p.random(18, 40); effect = `🐾 ${move}! Dealt ${Math.floor(damage)} damage!`; currentMove = { type: 'slash', icon: '🐾', startX: 120, startY: DESIGN_HEIGHT - 120, endX: DESIGN_WIDTH - 120, endY: 120 }; enemyHP -= damage; } else if (move === 'Shuriken' || move === 'Shadow Strike' || move === 'Kunai') { damage = p.random(12, 28); effect = `🥷 ${move}! Dealt ${Math.floor(damage)} damage!`; currentMove = { type: 'projectile', icon: '🗡️', startX: 120, startY: DESIGN_HEIGHT - 120, endX: DESIGN_WIDTH - 120, endY: 120 }; enemyHP -= damage; } else if (move === 'Laser' || move === 'Overload') { damage = p.random(20, 45); effect = `🔫 ${move}! Dealt ${Math.floor(damage)} damage!`; currentMove = { type: 'laser', icon: '🔫', startX: 120, startY: DESIGN_HEIGHT - 120, endX: DESIGN_WIDTH - 120, endY: 120 }; enemyHP -= damage; } else if (isAttack) { damage = p.random(15, 35); effect = `💥 ${move}! Dealt ${Math.floor(damage)} damage!`; currentMove = { type: 'slash', icon: '💥', startX: 120, startY: DESIGN_HEIGHT - 120, endX: DESIGN_WIDTH - 120, endY: 120 }; enemyHP -= damage; } else if (isDefend) { // Coin flip mechanic for defense moves const coinFlip = Math.random() < 0.5 ? 'heads' : 'tails'; const success = coinFlip === 'heads'; // 50% chance if (success) { effect = `🛡️ ${move} succeeded! (Heads) Protected this turn.`; } else { effect = `❌ ${move} failed! (Tails) No protection this turn.`; } // Store defense status for enemy turn window.currentDefenseSuccess = success; currentMove = { type: 'defend', icon: '🛡️' }; } else if (isHeal) { const healAmount = p.random(15, 25); playerHP = Math.min(100, playerHP + healAmount); effect = `❤️ You ${move.toLowerCase()}! Restored ${Math.floor(healAmount)} HP.`; currentMove = { type: 'heal', icon: '❤️' }; } message = effect; if (enemyHP <= 0) { message = '🎉 Victory! You defeated the enemy! Refresh to play again.'; turn = 'over'; return; } if (playerHP <= 0) { message = '💀 Defeat! You were defeated. Refresh to play again.'; turn = 'over'; return; } if (currentMove) { animationTimer = 0; gameState = 'attackAnim'; } else { turn = 'enemy'; setTimeout(enemyTurn, 1200); } }; const enemyTurn = () => { const damage = p.random(10, 25); currentMove = { type: 'enemyAttack', icon: '💥', startX: DESIGN_WIDTH - 120, startY: 120, endX: 120, endY: DESIGN_HEIGHT - 120 }; playerHP -= damage; message = `Enemy attacks! Dealt ${damage} damage!`; animationTimer = 0; gameState = 'attackAnim'; if (playerHP <= 0) { message = 'You lose! Refresh to play again.'; turn = 'over'; return; } setTimeout(() => { gameState = 'battle'; turn = 'player'; }, 1500); }; p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.textFont('Arial'); p.textLeading(2); // Better text spacing p.noSmooth(); // Crisp pixels on mobile 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(); }; const drawAttackAnimation = () => { // Field background p.fill(34, 139, 34); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); // Player side p.fill(0, 100, 0); p.rect(0, DESIGN_HEIGHT / 2, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); // Enemy side p.fill(100, 0, 0); p.rect(DESIGN_WIDTH / 2, 0, DESIGN_WIDTH / 2, DESIGN_HEIGHT); // Player character if (player) { p.textAlign(p.CENTER); p.textSize(48); if (player.icon) { p.text(player.icon, 120, DESIGN_HEIGHT - 100); } else { p.fill(player.color); p.circle(120, DESIGN_HEIGHT - 120, 80); } } // Enemy character p.fill(255, 0, 0); p.circle(DESIGN_WIDTH - 120, 120, 80); p.fill(0); p.textAlign(p.CENTER); p.textSize(16); p.text('Enemy', DESIGN_WIDTH - 120, 90); // HP bars drawHPBar(50, DESIGN_HEIGHT - 220, playerHP, 100, 'Player HP'); drawHPBar(DESIGN_WIDTH - 200, 180, enemyHP, 100, 'Enemy HP'); // Animation if (currentMove) { animationTimer += 0.05; const progress = Math.min(animationTimer, 1); let animX = currentMove.startX + (currentMove.endX - currentMove.startX) * progress; let animY = currentMove.startY + (currentMove.endY - currentMove.startY) * progress; p.textAlign(p.CENTER); p.textSize(48); p.fill(255, 255, 0); p.text(currentMove.icon, animX, animY); if (progress >= 1) { currentMove = null; animationTimer = 0; gameState = 'battle'; if (turn === 'enemy') { setTimeout(enemyTurn, 500); } } } // Message p.fill(255); p.textAlign(p.CENTER); p.textSize(24); p.text(message, DESIGN_WIDTH / 2, 60); }; p.draw = () => { p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); if (gameState === 'selection') { drawSelection(); } else if (gameState === 'attackAnim') { drawAttackAnimation(); } else { drawBattle(); } p.pop(); }; // Handle both mouse and touch events p.mousePressed = () => { handleClick(p.mouseX, p.mouseY); }; p.touchStarted = () => { // Prevent default touch behaviors return false; }; p.touchMoved = () => { return false; }; p.touchEnded = () => { // Get touch position (first touch) if (p.touches && p.touches.length > 0) { const touch = p.touches[0]; const rect = p.canvas.getBoundingClientRect(); const clientX = touch.clientX - rect.left; const clientY = touch.clientY - rect.top; handleClick(clientX, clientY); } else if (p.mouseX !== undefined && p.mouseY !== undefined) { // Fallback for mouse handleClick(p.mouseX, p.mouseY); } return false; }; 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); } };

Battle ground game?

How to Play