WordPressのカスタムHTMLに貼るだけ。1ファイル完結のテトリスを作りました

WordPressのカスタムHTMLブロックに貼るだけで動く、1ファイル完結のテトリスです。

PCならキーボード操作。スマホならタッチボタンで遊べます。
スコア、ライン消去、落下スピードアップ、ゲームオーバー判定も入っています。

ここで遊べます

SCORE

LINES

PC: ←→ 移動 / ↑ 回転 / ↓ ソフトドロップ / Space ハードドロップ

WordPressへの貼り方

投稿または固定ページの編集画面を開く
ブロック追加で「カスタムHTML」を選ぶ
下のコードを全部コピーして貼る
プレビューで動作確認する
問題なければ公開する

操作方法

PC: ← → で移動
PC: ↑ で回転
PC: ↓ でソフトドロップ
PC: Space でハードドロップ
スマホ: 画面下のボタンで操作

コピペ用コード

<div id="attrip-tetris" style="max-width:340px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;text-align:center;color:#e6e6e6;">
  <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px;">
    <div style="text-align:left;line-height:1.2;">
      <div style="font-size:11px;opacity:.6;">SCORE</div>
      <div id="t-score" style="font-size:22px;font-weight:700;">0</div>
    </div>
    <div style="text-align:right;line-height:1.2;">
      <div style="font-size:11px;opacity:.6;">LINES</div>
      <div id="t-lines" style="font-size:22px;font-weight:700;">0</div>
    </div>
  </div>
  <canvas id="t-canvas" width="300" height="600" style="background:#111;border-radius:8px;width:100%;touch-action:none;display:block;"></canvas>
  <div id="t-over" style="display:none;margin-top:10px;font-size:16px;font-weight:700;color:#ff6b6b;">GAME OVER</div>
  <div style="margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:240px;margin-left:auto;margin-right:auto;">
    <button class="t-btn" data-a="left">←</button>
    <button class="t-btn" data-a="rotate">⟳</button>
    <button class="t-btn" data-a="right">→</button>
    <button class="t-btn" data-a="down" style="grid-column:1/4;">↓ Soft Drop</button>
    <button class="t-btn" data-a="drop" style="grid-column:1/4;background:#2563eb;border-color:#2563eb;">⤓ Hard Drop</button>
    <button class="t-btn" data-a="restart" style="grid-column:1/4;">Restart</button>
  </div>
  <p style="font-size:11px;opacity:.5;margin-top:10px;">PC: ←→ 移動 / ↑ 回転 / ↓ ソフトドロップ / Space ハードドロップ</p>
</div>
<style>
#attrip-tetris .t-btn{padding:12px 0;font-size:16px;font-weight:700;color:#e6e6e6;background:#222;border:1px solid #444;border-radius:8px;cursor:pointer;user-select:none;-webkit-user-select:none;}
#attrip-tetris .t-btn:active{background:#333;}
</style>
<script>
(function(){
  var cv=document.getElementById('t-canvas'),ctx=cv.getContext('2d');
  var COLS=10,ROWS=20,B=30;
  var COLORS=[null,'#00f0f0','#0000f0','#f0a000','#f0f000','#00f000','#a000f0','#f00000'];
  var SHAPES=[[],
    [[1,1,1,1]],
    [[2,0,0],[2,2,2]],
    [[0,0,3],[3,3,3]],
    [[4,4],[4,4]],
    [[0,5,5],[5,5,0]],
    [[0,6,0],[6,6,6]],
    [[7,7,0],[0,7,7]]];
  var grid,cur,px,py,score,lines,over,dropT,dropI;

  function newGrid(){var g=[];for(var r=0;r<ROWS;r++){g.push(new Array(COLS).fill(0));}return g;}
  function rndPiece(){var t=1+Math.floor(Math.random()*7);return SHAPES[t].map(function(r){return r.slice();});}
  function spawn(){cur=rndPiece();px=Math.floor((COLS-cur[0].length)/2);py=0;if(collide(px,py,cur)){over=true;document.getElementById('t-over').style.display='block';}}
  function collide(x,y,m){for(var r=0;r<m.length;r++)for(var c=0;c<m[r].length;c++){if(m[r][c]){var nx=x+c,ny=y+r;if(nx<0||nx>=COLS||ny>=ROWS||(ny>=0&&grid[ny][nx]))return true;}}return false;}
  function merge(){for(var r=0;r<cur.length;r++)for(var c=0;c<cur[r].length;c++){if(cur[r][c])grid[py+r][px+c]=cur[r][c];}}
  function rotate(m){var R=m.length,C=m[0].length,n=[];for(var c=0;c<C;c++){n.push([]);for(var r=R-1;r>=0;r--){n[c].push(m[r][c]);}}return n;}
  function clearLines(){var cl=0;for(var r=ROWS-1;r>=0;r--){if(grid[r].every(function(v){return v;})){grid.splice(r,1);grid.unshift(new Array(COLS).fill(0));cl++;r++;}}if(cl){lines+=cl;score+=[0,100,300,500,800][cl];upd();dropI=Math.max(120,500-Math.floor(lines/10)*40);}}
  function upd(){document.getElementById('t-score').textContent=score;document.getElementById('t-lines').textContent=lines;}
  function lock(){merge();clearLines();spawn();}
  function move(dx){if(!collide(px+dx,py,cur))px+=dx;}
  function softDrop(){if(!collide(px,py+1,cur)){py++;}else{lock();}dropT=0;}
  function hardDrop(){while(!collide(px,py+1,cur))py++;lock();dropT=0;}
  function tryRotate(){var n=rotate(cur);for(var k=0;k<3;k++){if(!collide(px-k,py,n)){cur=n;px-=k;return;}if(!collide(px+k,py,n)){cur=n;px+=k;return;}}}
  function draw(){ctx.clearRect(0,0,cv.width,cv.height);for(var r=0;r<ROWS;r++)for(var c=0;c<COLS;c++){if(grid[r][c])cell(c,r,COLORS[grid[r][c]]);}if(!over){for(var r2=0;r2<cur.length;r2++)for(var c2=0;c2<cur[r2].length;c2++){if(cur[r2][c2])cell(px+c2,py+r2,COLORS[cur[r2][c2]]);}}}
  function cell(x,y,col){ctx.fillStyle=col;ctx.fillRect(x*B+1,y*B+1,B-2,B-2);}
  function loop(t){if(!over){if(!dropT)dropT=t;if(t-dropT>dropI){softDrop();}draw();}requestAnimationFrame(loop);}
  function reset(){grid=newGrid();score=0;lines=0;over=false;dropT=0;dropI=500;document.getElementById('t-over').style.display='none';upd();spawn();}

  document.addEventListener('keydown',function(e){if(over&&e.key!=='r')return;if(e.key==='ArrowLeft'){move(-1);e.preventDefault();}else if(e.key==='ArrowRight'){move(1);e.preventDefault();}else if(e.key==='ArrowUp'){tryRotate();e.preventDefault();}else if(e.key==='ArrowDown'){softDrop();e.preventDefault();}else if(e.key===' '){hardDrop();e.preventDefault();}});
  document.querySelectorAll('#attrip-tetris .t-btn').forEach(function(b){b.addEventListener('click',function(){var a=b.getAttribute('data-a');if(a==='restart'){reset();return;}if(over)return;if(a==='left')move(-1);else if(a==='right')move(1);else if(a==='rotate')tryRotate();else if(a==='down')softDrop();else if(a==='drop')hardDrop();});});

  reset();requestAnimationFrame(loop);
})();
</script>