ピンボール

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
 body { margin:0; padding:0; background:#222; color:#fff; font-family:sans-serif; overflow:hidden; touch-action:none; user-select:none; text-align:center; }
 canvas { display:block; margin:0 auto; background:#333; border:4px solid #555; border-radius:4px; max-width:100%; height:auto; }
 #ui { position:absolute; top:10px; left:0; width:100%; pointer-events:none; }
 .score { font-size:32px; font-weight:bold; text-shadow:2px 2px 0 #000; }
 .msg { font-size:16px; margin-top:5px; color:#aaa; text-shadow:1px 1px 0 #000; }
 #overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.8); padding:20px; border:2px solid #fff; cursor:pointer; width:260px; z-index:100; }
 .blink { animation:f 1s infinite; } @keyframes f { 50%{opacity:0} }
 
 /* タッチエリアの定義（ここを修正しました） */
 .touch-zone { position:absolute; bottom:0; width:50%; height:50%; z-index:50; -webkit-tap-highlight-color:rgba(0,0,0,0); }
 #t-left { left:0; }
 #t-right { right:0; }
 
 #plunge-btn { position:absolute; bottom:20px; right:20px; width:70px; height:70px; background:rgba(211, 47, 47, 0.9); border:3px solid #fff; border-radius:50%; display:none; justify-content:center; align-items:center; font-size:14px; font-weight:bold; z-index:60; box-shadow: 0 0 15px rgba(0,0,0,0.8); }
 @media(max-width:600px){ #plunge-btn{display:flex;} }
</style>
</head>
<body>
<div id="ui">
 <div class="score" id="sc">0</div>
 <div class="msg">High Score: <span id="hs">0</span></div>
</div>
<div style="position:relative; width:360px; height:600px; margin:0 auto;">
 <canvas id="cv" width="360" height="600"></canvas>
 <div id="overlay" onclick="start()"><h2 style="margin:0 0 10px;">PINBALL</h2><p class="blink" id="msg">CLICK TO START</p><p style="font-size:12px;margin-top:10px;">[PC] ← →: Flip / Space: Plunge<br>[Mobile] Tap Left/Right Side</p></div>
 
 <div id="t-left" class="touch-zone"></div>
 <div id="t-right" class="touch-zone"></div>
 <div id="plunge-btn">PULL</div>
</div>
<script>
var cv=document.getElementById('cv'), ctx=cv.getContext('2d');
var scEl=document.getElementById('sc'), hsEl=document.getElementById('hs'), ov=document.getElementById('overlay');
var W=360, H=600;
var state='start', score=0, highScore=0;
var ball={x:0,y:0,vx:0,vy:0,r:8};
var gravity=0.25, friction=0.98;
var keys={l:false, r:false, p:false};
var flippers=[], bumpers=[], walls=[];

function start(){
 if(state==='playing')return;
 state='playing';
 ov.style.display='none';
 init();
 loop();
}

function loop(){
 if(state!=='playing')return;
 requestAnimationFrame(loop);
 update();
 draw();
}

function update(){
 var fSpd = 0.25;
 var targetL = keys.l ? flippers[0].shot : flippers[0].rest;
 flippers[0].cur += (targetL - flippers[0].cur) * fSpd;
 var targetR = keys.r ? flippers[1].shot : flippers[1].rest;
 flippers[1].cur += (targetR - flippers[1].cur) * fSpd;

if(!ball.active){
  if(keys.p) ball.vy += 0.4;
  else if(ball.vy > 0) {
   ball.vy = -Math.min(ball.vy, 35);
   ball.active = true;
  }
  if(ball.vy > 35) ball.vy = 35;
  if(!ball.active){
    ball.x = 340;
    ball.y = 580 + ball.vy;
    if(!keys.p && ball.vy <= 0) ball.vy=0; 
  }
 } else {
  ball.vy += gravity;
  ball.vx *= friction;
  ball.vy *= friction;
  ball.x += ball.vx;
  ball.y += ball.vy;
  
  walls.forEach(function(w){ resolveLine(w.x1, w.y1, w.x2, w.y2); });
  
  bumpers.forEach(function(b){
   var dx = ball.x - b.x; dy = ball.y - b.y;
   var dist = Math.sqrt(dx*dx + dy*dy);
   if(dist < ball.r + b.r){
    var nx = dx/dist, ny = dy/dist;
    var v = Math.sqrt(ball.vx*ball.vx + ball.vy*ball.vy);
    ball.vx = nx * (v*1.2 + 2); ball.vy = ny * (v*1.2 + 2);
    ball.x = b.x + nx * (ball.r + b.r + 1); ball.y = b.y + ny * (ball.r + b.r + 1);
    score += b.s; b.flash = 5;
   }
   if(b.flash) b.flash--;
  });

flippers.forEach(function(f, i){
   var x2 = f.x + Math.cos(f.cur) * f.len;
   var y2 = f.y + Math.sin(f.cur) * f.len;
   if(resolveLine(f.x, f.y, x2, y2, true)){
     if((i===0 && keys.l) || (i===1 && keys.r)){
       ball.vy -= 12; ball.vx += (i===0 ? 3 : -3);
     }
   }
  });

if(ball.y > H + 50){
   if(ball.x > 320){
     ball.active = false; ball.vx = 0; ball.vy = 0; ball.x = 340; ball.y = 500;
   } else {
     state='over';
     if(score > highScore) highScore = score;
     ov.style.display='block';
     document.getElementById('msg').innerHTML = 'GAME OVER<br>Score: '+score+'<br><br>CLICK TO RETRY';
     hsEl.textContent = highScore;
   }
  }
 }
 scEl.textContent = score;
}

function resolveLine(x1, y1, x2, y2, isFlip){
 var dx = x2 - x1, dy = y2 - y1;
 var len = Math.sqrt(dx*dx + dy*dy);
 var nx = -dy/len, ny = dx/len;
 var dist = (ball.x - x1)*nx + (ball.y - y1)*ny;
 var dot = (ball.x - x1)*(dx/len) + (ball.y - y1)*(dy/len);
 if(dist < ball.r && dist > -ball.r && dot >= 0 && dot <= len){
  ball.x -= nx * (dist - (dist>0?ball.r:-ball.r));
  ball.y -= ny * (dist - (dist>0?ball.r:-ball.r));
  var vDot = ball.vx * nx + ball.vy * ny;
  ball.vx -= 2 * vDot * nx;
  ball.vy -= 2 * vDot * ny;
  var bounciness = isFlip ? 0.4 : 0.7;
  ball.vx *= bounciness; ball.vy *= bounciness;
  return true;
 }
 return false;
}

// キーボード入力
window.addEventListener('keydown', function(e){
 if(e.key==='ArrowLeft' || e.key==='a') keys.l = true;
 if(e.key==='ArrowRight' || e.key==='d') keys.r = true;
 if(e.key==='ArrowDown' || e.key===' ' || e.key==='s') keys.p = true;
 if(['ArrowUp','ArrowDown',' '].includes(e.key)) e.preventDefault();
});
window.addEventListener('keyup', function(e){
 if(e.key==='ArrowLeft' || e.key==='a') keys.l = false;
 if(e.key==='ArrowRight' || e.key==='d') keys.r = false;
 if(e.key==='ArrowDown' || e.key===' ' || e.key==='s') keys.p = false;
});

// タッチ入力設定 (確実な登録方法に変更)
function bindTouch(id, startFn, endFn){
 var el = document.getElementById(id);
 if(!el) return;
 el.addEventListener('touchstart', function(e){ e.preventDefault(); startFn(); }, {passive:false});
 el.addEventListener('touchend', function(e){ e.preventDefault(); endFn(); }, {passive:false});
}

bindTouch('t-left', function(){ keys.l = true; }, function(){ keys.l = false; });
bindTouch('t-right', function(){ keys.r = true; }, function(){ keys.r = false; });
bindTouch('plunge-btn', function(){ keys.p = true; }, function(){ keys.p = false; });

init(); draw();
</script>
</body>
</html>

レトロワークミュージアム

流行を受け入れられない者の逃げ場所（予定）

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル