Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>INNOVATION RUN - Matteo Bergamelli</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { --neon-green: #00ff41; --legacy-gold: #ffb700; --error-red: #ff0055; --bg-dark: #0a0a0a; } | |
| body { background: #0a0a0a; color: #e0e0e0; font-family: 'JetBrains Mono', monospace; overflow: hidden; user-select: none; } | |
| canvas { display: block; width: 100%; height: 100%; } | |
| .scanlines { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1)); background-size: 100% 4px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 10; } | |
| .ui-panel { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.2s; } | |
| /* BTN PIÙ GRANDE */ | |
| .btn { background: var(--neon-green); color: #000; padding: 20px 50px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; cursor: pointer; border-radius: 4px; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); transition: 0.2s; border: none; } | |
| .btn:hover { transform: scale(1.05); background: #fff; box-shadow: 0 0 40px rgba(0, 255, 65, 0.6); } | |
| .flow-container { width: 200px; height: 12px; background: #333; border-radius: 6px; overflow: hidden; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 20; border: 2px solid #555; } | |
| .flow-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffb700, #00ff41); transition: width 0.1s linear; } | |
| .flow-text { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: #fff; text-transform: uppercase; font-weight: bold; text-shadow: 0 2px 4px #000; width: 100%; text-align: center; } | |
| .floating-message { | |
| position: absolute; | |
| font-weight: 800; | |
| font-size: 1.2rem; | |
| text-align: left; | |
| pointer-events: none; | |
| text-shadow: 2px 2px 0px #000; | |
| z-index: 50; | |
| white-space: nowrap; | |
| animation: floatRightUp 3.5s cubic-bezier(0.23, 1, 0.32, 1) forwards; | |
| } | |
| @keyframes floatRightUp { | |
| 0% { opacity: 0; transform: translate(0, 20px) scale(0.5); } | |
| 10% { opacity: 1; transform: translate(20px, -20px) scale(1.2); } | |
| 70% { opacity: 1; transform: translate(40px, -80px) scale(1); } | |
| 100% { opacity: 0; transform: translate(60px, -120px) scale(0.9); } | |
| } | |
| .motivational-banner { position: absolute; top: 20%; width: 100%; text-align: center; font-size: 2.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px var(--neon-green); pointer-events: none; z-index: 40; opacity: 0; transition: all 0.5s; letter-spacing: 2px; } | |
| .combo-display { position: absolute; top: 45%; right: 8%; font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px #ff0055; opacity: 0; transition: all 0.3s; z-index: 45; transform: rotate(-10deg); text-align: right; pointer-events: none; font-style: italic; } | |
| .hidden { display: none ; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="game-container" style="position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%); overflow: hidden;"> | |
| <div class="scanlines"></div> | |
| <canvas id="gameCanvas"></canvas> | |
| <div id="motivator" class="motivational-banner"></div> | |
| <div id="combo" class="combo-display"></div> | |
| <div style="position: absolute; top: 0; left: 0; width: 100%; padding: 1rem; display: flex; justify-content: space-between; z-index: 20; pointer-events: none;"> | |
| <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem;"> | |
| <div style="font-size: 10px; color: #999;" id="lbl-phase">FASE PROGETTO</div> | |
| <div id="phase-display" style="color: #00ff41; font-weight: bold; font-size: 1.125rem;"></div> | |
| </div> | |
| <div class="ui-panel" style="padding: 0.5rem 1rem; border-radius: 0.25rem; text-align: right;"> | |
| <div style="font-size: 10px; color: #999;" id="lbl-metrics">KPI</div> | |
| <div style="color: white; font-size: 0.875rem;"> | |
| <span id="lbl-score">PUNTI</span>: <span id="score-display" style="color: #00ff41; font-weight: bold;">0</span> | | |
| <span id="lbl-legacy">LEGACY</span>: <span id="legacy-display" style="color: #ffb700; font-weight: bold;">0</span>% | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flow-text" id="flow-label"></div> | |
| <div class="flow-container"><div id="flow-bar" class="flow-bar"></div></div> | |
| <div id="start-screen" style="position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 30; background: rgba(0,0,0,0.92); backdrop-filter: blur(8px); padding: 1rem;"> | |
| <div style="background: #111; border: 1px solid #444; padding: 2rem; border-radius: 0.5rem; max-width: 40rem; width: 100%; margin-bottom: 2rem; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);"> | |
| <div style="display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.1rem;"> | |
| <div style="display: flex; align-items: center;"> | |
| <span id="icon-legacy" style="font-size: 2.8rem; margin-right: 1rem;"></span> | |
| <div><span id="title-legacy" style="color: #ffb700; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-legacy" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div> | |
| </div> | |
| <div style="display: flex; align-items: center;"> | |
| <span id="icon-ai" style="font-size: 2.8rem; margin-right: 1rem;"></span> | |
| <div><span id="title-ai" style="color: #00ff41; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-ai" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div> | |
| </div> | |
| <div style="display: flex; align-items: center;"> | |
| <span id="icon-obs" style="font-size: 2.8rem; margin-right: 1rem;"></span> | |
| <div><span id="title-obs" style="color: #ff0055; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-obs" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div> | |
| </div> | |
| <div style="display: flex; align-items: center;"> | |
| <span style="font-size: 2.8rem; margin-right: 1rem;">⚡</span> | |
| <div><span id="title-bar" style="color: white; font-weight: bold; font-size: 1.2rem;"></span><p id="desc-bar" style="color: #999; font-size: 1.2rem; margin: 0;"></p></div> | |
| </div> | |
| </div> | |
| </div> | |
| <button id="btn-start" class="btn" onclick="initGame()"></button> | |
| <p id="controls-hint" style="margin-top: 1.5rem; font-size: 1rem; color: #ccc; animation: pulse 2s infinite; font-weight: bold;"></p> | |
| </div> | |
| <div id="game-over" class="hidden" style="position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; z-index: 40; background: rgba(0,0,0,0.95);"> | |
| <h2 id="go-title" style="font-size: 2.25rem; font-weight: bold; color: white; margin-bottom: 1.5rem; text-align: center;"></h2> | |
| <div style="text-align: center; font-size: 1.45rem; color: #ccc; margin-bottom: 2.5rem; background: #1a1a1a; padding: 2.5rem; border: 1px solid #444; border-radius: 0.5rem; max-width: 35rem; width: 100%;"> | |
| <p id="go-reason" style="color: #ff0055; font-weight: bold; margin-bottom: 1.5rem; font-size: 1.7rem;"></p> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 0.8rem;"><span>MVP Score:</span><span id="final-score" style="color: #00ff41; font-weight: bold;">0</span></div> | |
| <div style="display: flex; justify-content: space-between; margin-bottom: 1.5rem;"><span>Modernizzazione:</span><span id="final-legacy" style="color: #ffb700; font-weight: bold;">0%</span></div> | |
| <hr style="border-color: #444; margin: 1.5rem 0;"> | |
| <p id="death-quote" style="font-style: italic; color: #999; font-size: 1.2rem;"></p> | |
| </div> | |
| <button id="btn-restart" class="btn" onclick="initGame()"></button> | |
| </div> | |
| </div> | |
| <script> | |
| /** | |
| * ========================================================================================== | |
| * ⚙️ CONFIGURAZIONE DI GIOCO - MATTEO INNOVATION LAB EDITION | |
| * ========================================================================================== | |
| */ | |
| const GAME_CONFIG = { | |
| SPEED: { | |
| INITIAL: 5.8, | |
| MAX: 14.0, | |
| ACCELERATION: 0.0007, | |
| BOOST: 3.5 | |
| }, | |
| GRAVITY: 0.45, | |
| JUMP_FORCE: -10.8, | |
| TEXTS: { | |
| TITLE: "Innovation Run", | |
| SUBTITLE: "// Missione: Crea un PoC visionario OMNICANALE", | |
| LBL_PHASE: "STATUS MENTALE", | |
| LBL_METRICS: "LIVELLO HYPE", | |
| LBL_SCORE: "STIMA DEL CAPO", | |
| LBL_LEGACY: "BUG RISOLTI", | |
| START_BTN: "Corri verso l'innovazione", | |
| RESTART_BTN: "CTRL+Z E RIPROVA", | |
| CONTROLS: "Premi SPAZIO per saltare i problemi | GIÙ per schivare le riunioni", | |
| BAR_EMPTY: "CERCA ISPIRAZIONE...", | |
| BAR_FULL: "🔥 MODALITÀ GENIO ATTIVA! 🔥" | |
| }, | |
| // ORA CON LISTE DI MESSAGGI RANDOM! | |
| ENTITIES: { | |
| LEGACY: { | |
| CHAR: '☕', | |
| COLOR: '#FFC107', // Giallo Oro | |
| TITLE: "CAFFÈ DOPPIO", | |
| DESC: "Senza questo non si compila. [+10 Punti]", | |
| MSG: [ | |
| "CAFFÈ DOPPIO!", | |
| "ENERGIA PURA!", | |
| "COMPILAZIONE OK!", | |
| "BUG-IORNO!", | |
| "FOCUS ON!", | |
| "ESPRESSO DI CODICE!", | |
| "REFILL DI SINAPSI!", | |
| "BREAK INNOVATION LAB", | |
| "SHOT DI CREATIVITÀ!", | |
| "CPU AL 100%, DEV ANCHE!", | |
| "SYNC-CAFFÈ CON IL TEAM!", | |
| "MEETING-READY MODE!", | |
| "LATENZA MENTALE AZZERATA!", | |
| "ONIVERSE FUEL!", | |
| "IDEA RICARICATA!", | |
| "POC-ACCINO TIME!", | |
| "DEBUG CON AROMA ARABICA!", | |
| "IL GANTT ORA HA SENSO!", | |
| "OMNICAPPUCCINO APPROVED!" | |
| ] | |
| }, | |
| AI: { | |
| CHAR: '🤖', | |
| COLOR: '#00D4FF', // Azzurro Ciano | |
| TITLE: "VERTEX AI", | |
| DESC: "Non ti sostituisce, ti AMPLIFICA. [GOD MODE]", | |
| MSG: [ | |
| "GEMINI MI AMPLIFICA!", | |
| "COPILOT ATTIVO!", | |
| "INTELLIGENZA++", | |
| "SALTO NEL FUTURO!", | |
| "HYPE BOOST!", | |
| "PROMPT IN ONIVERSE STYLE!", | |
| "LLM ALLINEATO!", | |
| "DEPLOYATO SU VERTEX!", | |
| "DASHBOARD PARLANTE!", | |
| "RAG ATTIVATO!", | |
| "INSIGHT IN REAL-TIME!", | |
| "PROTOTIPO READY!", | |
| "AI++", | |
| "È USCITO IL NUOVO GEMINI!", | |
| "FINETUNING DI GEMMA", | |
| "DALLO USE CASE AL WOW CASE!", | |
| "REALTA' AUMENTATA ON!" | |
| ] | |
| }, | |
| OBSTACLE: { | |
| CHAR: '🧱', | |
| COLOR: '#FF3D00', // Rosso Arancio | |
| TITLE: "OLD STYLE", | |
| DESC: "'Si è sempre fatto così', 'Costa troppo'. SALTALA!", | |
| MSG: [ | |
| "NON TI SENTO!", | |
| "BYE BYE SILOS!", | |
| "INNOVAZIONE VERA!", | |
| "BUROCRAZIA KO!", | |
| "RIUNIONE SENZA AGENDA IN VISTA!", | |
| "SCOPE CREEP IN ARRIVO!", | |
| "SLIDE AL POSTO DI CODICE!", | |
| "\"METTIAMOLO NEL PROSSIMO QUARTO\"", | |
| "E-MAIL A 32 DESTINATARI!", | |
| "TICKET APERTO DAL 2012!", | |
| "APPROVAZIONE A TRE LIVELLI!", | |
| "CAMBIO REQUISITI LAST MINUTE!", | |
| "DOCUMENTAZIONE INESISTENTE!", | |
| "PASSWORD SCRITTA SU POST-IT!", | |
| "EXCEL SALVATO SUL DESKTOP!", | |
| "INTERFACCIA NON RESPONSIVE!", | |
| "MEETING CHE POTEVA ESSERE UNA CHAT!", | |
| "CHAOS MONKEY ORGANIZZATIVO!", | |
| ] | |
| }, | |
| BAR: { | |
| TITLE: "BARRA DELL'INNOVAZIONE", | |
| DESC: "Riempi la barra per far approvare il budget." | |
| } | |
| }, | |
| MOTIVATIONAL: [ | |
| "MA SUL MIO PC FUNZIONA!", | |
| "È COLPA DELLA CACHE!", | |
| "CHI HA TOCCATO IL SERVER?!", | |
| "PUSHATO IN PRODUZIONE!", | |
| "NON È UN BUG, È UNA FEATURE!", | |
| "HO COMMENTATO IL CODICE", | |
| "STACCA E RIATTACCA!", | |
| "PIÙ PYTHON, MENO PPTX!", | |
| "OMNICHANNEL A VITA!", | |
| "DA QUI A PROTOTIPO È UN ATTIMO!", | |
| "MAKE IT WORK, THEN MAKE IT WOW!", | |
| "L'OMNICANALE NON DORME MAI!", | |
| "IL PROBLEMA GIUSTO VALE ORO.", | |
| "DOMANDE GIUSTE", | |
| "IDEE GENIALI A GO GO", | |
| "PENSALA IN SCALA ONIVERSE.", | |
| "SE PUÒ ESSERE AUTOMATIZZATO, FALLO!", | |
| "OGNI BUG RACCONTA UNA STORIA.", | |
| "MVP O NIENTE.", | |
| "DATI, NON OPINIONI.", | |
| "PIÙ TEST, MENO ALIBI.", | |
| "UN PROTOTIPO VALE 100 SLIDE.", | |
| "DA DOSSOBUONO AL FUTURO", | |
| ], | |
| COMBO_PHRASES: [ | |
| "DAJE DEV!", | |
| "CODICE POETICO!", | |
| "MIRACOLO TECNICO!", | |
| "SENIOR DEV AURA!", | |
| "ANGULAR GOAL!", | |
| "ZERO CONFLITTI GIT!", | |
| "MVP LEGGENDARIO!", | |
| "FERMATEMI!", | |
| "QUESTO È IL FUTURO!", | |
| "BRIVIDO AI!", | |
| "DOSSOBUONO POWER!", | |
| "OMNICHANNEL COMBO x10!", | |
| "FLOW STATE ATTIVATO!", | |
| "FRONT-END DA VETRINA ONIVERSE!", | |
| "BACK-END CHE NON MOLLA!", | |
| "PIPELINE DA CHAMPIONS LEAGUE!", | |
| "UX SPAZIALE!", | |
| "SCALABILITÀ LIKE A BOSS!", | |
| "LATENZA? NON PERVENUTA!", | |
| "REFACTORING ELEGANTE!", | |
| "SPRINT PERFETTO!", | |
| "PoC DA APPLAUSO!", | |
| "ROADMAP ALLINEATA AL CODICE!", | |
| ], | |
| GAME_OVER_TITLES: [ | |
| "SCHERMATA BLU", | |
| "TI HANNO MESSO IN UN'ALTRA CALL", | |
| "HAI CANCELLATO IL DATABASE", | |
| "IL WI-FI TI HA TRADITO", | |
| "IL SERVER VA IN VACANZA", | |
| "SLIDE INFINITE, TEMPO FINITO", | |
| "MEETING CHE NON FINISCE", | |
| "MERGE FALLITO", | |
| "CONFLITTO DI PRIORITÀ CRITICO", | |
| "TASK AGGIUNTO IN EXCEL", | |
| "LOGIN BLOCCATO", | |
| "SESSIONE SCADUTA NEL MOMENTO SBAGLIATO", | |
| "WI-FI DELLO STORE IN TILT", | |
| "SERVER DOWN DURANTE LA DEMO", | |
| "CRON JOB IMPAZZITO", | |
| "TIMEOUT ESISTENZIALE DEL DEV" | |
| ], | |
| GAME_OVER_REASONS: [ | |
| "Sei finito in un tunnel di burocrazia.", | |
| "Hai accettato una riunione venerdì alle 17:30.", | |
| "Il Legacy Code ha avuto la meglio.", | |
| "Ti sei dimenticato la WHERE nel DELETE * FROM...", | |
| "Ti sei perso tra troppi file Excel di tracking.", | |
| "Un merge conflict ti ha fatto perdere il ritmo.", | |
| "Hai aperto la mail sbagliata in diretta con il capo.", | |
| "Hai sottovalutato la demo in ambiente reale store.", | |
| "La user journey era più lunga del previsto.", | |
| "La call \"da 10 minuti\" è durata un'ora.", | |
| "Il PoC ha funzionato… ma solo in locale.", | |
| "Hai deployato sulla branch sbagliata.", | |
| "Il budget è finito prima della feature chiave.", | |
| "Hai dimenticato di allineare business e IT.", | |
| "I log erano verbosi, ma non sul problema giusto.", | |
| "La sandbox non era così isolata come pensavi.", | |
| "Un redirect ti ha portato nel limbo dell'autenticazione.", | |
| "La checklist di go-live era rimasta in bozza.", | |
| "Hai chiuso il tab con la documentazione proprio sul più bello." | |
| ], | |
| DEATH_QUOTES: [ | |
| "\"Tranquillo, il backup è... aspetta, c'era un backup vero?\"", | |
| "\"Vabbè, diciamo che era solo un test di carico.\"", | |
| "\"Se nessuno se ne è accorto, non è successo niente.\"", | |
| "\"Prova a dare la colpa allo stagista.\"", | |
| "\"Riavvia il router e prega.\"", | |
| "\"In teoria l'architettura era perfetta… in pratica un po' meno.\"", | |
| "\"Il PoC era visionario, il firewall un po' di più.\"", | |
| "\"Secondo me in demo funzionava meglio.\"", | |
| "\"Scrivi pure 'da migliorare' nel retrospettivo.\"", | |
| "\"Mettiamo 'comportamento atteso da chiarire' nel ticket.\"", | |
| "\"Se lo raccontiamo bene diventa un caso studio.\"", | |
| "\"È colpa dell'ambiente, non del Dev.\"", | |
| "\"L'importante è che in PowerPoint sembri tutto stabile.\"", | |
| "\"Chiamiamolo 'fail veloce' e sembriamo agili.\"", | |
| "\"Al massimo lo vendiamo come esperienza immersiva imprevista.\"", | |
| "\"Mettiamo un feature flag e nessuno si farà male.\"", | |
| "\"Se il log non parla, il Dev sospira.\"", | |
| "\"Tranquilli, la prossima iterazione sarà quella buona. Forse.\"" | |
| ], | |
| PHASES: [ | |
| { score: 0, name: "ULTIMO ARRIVATO" }, | |
| { score: 150, name: "QUELLO BRAVO COL PC" }, | |
| { score: 400, name: "HACKER DI PROVINCIA" }, | |
| { score: 700, name: "VISIONARIO TECH" }, | |
| { score: 1200, name: "RE DELL'INNOVATION LAB 👑" } | |
| ] | |
| }; | |
| /* ================= ENGINE START ================= */ | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const GRAVITY = GAME_CONFIG.GRAVITY; | |
| const JUMP = GAME_CONFIG.JUMP_FORCE; | |
| const DOUBLE_JUMP = GAME_CONFIG.JUMP_FORCE * 0.9; | |
| const GROUND_H = 80; | |
| let state = { playing: false, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 }; | |
| let player = { x: 80, y: 0, w: 35, h: 35, dy: 0, grounded: false, canDouble: false, amplified: 0, stretch: 1 }; | |
| let entities = [], particles = [], bgStars = []; | |
| const dom = { | |
| start: document.getElementById('start-screen'), | |
| over: document.getElementById('game-over'), | |
| score: document.getElementById('score-display'), | |
| legacy: document.getElementById('legacy-display'), | |
| phase: document.getElementById('phase-display'), | |
| bar: document.getElementById('flow-bar'), | |
| barLabel: document.getElementById('flow-label'), | |
| finalScore: document.getElementById('final-score'), | |
| finalLegacy: document.getElementById('final-legacy'), | |
| deathQuote: document.getElementById('death-quote'), | |
| motivator: document.getElementById('motivator'), | |
| combo: document.getElementById('combo'), | |
| goTitle: document.getElementById('go-title'), | |
| goReason: document.getElementById('go-reason') | |
| }; | |
| function setupUI() { | |
| // TITOLI RIMOSSI ANCHE DAL JS | |
| // document.getElementById('title-main').innerText = GAME_CONFIG.TEXTS.TITLE; | |
| // document.getElementById('subtitle-main').innerText = GAME_CONFIG.TEXTS.SUBTITLE; | |
| document.getElementById('lbl-phase').innerText = GAME_CONFIG.TEXTS.LBL_PHASE; | |
| document.getElementById('lbl-metrics').innerText = GAME_CONFIG.TEXTS.LBL_METRICS; | |
| document.getElementById('lbl-score').innerText = GAME_CONFIG.TEXTS.LBL_SCORE; | |
| document.getElementById('lbl-legacy').innerText = GAME_CONFIG.TEXTS.LBL_LEGACY; | |
| document.getElementById('btn-start').innerText = GAME_CONFIG.TEXTS.START_BTN; | |
| document.getElementById('btn-restart').innerText = GAME_CONFIG.TEXTS.RESTART_BTN; | |
| document.getElementById('controls-hint').innerText = GAME_CONFIG.TEXTS.CONTROLS; | |
| // Use first element of array for description preview if needed, or just static text | |
| document.getElementById('icon-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.CHAR; | |
| document.getElementById('title-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.TITLE; | |
| document.getElementById('desc-legacy').innerText = GAME_CONFIG.ENTITIES.LEGACY.DESC; | |
| document.getElementById('icon-ai').innerText = GAME_CONFIG.ENTITIES.AI.CHAR; | |
| document.getElementById('title-ai').innerText = GAME_CONFIG.ENTITIES.AI.TITLE; | |
| document.getElementById('desc-ai').innerText = GAME_CONFIG.ENTITIES.AI.DESC; | |
| document.getElementById('icon-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.CHAR; | |
| document.getElementById('title-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.TITLE; | |
| document.getElementById('desc-obs').innerText = GAME_CONFIG.ENTITIES.OBSTACLE.DESC; | |
| document.getElementById('title-bar').innerText = GAME_CONFIG.ENTITIES.BAR.TITLE; | |
| document.getElementById('desc-bar').innerText = GAME_CONFIG.ENTITIES.BAR.DESC; | |
| } | |
| function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; state.groundY = canvas.height - GROUND_H; } | |
| window.addEventListener('resize', resize); | |
| setupUI(); | |
| resize(); | |
| for(let i=0; i<80; i++) bgStars.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, size: Math.random() * 2 }); | |
| function initGame() { | |
| Object.assign(state, { playing: true, speed: GAME_CONFIG.SPEED.INITIAL, score: 0, legacy: 0, flow: 50, frame: 0, phaseIdx: 0, shake: 0, combo: 0 }); | |
| Object.assign(player, { y: state.groundY - player.h, dy: 0, grounded: true, amplified: 0, stretch: 1 }); | |
| entities = []; particles = []; | |
| dom.start.style.display = 'none'; | |
| dom.over.classList.add('hidden'); | |
| dom.over.style.display = 'none'; | |
| dom.motivator.style.opacity = 0; | |
| dom.combo.style.opacity = 0; | |
| dom.phase.innerText = GAME_CONFIG.PHASES[0].name; | |
| updateHUD(); | |
| requestAnimationFrame(loop); | |
| } | |
| function jump() { | |
| if (!state.playing) return; | |
| if (player.grounded) { | |
| player.dy = JUMP; | |
| player.grounded = false; | |
| player.stretch = 1.3; | |
| player.canDouble = state.flow >= 25; | |
| explosion(player.x + player.w/2, player.y + player.h, 5, '#fff'); | |
| } | |
| else if (player.canDouble) { | |
| player.dy = DOUBLE_JUMP; | |
| player.canDouble = false; | |
| player.stretch = 1.2; | |
| state.flow = Math.max(0, state.flow - 25); | |
| explosion(player.x + player.w/2, player.y + player.h, 15, '#00ff41'); | |
| floatText("ELEVAZIONE", player.x + 40, player.y - 40, '#00ff41'); // Offset right | |
| } | |
| updateHUD(); | |
| } | |
| window.addEventListener('keydown', e => { | |
| if (e.code === 'Space' || e.code === 'ArrowUp') { e.preventDefault(); jump(); } | |
| if (e.code === 'ArrowDown' && !player.grounded) { player.dy += 6; player.stretch = 0.7; } | |
| }); | |
| window.addEventListener('touchstart', e => { e.preventDefault(); jump(); }, {passive: false}); | |
| window.addEventListener('mousedown', jump); | |
| function loop() { | |
| if (!state.playing) return; | |
| ctx.setTransform(1, 0, 0, 1, 0, 0); | |
| if (state.shake > 0) { | |
| ctx.translate((Math.random()-0.5)*state.shake, (Math.random()-0.5)*state.shake); | |
| state.shake *= 0.9; | |
| if(state.shake < 0.5) state.shake = 0; | |
| } | |
| ctx.fillStyle = '#0a0a0a'; ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| if (state.speed < GAME_CONFIG.SPEED.MAX) state.speed += GAME_CONFIG.SPEED.ACCELERATION; | |
| let currentSpd = state.speed + (player.amplified > 0 ? GAME_CONFIG.SPEED.BOOST : 0); | |
| ctx.fillStyle = '#fff'; | |
| bgStars.forEach(s => { | |
| s.x -= currentSpd * 0.15; | |
| if(s.x < 0) s.x = canvas.width; | |
| ctx.globalAlpha = 0.4; | |
| ctx.fillRect(s.x, s.y, s.size, s.size); | |
| }); | |
| ctx.globalAlpha = 1; | |
| ctx.strokeStyle = '#222'; ctx.lineWidth = 1; ctx.beginPath(); | |
| let offset = (state.frame * currentSpd * 0.4) % 100; | |
| for (let i = 0; i < canvas.width + 100; i += 100) { | |
| ctx.moveTo(i - offset, state.groundY); | |
| ctx.lineTo(i - offset - 150, canvas.height); | |
| } | |
| ctx.stroke(); | |
| updatePlayer(); | |
| manageEntities(currentSpd); | |
| drawParticles(); | |
| ctx.shadowBlur = 10; ctx.shadowColor = player.amplified > 0 ? '#00ff41' : '#444'; | |
| ctx.fillStyle = '#111'; ctx.fillRect(0, state.groundY, canvas.width, canvas.height - state.groundY); | |
| ctx.strokeStyle = '#00ff41'; ctx.lineWidth = 4; ctx.beginPath(); | |
| ctx.moveTo(0, state.groundY); ctx.lineTo(canvas.width, state.groundY); ctx.stroke(); ctx.shadowBlur = 0; | |
| if (state.frame % 600 === 0 && state.frame > 100) showMotivation(); | |
| if (player.amplified > 0) { | |
| player.amplified--; | |
| if (player.amplified === 0) floatText("GOD MODE OFF", player.x + 40, player.y - 50, '#aaa'); | |
| } | |
| state.frame++; | |
| requestAnimationFrame(loop); | |
| } | |
| function updatePlayer() { | |
| player.dy += GRAVITY; player.y += player.dy; | |
| if (player.y + player.h > state.groundY) { | |
| if (!player.grounded) { | |
| player.stretch = 0.7; | |
| explosion(player.x + player.w/2, state.groundY, 8, '#aaa'); | |
| } | |
| player.y = state.groundY - player.h; player.dy = 0; player.grounded = true; | |
| } | |
| player.stretch += (1 - player.stretch) * 0.1; | |
| let drawH = player.h * player.stretch, drawW = player.w * (1/player.stretch); | |
| let drawX = player.x + (player.w - drawW)/2, drawY = player.y + (player.h - drawH); | |
| ctx.fillStyle = player.amplified > 0 ? ((state.frame % 4 < 2) ? '#fff' : '#00ff41') : '#00ff41'; | |
| if (state.frame % 3 === 0) particles.push({ x: drawX, y: drawY, w: drawW, h: drawH, life: 0.6, type: 'trail', color: ctx.fillStyle }); | |
| ctx.shadowColor = ctx.fillStyle; ctx.shadowBlur = 20; | |
| ctx.fillRect(drawX, drawY, drawW, drawH); | |
| ctx.fillStyle = '#000'; ctx.fillRect(drawX + drawW*0.6, drawY + drawH*0.2, drawW*0.3, 5); ctx.shadowBlur = 0; | |
| } | |
| function manageEntities(spd) { | |
| let minGap = 500 - (spd * 8); | |
| let last = entities[entities.length-1]; | |
| if (!last || (canvas.width - last.x > minGap)) { | |
| if (Math.random() > 0.97) return; | |
| let typeKey = 'OBSTACLE'; | |
| let rand = Math.random(); | |
| if (rand > 0.6) typeKey = 'LEGACY'; | |
| if (rand > 0.92) typeKey = 'AI'; | |
| let conf = GAME_CONFIG.ENTITIES[typeKey]; | |
| let h = typeKey === 'OBSTACLE' ? 50 : 40, y = state.groundY - h; | |
| if (typeKey === 'AI') y -= Math.random() * 80; | |
| entities.push({ type: typeKey, conf: conf, x: canvas.width, y: y, w: 40, h: h, active: true }); | |
| } | |
| for (let i = entities.length - 1; i >= 0; i--) { | |
| let e = entities[i]; | |
| e.x -= spd; | |
| if (e.type !== 'OBSTACLE') e.y += Math.sin(state.frame * 0.08) * 0.7; | |
| if (e.active) { | |
| ctx.strokeStyle = e.conf.COLOR; ctx.lineWidth = 3; | |
| if (e.type === 'LEGACY') ctx.setLineDash([5,5]); else ctx.setLineDash([]); | |
| ctx.strokeRect(e.x, e.y, e.w, e.h); | |
| ctx.font = "28px Arial"; ctx.textAlign = "center"; | |
| ctx.fillText(e.conf.CHAR, e.x + e.w/2, e.y + e.h/2 + 10); | |
| if (rectHit(player.x, player.y, player.w, player.h, e.x, e.y, e.w, e.h)) handleHit(e); | |
| } | |
| if (e.x + e.w < 0) entities.splice(i, 1); | |
| } | |
| } | |
| function rectHit(x1, y1, w1, h1, x2, y2, w2, h2) { return x2 < x1 + w1 && x2 + w2 > x1 && y2 < y1 + h1 && y2 + h2 > y1; } | |
| function handleHit(e) { | |
| e.active = false; | |
| // Pick RANDOM Message | |
| let msgList = e.conf.MSG; | |
| let randomMsg = Array.isArray(msgList) ? msgList[Math.floor(Math.random() * msgList.length)] : msgList; | |
| if (e.type === 'OBSTACLE') { | |
| if (player.amplified > 0) { | |
| state.shake = 20; | |
| explosion(e.x + e.w/2, e.y + e.h/2, 25, '#ff0055'); | |
| floatText(randomMsg, e.x + 80, e.y - 20, '#fff'); // White text for destruction | |
| state.score += 15; state.combo++; | |
| showCombo(); | |
| } else { | |
| gameOver(); | |
| } | |
| } else { | |
| explosion(e.x + e.w/2, e.y + e.h/2, 12, e.conf.COLOR); | |
| // Colore del testo uguale all'entità raccolta | |
| floatText(randomMsg, e.x + 80, e.y - 40, e.conf.COLOR); | |
| if (e.type === 'LEGACY') { | |
| state.legacy += 10; state.score += 10; | |
| state.flow = Math.min(100, state.flow + 25); | |
| state.combo++; | |
| } | |
| if (e.type === 'AI') { | |
| player.amplified = 600; | |
| state.score += 50; state.shake = 8; | |
| showMotivation(); | |
| state.combo += 3; | |
| } | |
| showCombo(); updateHUD(); | |
| } | |
| } | |
| function explosion(x, y, count, color) { | |
| for(let i=0; i<count; i++) particles.push({ x, y, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 1.0, color, type: 'spark' }); | |
| } | |
| function drawParticles() { | |
| for(let i=particles.length-1; i>=0; i--) { | |
| let p = particles[i]; | |
| if (p.type === 'trail') { | |
| ctx.fillStyle = p.color; ctx.globalAlpha = p.life * 0.5; | |
| ctx.fillRect(p.x, p.y, p.w, p.h); | |
| ctx.globalAlpha = 1; p.life -= 0.04; | |
| } else { | |
| p.x += p.vx; p.y += p.vy; p.vy += 0.3; p.life -= 0.015; | |
| ctx.fillStyle = p.color; ctx.globalAlpha = p.life; | |
| ctx.fillRect(p.x, p.y, 5, 5); ctx.globalAlpha = 1; | |
| } | |
| if (p.life <= 0) particles.splice(i, 1); | |
| } | |
| } | |
| // Function modified to shift text right and use new CSS class | |
| function floatText(txt, x, y, col) { | |
| let el = document.createElement('div'); | |
| el.className = 'floating-message'; | |
| el.innerText = txt; | |
| // Spostamento a destra di base (+100px) per evitare il bordo sinistro | |
| el.style.left = (x + 60) + 'px'; | |
| el.style.top = y + 'px'; | |
| el.style.color = col; | |
| document.body.appendChild(el); | |
| // Timeout aumentato per matchare l'animazione CSS | |
| setTimeout(() => el.remove(), 4000); | |
| } | |
| function showMotivation() { | |
| let txt = GAME_CONFIG.MOTIVATIONAL[Math.floor(Math.random() * GAME_CONFIG.MOTIVATIONAL.length)]; | |
| dom.motivator.innerText = txt; | |
| dom.motivator.style.opacity = 1; dom.motivator.style.transform = "scale(1.15)"; | |
| setTimeout(() => { dom.motivator.style.opacity = 0; dom.motivator.style.transform = "scale(1)"; }, 3500); | |
| } | |
| function showCombo() { | |
| if (state.combo > 1) { | |
| let phrase = GAME_CONFIG.COMBO_PHRASES[Math.floor(Math.random() * GAME_CONFIG.COMBO_PHRASES.length)]; | |
| dom.combo.innerText = phrase; | |
| dom.combo.style.opacity = 1; dom.combo.style.transform = 'scale(1.2) rotate(-10deg)'; | |
| setTimeout(() => { dom.combo.style.opacity = 0; dom.combo.style.transform = 'scale(1) rotate(-10deg)'; }, 2000); | |
| } | |
| } | |
| function updateHUD() { | |
| dom.score.innerText = state.score; | |
| dom.legacy.innerText = state.legacy; | |
| dom.bar.style.width = state.flow + '%'; | |
| if (state.flow >= 25) { | |
| dom.bar.style.boxShadow = '0 0 15px #00ff41'; | |
| dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_FULL; | |
| dom.barLabel.style.color = "#00ff41"; | |
| } else { | |
| dom.bar.style.boxShadow = 'none'; | |
| dom.barLabel.innerText = GAME_CONFIG.TEXTS.BAR_EMPTY; | |
| dom.barLabel.style.color = "#aaa"; | |
| } | |
| let currentPhaseObj = GAME_CONFIG.PHASES.slice().reverse().find(p => state.score >= p.score); | |
| if (currentPhaseObj && currentPhaseObj.name !== dom.phase.innerText) { | |
| dom.phase.innerText = currentPhaseObj.name; | |
| floatText("FASE: " + currentPhaseObj.name, canvas.width/2, canvas.height/2, '#fff'); | |
| } | |
| } | |
| function gameOver() { | |
| state.playing = false; | |
| dom.finalScore.innerText = state.score; | |
| dom.finalLegacy.innerText = state.legacy + "%"; | |
| dom.goTitle.innerText = GAME_CONFIG.GAME_OVER_TITLES[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_TITLES.length)]; | |
| dom.goReason.innerText = GAME_CONFIG.GAME_OVER_REASONS[Math.floor(Math.random() * GAME_CONFIG.GAME_OVER_REASONS.length)]; | |
| dom.deathQuote.innerText = GAME_CONFIG.DEATH_QUOTES[Math.floor(Math.random() * GAME_CONFIG.DEATH_QUOTES.length)]; | |
| dom.over.classList.remove('hidden'); | |
| dom.over.style.display = 'flex'; | |
| } | |
| </script> | |
| </body> | |
| </html> |