ゲーム

ルール、入力、得点、画面更新を組み合わせる。

JavaScript TypeScript C#C++Rust

最初に作るもの

まずは、ブラウザーで遊べる3択の数当てゲームを作ります。

何を使う？

Unity

C#で2D・3Dのゲームを作る。

Unreal Engine

C++やBlueprintでゲームを作る。

ブラウザーのCanvas

JavaScriptで図形を描き、動かす。

言語はコードを書くためのもの。ライブラリーやフレームワーク、エンジンは制作を助ける道具です。

学ぶ順番

ルールを決める
何をしたら成功か、どの値を覚えるか決める。
関連する基本を読む
入力に反応する
ボタンやキーボードの操作を受け取る。
関連する基本を読む
成功・失敗を判定する
ifで条件を確認する。
関連する基本を読む
画面に結果を出す
得点やメッセージを更新する。
関連する基本を読む

進み方の選択肢

ブラウザーで配る小さなゲーム

JavaScriptで数当てから。図形を動かすならCanvasへ。

JavaScriptの基本文法辞典

Unityで2D・3D

C#の変数・関数・クラスを学んでからUnityのスクリプトへ。

C#の基本文法辞典

Unreal Engineで制作

Blueprintで仕組みを試し、C++で拡張する道もある。

C++の基本文法辞典

1〜3の数当てゲーム

game.htmlに保存し、ブラウザーで開きます。下の完成例でもボタンを押して遊べます。

game.html

<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><title>数当て</title></head>
<body>
  <p>1〜3の数字を当ててください。</p>
  <button data-number="1">1</button>
  <button data-number="2">2</button>
  <button data-number="3">3</button>
  <p id="result"></p>
  <script>
    const answer = Math.floor(Math.random() * 3) + 1;
    const result = document.querySelector("#result");
    document.querySelectorAll("button").forEach(function (button) {
      button.onclick = function () {
        const guess = Number(button.dataset.number);
        if (guess === answer) {
          result.textContent = "正解！";
        } else {
          result.textContent = "もう一度！";
        }
      };
    });
  </script>
</body>
</html>

次に作るもの

残り回数、得点、再挑戦ボタン。慣れたらCanvasでキャラクターを動かします。

ゲームループとは

入力を読む → 状態を変える → 描画する、を繰り返す仕組み。アニメーションにはrequestAnimationFrameなどを使います。

公式の入門資料

ほかの用途を見る JavaScriptの基本から始める

ゲーム