TRPG

ピンボール

<!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>

パックマン

コメントを残す

<!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:#000; color:#fff; font-family:monospace; overflow:hidden; touch-action:none; user-select:none; display:flex; flex-direction:column; align-items:center; }
 canvas { display:block; background:#000; border:2px solid #1919A6; margin-top:10px; max-width:100%; }
 #ui { width:100%; max-width:420px; text-align:center; font-size:20px; font-weight:bold; margin-top:5px; }
 #overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,0.85); border:2px solid #fff; padding:20px; text-align:center; cursor:pointer; width:80%; max-width:300px; z-index:10; }
 .blink { animation:f 1s infinite; } @keyframes f { 50%{opacity:0} }
 #pad { display:none; position:relative; width:100%; max-width:300px; height:120px; margin-top:10px; }
 .btn { position:absolute; width:50px; height:50px; background:rgba(255,255,255,0.2); border:2px solid #fff; border-radius:50%; font-size:24px; display:flex; justify-content:center; align-items:center; }
 @media(max-width:600px){ #pad{display:block;} }
</style>
</head>
<body>
<div id="ui">SCORE: <span id="sc">0</span></div>
<div style="position:relative;">
 <canvas id="cv" width="420" height="460"></canvas>
 <div id="overlay" onclick="start()"><p class="blink" id="msg">CLICK TO START</p></div>
</div>
<div id="pad">
 <div class="btn" style="top:0;left:50%;transform:translate(-50%,0)" ontouchstart="md(0,-1,event)">↑</div>
 <div class="btn" style="bottom:0;left:50%;transform:translate(-50%,0)" ontouchstart="md(0,1,event)">↓</div>
 <div class="btn" style="top:50%;left:0;transform:translate(0,-50%)" ontouchstart="md(-1,0,event)">←</div>
 <div class="btn" style="top:50%;right:0;transform:translate(0,-50%)" ontouchstart="md(1,0,event)">→</div>
</div>
<script>
var cv=document.getElementById('cv'), ctx=cv.getContext('2d');
var scEl=document.getElementById('sc'), ov=document.getElementById('overlay'), msg=document.getElementById('msg');
var S=20, W=21, H=23;
var st=0, sc=0, dots=0, pt=0, fr=0;
var map=[], pac={}, gh=[];

// 1:壁 0:エサ 2:空 3:パワー 9:ワープ
// 数字配列ならWPに壊されない
var M=[
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,3,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,3,1],
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,1],
[1,0,1,1,1,1,0,1,1,1,1,1,0,1,1,1,1,0,1,1],
[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,1,1],
[1,0,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0,0,0,1],
[1,1,1,1,0,1,1,1,2,1,2,1,1,1,0,1,1,1,1,1],
[9,2,2,2,0,1,2,2,2,2,2,2,2,1,0,2,2,2,2,9],
[1,1,1,1,0,1,2,1,1,2,1,1,2,1,0,1,1,1,1,1],
[1,0,0,0,0,0,0,1,2,2,2,1,0,0,0,0,0,0,0,1],
[1,0,1,1,0,1,0,1,1,1,1,1,0,1,0,1,1,0,1,1],
[1,0,0,1,0,1,0,0,0,0,0,0,0,1,0,1,0,0,0,1],
[1,1,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,1,1,1],
[1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1],
[1,0,1,1,1,1,1,1,0,1,0,1,1,1,1,1,1,0,1,1],
[1,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];
// 行数が足りない分を補完
while(M.length<H) M.push(M[0]);

function start(){
 if(st===1)return;
 st=1; sc=0; pt=0; fr=0;
 ov.style.display='none';
 init(); loop();
}

function loop(){
 if(!st)return;
 requestAnimationFrame(loop);
 fr++;

// Pacman
 if(fr%5===0){
  var nx=pac.x+pac.nd.x, ny=pac.y+pac.nd.y;
  if(!isW(nx,ny)) pac.d=pac.nd;
  nx=pac.x+pac.d.x; ny=pac.y+pac.d.y;
  if(nx<0)nx=W-1; else if(nx>=W)nx=0; // Warp
  if(!isW(nx,ny)){
   pac.x=nx; pac.y=ny;
   pac.m+=pac.ms; if(pac.m>1||pac.m<0)pac.ms*=-1;
   var t=map[ny][nx];
   if(t===0){ map[ny][nx]=2; sc+=10; dots--; }
   if(t===3){ map[ny][nx]=2; sc+=50; dots--; pt=300; gh.forEach(function(g){g.e=true}); }
   if(dots===0) end('CLEAR!');
  }
 }

// Ghost
 gh.forEach(function(g){
  if(fr%(g.e?15:10)!==0)return;
  var dirs=[{x:0,y:-1},{x:0,y:1},{x:-1,y:0},{x:1,y:0}];
  var ok=[];
  for(var i=0;i<4;i++){
   var d=dirs[i];
   if(d.x===-g.d.x&&d.y===-g.d.y)continue;
   if(!isW(g.x+d.x,g.y+d.y)) ok.push(d);
  }
  if(ok.length===0) ok.push({x:-g.d.x, y:-g.d.y});
  if(ok.length>0){
   if(g.e) g.d=ok[Math.floor(Math.random()*ok.length)];
   else {
    ok.sort(function(a,b){
     return (Math.abs((g.x+a.x)-pac.x)+Math.abs((g.y+a.y)-pac.y)) -
            (Math.abs((g.x+b.x)-pac.x)+Math.abs((g.y+b.y)-pac.y));
    });
    g.d=(Math.random()<0.75)?ok[0]:ok[Math.floor(Math.random()*ok.length)];
   }
   g.x+=g.d.x; g.y+=g.d.y;
   if(g.x<0)g.x=W-1; else if(g.x>=W)g.x=0;
  }
 });

if(pt>0){ pt--; if(pt===0)gh.forEach(function(g){g.e=false}); }

// Collision
 gh.forEach(function(g){
  if(g.x===pac.x && g.y===pac.y){
   if(g.e){ g.x=g.ox; g.y=g.oy; g.e=false; sc+=200; }
   else end('GAME OVER');
  }
 });

draw(); scEl.textContent=sc;
}

function isW(x,y){
 if(x<0||x>=W)return false;
 if(y<0||y>=H)return true;
 return map[y][x]===1;
}

gh.forEach(function(g){
  var gx=g.x*S, gy=g.y*S;
  ctx.fillStyle=g.e?(pt<60&&fr%10<5?'#fff':'#00f'):g.c;
  ctx.beginPath(); ctx.arc(gx+10,gy+10,9,Math.PI,0);
  for(var i=0;i<3;i++) ctx.lineTo(gx+19-i*6.3, gy+19);
  ctx.lineTo(gx+1,gy+19); ctx.fill();
 });
}