// GAME_PROJECT_V1 // Template: Blank Sketch (p5.js) // Fixed-size canvas (800x600). Draw everything in code—no Scene Editor for p5. // GAME_LOGIC_START class Projectile { constructor(p, x, y, dir, color) { this.p = p; this.pos = p.createVector(x, y); this.vel = p.createVector(dir * 12, 0); this.r = 12; this.color = color; this.active = true; } update() { this.pos.add(this.vel); if (this.pos.x < 0 || this.pos.x > this.p.width) { this.active = false; } } draw() { this.p.push(); this.p.noStroke(); // Glowing Energy Bolt for(let i=0; i<3; i++) { this.p.fill(255, 255, 255, 50); this.p.circle(this.pos.x - (this.vel.x * i * 0.5), this.pos.y, this.r * (2 + i)); } this.p.fill(this.color); this.p.circle(this.pos.x, this.pos.y, this.r * 2); this.p.fill(255); this.p.circle(this.pos.x, this.pos.y, this.r); this.p.pop(); } } class Fighter { constructor(p, x, color, controls, isBot = false, level = 1) { this.p = p; this.pos = p.createVector(x, 290); this.vel = p.createVector(0, 0); this.w = 50; this.h = 110; this.color = color; this.controls = controls; this.health = 100; this.isAttacking = false; this.isPunching = false; this.attackTimer = 0; this.punchTimer = 0; this.groundY = 560; this.facing = x < 500 ? 1 : -1; this.isBot = isBot; this.level = level; this.speed = 6; this.projectiles = []; } getGroundAt(x) { if (x < 150) { if (x < 50) return 560; if (x < 100) return 525; return 490; } else if (x > 850) { if (x > 950) return 560; if (x > 900) return 525; return 490; } return 460; // Main Platform } update(target = null) { const p = this.p; // Inputs let moveLeft = false; let moveRight = false; let jump = false; let attack = false; let punch = false; if (this.isBot && target) { // Fighting Bot AI const dist = target.pos.x - this.pos.x; const absDist = Math.abs(dist); if (absDist > 150) { if (dist > 0) moveRight = true; else moveLeft = true; if (p.frameCount % 120 === 0) attack = true; } else if (absDist > 60) { if (dist > 0) moveRight = true; else moveLeft = true; } else { // Close range if (p.frameCount % 20 === 0) punch = true; if (p.random() < 0.05) moveLeft = !moveLeft; } if ((target.pos.y < this.pos.y - 50 && p.random() < 0.05) || p.random() < 0.01) jump = true; } else { // Player Controls if (p.keyIsDown(this.controls.left)) moveLeft = true; if (p.keyIsDown(this.controls.right)) moveRight = true; if (p.keyIsDown(this.controls.up) || p.keyIsDown(32)) jump = true; if (p.keyIsDown(this.controls.attack)) attack = true; if (p.keyIsDown(this.controls.punch)) punch = true; } // Movement logic if (moveLeft) { this.pos.x -= this.speed; this.facing = -1; } if (moveRight) { this.pos.x += this.speed; this.facing = 1; } // Dynamic Ground Height this.groundY = this.getGroundAt(this.pos.x + this.w/2); // Platform bounds const platX1 = 0; const platX2 = 1000; const onPlatform = (this.pos.x + this.w/2 > platX1 && this.pos.x + this.w/2 < platX2); // Jump logic if (jump && onPlatform && this.pos.y + this.h >= this.groundY && this.pos.y + this.h <= this.groundY + 10) { this.vel.y = -15; } // Gravity and Landing this.pos.y += this.vel.y; if (onPlatform && this.pos.y + this.h >= this.groundY) { if (this.vel.y >= 0) { this.vel.y = 0; this.pos.y = this.groundY - this.h; } } else { this.vel.y += 0.8; } // Projectile logic for (let i = this.projectiles.length - 1; i >= 0; i--) { this.projectiles[i].update(); if (!this.projectiles[i].active) { this.projectiles.splice(i, 1); } } // Melee Logic if (this.isPunching) { this.punchTimer--; if (this.punchTimer <= 0) this.isPunching = false; } else if (punch) { this.isPunching = true; this.punchTimer = 15; } // Range Attack logic if (this.isAttacking) { this.attackTimer--; if (this.attackTimer <= 0) { this.isAttacking = false; } } else if (attack) { this.isAttacking = true; this.attackTimer = 40; // Cooldown this.shoot(); } } shoot() { const startX = this.facing === 1 ? this.pos.x + this.w + 10 : this.pos.x - 10; const startY = this.pos.y + 40; this.projectiles.push(new Projectile(this.p, startX, startY, this.facing, this.color)); } draw() { const p = this.p; const bounce = p.sin(p.frameCount * 0.1) * 3; p.push(); p.noStroke(); // Character Shadow const currentGround = this.getGroundAt(this.pos.x + this.w/2); if (this.pos.y + this.h <= currentGround + 5) { p.fill(0, 50); p.ellipse(this.pos.x + this.w / 2, currentGround, 60, 15); } // Punching Visual if (this.isPunching) { p.fill(this.isBot && this.level >= 3 ? '#ff4d4d' : '#ffc800'); let px = this.facing === 1 ? this.pos.x + this.w : this.pos.x - 30; p.rect(px, this.pos.y + 40 + bounce, 30, 15, 5); } if (this.isBot && this.level >= 3) { // LEVEL 3 MONSTER DRAWING p.fill(this.color); // Spiky Body p.beginShape(); p.vertex(this.pos.x, this.pos.y + bounce); p.vertex(this.pos.x + this.w/2, this.pos.y - 10 + bounce); p.vertex(this.pos.x + this.w, this.pos.y + bounce); p.vertex(this.pos.x + this.w + 10, this.pos.y + this.h/2 + bounce); p.vertex(this.pos.x + this.w, this.pos.y + this.h - 20 + bounce); p.vertex(this.pos.x, this.pos.y + this.h - 20 + bounce); p.vertex(this.pos.x - 10, this.pos.y + this.h/2 + bounce); p.endShape(p.CLOSE); // Horns p.fill(255); p.triangle(this.pos.x + 5, this.pos.y + bounce, this.pos.x + 15, this.pos.y - 25 + bounce, this.pos.x + 25, this.pos.y + bounce); p.triangle(this.pos.x + this.w - 5, this.pos.y + bounce, this.pos.x + this.w - 15, this.pos.y - 25 + bounce, this.pos.x + this.w - 25, this.pos.y + bounce); // Glowing Eyes p.fill(255, 255, 0); let eyeX = this.facing === 1 ? 5 : -5; p.circle(this.pos.x + 15 + eyeX, this.pos.y + 30 + bounce, 12); p.circle(this.pos.x + 35 + eyeX, this.pos.y + 30 + bounce, 12); p.fill(0); p.circle(this.pos.x + 15 + eyeX, this.pos.y + 30 + bounce, 4); p.circle(this.pos.x + 35 + eyeX, this.pos.y + 30 + bounce, 4); } else { // Body (Ninja Suit) p.fill(this.color); p.rect(this.pos.x, this.pos.y + bounce, this.w, this.h - 20, 10); // Belt p.fill(20); p.rect(this.pos.x, this.pos.y + 60 + bounce, this.w, 10); // Mask / Head Area p.fill(30); p.rect(this.pos.x + 5, this.pos.y + 5 + bounce, 40, 35, 8); // Face Strip (Eyes showing) p.fill(255, 220, 180); p.rect(this.pos.x + 5, this.pos.y + 15 + bounce, 40, 12); // Eyes p.fill(0); let eyeX = this.facing === 1 ? 10 : 0; p.circle(this.pos.x + eyeX + 15, this.pos.y + 21 + bounce, 4); p.circle(this.pos.x + eyeX + 25, this.pos.y + 21 + bounce, 4); } // Power Aura when shooting if (this.isAttacking) { p.fill(255, 255, 255, 150); p.circle(this.pos.x + (this.facing === 1 ? this.w + 5 : -5), this.pos.y + 50 + bounce, 20); } p.pop(); // Draw Projectiles for (let proj of this.projectiles) { proj.draw(); } } getHitbox() { return { x: this.pos.x, y: this.pos.y, w: this.w, h: this.h }; } getPunchbox() { if (!this.isPunching) return null; let hitX = this.facing === 1 ? this.pos.x + this.w : this.pos.x - 30; return { x: hitX, y: this.pos.y + 40, w: 30, h: 20 }; } } class GameLogic { constructor({ p }) { this.p = p; this.level = 1; this.isVictory = false; this.gameOver = false; this.startLevel(); // Audience members this.audience = []; for (let i = 0; i < 50; i++) { this.audience.push({ x: p.random(0, 1000), y: 565, w: p.random(20, 40), h: p.random(30, 60), color: p.color(p.random(30, 60), p.random(30, 60), p.random(60, 100)), offset: p.random(100) }); } } startLevel() { const p = this.p; this.isVictory = false; this.gameOver = false; this.fightTimer = 99; this.introTimer = 120; // Player 1 this.p1 = new Fighter(p, 250, '#e11d48', { left: 65, // A right: 68, // D up: 87, // W attack: 71, // G (Energy) punch: 70 // F (Punch) }, false, this.level); // Boss Bot gets stronger each level let botColor = this.level % 2 === 0 ? '#10b981' : '#2563eb'; if (this.level >= 3) botColor = '#7c3aed'; this.p2 = new Fighter(p, 700, botColor, { left: p.LEFT_ARROW, right: p.RIGHT_ARROW, up: p.UP_ARROW, attack: 191, punch: 190 }, true, this.level); // Bot stats based on level this.p2.speed = 5 + (this.level * 0.5); this.p2.health = 80 + (this.level * 20); } checkCollision(rect1, rect2) { return rect1.x < rect2.x + rect2.w && rect1.x + rect1.w > rect2.x && rect1.y < rect2.y + rect2.h && rect1.y + rect1.h > rect2.y; } update() { if (this.introTimer > 0) { this.introTimer--; return; } if (this.gameOver || this.isVictory) { if (this.p.keyIsDown(78) && this.isVictory) { // 'N' for Next this.level++; this.startLevel(); } return; } if (this.p.frameCount % 60 === 0 && this.fightTimer > 0) this.fightTimer--; if (this.fightTimer <= 0) this.gameOver = true; this.p1.update(this.p2); this.p2.update(this.p1); const p1Hitbox = this.p1.getHitbox(); const p2Hitbox = this.p2.getHitbox(); const p1Punch = this.p1.getPunchbox(); const p2Punch = this.p2.getPunchbox(); // Punch Collisions if (p1Punch && this.checkCollision(p1Punch, p2Hitbox)) { this.p2.health -= 0.5; this.p2.pos.x += 2; } if (p2Punch && this.checkCollision(p2Punch, p1Hitbox)) { this.p1.health -= 0.5; this.p1.pos.x -= 2; } // Projectile Hits for (let proj of this.p1.projectiles) { if (proj.active && this.checkCollision({x: proj.pos.x - proj.r, y: proj.pos.y - proj.r, w: proj.r*2, h: proj.r*2}, p2Hitbox)) { this.p2.health -= 8; this.p2.pos.x += 20; proj.active = false; } } for (let proj of this.p2.projectiles) { if (proj.active && this.checkCollision({x: proj.pos.x - proj.r, y: proj.pos.y - proj.r, w: proj.r*2, h: proj.r*2}, p1Hitbox)) { this.p1.health -= 8; this.p1.pos.x -= 20; proj.active = false; } } if (this.p1.health <= 0 || this.p1.pos.y > this.p.height) { if (this.p1.health > 0) this.p1.health = 0; this.gameOver = true; } else if (this.p2.health <= 0 || this.p2.pos.y > this.p.height) { if (this.p2.health > 0) this.p2.health = 0; this.isVictory = true; } } drawEnvironment() { const p = this.p; p.push(); // Background theme if (this.level % 3 === 1) { p.background(15, 23, 42); p.noStroke(); p.fill(30, 41, 59); for(let i=0; i<5; i++) p.triangle(i*250 - 100, 600, i*250 + 125, 300, i*250 + 350, 600); p.fill(255, 255, 220); p.circle(150, 120, 80); p.fill(15, 23, 42); p.circle(170, 110, 70); } else if (this.level % 3 === 2) { p.background(251, 146, 60); p.noStroke(); p.fill(254, 215, 170); p.circle(p.width/2, 250, 200); } else { p.background(15, 10, 30); p.noStroke(); p.fill(40, 20, 80, 100); for(let i=0; i<10; i++) p.rect(i*100, 550, 80, 50); } // Cool Platform Styling p.noStroke(); let platColor = p.color(120, 60, 60); // Default Brick Red let neonColor = p.color(0, 255, 255); if (this.level % 3 === 1) { // Night platColor = p.color(60, 40, 40); neonColor = p.color(100, 200, 255); } else if (this.level % 3 === 2) { // Sunset platColor = p.color(100, 50, 30); neonColor = p.color(255, 100, 50); } else { // Tech platColor = p.color(40, 40, 50); neonColor = p.color(200, 50, 255); } const drawSection = (x1, x2, topY) => { // Glow effect under the edge p.fill(p.red(neonColor), p.green(neonColor), p.blue(neonColor), 40); p.rect(x1, topY, x2 - x1, 20); // Main Body p.fill(platColor); p.rect(x1, topY + 10, x2 - x1, 600 - topY); // Brick Pattern p.stroke(0, 80); p.strokeWeight(1); let bw = 40; let bh = 20; let row = 0; for (let py = topY + 10; py < 600; py += bh) { p.line(x1, py, x2, py); let offset = (row % 2 === 0) ? 0 : bw / 2; for (let px = x1 + offset; px <= x2; px += bw) { if (px > x1 && px < x2) p.line(px, py, px, py + bh); } row++; } p.noStroke(); // Top Slab (The Surface) p.fill(p.red(platColor) + 40, p.green(platColor) + 40, p.blue(platColor) + 50); p.rect(x1 - 5, topY, (x2 - x1) + 10, 15, 4); // Neon Strip let pulse = p.sin(p.frameCount * 0.1) * 50 + 200; p.fill(p.red(neonColor), p.green(neonColor), p.blue(neonColor), pulse); p.rect(x1, topY + 8, x2 - x1, 3); // Decorative "Power Lights" p.fill(255, 255, 255, 180); for(let lx = x1 + 20; lx < x2; lx += 100) { p.circle(lx, topY + 6, 4); } }; // Draw Stairs Left drawSection(0, 50, 560); drawSection(50, 100, 525); drawSection(100, 150, 490); // Draw Main Platform drawSection(150, 850, 460); // Draw Stairs Right drawSection(850, 900, 490); drawSection(900, 950, 525); drawSection(950, 1000, 560); p.pop(); } drawAudience() { const p = this.p; p.push(); for (let person of this.audience) { let bob = p.sin(p.frameCount * 0.1 + person.offset) * 5; p.noStroke(); // Body/Shoulders p.fill(person.color); p.rect(person.x - person.w/2, person.y + bob, person.w, person.h, 5); // Head p.fill(p.red(person.color) + 20, p.green(person.color) + 20, p.blue(person.color) + 20); p.circle(person.x, person.y - 10 + bob, person.w * 0.7); } p.pop(); } drawUI() { const p = this.p; p.push(); // Health Bars p.stroke(255); p.strokeWeight(3); p.fill(40); p.rect(50, 30, 400, 30); p.rect(550, 30, 400, 30); p.noStroke(); p.fill(255, 255, 0); // Health color p.rect(50, 30, p.map(this.p1.health, 0, 100, 0, 400), 30); p.rect(950, 30, -p.map(this.p2.health, 0, 100, 0, 400), 30); // Timer p.fill(255); p.textSize(40); p.textStyle(p.BOLD); p.text(Math.ceil(this.fightTimer), p.width / 2, 45); // Control Hints p.textSize(14); p.textStyle(p.NORMAL); p.text("P1: WASD or Space | F: Punch | G: Blast", 250, 80); p.text("LEVEL " + this.level + " BOT", 750, 80); if (this.introTimer > 0) { p.fill(0, 150); p.rect(0, 0, p.width, p.height); p.fill(255, 215, 0); p.textSize(80); p.text(this.introTimer > 40 ? "LEVEL " + this.level : "FIGHT!", p.width / 2, p.height / 2); } if (this.isVictory) { p.fill(0, 180); p.rect(0, 0, p.width, p.height); p.fill(255, 215, 0); p.textSize(100); p.text("VICTORY!", p.width / 2, p.height / 2 - 50); p.fill(255); p.textSize(30); p.text("Level " + this.level + " Complete", p.width / 2, p.height / 2 + 30); p.textSize(20); p.text("Press 'N' for Next Level", p.width / 2, p.height / 2 + 80); } if (this.gameOver) { p.fill(0, 180); p.rect(0, 0, p.width, p.height); p.fill(255, 50, 50); p.textSize(100); p.text("GAME OVER", p.width / 2, p.height / 2 - 50); p.fill(255); p.textSize(40); p.text("BOT WINS!", p.width / 2, p.height / 2 + 50); p.textSize(20); p.text("Refresh to Restart Game", p.width / 2, p.height / 2 + 110); } p.pop(); } } window.GameLogic = GameLogic; // GAME_LOGIC_END (() => { const container = document.getElementById("renderDiv"); if (!container) { throw new Error("Missing renderDiv"); } if (typeof window.__P5_CLEANUP__ === "function") { try { window.__P5_CLEANUP__(); } catch (error) { console.warn("Failed to run p5 cleanup", error); } } const instance = new p5((p) => { let gameLogic = null; p.setup = () => { p.createCanvas(1000, 600); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.textAlign(p.CENTER, p.CENTER); if (typeof window.GameLogic === "function") { gameLogic = new window.GameLogic({ p }); } }; p.draw = () => { if (gameLogic) { gameLogic.update(); gameLogic.drawEnvironment(); gameLogic.drawAudience(); gameLogic.p1.draw(); gameLogic.p2.draw(); gameLogic.drawUI(); } else { p.background(0); } }; }, container); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } }; })();

karate mosh pit

How to Play