【初心者向け】JavaScriptでシンプルなテトリス（ワンブロック）を作ろう｜完成コード＆完全解説

シンプルなテトリス ゲーム制作入門
2026.01.09

JavaScriptでゲームを作ってみたいと思ったことはありませんか。
でも、

  • 難しそうで何から始めればいいか分からない
  • 作り始めても途中で動かなくなって挫折した
  • サンプルコードをコピペしただけで終わってしまった

そんな経験がある方も多いと思います。

この記事では、とにかくシンプルなテトリスを題材にして、
「最後まで動くゲームを完成させる」ことを目標にします。

難しい理論やライブラリは使いません。
JavaScriptの基本だけで、実際に遊べるゲームを一緒に作っていきましょう。

まずは完成版で遊んでみよう

この記事のコードを使うと、次のようなゲームが完成します。

  • ブロックが上から落ちてくる
  • ← → キーで左右に移動できる
  • ↓ キーで落下を速められる
  • 横一列そろうと消える
  • スコアが増える
  • 上まで詰まるとゲームオーバー

記事を読みながら「今どこを作っているのか」を意識できるよう、
完成イメージを先に確認してから読み進めるのがおすすめです。

下の画像をクリックすると、今回のシンプルテトリスが実際にプレイ出来ます（PC推奨）。

シンプルなテトリス

今回作る「シンプルテトリス」の仕様

今回は初心者向けに、機能をかなり絞っています。

できること

  • 盤面サイズ：10×20
  • ブロック：1マスのみ（ワンブロック）
  • 操作：
    • ← →：左右移動
    • ↓：落下加速
  • 着地したブロックは固定される
  • 横1列がそろうと消える
  • 1ライン消すごとにスコア +10

あえてやらないこと

  • ブロックの回転
  • 複数マスの複雑な形
  • レベルや演出

最初から全部入りのテトリスを作ろうとすると、
ほぼ確実に途中で挫折します。

まずは
「小さく作って、理解できる形で完成させる」
これが一番の近道です。

ファイル構成

今回使うファイルは、たったの3つです。

  • index.html
  • style.css
  • main.js

それぞれ役割を分けることで、
「どこに何を書いているのか」が分かりやすくなります。

HTML：ゲーム画面を作る（index.html）

まずは画面を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>シンプルテトリス（ワンブロック）</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="wrap">
    <h1>シンプルテトリス（ワンブロック）</h1>

    <div class="hud">
      <div>Score: <b id="score">0</b></div>
      <div>Lines: <b id="lines">0</b></div>
      <button id="restart" type="button">Restart</button>
    </div>

    <canvas id="game" width="300" height="600"></canvas>

    <p class="help">操作：← → 移動 / ↓ 落下加速</p>
  </main>

  <script src="main.js"></script>
</body>
</html>

ここで重要なのは canvas 要素です。
この中に、JavaScriptでブロックや盤面を描画します。

また、script タグは bodyの一番下 に置いています。
これは「HTMLが読み込まれてからJavaScriptを実行する」ための、
初心者がつまずきにくい書き方です。

CSS：最低限の見た目を整える（style.css）

次に、見た目を少しだけ整えます。

body{
  margin:0;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background:#0b1020;
  color:#e5e7eb;
}

.wrap{
  max-width:720px;
  margin:0 auto;
  padding:20px;
  text-align:center;
}

canvas{
  background:#111;
  border:2px solid #333;
  border-radius:12px;
  display:block;
  margin:14px auto;
}

.hud{
  display:flex;
  justify-content:center;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
  color:#cbd5e1;
}

button{
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#e5e7eb;
  cursor:pointer;
}

.help{
  color:#94a3b8;
  font-size:13px;
}

黒背景と枠線があるだけで、
それっぽい「ゲーム画面」になります。

CSSはこのくらいで十分です。

JavaScript：ゲームの本体を作る（main.js）

ここからが一番大事な部分です。

盤面を2次元配列で管理する

テトリス系のゲームは、
盤面を 2次元配列 で管理するのが基本です。

const COLS = 10;
const ROWS = 20;
const BLOCK_SIZE = 30;

let board = Array.from(
  { length: ROWS },
  () => Array(COLS).fill(0)
);
  • 0 は空きマス
  • 1 はブロックが置かれているマス

この配列が、ゲームの世界そのものになります。

落下中のブロックを用意する

今回は1マスだけのブロックです。

function spawnBlock() {
  return {
    x: Math.floor(COLS / 2),
    y: 0
  };
}

画面の中央上からスタートさせています。

ブロックを描画する

Canvasに四角形を描くことで、ブロックを表現します。

function drawCell(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(
    x * BLOCK_SIZE,
    y * BLOCK_SIZE,
    BLOCK_SIZE,
    BLOCK_SIZE
  );
}

座標に BLOCK_SIZE を掛けることで、
マス目として表示される仕組みです。

ブロックを落とす仕組み

時間が経つごとに y を1増やせば、
ブロックが下に落ちて見えます。

function canMoveTo(nx, ny) {
  if (nx < 0 || nx >= COLS) return false;
  if (ny < 0 || ny >= ROWS) return false;
  if (board[ny][nx]) return false;
  return true;
}

これで、

  • 画面外に出ない
  • すでに置かれたブロックに重ならない

という判定ができます。

着地したら固定する

下に動けなくなったら、盤面に固定します。

function fixBlock() {
  board[block.y][block.x] = 1;
}

固定後は、新しいブロックを出します。

ラインを消す処理

横一列がすべて 1 なら、その行を消します。

function clearLines() {
  for (let y = ROWS - 1; y >= 0; y--) {
    if (board[y].every(v => v === 1)) {
      board.splice(y, 1);
      board.unshift(Array(COLS).fill(0));
      lines++;
      score += 10;
      y++;
    }
  }
}

これが「テトリスらしさ」の正体です。

キーボード操作

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowLeft") {
    if (canMoveTo(block.x - 1, block.y)) block.x--;
  }
  if (e.key === "ArrowRight") {
    if (canMoveTo(block.x + 1, block.y)) block.x++;
  }
  if (e.key === "ArrowDown") {
    if (canMoveTo(block.x, block.y + 1)) {
      block.y++;
    }
  }
});

キーを押して反応するだけで、
一気に「ゲームを操作している感覚」が出ます。

ゲームオーバー判定

新しいブロックを出した瞬間に、
すでにそこが埋まっていたらゲームオーバーです。

if (board[block.y][block.x]) {
  gameOver = true;
}

これでテトリスとして最低限成立します。

よくある「動かない」原因

初心者がよくつまずくポイントをまとめておきます。

  • main.js の読み込みパスが違う
  • ファイルが別のフォルダにある
  • Consoleにエラーが出ている

動かないときは、
まずブラウザの開発者ツール（Console）を確認しましょう。

次にやってみよう

このシンプルテトリスをベースに、
次のような改造ができます。

  • 落下スピードを徐々に速くする
  • ブロックを2×2にする
  • スコア表示を派手にする
  • 効果音を追加する

まとめ

  • JavaScriptだけでゲームは作れる
  • 完璧を目指さなくていい
  • 小さく作って、理解して、完成させる

それが、ゲーム制作を続ける一番のコツです。

このシンプルテトリスが、
あなたの「最初の1本」になれば嬉しいです。

タイトルとURLをコピーしました