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 variables let player; let platforms = []; let collectibles = []; let enemies = []; let gravity = 0.5; let jumpPower = -12; let gameState = 'playing'; // 'playing', 'win', 'gameOver' let score = 0; let bgColor; 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, }); // Player class class Player { constructor(x, y) { this.x = x; this.y = y; this.w = 30; this.h = 30; this.vx = 0; this.vy = 0; this.onGround = false; this.color = { r: 210, g: 180, b: 140 }; // Light brown dog fur this.eyeColor = { r: 255, g: 255, b: 0 }; // Yellow dog eyes } update() { // Apply gravity if (!this.onGround) { this.vy += gravity; } this.x += this.vx; this.y += this.vy; // Boundaries if (this.x < 0) this.x = 0; if (this.x > DESIGN_WIDTH - this.w) this.x = DESIGN_WIDTH - this.w; if (this.y > DESIGN_HEIGHT) { this.y = DESIGN_HEIGHT - this.h; this.vy = 0; this.onGround = true; } this.onGround = false; } checkCollisions(platforms) { this.onGround = false; for (let plat of platforms) { if (this.x < plat.x + plat.w && this.x + this.w > plat.x && this.y + this.h <= plat.y + 5 && this.y + this.h + this.vy >= plat.y) { this.y = plat.y - this.h; this.vy = 0; this.onGround = true; } } } jump() { if (this.onGround) { this.vy = jumpPower; this.onGround = false; } } draw() { p.push(); p.translate(this.x + this.w/2, this.y + this.h/2); // Dog body - light brown p.fill(this.color.r, this.color.g, this.color.b); p.noStroke(); p.ellipse(0, 0, this.w, this.h * 0.8); // Main body // Floppy dog ears p.fill(this.color.r, this.color.g, this.color.b); p.ellipse(-12, -10, 12, 18); p.ellipse(12, -10, 12, 18); // Inner ears - pink p.fill(255, 192, 203); p.ellipse(-12, -8, 6, 8); p.ellipse(12, -8, 6, 8); // Head p.ellipse(0, -8, this.w * 0.8, this.h * 0.7); // Dog snout - cream color p.fill(255, 248, 220); p.ellipse(0, -2, 12, 8); // Nose - black p.fill(0); p.ellipse(0, -1, 4, 3); // Mouth - simple line p.stroke(0); p.strokeWeight(1); p.line(-3, 2, 3, 2); p.noStroke(); // Kawaii dog eyes - round p.fill(this.eyeColor.r, this.eyeColor.g, this.eyeColor.b); p.ellipse(-6, -10, 8, 8); p.ellipse(6, -10, 8, 8); p.fill(0); p.ellipse(-6, -10, 4, 4); p.ellipse(6, -10, 4, 4); // Blush p.fill(255, 192, 203); p.ellipse(-8, 0, 6, 4); p.ellipse(8, 0, 6, 4); // Dog tail - wagging p.fill(this.color.r, this.color.g, this.color.b); p.rotate(0.3); p.ellipse(15, 0, 8, 20); p.rotate(-0.3); // Dog paw details (simple) p.fill(255, 248, 220); p.ellipse(-12, 5, 6, 6); // Left front paw p.ellipse(12, 5, 6, 6); // Right front paw p.pop(); } } // Platform class class Platform { constructor(x, y, w, h, color) { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color || { r: 173, g: 216, b: 230 }; // Light blue } draw() { p.fill(this.color.r, this.color.g, this.color.b); p.stroke(70, 130, 180); p.strokeWeight(2); p.rect(this.x, this.y, this.w, this.h, 10); // Rounded corners p.noStroke(); } } // Enemy class - cute angry clouds class Enemy { constructor(x, y) { this.x = x; this.y = y; this.w = 25; this.h = 20; this.vx = (Math.random() - 0.5) * 2; // Random horizontal speed this.vy = 0; this.onGround = false; this.color = { r: 169, g: 169, b: 169 }; // Gray cloud body this.eyeColor = { r: 255, g: 0, b: 0 }; // Angry red eyes this.patrolRange = 100; this.startX = x; } update() { // Apply gravity if (!this.onGround) { this.vy += gravity; } this.x += this.vx; this.y += this.vy; // Jump behavior - enemies jump periodically if (this.onGround && Math.random() < 0.005) { // 0.5% chance each frame to jump this.vy = -12; // Enemy jump height this.onGround = false; } // Patrol logic if (this.x < this.startX - this.patrolRange || this.x > this.startX + this.patrolRange) { this.vx *= -1; } // Boundaries if (this.x < 0) { this.x = 0; this.vx *= -1; } if (this.x > DESIGN_WIDTH - this.w) { this.x = DESIGN_WIDTH - this.w; this.vx *= -1; } if (this.y > DESIGN_HEIGHT) { this.y = DESIGN_HEIGHT - this.h; this.vy = 0; this.onGround = true; } this.onGround = false; } checkCollisions(platforms) { this.onGround = false; for (let plat of platforms) { if (this.x < plat.x + plat.w && this.x + this.w > plat.x && this.y + this.h <= plat.y + 5 && this.y + this.h + this.vy >= plat.y) { this.y = plat.y - this.h; this.vy = 0; this.onGround = true; } } } checkCollision(player) { let d = p.dist(this.x + this.w/2, this.y + this.h/2, player.x + player.w/2, player.y + player.h/2); return d < (this.w + player.w) / 2; } draw() { p.push(); p.translate(this.x + this.w/2, this.y + this.h/2); // Angry cloud body - gray p.fill(this.color.r, this.color.g, this.color.b); p.noStroke(); p.ellipse(0, 0, this.w, this.h); // Fluffier cloud edges p.fill(200, 200, 200); p.ellipse(-8, -5, 12, 8); p.ellipse(8, -5, 12, 8); p.ellipse(0, 8, 15, 10); // Angry eyes p.fill(this.eyeColor.r, this.eyeColor.g, this.eyeColor.b); p.ellipse(-6, -3, 8, 6); p.ellipse(6, -3, 8, 6); p.fill(0); p.ellipse(-6, -3, 3, 3); p.ellipse(6, -3, 3, 3); // Angry eyebrows p.stroke(0); p.strokeWeight(2); p.line(-9, -6, -3, -4); p.line(9, -6, 3, -4); p.noStroke(); // Frowning mouth p.fill(0); p.arc(0, 2, 10, 6, 0, p.PI, p.PIE); p.pop(); } } // Collectible class (cookies) class Collectible { constructor(x, y, size = 20, points = 1) { this.x = x; this.y = y; this.size = size; this.points = points; this.collected = false; this.bobOffset = 0; } update() { this.bobOffset += 0.1; } draw() { if (this.collected) return; p.push(); p.translate(this.x, this.y + Math.sin(this.bobOffset) * 3); // Cookie base - golden brown p.fill(218, 165, 32); p.noStroke(); p.ellipse(0, 0, this.size, this.size); // Chocolate chips - dark brown (scale with size) p.fill(101, 67, 33); let chipScale = this.size / 20; let chipPositions = [ [-4 * chipScale, -4 * chipScale], [4 * chipScale, -4 * chipScale], [-6 * chipScale, 2 * chipScale], [6 * chipScale, 2 * chipScale], [0, 6 * chipScale] ]; let chipSize = 4 * chipScale; for (let pos of chipPositions) { p.ellipse(pos[0], pos[1], chipSize, chipSize); } // Points indicator for big cookie if (this.points > 1) { p.fill(255, 255, 0); p.textAlign(p.CENTER); p.textSize(this.size / 3); p.text(this.points.toString(), 0, -this.size / 4); } p.pop(); } checkCollision(player) { if (this.collected) return false; let d = p.dist(this.x, this.y, player.x + player.w/2, player.y + player.h/2); if (d < this.size/2 + player.w/2) { this.collected = true; score += this.points; return true; } return false; } } p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); 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; } }; // Initialize game bgColor = { r: 138, g: 43, b: 226 }; // Dark violet player = new Player(50, 400); // Create platforms platforms = [ new Platform(0, 550, DESIGN_WIDTH, 50, { r: 173, g: 216, b: 230 }), // Light blue ground new Platform(150, 500, 120, 20, { r: 173, g: 216, b: 230 }), new Platform(300, 450, 100, 20, { r: 173, g: 216, b: 230 }), new Platform(450, 400, 120, 20, { r: 173, g: 216, b: 230 }), new Platform(100, 350, 80, 20, { r: 173, g: 216, b: 230 }), new Platform(250, 300, 100, 20, { r: 173, g: 216, b: 230 }), new Platform(400, 280, 80, 20, { r: 173, g: 216, b: 230 }), new Platform(600, 250, 100, 20, { r: 173, g: 216, b: 230 }), new Platform(50, 250, 80, 20, { r: 173, g: 216, b: 230 }), new Platform(200, 200, 120, 20, { r: 173, g: 216, b: 230 }), new Platform(350, 180, 100, 20, { r: 173, g: 216, b: 230 }), new Platform(500, 150, 80, 20, { r: 173, g: 216, b: 230 }), new Platform(650, 120, 100, 20, { r: 173, g: 216, b: 230 }), new Platform(100, 150, 120, 20, { r: 173, g: 216, b: 230 }), new Platform(300, 100, 150, 20, { r: 173, g: 216, b: 230 }), new Platform(500, 80, 120, 20, { r: 173, g: 216, b: 230 }) ]; // Create collectibles collectibles = [ new Collectible(225, 470, 20, 1), new Collectible(350, 420, 20, 1), new Collectible(475, 370, 20, 1), new Collectible(75, 320, 20, 1), new Collectible(175, 270, 20, 1), new Collectible(300, 250, 20, 1), new Collectible(450, 240, 20, 1), new Collectible(650, 220, 20, 1), new Collectible(125, 200, 20, 1), new Collectible(275, 170, 20, 1), new Collectible(425, 140, 20, 1), new Collectible(575, 120, 20, 1), new Collectible(75, 120, 20, 1), new Collectible(200, 100, 20, 1), new Collectible(400, 70, 40, 5), // Big cookie! 5 points new Collectible(600, 50, 20, 1), new Collectible(100, 50, 20, 1) ]; // Create enemies (3 total) enemies = [ new Enemy(150, 430), new Enemy(350, 230), new Enemy(650, 180) ]; // Keyboard setup p.keyPressed = () => { if (p.keyCode === 32) { // Space player.jump(); } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { // Get current dimensions const { width, height } = computeLayout(); // Background // Pastel colored background gradient - soft lavender to mint green for (let y = 0; y <= height; y++) { let inter = p.map(y, 0, height, 0, 1); let c = p.lerpColor(p.color(221, 160, 221), p.color(144, 238, 144), inter); p.stroke(c); p.line(0, y, width, y); } p.noStroke(); // Soft floating pastel clouds for (let i = 0; i < 5; i++) { let cloudX = (i * 200 + p.frameCount * 0.3) % width; let cloudY = 80 + i * 30; p.fill(255, 192, 203, 150); // Pastel pink clouds p.ellipse(cloudX, cloudY, 40, 25); p.ellipse(cloudX + 15, cloudY, 35, 20); p.ellipse(cloudX + 30, cloudY, 30, 22); } // Gentle floating pastel hearts p.fill(255, 182, 193, 120); // Pastel pink hearts for (let i = 0; i < 6; i++) { let heartX = (i * 150 + p.frameCount * 0.8) % width; let heartY = 150 + Math.sin(p.frameCount * 0.02 + i) * 20; p.push(); p.translate(heartX, heartY); p.beginShape(); p.vertex(0, -10); p.bezierVertex(-15, -20, -25, -5, -15, 10); p.bezierVertex(-15, 25, 0, 20, 0, 20); p.bezierVertex(15, 25, 15, 10, 15, -10); p.bezierVertex(25, -5, 15, -20, 0, -10); p.endShape(p.CLOSE); p.pop(); } // Floating pastel stars p.fill(255, 218, 185, 140); // Pastel peach stars for (let i = 0; i < 4; i++) { let starX = (p.frameCount * 1.2 + i * 250) % width; let starY = 200 + i * 25; p.push(); p.translate(starX, starY); for (let j = 0; j < 5; j++) { p.rotate(p.TWO_PI / 5); p.triangle(0, -8, 0, -3, 6, 0); p.rotate(p.PI / 5); p.triangle(0, 8, 0, 3, -6, 0); } p.pop(); } // Soft glowing pastel orbs for (let i = 0; i < 3; i++) { let orbX = width * 0.2 + i * width * 0.3; let orbY = height * 0.3 + Math.sin(p.frameCount * 0.01 + i) * 15; let pastelColors = [ [216, 191, 216], // Thistle [176, 224, 230], // Powder Blue [255, 228, 225] // Misty Rose ]; let color = pastelColors[i % 3]; p.fill(color[0], color[1], color[2], 100); p.ellipse(orbX, orbY, 50, 50); p.fill(color[0], color[1], color[2], 50); p.ellipse(orbX, orbY, 70, 70); } p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Update game if (gameState === 'playing') { // Handle input player.vx = 0; if (p.keyIsDown(37)) { // Left player.vx = -4; } if (p.keyIsDown(39)) { // Right player.vx = 4; } player.update(); player.checkCollisions(platforms); // Update enemies for (let enemy of enemies) { enemy.update(); enemy.checkCollisions(platforms); if (enemy.checkCollision(player)) { gameState = 'gameOver'; } } // Check collectibles for (let collectible of collectibles) { collectible.update(); if (collectible.checkCollision(player)) { // Collected } } // Check win condition let allCollected = true; for (let c of collectibles) { if (!c.collected) allCollected = false; } if (allCollected) { gameState = 'win'; } } // Draw platforms for (let plat of platforms) { plat.draw(); } // Draw enemies for (let enemy of enemies) { enemy.draw(); } // Draw collectibles for (let collectible of collectibles) { collectible.draw(); } // Draw player player.draw(); // Draw UI p.fill(255); p.textSize(24); p.textAlign(p.LEFT); p.text(`Score: ${score}/21`, 20, 40); // Total possible: 16 small (1pt each) + 1 big (5pts) // Christmas-themed UI elements p.fill(255, 0, 0); // Red for Christmas p.textSize(20); p.textAlign(p.CENTER); p.text('🎄', 100, 60); p.text('❄️', 200, 60); p.text('🎅', 300, 60); if (gameState === 'win') { p.fill(255, 182, 193); p.textAlign(p.CENTER); p.textSize(48); p.text('You Win! ♡', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(24); p.text('All cookies collected! Refresh to play again.', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); } else if (gameState === 'gameOver') { p.fill(255, 0, 0); p.textAlign(p.CENTER); p.textSize(48); p.text('Game Over! ☁️', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2); p.textSize(24); p.fill(255); p.text('Hit by angry cloud! Refresh to try again.', DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 40); } 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); } };

cute

How to play