const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; const POKEMON = [ { name: "Charzarid", color: [255, 165, 0] }, { name: "Venasaur", color: [34, 197, 94] }, { name: "Blastoise", color: [59, 130, 246] }, { name: "Arceus", color: [236, 236, 236] }, { name: "Pikachu", color: [255, 215, 0] } ]; const TRAINERS = [ { name: "Rival Blue", color: [255, 0, 0], pokemon: "Charzarid" }, { name: "Gym Leader Misty", color: [0, 191, 255], pokemon: "Blastoise" }, { name: "Professor Oak", color: [139, 69, 19], pokemon: "Venasaur" }, { name: "Elite Four Lance", color: [128, 0, 128], pokemon: "Arceus" } ]; let currentPokemon = null; let currentTrainer = null; let encounterTimer = 0; let battleActive = false; let playerHealth = 100; let pokemonHealth = 100; let capturedPokemon = []; let playerMove = null; let moves = [ { name: "Confusion", power: 25, color: [186, 85, 211] }, { name: "Hydro Pump", power: 55, color: [30, 144, 255] }, { name: "Scratch", power: 30, color: [255, 140, 0] }, { name: "Calm Mind", power: 0, color: [221, 160, 221] } ]; let playerX = DESIGN_WIDTH / 2; let playerY = DESIGN_HEIGHT / 2; let playerSpeed = 3; let keys = {}; 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.noStroke(); p.textAlign(p.CENTER, p.CENTER); p.textSize(24); p.keyPressed = () => { keys[p.key.toLowerCase()] = true; }; p.keyReleased = () => { keys[p.key.toLowerCase()] = false; }; 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 = () => { if (battleActive) { const pointer = toDesignSpace(p.mouseX, p.mouseY); if ( pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT ) { if (playerHealth > 0 && pokemonHealth > 0 && !playerMove) { // Select move const moveY = DESIGN_HEIGHT * 0.82; const moveIndex = Math.floor((pointer.x - DESIGN_WIDTH * 0.1) / 140); if (moveIndex >= 0 && moveIndex < 4) { playerMove = moves[moveIndex]; } } else if (playerMove && playerHealth > 0 && pokemonHealth > 0) { // Execute player attack pokemonHealth -= playerMove.power + Math.random() * 15; if (pokemonHealth <= 0) pokemonHealth = 0; // Pokemon counterattack const enemyMove = moves[Math.floor(Math.random() * moves.length)]; playerHealth -= enemyMove.power + Math.random() * 10; if (playerHealth <= 0) { playerHealth = 0; playerMove = null; return; } playerMove = null; } else if (pokemonHealth <= 0 && !currentTrainer) { // Wild Pokemon fainted - try to catch if (Math.random() < 0.67) { capturedPokemon.push({ ...currentPokemon }); console.log(`Captured ${currentPokemon.name}! Added to party.`); } else { console.log(`${currentPokemon.name} broke free!`); } // Reset battle battleActive = false; playerHealth = 100; pokemonHealth = 100; currentPokemon = null; currentTrainer = null; encounterTimer = 0; playerMove = null; } else if (pokemonHealth <= 0 && currentTrainer) { // Trainer Pokemon fainted - try to catch if (Math.random() < 0.5) { capturedPokemon.push({ ...currentPokemon }); console.log(`Captured ${currentPokemon.name} from ${currentTrainer.name}!`); } else { console.log(`${currentTrainer.name}'s ${currentPokemon.name} escaped!`); } // Reset battle battleActive = false; playerHealth = 100; pokemonHealth = 100; currentPokemon = null; currentTrainer = null; encounterTimer = 0; playerMove = null; } else { // Reset battle (player fainted) battleActive = false; playerHealth = 100; pokemonHealth = 100; currentPokemon = null; currentTrainer = null; encounterTimer = 0; playerMove = null; } } } }; p.draw = () => { p.background(15, 23, 42); p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Grass background - green blocks p.fill(34, 139, 34); for (let x = 0; x < DESIGN_WIDTH; x += 40) { for (let y = 0; y < DESIGN_HEIGHT; y += 40) { p.rect(x, y, 40, 40); } } // Player movement if (!battleActive) { if (keys['w'] || keys['arrowup']) playerY = Math.max(20, playerY - playerSpeed); if (keys['s'] || keys['arrowdown']) playerY = Math.min(DESIGN_HEIGHT - 20, playerY + playerSpeed); if (keys['a'] || keys['arrowleft']) playerX = Math.max(20, playerX - playerSpeed); if (keys['d'] || keys['arrowright']) playerX = Math.min(DESIGN_WIDTH - 20, playerX + playerSpeed); } if (!battleActive) { // Draw player character p.fill(96, 165, 250); p.circle(playerX, playerY, 32); p.fill(255, 255, 255); p.circle(playerX - 8, playerY - 8, 6); p.circle(playerX + 8, playerY - 8, 6); // Encounter logic encounterTimer += 1; if (encounterTimer > 240 && Math.random() < 0.015) { // Wild Pokemon encounter currentPokemon = POKEMON[Math.floor(Math.random() * POKEMON.length)]; currentTrainer = null; battleActive = true; pokemonHealth = 100; encounterTimer = 0; } else if (Math.random() < 0.005) { // Trainer battle encounter currentTrainer = TRAINERS[Math.floor(Math.random() * TRAINERS.length)]; currentPokemon = POKEMON.find(p => p.name === currentTrainer.pokemon); battleActive = true; pokemonHealth = 100; encounterTimer = 0; } p.fill(255); p.textSize(24); p.text("WASD/Arrows to walk around!", DESIGN_WIDTH / 2, 50); p.textSize(20); p.text(`Encounters: ${Math.floor(encounterTimer / 60)}s | Captured: ${capturedPokemon.length}`, DESIGN_WIDTH / 2, DESIGN_HEIGHT - 50); p.textSize(16); p.text("Psyduck is your main Pokemon!", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 25); // Show captured Pokemon if (capturedPokemon.length > 0) { p.fill(255); p.textSize(16); p.text("Captured Pokemon:", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 100); capturedPokemon.slice(-4).forEach((pokemon, i) => { p.fill(...pokemon.color); p.circle(DESIGN_WIDTH * 0.2 + i * 60, DESIGN_HEIGHT - 70, 30); p.fill(255); p.textSize(12); p.text(pokemon.name, DESIGN_WIDTH * 0.2 + i * 60, DESIGN_HEIGHT - 45); }); } if (currentTrainer) { p.text("Trainer battle!", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 30); } else { p.text("Wild encounters", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 30); } } else { // Battle screen p.fill(25, 25, 112); p.rect(50, 50, DESIGN_WIDTH - 100, DESIGN_HEIGHT - 100, 20); // Player Pokemon (Psyduck) p.fill(255, 218, 185); p.circle(DESIGN_WIDTH * 0.25, DESIGN_HEIGHT * 0.3, 100); p.fill(255, 165, 0); p.circle(DESIGN_WIDTH * 0.25 - 20, DESIGN_HEIGHT * 0.28, 35); p.circle(DESIGN_WIDTH * 0.25 + 20, DESIGN_HEIGHT * 0.28, 35); p.fill(0); p.textSize(24); p.text("Psyduck", DESIGN_WIDTH * 0.25, DESIGN_HEIGHT * 0.45); // Enemy Pokemon / Trainer Pokemon p.fill(...currentPokemon.color); p.circle(DESIGN_WIDTH * 0.75, DESIGN_HEIGHT * 0.3, 120); p.fill(0); p.textSize(28); p.text(currentPokemon.name, DESIGN_WIDTH * 0.75, DESIGN_HEIGHT * 0.55); if (currentTrainer) { p.fill(...currentTrainer.color); p.circle(DESIGN_WIDTH * 0.75, DESIGN_HEIGHT * 0.15, 60); p.fill(255); p.textSize(20); p.text(currentTrainer.name, DESIGN_WIDTH * 0.75, DESIGN_HEIGHT * 0.48); } // Health bars p.fill(255, 0, 0); p.rect(DESIGN_WIDTH * 0.65, DESIGN_HEIGHT * 0.6, 120, 20); p.fill(0, 255, 0); p.rect(DESIGN_WIDTH * 0.65, DESIGN_HEIGHT * 0.6, (pokemonHealth / 100) * 120, 20); p.fill(255, 0, 0); p.rect(DESIGN_WIDTH * 0.1, DESIGN_HEIGHT * 0.35, 120, 20); p.fill(0, 255, 0); p.rect(DESIGN_WIDTH * 0.1, DESIGN_HEIGHT * 0.35, (playerHealth / 100) * 120, 20); // Battle UI - Move selection p.fill(50, 50, 50, 200); p.rect(DESIGN_WIDTH * 0.05, DESIGN_HEIGHT * 0.75, DESIGN_WIDTH * 0.9, 80); p.fill(255); p.textSize(20); if (playerHealth > 0 && pokemonHealth > 0) { if (!playerMove) { p.text("Choose your move:", DESIGN_WIDTH / 2, DESIGN_HEIGHT * 0.78); moves.forEach((move, i) => { p.fill(playerMove === move ? 255 : 200); p.rect(DESIGN_WIDTH * 0.1 + i * 140, DESIGN_HEIGHT * 0.82, 130, 35, 8); p.fill(0); p.textSize(16); p.text(move.name, DESIGN_WIDTH * 0.1 + i * 140 + 65, DESIGN_HEIGHT * 0.845); p.fill(move.color); p.noStroke(); p.rect(DESIGN_WIDTH * 0.1 + i * 140 + 5, DESIGN_HEIGHT * 0.82 + 5, move.power ? move.power * 2 : 20, 8); }); } else { p.text(`Used ${playerMove.name}!`, DESIGN_WIDTH / 2, DESIGN_HEIGHT * 0.78); p.text("Enemy attacks back!", DESIGN_WIDTH / 2, DESIGN_HEIGHT * 0.81); } } else if (pokemonHealth <= 0 && !currentTrainer) { p.text("Click to THROW POKEBALL!", DESIGN_WIDTH / 2, DESIGN_HEIGHT * 0.85); } // Show player position info p.textSize(16); p.text(`Player at (${Math.round(playerX)}, ${Math.round(playerY)})` , DESIGN_WIDTH / 2, DESIGN_HEIGHT - 30); if (playerHealth <= 0) { p.fill(255, 0, 0); p.textSize(32); p.text("YOU FAINTED!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(20); p.text("Click to continue", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); } else if (pokemonHealth <= 0 && !currentTrainer) { p.fill(0, 255, 0); p.textSize(32); p.text("POKEMON FAINTED!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(20); p.text("Throw Pokeball?", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 30); p.text("Click to try catch", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 55); } else if (pokemonHealth <= 0) { p.fill(0, 255, 0); p.textSize(32); p.text("VICTORY!", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(20); p.text(`${currentTrainer.name} fainted!`, DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 30); p.text("Click to continue", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 55); } } 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); } };

p5.js Sketch

How to play