MENU
設定
アプリ
便利機能
バッテリー
カメラ
セキュリティ
節約
ガジェット
れんのテック教室
設定
アプリ
便利機能
バッテリー
カメラ
セキュリティ
節約
ガジェット
れんのテック教室
設定
アプリ
便利機能
バッテリー
カメラ
セキュリティ
節約
ガジェット
ホーム
iPhone先生RUN
iPhone先生RUN
</noscript><iframe id="iphone-run-frame" title="iPhone先生RUN" loading="eager" data-no-lazy="1" data-skip-lazy="1" class="no-lazyload" allow="autoplay; clipboard-write" srcdoc="<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="theme-color" content="#0a0a1a"> <title>iPhone先生RUN</title> <style> * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; } html, body { width:100%; height:100%; overflow:hidden; background:#0a0a1a; font-family:-apple-system,"Hiragino Sans","Yu Gothic",sans-serif; touch-action:none; } #wrap { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; } canvas { display:block; background:linear-gradient(180deg,#1a2a4a 0%,#3a5a8a 60%,#6a8aba 100%); width:100%; height:100%; image-rendering:pixelated; } #ui { position:absolute; inset:0; pointer-events:none; color:#fff; } .panel { pointer-events:auto; } /* HUD */ #hud { position:absolute; top:env(safe-area-inset-top,12px); left:0; right:0; padding:12px 16px; display:flex; justify-content:space-between; align-items:flex-start; font-weight:800; text-shadow:0 2px 0 #000, 0 0 8px rgba(0,0,0,.6); } #hud .stat { font-size:18px; line-height:1.2; } #hud .stat .lbl { font-size:11px; opacity:.8; letter-spacing:.1em; } #hud .stat .val { font-size:22px; } #hud .right { text-align:right; } /* Charge meter (center) */ #hud .charge { font-size:11px; text-align:center; min-width:90px; } #hud .charge .lbl { font-size:10px; opacity:.85; letter-spacing:.1em; } #hud .charge .bar { width:90px; height:9px; background:rgba(0,0,0,.55); border-radius:5px; overflow:hidden; margin:3px auto 2px; border:1px solid rgba(255,255,255,.45); } #hud .charge .bar .fill { width:0%; height:100%; background:linear-gradient(90deg,#ffd76b,#ff8e3c); transition:width .3s; box-shadow:0 0 8px rgba(255,215,107,.6); } #hud .charge .num { font-size:11px; opacity:.95; } #hud .charge.super .bar, #hud .charge.super .num { display:none; } #hud .charge.super .lbl { font-size:14px; color:#ffd76b; animation:pulse-super .35s infinite alternate; text-shadow:0 0 8px #ff8e3c, 0 2px 0 #5a2a00; } #hud .charge .countdown { display:none; font-size:18px; color:#fff; font-weight:900; } #hud .charge.super .countdown { display:block; } @keyframes pulse-super { from{transform:scale(1);} to{transform:scale(1.12);} } /* Screen flash on super activation */ #flash { position:absolute; inset:0; background:#fff5a0; opacity:0; pointer-events:none; z-index:50; } #flash.go { animation:flashfx .55s ease-out; } @keyframes flashfx { 0%{opacity:0;} 8%{opacity:.85;} 100%{opacity:0;} } /* Title */ #title { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; padding:env(safe-area-inset-top,24px) 18px env(safe-area-inset-bottom,24px); padding-top:calc(env(safe-area-inset-top,0px) + 24px); text-align:center; background:radial-gradient(ellipse at center, rgba(20,30,60,.4), rgba(0,0,0,.85)); overflow-y:auto; -webkit-overflow-scrolling:touch; } #title h1 { font-size:38px; line-height:1.05; font-weight:900; letter-spacing:.02em; background:linear-gradient(180deg,#fff,#9bd0ff); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 #001a3a); } #title h1 .sub { display:block; font-size:14px; margin-top:6px; color:#9bd0ff; -webkit-text-fill-color:#9bd0ff; } #title .tag { color:#fff; font-size:14px; opacity:.85; max-width:320px; line-height:1.6; } #title .credit { font-size:12px; opacity:.6; color:#9bd0ff; margin-top:6px; } #title .high { font-size:14px; color:#ffd76b; font-weight:800; } /* Help button on title */ .help-btn { position:absolute; top:env(safe-area-inset-top,16px); right:16px; width:44px; height:44px; border-radius:50%; background:rgba(20,30,60,.7); border:2px solid #9bd0ff; color:#9bd0ff; font-size:22px; font-weight:900; cursor:pointer; pointer-events:auto; z-index:5; } .help-btn:active { transform:scale(.95); } /* Help modal */ #help { position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,5,.85); backdrop-filter:blur(6px); z-index:10; pointer-events:auto; } #help.show { display:flex; } #help .helpcard { width:min(94vw,380px); max-height:90vh; overflow-y:auto; background:linear-gradient(180deg,rgba(20,30,60,.95),rgba(10,15,35,.95)); border:2px solid #9bd0ff; border-radius:22px; padding:20px; } #help h2 { color:#9bd0ff; text-align:center; font-size:18px; letter-spacing:.15em; margin-bottom:12px; } #help .ctrl { color:#fff; font-size:13px; text-align:center; line-height:1.7; margin-bottom:14px; padding-bottom:12px; border-bottom:1px dashed rgba(155,208,255,.2); } #help .closeBtn { display:block; margin:14px auto 0; padding:10px 30px; border-radius:999px; background:linear-gradient(180deg,#3a4a6a,#1a2a4a); color:#fff; font-weight:800; border:none; font-size:14px; cursor:pointer; } /* Version tag */ .version-tag { font-size:10px; color:rgba(155,208,255,.55); letter-spacing:.08em; text-align:center; margin-top:10px; font-family:ui-monospace,Menlo,Consolas,monospace; } /* Legend */ .legend { width:min(92vw,360px); background:rgba(10,15,35,.6); border:1px solid rgba(155,208,255,.3); border-radius:16px; padding:12px 14px; } .legend h3 { font-size:12px; letter-spacing:.15em; color:#9bd0ff; text-align:center; margin-bottom:8px; font-weight:800; } .legend .row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(155,208,255,.15); } .legend .row:last-child { border-bottom:none; } .legend canvas { width:44px; height:44px; flex-shrink:0; background:rgba(0,0,0,.25); border-radius:8px; } .legend .info { flex:1; text-align:left; line-height:1.35; } .legend .info b { display:block; font-size:13px; color:#fff; } .legend .info span { font-size:11px; color:#cfd8e8; opacity:.85; } .legend .tag-ok { display:inline-block; font-size:9px; padding:1px 6px; border-radius:4px; background:#2a8a4a; color:#fff; margin-left:4px; vertical-align:middle; font-weight:800; } .legend .tag-ng { display:inline-block; font-size:9px; padding:1px 6px; border-radius:4px; background:#d83a5c; color:#fff; margin-left:4px; vertical-align:middle; font-weight:800; } .btn { pointer-events:auto; display:inline-block; padding:16px 38px; border-radius:999px; background:linear-gradient(180deg,#ff5e7e,#d83a5c); color:#fff; font-weight:900; font-size:20px; letter-spacing:.05em; box-shadow:0 6px 0 #8a1f3a, 0 10px 30px rgba(216,58,92,.4); cursor:pointer; border:none; } .btn:active { transform:translateY(3px); box-shadow:0 3px 0 #8a1f3a, 0 6px 20px rgba(216,58,92,.4); } /* RETRY: extra-large, primary red */ .btn.xl { font-size:24px; padding:20px 56px; box-shadow:0 7px 0 #8a1f3a, 0 12px 32px rgba(216,58,92,.45); } .btn.xl:active { box-shadow:0 3px 0 #8a1f3a, 0 6px 20px rgba(216,58,92,.4); } /* TikTok video CTA: blue, medium */ .btn.tiktok { background:linear-gradient(180deg,#3aa8ff,#1166cc); box-shadow:0 6px 0 #073e7a, 0 10px 30px rgba(58,168,255,.35); font-size:17px; padding:14px 30px; } .btn.tiktok:active { box-shadow:0 3px 0 #073e7a, 0 6px 20px rgba(58,168,255,.35); } /* Profile: gray, medium */ .btn.ghost { background:linear-gradient(180deg,#3a4a6a,#1a2a4a); box-shadow:0 6px 0 #0a1a2a, 0 10px 30px rgba(0,0,0,.4); font-size:16px; padding:12px 26px; } /* HOME: small auxiliary */ .btn.tiny { font-size:13px; padding:8px 20px; box-shadow:0 4px 0 #0a1a2a, 0 6px 16px rgba(0,0,0,.35); opacity:.85; } .btn.tiny:active { box-shadow:0 2px 0 #0a1a2a, 0 4px 10px rgba(0,0,0,.3); } /* Game Over */ #over { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:rgba(0,0,5,.78); backdrop-filter:blur(6px); } #over.show { display:flex; } #over .card { background:linear-gradient(180deg,rgba(20,30,60,.95),rgba(10,15,35,.95)); border:2px solid #9bd0ff; border-radius:22px; padding:22px 26px; width:min(92vw,360px); text-align:center; box-shadow:0 0 40px rgba(155,208,255,.25); } #over h2 { color:#ff5e7e; font-size:30px; font-weight:900; letter-spacing:.05em; } #over .rank { font-size:78px; font-weight:900; line-height:1; margin:6px 0; background:linear-gradient(180deg,#ffd76b,#ff8e3c); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 #5a2a00); } #over .scores { display:flex; justify-content:space-around; margin:10px 0 14px; gap:8px; } #over .scores .s { background:rgba(0,0,0,.35); border-radius:14px; padding:10px 6px; flex:1; } #over .scores .s .lbl { font-size:11px; color:#9bd0ff; letter-spacing:.1em; } #over .scores .s .val { font-size:22px; font-weight:900; color:#fff; } #over .ss { font-size:12px; color:#aaa; margin-top:6px; line-height:1.5; } #over .tag { font-size:13px; color:#ffd76b; font-weight:800; margin-top:8px; letter-spacing:.05em; } #over .row { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; } /* Tap hint */ #hint { position:absolute; bottom:18%; left:0; right:0; text-align:center; color:#fff; font-size:14px; opacity:.85; animation:blink 1.2s infinite; pointer-events:none; } @keyframes blink { 50%{opacity:.3;} } /* Combo popup */ #combo { position:absolute; top:38%; left:50%; transform:translateX(-50%); color:#ffd76b; font-weight:900; font-size:36px; text-shadow:0 3px 0 #5a2a00; opacity:0; pointer-events:none; } #combo.pop { animation:pop .8s ease-out; } @keyframes pop { 0%{opacity:0;transform:translate(-50%,10px) scale(.6);} 30%{opacity:1;transform:translate(-50%,-10px) scale(1.2);} 100%{opacity:0;transform:translate(-50%,-30px) scale(1);} } </style> </head> <body> <div id="wrap"> <canvas id="c"></canvas> <div id="ui"> <div id="hud" style="display:none;"> <div class="stat"><div class="lbl">DISTANCE</div><div class="val"><span id="dist">0</span>m</div></div> <div class="charge" id="chargeBox"> <div class="lbl" id="chargeLbl">⚡ CHARGE</div> <div class="bar"><div class="fill" id="chargeFill"></div></div> <div class="num"><span id="chargeNum">0</span>/50</div> <div class="countdown" id="chargeCountdown">8.0s</div> </div> <div class="stat right"><div class="lbl">⚡ CABLES</div><div class="val">×<span id="coin">0</span></div></div> </div> <div id="flash"></div> <div id="combo"></div> <button class="help-btn panel" id="helpBtn" title="あそびかた">?</button> <div id="title" class="panel" style="justify-content:center;"> <h1>iPhone先生<br>RUN<span class="sub">〜爆走！カスタマイズ世界〜</span></h1> <div class="tag">📱 タップでジャンプ<br>⚡ ケーブルでスコアUP</div> <button class="btn" id="startBtn">START</button> <div class="high">🏆 ハイスコア: <span id="hs">0</span>m</div> <div class="credit">@ren_works / iPhone先生</div> <div class="version-tag" id="versionTagTitle"></div> </div> <div id="help" class="panel"> <div class="helpcard"> <h2>― あそびかた ―</h2> <div class="ctrl"> 📱 <b>タップ</b>でジャンプ<br> ⏱ <b>長押し</b>で高くジャンプ<br> 🦘 空中でもう1回タップで <b>二段ジャンプ</b> </div> <div class="legend"> <h3>― ITEM GUIDE ―</h3> <div class="row" style="background:linear-gradient(90deg,rgba(255,215,107,.15),rgba(255,142,60,.05)); border-radius:10px; padding:8px 6px;"> <canvas data-kind="super" width="88" height="88"></canvas> <div class="info"><b>⚡ SUPER MODE<span class="tag-ok" style="background:#ff8e3c;">RARE</span></b><span>⚡を50個貯めると発動！<br>8秒間スーパースマホ化。<br>敵を破壊・スコア2倍</span></div> </div> <div class="row"> <canvas data-kind="cable" width="88" height="88"></canvas> <div class="info"><b>⚡ 充電ケーブル<span class="tag-ok">GET</span></b><span>+1pt／空中に並んでる<br>連続GETで COMBO！</span></div> </div> <div class="row"> <canvas data-kind="gem" width="88" height="88"></canvas> <div class="info"><b>💎 ジェム<span class="tag-ok">GET</span></b><span>+10pt のレアボーナス</span></div> </div> <div class="row"> <canvas data-kind="storage" width="88" height="88"></canvas> <div class="info"><b>⚠️ ストレージ満タン<span class="tag-ng">NG</span></b><span>当たると即アウト・飛び越えろ</span></div> </div> <div class="row"> <canvas data-kind="virus" width="88" height="88"></canvas> <div class="info"><b>🦠 ウイルス<span class="tag-ng">NG</span></b><span>ふわふわ動く敵・ジャンプで回避</span></div> </div> <div class="row"> <canvas data-kind="pit" width="88" height="88"></canvas> <div class="info"><b>🪫 低電池の穴<span class="tag-ng">NG</span></b><span>落ちたら即死・必ずジャンプ</span></div> </div> </div> <button class="closeBtn" id="helpCloseBtn">閉じる</button> <div class="version-tag" id="versionTag"></div> </div> </div> <div id="hint" style="display:none;">▼ タップでジャンプ ▼</div> <div id="over"> <div class="card"> <h2>GAME OVER</h2> <div class="rank" id="rank">B</div> <div class="scores"> <div class="s"><div class="lbl">DISTANCE</div><div class="val"><span id="finDist">0</span>m</div></div> <div class="s"><div class="lbl">⚡ CABLES</div><div class="val">×<span id="finCoin">0</span></div></div> <div class="s"><div class="lbl">SCORE</div><div class="val" id="finScore">0</div></div> </div> <div class="tag">@ren_works / #iPhone先生RUN</div> <div class="ss">📸 この画面をスクショして<br>TikTokコメ欄に貼って自慢しよう！</div> <div class="row"> <button class="btn xl" id="retryBtn">RETRY</button> </div> <div class="row"> <button class="btn tiktok" id="tiktokBtn">🎵 動画でコメ</button> </div> <div class="row"> <button class="btn ghost" id="profileBtn">👤 プロフィール</button> </div> <div class="row"> <button class="btn ghost tiny" id="homeBtn">🏠 HOME</button> </div> </div> </div> </div> </div> <script> (() => { // ====== ⚙️ CONFIG（動画URLは公開後に差し替え）====== const VERSION = 'v1.0.8'; const BUILD_DATE = '2026-05-07'; const TIKTOK_VIDEO_URL = 'https://www.tiktok.com/@ren_works/video/7636671110875991317'; // ← ゲーム告知動画 const TIKTOK_PROFILE_URL = 'https://www.tiktok.com/@ren_works'; // ← プロフィール const HASHTAG = '#iPhone先生RUN'; // =================================================== const cvs = document.getElementById('c'); const ctx = cvs.getContext('2d'); let W=0, H=0, DPR=1; function resize() { DPR = Math.min(window.devicePixelRatio || 1, 2); W = window.innerWidth; H = window.innerHeight; cvs.width = W * DPR; cvs.height = H * DPR; cvs.style.width = W + 'px'; cvs.style.height = H + 'px'; ctx.setTransform(DPR,0,0,DPR,0,0); ctx.imageSmoothingEnabled = false; } window.addEventListener('resize', resize); resize(); // ----- Game state ----- const SUPER_THRESHOLD = 50; const SUPER_DURATION = 480; // 8秒 @60fps const G = { state: 'title', // title, play, over t: 0, speed: 5.2, speedMax: 11, distPx: 0, coins: 0, combo: 0, comboTimer: 0, superCharge: 0, // 0..SUPER_THRESHOLD bestM: parseInt(localStorage.getItem('iphone_run_best_m')||'0',10), bestScore: parseInt(localStorage.getItem('iphone_run_best_score')||'0',10), shake: 0, bgIdx: 0, }; // Player (chibi iPhone-sensei: white phone-shaped body, glasses) const P = { x: 0, y: 0, w: 42, h: 56, vy: 0, onGround: true, jumpHold: 0, doubleAvail: true, runFrame: 0, deadAnim: 0, super: false, superTimer: 0, auraPhase: 0, }; // Player runs around vertical mid → set ground line at ~62% from top. // Ground occupies bottom ~38%, sky takes top ~62% (room for jumping). function groundY() { return Math.floor(H * 0.62); } function groundH() { return H - groundY(); } // Obstacles & items const obs = []; // {type:'pit'|'low'|'storage'|'virus', x,y,w,h} const items = []; // {type:'cable'|'gem', x,y,w,h, picked} const fx = []; // particles // Background bricks for parallax (iPhone wallpaper grid) const bg = { offset: 0 }; // Input let pressing = false; function onDown(e){ e.preventDefault(); pressing = true; if (G.state === 'title') return; if (G.state === 'over') return; tryJump(); } function onUp(e){ e.preventDefault(); pressing=false; P.jumpHold = 0; } cvs.addEventListener('touchstart', onDown, {passive:false}); cvs.addEventListener('touchend', onUp, {passive:false}); cvs.addEventListener('mousedown', onDown); window.addEventListener('mouseup', onUp); window.addEventListener('keydown', e=>{ if(e.code==='Space'){ if(G.state==='title') start(); else tryJump(); pressing=true;} }); window.addEventListener('keyup', e=>{ if(e.code==='Space'){ pressing=false; P.jumpHold=0; } }); function tryJump(){ if (P.onGround) { P.vy = -10.5; P.onGround = false; P.jumpHold = 14; // frames of variable jump P.doubleAvail = true; sfx('jump'); } else if (P.doubleAvail) { P.vy = -8.5; P.doubleAvail = false; P.jumpHold = 8; sfx('jump2'); for (let i=0;i<8;i++) fx.push({x:P.x+P.w/2,y:P.y+P.h, vx:(Math.random()-.5)*4, vy:Math.random()*2+1, life:20, color:'#9bd0ff'}); } } // ---- Audio (WebAudio simple synth) ---- let AC=null; function initAudio(){ if(!AC){ try{ AC = new (window.AudioContext||window.webkitAudioContext)(); }catch(e){} } } function sfx(name){ if(!AC) return; const o = AC.createOscillator(), g = AC.createGain(); o.connect(g); g.connect(AC.destination); const t = AC.currentTime; if (name==='jump'){ o.type='square'; o.frequency.setValueAtTime(420,t); o.frequency.exponentialRampToValueAtTime(880,t+.12); g.gain.setValueAtTime(.12,t); g.gain.exponentialRampToValueAtTime(.001,t+.15); o.start(t); o.stop(t+.16);} else if (name==='jump2'){ o.type='triangle'; o.frequency.setValueAtTime(660,t); o.frequency.exponentialRampToValueAtTime(1200,t+.1); g.gain.setValueAtTime(.1,t); g.gain.exponentialRampToValueAtTime(.001,t+.13); o.start(t); o.stop(t+.14);} else if (name==='coin'){ o.type='square'; o.frequency.setValueAtTime(990,t); o.frequency.setValueAtTime(1480,t+.06); g.gain.setValueAtTime(.1,t); g.gain.exponentialRampToValueAtTime(.001,t+.18); o.start(t); o.stop(t+.2);} else if (name==='hit'){ o.type='sawtooth'; o.frequency.setValueAtTime(180,t); o.frequency.exponentialRampToValueAtTime(40,t+.4); g.gain.setValueAtTime(.18,t); g.gain.exponentialRampToValueAtTime(.001,t+.5); o.start(t); o.stop(t+.55);} else if (name==='gem'){ o.type='triangle'; o.frequency.setValueAtTime(1320,t); o.frequency.exponentialRampToValueAtTime(2200,t+.18); g.gain.setValueAtTime(.12,t); g.gain.exponentialRampToValueAtTime(.001,t+.22); o.start(t); o.stop(t+.24);} else if (name==='super'){ // ascending fanfare C5→E5→G5→C6 o.type='square'; o.frequency.setValueAtTime(523,t); o.frequency.setValueAtTime(659,t+.1); o.frequency.setValueAtTime(784,t+.2); o.frequency.setValueAtTime(1047,t+.3); g.gain.setValueAtTime(.16,t); g.gain.exponentialRampToValueAtTime(.001,t+.6); o.start(t); o.stop(t+.62); } else if (name==='boom'){ o.type='sawtooth'; o.frequency.setValueAtTime(220,t); o.frequency.exponentialRampToValueAtTime(60,t+.25); g.gain.setValueAtTime(.13,t); g.gain.exponentialRampToValueAtTime(.001,t+.3); o.start(t); o.stop(t+.32);} } function updateChargeHud(){ const box = document.getElementById('chargeBox'); if (!box) return; if (P.super){ box.classList.add('super'); document.getElementById('chargeLbl').textContent = '⚡ SUPER MODE!'; document.getElementById('chargeCountdown').textContent = (P.superTimer/60).toFixed(1)+'s'; } else { box.classList.remove('super'); document.getElementById('chargeLbl').textContent = '⚡ CHARGE'; document.getElementById('chargeFill').style.width = Math.min(100, G.superCharge/SUPER_THRESHOLD*100)+'%'; document.getElementById('chargeNum').textContent = G.superCharge; } } function activateSuper(){ P.super = true; P.superTimer = SUPER_DURATION; G.superCharge = 0; showCombo('⚡ SUPER MODE! ⚡'); sfx('super'); G.shake = 12; // screen flash const flash = document.getElementById('flash'); flash.classList.remove('go'); void flash.offsetWidth; flash.classList.add('go'); // gold particle burst around player for (let i=0;i<32;i++){ const a = (i/32) * Math.PI * 2; fx.push({ x: P.x+P.w/2, y: P.y+P.h/2, vx: Math.cos(a)*(4+Math.random()*4), vy: Math.sin(a)*(4+Math.random()*4), life: 40, color: ['#fff5a0','#ffd76b','#ff8e3c'][Math.floor(Math.random()*3)] }); } } function start(){ initAudio(); G.state='play'; G.t=0; G.distPx=0; G.coins=0; G.speed=5.2; G.combo=0; G.comboTimer=0; G.shake=0; G.superCharge=0; obs.length=0; items.length=0; fx.length=0; P.x = Math.max(60, W*0.18); P.y = groundY() - P.h; P.vy=0; P.onGround=true; P.deadAnim=0; P.doomed=false; P.super=false; P.superTimer=0; P.auraPhase=0; updateChargeHud(); document.getElementById('title').style.display='none'; document.getElementById('help').classList.remove('show'); document.getElementById('helpBtn').style.display='none'; document.getElementById('over').classList.remove('show'); document.getElementById('hud').style.display='flex'; document.getElementById('hint').style.display='block'; setTimeout(()=>{ document.getElementById('hint').style.display='none'; }, 2200); } function gameOver(){ if (G.state!=='play') return; G.state='over'; P.deadAnim=1; G.shake=18; sfx('hit'); const m = Math.floor(G.distPx/12); const score = m*10 + G.coins*50; if (m > G.bestM) { G.bestM = m; localStorage.setItem('iphone_run_best_m', m); } if (score > G.bestScore) { G.bestScore = score; localStorage.setItem('iphone_run_best_score', score); } // Rank let rank='E'; if (score>=20000) rank='S'; else if (score>=12000) rank='A'; else if (score>=7000) rank='B'; else if (score>=3500) rank='C'; else if (score>=1500) rank='D'; document.getElementById('finDist').textContent = m; document.getElementById('finCoin').textContent = G.coins; document.getElementById('finScore').textContent = score.toLocaleString(); document.getElementById('rank').textContent = rank; document.getElementById('hs').textContent = G.bestM; setTimeout(()=>{ document.getElementById('over').classList.add('show'); document.getElementById('hud').style.display='none'; }, 900); } // Spawning let spawnCool = 60; function spawnLogic(){ spawnCool--; if (spawnCool > 0) return; const r = Math.random(); const gy = groundY(); if (r < 0.35) { // pit (low battery hole) const w = 60 + Math.random()*70; obs.push({type:'pit', x: W+30, y: gy, w, h: groundH()}); } else if (r < 0.62) { // storage warning box (medium height obstacle) obs.push({type:'storage', x: W+30, y: gy-44, w: 38, h: 44}); } else if (r < 0.78) { // virus enemy walking obs.push({type:'virus', x: W+30, y: gy-34, w: 36, h: 34, anim:0}); } else if (r < 0.9) { // floating cable line (collect items) const lineY = gy - 110 - Math.random()*60; const n = 4 + Math.floor(Math.random()*4); for (let i=0;i<n;i++) items.push({type:'cable', x: W+30+i*36, y: lineY, w:24, h:24, anim:Math.random()*Math.PI*2}); } else { // gem (rare big bonus) items.push({type:'gem', x: W+40, y: gy-90-Math.random()*60, w:28, h:28, anim:0}); } // cooldown scaled to speed spawnCool = Math.max(28, 70 - Math.floor(G.speed*3) + Math.floor(Math.random()*30)); } // ----- Update ----- function update(){ if (G.state==='play') { G.t++; // gradually speed up G.speed = Math.min(G.speedMax, 5.2 + G.distPx*0.0006); G.distPx += G.speed; // bg parallax bg.offset = (bg.offset + G.speed*0.6) % 80; // physics if (!P.onGround) { // variable jump: while pressing and have hold frames, reduce gravity let grav = P.doomed ? 1.2 : 0.55; if (!P.doomed && pressing && P.jumpHold > 0) { grav = 0.22; P.jumpHold--; } P.vy += grav; if (P.vy > 22) P.vy = 22; P.y += P.vy; // land on ground only if NOT over a pit AND not doomed if (!P.doomed && P.y + P.h >= groundY() && !isOverPit(P.x + P.w/2)) { P.y = groundY() - P.h; P.vy = 0; P.onGround = true; P.doubleAvail = true; } // Doomed: dramatic fall + immediate death once visibly fallen if (P.doomed && P.y > groundY() + 30) gameOver(); } else { // walking — if we step over a pit, mark doomed and start falling if (isOverPit(P.x + P.w/2)) { P.onGround = false; P.vy = 6; P.doomed = true; } else { P.runFrame = (P.runFrame + G.speed*0.15) % 4; } } // spawn spawnLogic(); // move obstacles for (let i=obs.length-1;i>=0;i--){ const o = obs[i]; o.x -= G.speed; if (o.type==='virus') o.anim = (o.anim||0) + 0.2; if (o.x + o.w < -20) obs.splice(i,1); } // items for (let i=items.length-1;i>=0;i--){ const it = items[i]; it.x -= G.speed; it.anim += 0.15; if (it.x + it.w < -20) items.splice(i,1); } // SUPER mode timer + aura particle trail if (P.super) { P.superTimer--; P.auraPhase += 0.18; if (P.superTimer <= 0) { P.super = false; updateChargeHud(); } if (G.t % 2 === 0) { fx.push({ x: P.x + (Math.random()-.5)*P.w*1.2, y: P.y + (Math.random()-.5)*P.h*1.2, vx: -G.speed*0.4 + (Math.random()-.5)*1.5, vy: -Math.random()*1.5, life: 22, color: ['#fff5a0','#ffd76b','#ff8e3c'][Math.floor(Math.random()*3)] }); } } // collisions (pit handled by physics + isOverPit) const pb = {x:P.x+6, y:P.y+4, w:P.w-12, h:P.h-6}; for (let i=obs.length-1;i>=0;i--) { const o = obs[i]; if (o.type==='pit') continue; if (rectHit(pb, o)) { if (P.super) { // SUPER: destroy obstacle, bonus pts obs.splice(i,1); G.coins += 5; sfx('boom'); G.shake = Math.max(G.shake, 6); showCombo('+5 ⚡ SMASH!'); for (let k=0;k<22;k++){ fx.push({ x: o.x+o.w/2, y: o.y+o.h/2, vx: (Math.random()-.5)*9, vy: (Math.random()-.5)*9, life: 32, color: ['#fff5a0','#ff8e3c','#fff','#ffd76b'][Math.floor(Math.random()*4)] }); } } else { gameOver(); } break; } } // death from pit (off-screen below) if (P.y > H + 40) gameOver(); // pick items for (const it of items) { if (it.picked) continue; if (rectHit(pb, it)) { it.picked = true; if (it.type==='cable') { const bonus = P.super ? 2 : 1; // スーパー時は2倍 G.coins += bonus; if (!P.super) { G.superCharge = Math.min(SUPER_THRESHOLD, G.superCharge + 1); if (G.superCharge >= SUPER_THRESHOLD) activateSuper(); } G.combo++; G.comboTimer = 240; // 4秒間コンボ維持 sfx('coin'); const c = P.super ? '#fff5a0' : '#ffd76b'; for (let i=0;i<6;i++) fx.push({x:it.x+12,y:it.y+12, vx:(Math.random()-.5)*4, vy:-Math.random()*4-1, life:24, color:c}); if (G.combo>0 && G.combo%5===0) showCombo(G.combo+' COMBO!'); } else if (it.type==='gem') { G.coins+=10; if (!P.super) { const before = G.superCharge; G.superCharge = Math.min(SUPER_THRESHOLD, G.superCharge + 10); if (before < SUPER_THRESHOLD && G.superCharge >= SUPER_THRESHOLD) activateSuper(); } sfx('gem'); showCombo('+10 ⚡'); for (let i=0;i<18;i++) fx.push({x:it.x+14,y:it.y+14, vx:(Math.random()-.5)*6, vy:(Math.random()-.5)*6, life:30, color:'#ff5e7e'}); } updateChargeHud(); } } // remove picked for (let i=items.length-1;i>=0;i--) if (items[i].picked) items.splice(i,1); // combo decay if (G.comboTimer>0) G.comboTimer--; else G.combo=0; // HUD document.getElementById('dist').textContent = Math.floor(G.distPx/12); document.getElementById('coin').textContent = G.coins; if (P.super) updateChargeHud(); } // particles for (let i=fx.length-1;i>=0;i--){ const p = fx[i]; p.x += p.vx; p.y += p.vy; p.vy += 0.2; p.life--; if (p.life<=0) fx.splice(i,1); } if (G.shake>0) G.shake--; } function rectHit(a,b){ return a.x < b.x+b.w && a.x+a.w > b.x && a.y < b.y+b.h && a.y+a.h > b.y; } function isOverPit(px){ for (const o of obs){ if (o.type==='pit' && px > o.x+4 && px < o.x + o.w - 4) return true; } return false; } function showCombo(text){ const el = document.getElementById('combo'); el.textContent = text; el.classList.remove('pop'); void el.offsetWidth; el.classList.add('pop'); } // ----- Draw ----- function draw(){ const sx = (G.shake>0) ? (Math.random()-.5)*G.shake*0.6 : 0; const sy = (G.shake>0) ? (Math.random()-.5)*G.shake*0.6 : 0; // sky const sky = ctx.createLinearGradient(0,0,0,H); sky.addColorStop(0,'#0a1a40'); sky.addColorStop(0.5,'#3a5a9a'); sky.addColorStop(1,'#7aaadc'); ctx.fillStyle = sky; ctx.fillRect(0,0,W,H); // stars ctx.fillStyle = 'rgba(255,255,255,.5)'; for (let i=0;i<30;i++){ const x = (i*73 + bg.offset*0.1)%W; const y = (i*41) % (H*0.4); ctx.fillRect(x,y,2,2); } // distant skyline (iPhone shapes) ctx.save(); ctx.translate(sx,sy); drawSkyline(); // ground drawGround(); // pits — danger hazard stripes + electric sparks + pulsing warning for (const o of obs) if (o.type==='pit') drawPit(o); // obstacles for (const o of obs){ if (o.type==='storage') drawStorage(o); else if (o.type==='virus') drawVirus(o); } // items for (const it of items){ if (it.type==='cable') drawCable(it); else if (it.type==='gem') drawGem(it); } // player drawPlayer(); // particles for (const p of fx) { ctx.fillStyle = p.color; ctx.globalAlpha = Math.max(0, p.life/24); ctx.fillRect(p.x, p.y, 3, 3); } ctx.globalAlpha = 1; ctx.restore(); } function drawSkyline(){ const baseY = groundY()-10; ctx.fillStyle = 'rgba(10,15,35,.6)'; for (let i=0;i<8;i++){ const x = (i*180 - bg.offset*0.2) % (W+200) - 60; const w = 80, h = 100 + (i%3)*40; ctx.fillRect(x, baseY-h, w, h); // windows ctx.fillStyle = 'rgba(255,220,140,.4)'; for (let r=0;r<Math.floor(h/20);r++){ for (let c=0;c<3;c++){ if ((r+c+i)%3===0) ctx.fillRect(x+8+c*22, baseY-h+8+r*20, 8, 8); } } ctx.fillStyle = 'rgba(10,15,35,.6)'; } } function drawGround(){ const gy = groundY(); // dirt ctx.fillStyle = '#3a2a1a'; ctx.fillRect(0, gy, W, groundH()); // grass top ctx.fillStyle = '#4ac06a'; ctx.fillRect(0, gy, W, 8); ctx.fillStyle = '#2a8a4a'; ctx.fillRect(0, gy+8, W, 4); // tile lines ctx.fillStyle = 'rgba(0,0,0,.18)'; const off = bg.offset; for (let x=-off; x<W; x+=40) { ctx.fillRect(x, gy+12, 1, groundH()-12); } } // Player: chibi phone-body with glasses & legs // (SUPER mode: gold body + bright screen + red eyes + pulsing aura) function drawPlayer(){ const x = P.x, y = P.y, w = P.w, h = P.h; const sup = P.super; // shadow ctx.fillStyle = sup ? 'rgba(255,142,60,.35)' : 'rgba(0,0,0,.25)'; const sw = P.onGround ? w*0.9 : Math.max(8, w*0.6); ctx.beginPath(); ctx.ellipse(x+w/2, groundY()+4, sw/2, 5, 0, 0, Math.PI*2); ctx.fill(); // SUPER aura (behind body) if (sup) { const cx = x + w/2, cy = y + h/2; const r = 60 + Math.sin(P.auraPhase*2)*10; const aura = ctx.createRadialGradient(cx, cy, 6, cx, cy, r); aura.addColorStop(0, 'rgba(255,245,160,.85)'); aura.addColorStop(0.4, 'rgba(255,215,107,.55)'); aura.addColorStop(0.7, 'rgba(255,142,60,.25)'); aura.addColorStop(1, 'rgba(255,142,60,0)'); ctx.fillStyle = aura; ctx.fillRect(cx-r, cy-r, r*2, r*2); // upward energy spikes ctx.fillStyle = 'rgba(255,245,160,.7)'; for (let i=0;i<5;i++){ const spikeX = cx + Math.cos(P.auraPhase + i*1.3)*(w*0.6); const spikeY = cy - 30 - Math.abs(Math.sin(P.auraPhase*2 + i))*20; ctx.beginPath(); ctx.moveTo(spikeX-2, cy); ctx.lineTo(spikeX, spikeY); ctx.lineTo(spikeX+2, cy); ctx.closePath(); ctx.fill(); } } if (P.deadAnim>0) { ctx.save(); ctx.translate(x+w/2, y+h/2); ctx.rotate((G.t%360)*0.2); ctx.translate(-(x+w/2), -(y+h/2)); } // body (rounded rect like iPhone) — gold in super const bodyFill = sup ? '#ffd76b' : '#f5f5f7'; const bodyStroke = sup ? '#7a3a00' : '#1a1a1a'; roundRect(x, y, w, h, 10, bodyFill, bodyStroke, 2); // screen — bright golden in super roundRect(x+5, y+8, w-10, h-22, 6, sup ? '#fff5a0' : '#0a1a40', null, 0); // notch ctx.fillStyle = sup ? '#7a3a00' : '#0a0a0a'; ctx.fillRect(x+w/2-7, y+8, 14, 4); if (sup) { // SUPER: lightning bolt on screen ctx.fillStyle = '#ff8e3c'; ctx.beginPath(); ctx.moveTo(x+w/2-2, y+14); ctx.lineTo(x+w/2-7, y+24); ctx.lineTo(x+w/2-2, y+24); ctx.lineTo(x+w/2-4, y+34); ctx.lineTo(x+w/2+5, y+22); ctx.lineTo(x+w/2, y+22); ctx.lineTo(x+w/2+2, y+14); ctx.closePath(); ctx.fill(); } else { // normal: glasses (eyes on screen) ctx.fillStyle = '#fff'; ctx.fillRect(x+10, y+20, 8, 8); ctx.fillRect(x+w-18, y+20, 8, 8); ctx.fillStyle = '#000'; ctx.fillRect(x+13, y+22, 4, 4); ctx.fillRect(x+w-15, y+22, 4, 4); // glasses frame ctx.strokeStyle='#222'; ctx.lineWidth=2; ctx.strokeRect(x+9, y+19, 10, 10); ctx.strokeRect(x+w-19, y+19, 10, 10); ctx.beginPath(); ctx.moveTo(x+19,y+24); ctx.lineTo(x+w-19,y+24); ctx.stroke(); } // mouth ctx.fillStyle = sup ? '#fff' : '#ff5e7e'; ctx.fillRect(x+w/2-4, y+34, 8, 3); // home button ctx.fillStyle = sup ? '#fff5a0' : '#ddd'; ctx.beginPath(); ctx.arc(x+w/2, y+h-7, 3, 0, Math.PI*2); ctx.fill(); // legs (run anim or jump pose) ctx.fillStyle = sup ? '#7a3a00' : '#1a1a1a'; if (!P.onGround) { // tucked ctx.fillRect(x+8, y+h-2, 8, 6); ctx.fillRect(x+w-16, y+h-2, 8, 6); } else { const f = Math.floor(P.runFrame); if (f%2===0) { ctx.fillRect(x+6, y+h, 10, 8); ctx.fillRect(x+w-16, y+h+2, 10, 6); } else { ctx.fillRect(x+6, y+h+2, 10, 6); ctx.fillRect(x+w-16, y+h, 10, 8); } } if (P.deadAnim>0) ctx.restore(); } function drawPit(o){ const gh = groundH(); // 1. Dark void with red tint const g = ctx.createLinearGradient(0, o.y, 0, H); g.addColorStop(0, '#3a0510'); g.addColorStop(0.4, '#0a0008'); g.addColorStop(1, '#000'); ctx.fillStyle = g; ctx.fillRect(o.x, o.y, o.w, gh); // 2. Red glow on inner walls const leftGlow = ctx.createLinearGradient(o.x, 0, o.x + 28, 0); leftGlow.addColorStop(0, 'rgba(255,60,90,.5)'); leftGlow.addColorStop(1, 'rgba(255,60,90,0)'); ctx.fillStyle = leftGlow; ctx.fillRect(o.x, o.y, 28, gh); const rightGlow = ctx.createLinearGradient(o.x + o.w - 28, 0, o.x + o.w, 0); rightGlow.addColorStop(0, 'rgba(255,60,90,0)'); rightGlow.addColorStop(1, 'rgba(255,60,90,.5)'); ctx.fillStyle = rightGlow; ctx.fillRect(o.x + o.w - 28, o.y, 28, gh); // 3. Hazard stripes at top edge (animated diagonal yellow/black) ctx.save(); ctx.beginPath(); ctx.rect(o.x, o.y - 6, o.w, 14); ctx.clip(); ctx.fillStyle = '#1a1a1a'; ctx.fillRect(o.x, o.y - 6, o.w, 14); ctx.fillStyle = '#ffd76b'; const stripeOffset = (G.t * 1.4) % 28; for (let x = o.x - 28 - stripeOffset; x < o.x + o.w + 28; x += 28) { ctx.beginPath(); ctx.moveTo(x, o.y - 6); ctx.lineTo(x + 14, o.y - 6); ctx.lineTo(x + 28, o.y + 8); ctx.lineTo(x + 14, o.y + 8); ctx.closePath(); ctx.fill(); } ctx.restore(); // 4. Electric sparks rising from below (animated) for (let i = 0; i < 4; i++) { const phase = ((G.t * 0.04) + i * 0.27) % 1; const sx = o.x + 18 + ((i * 41 + Math.floor(G.t * 0.3)) % Math.max(8, o.w - 36)); const sy = o.y + gh - phase * (gh - 20); const op = Math.sin(phase * Math.PI); ctx.fillStyle = `rgba(255,160,200,${op})`; ctx.fillRect(sx, sy, 2, 7); ctx.fillStyle = `rgba(255,255,255,${op * 0.9})`; ctx.fillRect(sx, sy, 1, 3); } // 5. Pulsing ⚠ warning icon const pulse = 0.55 + Math.sin(G.t * 0.18) * 0.4; ctx.fillStyle = `rgba(255,80,80,${pulse})`; ctx.font = 'bold 22px sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('⚠', o.x + o.w / 2, o.y + 36); ctx.textBaseline = 'alphabetic'; } function drawStorage(o){ // storage-full box: gray with red ! mark roundRect(o.x, o.y, o.w, o.h, 4, '#9aa0a8', '#3a3a3a', 2); ctx.fillStyle = '#ff3b30'; ctx.font = 'bold 26px sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle'; ctx.fillText('!', o.x+o.w/2, o.y+o.h/2+1); ctx.fillStyle='#fff'; ctx.font = 'bold 8px sans-serif'; ctx.fillText('FULL', o.x+o.w/2, o.y+o.h-6); } function drawVirus(o){ const bob = Math.sin(o.anim)*2; // body ctx.fillStyle = '#7a3aff'; ctx.beginPath(); ctx.arc(o.x+o.w/2, o.y+o.h/2+bob, o.w/2, 0, Math.PI*2); ctx.fill(); // spikes ctx.strokeStyle='#7a3aff'; ctx.lineWidth=3; for (let i=0;i<8;i++){ const a = i*Math.PI/4 + o.anim*0.3; const r = o.w/2; const x1 = o.x+o.w/2 + Math.cos(a)*r; const y1 = o.y+o.h/2+bob + Math.sin(a)*r; const x2 = o.x+o.w/2 + Math.cos(a)*(r+5); const y2 = o.y+o.h/2+bob + Math.sin(a)*(r+5); ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2); ctx.stroke(); } // eyes ctx.fillStyle='#fff'; ctx.fillRect(o.x+10, o.y+12+bob, 5,5); ctx.fillRect(o.x+o.w-15, o.y+12+bob, 5,5); ctx.fillStyle='#000'; ctx.fillRect(o.x+12, o.y+14+bob, 2,3); ctx.fillRect(o.x+o.w-13, o.y+14+bob, 2,3); } function drawCable(it){ const f = Math.sin(it.anim)*3; ctx.save(); ctx.translate(it.x+12, it.y+12+f); // glow const gl = ctx.createRadialGradient(0,0,2,0,0,18); gl.addColorStop(0,'rgba(255,215,107,.7)'); gl.addColorStop(1,'rgba(255,215,107,0)'); ctx.fillStyle = gl; ctx.fillRect(-18,-18,36,36); // lightning bolt ctx.fillStyle = '#ffd76b'; ctx.strokeStyle = '#5a2a00'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(-2,-10); ctx.lineTo(-8,2); ctx.lineTo(-1,2); ctx.lineTo(-3,10); ctx.lineTo(8,-3); ctx.lineTo(1,-3); ctx.lineTo(3,-10); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); } function drawGem(it){ const f = Math.sin(it.anim)*3; ctx.save(); ctx.translate(it.x+14, it.y+14+f); const gl = ctx.createRadialGradient(0,0,2,0,0,22); gl.addColorStop(0,'rgba(255,94,126,.8)'); gl.addColorStop(1,'rgba(255,94,126,0)'); ctx.fillStyle = gl; ctx.fillRect(-22,-22,44,44); ctx.fillStyle = '#ff5e7e'; ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0,-12); ctx.lineTo(11,0); ctx.lineTo(0,12); ctx.lineTo(-11,0); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.fillStyle='rgba(255,255,255,.6)'; ctx.fillRect(-4,-6,3,5); ctx.restore(); } function roundRect(x,y,w,h,r,fill,stroke,lw){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.lineTo(x+w-r,y); ctx.quadraticCurveTo(x+w,y,x+w,y+r); ctx.lineTo(x+w,y+h-r); ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h); ctx.lineTo(x+r,y+h); ctx.quadraticCurveTo(x,y+h,x,y+h-r); ctx.lineTo(x,y+r); ctx.quadraticCurveTo(x,y,x+r,y); ctx.closePath(); if (fill){ ctx.fillStyle = fill; ctx.fill(); } if (stroke){ ctx.strokeStyle = stroke; ctx.lineWidth = lw||1; ctx.stroke(); } } // ----- Main loop ----- function loop(){ update(); draw(); requestAnimationFrame(loop); } loop(); // ----- Render legend sprites on title ----- function renderLegend(){ document.querySelectorAll('.legend canvas').forEach(c => { const lc = c.getContext('2d'); lc.clearRect(0,0,c.width,c.height); const kind = c.dataset.kind; // Use the same drawing primitives but on this small canvas. // Save main ctx, swap, draw, restore. const oldCtx = ctx; // Hot-swap by closure: rewrite local ctx is not trivial. Instead inline mini-draws. const cx = lc; cx.imageSmoothingEnabled = false; const t = performance.now()/300; if (kind==='super') { // Gold phone with aura cx.save(); cx.translate(44,44); const auraR = 38 + Math.sin(t*2)*4; const aura = cx.createRadialGradient(0,0,5,0,0,auraR); aura.addColorStop(0,'rgba(255,245,160,.85)'); aura.addColorStop(0.5,'rgba(255,215,107,.45)'); aura.addColorStop(1,'rgba(255,142,60,0)'); cx.fillStyle = aura; cx.fillRect(-auraR,-auraR,auraR*2,auraR*2); // mini phone body cx.fillStyle='#ffd76b'; cx.strokeStyle='#7a3a00'; cx.lineWidth=2; const pw=22, ph=30; cx.fillRect(-pw/2,-ph/2,pw,ph); cx.strokeRect(-pw/2,-ph/2,pw,ph); // bright screen cx.fillStyle='#fff5a0'; cx.fillRect(-pw/2+3,-ph/2+5,pw-6,ph-10); // lightning cx.fillStyle='#ff8e3c'; cx.beginPath(); cx.moveTo(-1,-9); cx.lineTo(-5,0); cx.lineTo(-1,0); cx.lineTo(-3,7); cx.lineTo(4,-2); cx.lineTo(0,-2); cx.lineTo(2,-9); cx.closePath(); cx.fill(); cx.restore(); } else if (kind==='cable') { const f = Math.sin(t)*4; cx.save(); cx.translate(44, 44+f); const gl = cx.createRadialGradient(0,0,3,0,0,30); gl.addColorStop(0,'rgba(255,215,107,.7)'); gl.addColorStop(1,'rgba(255,215,107,0)'); cx.fillStyle = gl; cx.fillRect(-30,-30,60,60); cx.fillStyle='#ffd76b'; cx.strokeStyle='#5a2a00'; cx.lineWidth=2; cx.beginPath(); cx.moveTo(-3,-18); cx.lineTo(-14,4); cx.lineTo(-2,4); cx.lineTo(-5,18); cx.lineTo(14,-5); cx.lineTo(2,-5); cx.lineTo(5,-18); cx.closePath(); cx.fill(); cx.stroke(); cx.restore(); } else if (kind==='gem') { cx.save(); cx.translate(44,44); const gl = cx.createRadialGradient(0,0,3,0,0,36); gl.addColorStop(0,'rgba(255,94,126,.8)'); gl.addColorStop(1,'rgba(255,94,126,0)'); cx.fillStyle = gl; cx.fillRect(-36,-36,72,72); cx.fillStyle='#ff5e7e'; cx.strokeStyle='#fff'; cx.lineWidth=3; cx.beginPath(); cx.moveTo(0,-22); cx.lineTo(20,0); cx.lineTo(0,22); cx.lineTo(-20,0); cx.closePath(); cx.fill(); cx.stroke(); cx.fillStyle='rgba(255,255,255,.7)'; cx.fillRect(-7,-12,5,8); cx.restore(); } else if (kind==='storage') { // rounded rect const x=22,y=22,w=44,h=50,r=6; cx.fillStyle='#9aa0a8'; cx.strokeStyle='#3a3a3a'; cx.lineWidth=3; cx.beginPath(); cx.moveTo(x+r,y); cx.lineTo(x+w-r,y); cx.quadraticCurveTo(x+w,y,x+w,y+r); cx.lineTo(x+w,y+h-r); cx.quadraticCurveTo(x+w,y+h,x+w-r,y+h); cx.lineTo(x+r,y+h); cx.quadraticCurveTo(x,y+h,x,y+h-r); cx.lineTo(x,y+r); cx.quadraticCurveTo(x,y,x+r,y); cx.closePath(); cx.fill(); cx.stroke(); cx.fillStyle='#ff3b30'; cx.font='bold 32px sans-serif'; cx.textAlign='center'; cx.textBaseline='middle'; cx.fillText('!', x+w/2, y+h/2-2); cx.fillStyle='#fff'; cx.font='bold 9px sans-serif'; cx.fillText('FULL', x+w/2, y+h-8); } else if (kind==='virus') { const bob = Math.sin(t*1.4)*2; cx.fillStyle='#7a3aff'; cx.beginPath(); cx.arc(44, 44+bob, 18, 0, Math.PI*2); cx.fill(); cx.strokeStyle='#7a3aff'; cx.lineWidth=3; for (let i=0;i<8;i++){ const a = i*Math.PI/4 + t*0.4; const x1 = 44+Math.cos(a)*18, y1=44+bob+Math.sin(a)*18; const x2 = 44+Math.cos(a)*26, y2=44+bob+Math.sin(a)*26; cx.beginPath(); cx.moveTo(x1,y1); cx.lineTo(x2,y2); cx.stroke(); } cx.fillStyle='#fff'; cx.fillRect(36,38+bob,5,5); cx.fillRect(48,38+bob,5,5); cx.fillStyle='#000'; cx.fillRect(38,40+bob,2,3); cx.fillRect(50,40+bob,2,3); } else if (kind==='pit') { // ground with hole cx.fillStyle='#3a2a1a'; cx.fillRect(0,52,88,36); cx.fillStyle='#4ac06a'; cx.fillRect(0,52,88,5); cx.fillStyle='#2a8a4a'; cx.fillRect(0,57,88,3); // hole const grd = cx.createLinearGradient(0,52,0,88); grd.addColorStop(0,'#0a0a1a'); grd.addColorStop(1,'#000'); cx.fillStyle = grd; cx.fillRect(20, 52, 48, 36); // battery icon cx.fillStyle='#ff5e7e'; cx.font='bold 18px sans-serif'; cx.textAlign='center'; cx.textBaseline='middle'; cx.fillText('🪫', 44, 70); // arrow hint above cx.fillStyle='#fff'; cx.font='bold 16px sans-serif'; cx.fillText('↑', 44, 30); } }); } // animate legend lightly setInterval(renderLegend, 100); renderLegend(); function backToHome(){ document.getElementById('over').classList.remove('show'); document.getElementById('hud').style.display='none'; document.getElementById('title').style.display='flex'; document.getElementById('helpBtn').style.display='block'; G.state = 'title'; document.getElementById('hs').textContent = G.bestM; } // ----- UI bindings ----- document.getElementById('hs').textContent = G.bestM; // version display (title + help modal) const verText = `${VERSION} ・ ${BUILD_DATE}`; document.getElementById('versionTag').textContent = verText; document.getElementById('versionTagTitle').textContent = verText; document.getElementById('startBtn').addEventListener('click', start); document.getElementById('retryBtn').addEventListener('click', () => { document.getElementById('over').classList.remove('show'); start(); }); document.getElementById('homeBtn').addEventListener('click', backToHome); document.getElementById('tiktokBtn').addEventListener('click', () => { window.open(TIKTOK_VIDEO_URL, '_blank'); }); document.getElementById('profileBtn').addEventListener('click', () => { window.open(TIKTOK_PROFILE_URL, '_blank'); }); document.getElementById('helpBtn').addEventListener('click', () => { document.getElementById('help').classList.add('show'); }); document.getElementById('helpCloseBtn').addEventListener('click', () => { document.getElementById('help').classList.remove('show'); }); document.getElementById('help').addEventListener('click', (e) => { if (e.target.id === 'help') document.getElementById('help').classList.remove('show'); }); // resize player x on resize window.addEventListener('resize', ()=>{ P.x = Math.max(60, W*0.18); if (G.state!=='play') P.y = groundY()-P.h; }); })(); </script> </body> </html> ">
メニュー
ホーム
18 Pro
安く買う
通信費診断
閉じる