Stickman YouTube Tycoon

Stickman YouTube Tycoon

body { background: #222; color: #fff; font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 0; } h1 { margin-top: 18px; margin-bottom: 8px; color: #ff0000; letter-spacing: 1px; } #game { background: #eaeaea; display: block; margin: 0 auto; border: 3px solid #111; border-radius: 8px; box-shadow: 0 4px 16px #0006; touch-action: none; } #story { margin: 18px auto 0 auto; width: 600px; max-width: 90vw; min-height: 32px; font-size: 1.1em; color: #fff; background: #333; border-radius: 6px; padding: 10px 16px; box-shadow: 0 2px 8px #0004; } #ui-buttons { margin: 12px auto 0 auto; width: 600px; max-width: 98vw; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; z-index: 5; } #ui-buttons button { background: #ff0000; color: #fff; border: none; border-radius: 8px; font-size: 1em; padding: 10px 18px; min-width: 140px; min-height: 56px; box-shadow: 0 2px 8px #0004; cursor: pointer; transition: background 0.15s, transform 0.1s; font-family: inherit; font-weight: bold; line-height: 1.3; outline: none; flex: 1 1 180px; max-width: 220px; } #ui-buttons button:active { background: #cc0000; transform: scale(0.97); } #ui-buttons button:disabled { background: #888; color: #eee; cursor: not-allowed; transform: none; } #joystick-container { position: fixed; left: 0; bottom: 0; width: 100vw; height: 160px; pointer-events: none; z-index: 10; } #joystick-base { position: absolute; left: 32px; bottom: 32px; width: 90px; height: 90px; background: rgba(80,80,80,0.25); border-radius: 50%; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center; } #joystick-stick { width: 48px; height: 48px; background: #ff0000; border-radius: 50%; position: absolute; left: 21px; top: 21px; box-shadow: 0 2px 8px #0006; pointer-events: auto; touch-action: none; transition: background 0.1s; } #interact-btn { position: absolute; right: 32px; bottom: 48px; width: 64px; height: 64px; border-radius: 50%; background: #ff0000; color: #fff; font-size: 2em; border: none; box-shadow: 0 2px 8px #0006; pointer-events: auto; touch-action: none; transition: background 0.1s; } #interact-btn:active { background: #cc0000; } @media (max-width: 700px) { #game { width: 98vw; height: 55vw; max-width: 100vw; max-height: 60vw; } #story, #ui-buttons { width: 98vw; font-size: 1em; } #ui-buttons { flex-direction: column; align-items: center; gap: 10px; } } // --- Game State --- const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); const storyDiv = document.getElementById('story'); // Stickman properties const stickman = { x: 80, y: 260, vx: 0, vy: 0, width: 24, height: 60, speed: 2.5, facing: 1, hasChannel: false, videos: 0, fame: 0, crying: true, dreamAlpha: 0, }; // Computer object const computer = { x: 500, y: 260, width: 40, height: 40, }; // Game state let keys = {}; let canInteract = false; let storyStep = 0; let interactionCooldown = false; let introStep = 0; let introTimer = 0; let inIntro = true; let dreamAnim = 0; // Upgrades let money = 0; let subscribers = 0; let assistantHired = false; let poorYoutubersHired = false; let collabDone = false; let adsBought = false; let merchSold = false; let sponsorGot = false; let giveawayDone = false; // --- Story Steps --- const story = [ "", "Find the computer and press 'E' (or tap E) to create your YouTube channel.", "You created your channel! Now make your first video. Press 'E' at the computer.", "You made your first video! Keep making videos to gain fame.", "You're getting famous! Keep going!", "You're a YouTube star! (Reload to play again.)" ]; function updateStory() { if (inIntro) { storyDiv.textContent = ""; return; } if (storyStep < story.length) { storyDiv.textContent = story[storyStep]; } } // --- Input --- window.addEventListener('keydown', e => { keys[e.key.toLowerCase()] = true; }); window.addEventListener('keyup', e => { keys[e.key.toLowerCase()] = false; }); // --- Touch Joystick --- const joystickBase = document.getElementById('joystick-base'); const joystickStick = document.getElementById('joystick-stick'); const interactBtn = document.getElementById('interact-btn'); let joystickActive = false; let joystickCenter = { x: 0, y: 0 }; let joystickDir = { x: 0, y: 0 }; function getTouchPos(e, el) { const rect = el.getBoundingClientRect(); const t = e.touches ? e.touches[0] : e; return { x: t.clientX - rect.left, y: t.clientY - rect.top }; } joystickBase.addEventListener('touchstart', e => { e.preventDefault(); joystickActive = true; const pos = getTouchPos(e, joystickBase); joystickCenter = { x: pos.x, y: pos.y }; joystickStick.style.transition = "none"; }, { passive: false }); joystickBase.addEventListener('touchmove', e => { if (!joystickActive) return; e.preventDefault(); const pos = getTouchPos(e, joystickBase); let dx = pos.x - 45; let dy = pos.y - 45; const dist = Math.sqrt(dx*dx + dy*dy); const maxDist = 36; if (dist > maxDist) { dx = dx * maxDist / dist; dy = dy * maxDist / dist; } joystickStick.style.transform = `translate(${dx}px,${dy}px)`; // Normalize joystickDir.x = dx / maxDist; joystickDir.y = dy / maxDist; }, { passive: false }); joystickBase.addEventListener('touchend', e => { joystickActive = false; joystickStick.style.transition = "transform 0.15s"; joystickStick.style.transform = "translate(0,0)"; joystickDir.x = 0; joystickDir.y = 0; }); // Interact button (touch) interactBtn.addEventListener('touchstart', e => { e.preventDefault(); keys['e'] = true; interactBtn.style.background = "#cc0000"; }, { passive: false }); interactBtn.addEventListener('touchend', e => { e.preventDefault(); keys['e'] = false; interactBtn.style.background = "#ff0000"; }); // Also allow click for desktop interactBtn.addEventListener('mousedown', e => { keys['e'] = true; interactBtn.style.background = "#cc0000"; }); interactBtn.addEventListener('mouseup', e => { keys['e'] = false; interactBtn.style.background = "#ff0000"; }); interactBtn.addEventListener('mouseleave', e => { keys['e'] = false; interactBtn.style.background = "#ff0000"; }); // --- UI Buttons --- const btnAssistant = document.getElementById('btn-assistant'); const btnPoorYoutubers = document.getElementById('btn-poor-youtubers'); const btnCollab = document.getElementById('btn-collab'); const btnAds = document.getElementById('btn-ads'); const btnMerch = document.getElementById('btn-merch'); const btnSponsor = document.getElementById('btn-sponsor'); const btnGiveaway = document.getElementById('btn-giveaway'); btnAssistant.addEventListener('click', () => { if (!assistantHired && subscribers >= 10 && money >= 10) { assistantHired = true; money -= 10; subscribers -= 10; stickman.fame += 10; btnAssistant.disabled = true; btnAssistant.textContent = "Assistant Hired!"; } }); btnPoorYoutubers.addEventListener('click', () => { if (!poorYoutubersHired && subscribers >= 40 && money >= 40) { poorYoutubersHired = true; money -= 40; subscribers -= 40; stickman.fame += 30; btnPoorYoutubers.disabled = true; btnPoorYoutubers.textContent = "Poor YouTubers Hired!"; } }); btnCollab.addEventListener('click', () => { if (!collabDone && subscribers >= 120 && money >= 120) { collabDone = true; money -= 120; subscribers -= 120; stickman.fame += 80; btnCollab.disabled = true; btnCollab.textContent = "Collab Done!"; } }); btnAds.addEventListener('click', () => { if (!adsBought && money >= 200) { adsBought = true; money -= 200; subscribers += 200; stickman.fame += 100; btnAds.disabled = true; btnAds.textContent = "Ads Bought!"; } }); btnMerch.addEventListener('click', () => { if (!merchSold && subscribers >= 50) { merchSold = true; money += 100; subscribers -= 50; btnMerch.disabled = true; btnMerch.textContent = "Merch Sold!"; } }); btnSponsor.addEventListener('click', () => { if (!sponsorGot && subscribers >= 100) { sponsorGot = true; money += 300; subscribers -= 100; btnSponsor.disabled = true; btnSponsor.textContent = "Sponsor Got!"; } }); btnGiveaway.addEventListener('click', () => { if (!giveawayDone && money >= 150) { giveawayDone = true; money -= 150; subscribers += 300; stickman.fame += 120; btnGiveaway.disabled = true; btnGiveaway.textContent = "Giveaway Hosted!"; } }); // --- Game Loop --- function update() { if (inIntro) { updateIntro(); return; } // Movement stickman.vx = 0; // Keyboard if (keys['arrowleft'] || keys['a']) { stickman.vx = -stickman.speed; stickman.facing = -1; } if (keys['arrowright'] || keys['d']) { stickman.vx = stickman.speed; stickman.facing = 1; } // Joystick if (Math.abs(joystickDir.x) > 0.15) { stickman.vx = joystickDir.x * stickman.speed * 1.2; stickman.facing = joystickDir.x > 0 ? 1 : -1; } stickman.x += stickman.vx; // Boundaries if (stickman.x < 0) stickman.x = 0; if (stickman.x > canvas.width - stickman.width) stickman.x = canvas.width - stickman.width; // Interaction canInteract = isNearComputer(); if (canInteract && keys['e'] && !interactionCooldown) { handleInteraction(); interactionCooldown = true; setTimeout(() => { interactionCooldown = false; }, 400); } } function isNearComputer() { return ( stickman.x + stickman.width > computer.x - 10 && stickman.x < computer.x + computer.width + 10 ); } function handleInteraction() { if (storyStep === 1 && !stickman.hasChannel) { stickman.hasChannel = true; storyStep = 2; updateStory(); } else if (stickman.hasChannel && storyStep === 2) { stickman.videos += 1; money += 10; subscribers += 10; storyStep = 3; updateStory(); } else if (stickman.hasChannel && storyStep === 3) { stickman.videos += 1; let newSubs = Math.floor(Math.random() * 10) + 5; let newMoney = Math.floor(Math.random() * 10) + 5; money += newMoney; subscribers += newSubs; stickman.fame += Math.floor(Math.random() * 10) + 5; if (stickman.fame > 20) { storyStep = 4; updateStory(); } } else if (storyStep === 4) { stickman.videos += 1; let newSubs = Math.floor(Math.random() * 20) + 10; let newMoney = Math.floor(Math.random() * 20) + 10; money += newMoney; subscribers += newSubs; stickman.fame += Math.floor(Math.random() * 15) + 10; if (stickman.fame > 60) { storyStep = 5; updateStory(); } } } // --- Drawing --- function drawStickman(x, y, facing, crying = false) { ctx.save(); ctx.translate(x + 12, y + 60); ctx.scale(facing, 1); ctx.strokeStyle = "#111"; ctx.lineWidth = 3; // Legs ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-8, 20); ctx.moveTo(0, 0); ctx.lineTo(8, 20); ctx.stroke(); // Body ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -30); ctx.stroke(); // Arms ctx.beginPath(); ctx.moveTo(0, -20); ctx.lineTo(-12, -10); ctx.moveTo(0, -20); ctx.lineTo(12, -10); ctx.stroke(); // Head ctx.beginPath(); ctx.arc(0, -38, 8, 0, Math.PI * 2); ctx.stroke(); // Face ctx.save(); ctx.translate(0, -38); // Eyes ctx.beginPath(); ctx.arc(-3, -2, 1.2, 0, Math.PI * 2); ctx.arc(3, -2, 1.2, 0, Math.PI * 2); ctx.fillStyle = "#111"; ctx.fill(); // Sad mouth ctx.beginPath(); ctx.arc(0, 3, 3, Math.PI * 0.1, Math.PI * 1.0, true); ctx.strokeStyle = "#111"; ctx.lineWidth = 1.2; ctx.stroke(); // Tears if (crying) { ctx.beginPath(); ctx.arc(-3, 0, 1.2, 0, Math.PI * 2); ctx.arc(3, 0, 1.2, 0, Math.PI * 2); ctx.fillStyle = "#00bfff"; ctx.globalAlpha = 0.7 + 0.3 * Math.sin(Date.now()/200); ctx.fill(); ctx.globalAlpha = 1; } ctx.restore(); ctx.restore(); } function drawDreamBubble(x, y, alpha) { ctx.save(); ctx.globalAlpha = alpha; ctx.beginPath(); ctx.ellipse(x + 60, y - 60, 80, 50, 0, 0, Math.PI * 2); ctx.fillStyle = "#fff"; ctx.shadowColor = "#aaa"; ctx.shadowBlur = 8; ctx.fill(); ctx.globalAlpha = alpha * 0.7; ctx.beginPath(); ctx.arc(x + 30, y - 20, 12, 0, Math.PI * 2); ctx.arc(x + 45, y - 35, 7, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; ctx.shadowBlur = 0; // Draw stickman in bubble (happy, with play button) ctx.save(); ctx.translate(x + 60, y - 60); ctx.scale(0.7, 0.7); // Body ctx.strokeStyle = "#111"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, -18); ctx.stroke(); // Arms ctx.beginPath(); ctx.moveTo(0, -10); ctx.lineTo(-10, -5); ctx.moveTo(0, -10); ctx.lineTo(10, -5); ctx.stroke(); // Legs ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(-7, 12); ctx.moveTo(0, 0); ctx.lineTo(7, 12); ctx.stroke(); // Head ctx.beginPath(); ctx.arc(0, -24, 6, 0, Math.PI * 2); ctx.stroke(); // Face (smile) ctx.save(); ctx.translate(0, -24); ctx.beginPath(); ctx.arc(0, 2, 3, 0, Math.PI, false); ctx.stroke(); ctx.beginPath(); ctx.arc(-2, -1, 1, 0, Math.PI * 2); ctx.arc(2, -1, 1, 0, Math.PI * 2); ctx.fillStyle = "#111"; ctx.fill(); ctx.restore(); // YouTube play button ctx.save(); ctx.translate(0, -35); ctx.beginPath(); ctx.arc(0, 0, 7, 0, Math.PI * 2); ctx.fillStyle = "#ff0000"; ctx.fill(); ctx.beginPath(); ctx.moveTo(-2, -3); ctx.lineTo(4, 0); ctx.lineTo(-2, 3); ctx.closePath(); ctx.fillStyle = "#fff"; ctx.fill(); ctx.restore(); ctx.restore(); ctx.restore(); } function drawComputer(x, y) { // Desk ctx.fillStyle = "#b97a56"; ctx.fillRect(x - 10, y + 30, 60, 10); // Monitor ctx.fillStyle = "#222"; ctx.fillRect(x + 10, y, 20, 20); ctx.fillStyle = "#0af"; ctx.fillRect(x + 13, y + 3, 14, 10); // Keyboard ctx.fillStyle = "#888"; ctx.fillRect(x + 10, y + 22, 20, 6); // Chair ctx.fillStyle = "#444"; ctx.fillRect(x - 5, y + 25, 10, 15); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Floor ctx.fillStyle = "#cfcfcf"; ctx.fillRect(0, 320, canvas.width, 40); // Computer drawComputer(computer.x, computer.y); // Stickman if (inIntro) { drawStickman(stickman.x, stickman.y, stickman.facing, true); if (stickman.dreamAlpha > 0) { drawDreamBubble(stickman.x, stickman.y, stickman.dreamAlpha); } } else { drawStickman(stickman.x, stickman.y, stickman.facing, false); } // Interaction hint if (canInteract && !inIntro) { ctx.save(); ctx.font = "18px Arial"; ctx.fillStyle = "#ff0000"; ctx.textAlign = "center"; ctx.fillText("Press 'E' or tap E to interact", stickman.x + stickman.width / 2, stickman.y - 10); ctx.restore(); } // Fame & videos & money & subscribers if (!inIntro) { ctx.save(); ctx.font = "16px Arial"; ctx.fillStyle = "#222"; ctx.fillText(`Videos: ${stickman.videos} Fame: ${stickman.fame} $: ${money} Subs: ${subscribers}`, 180, 30); ctx.restore(); } } // --- Intro Animation --- function updateIntro() { introTimer += 1; if (introStep === 0) { // Sad stickman, crying if (introTimer > 80) { introStep = 1; introTimer = 0; } } else if (introStep === 1) { // Dream bubble appears stickman.dreamAlpha += 0.02; if (stickman.dreamAlpha > 1) stickman.dreamAlpha = 1; if (introTimer > 80) { introStep = 2; introTimer = 0; } } else if (introStep === 2) { // Hold dream if (introTimer > 80) { introStep = 3; introTimer = 0; } } else if (introStep === 3) { // Dream bubble fades stickman.dreamAlpha -= 0.025; if (stickman.dreamAlpha < 0) stickman.dreamAlpha = 0; if (stickman.dreamAlpha <= 0) { inIntro = false; storyStep = 1; updateStory(); } } } function gameLoop() { update(); draw(); requestAnimationFrame(gameLoop); } // --- Start --- updateStory(); gameLoop();