AOYAMA Koji's プログラミングブログ - プログラミングを楽しく体験

【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】プログラミング初心者向け・入門編・基礎編初中級者向けプログラミング解説プログラマー向け実装解説[初心者向けゲーム開発入門]

2026/06/01
【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

 40年以上のゲームプログラミング経験をマンガで可視化。 今回は「ゲームロジック」。 ゲームのルール処理です。 見た目とは別の、ゲーム処理の本体とも言える重要な要素です。
【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門]

プログラミングブログ記事一覧


[PR]

【マンガで感じる】ゲームロジック ~ルール処理~


【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面 XO. OX. XOO 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「次はX(私)!」ダーツ掲げる 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「えいっ!」ダーツ投げる 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (社長)「あああっ!」 壁の盤面(*はOの上にダーツ) X*. OX. XOO 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イベントトリガー[メカ・イベントトリガー]が走る 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面(*はOの上にXが描かれる) X*. OX. XOO *位置強調演出 (社長)「うう…」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「ルール違反は」「やりなおせるようにしてください」涙目 クリスタル「承知しました」おじぎ 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] ゲームロジック ~ルール処理~ 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジックhi (クリスタル)「メカ・ロジック!」「ルール処理をお願い」「指定のマスを確認して」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「指定のマスが埋まっていたら(配置データが0以外なら)」「無視して」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ[メカ・イフ]OK (クリスタル)「指定のマスが空いていたら(配置データが0なら)」「イフに伝えて」「OかXか描いてもらって」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イベントトリガー薄目 (クリスタル)「イベントトリガーは」「マスの番号を伝える先を」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ メカ・ロジック 「イフからロジックに変更して」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「オッケー?」「じゃあ始めるよー」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 壁の盤面(*はOの上にX) X*. OX. XOO メカ・ロジックがメモメモ 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック OKサイン 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「社長、お願いします」 社長「待ってました!」ダーツを持って喜ぶ 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「それっ!」ダーツ投げる 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] (社長)「よし!」 壁の盤面(右が左の上に重なっている・Dはダーツ・数字はうっすら) XO. .X. 012 OX. ..D 345 XOO ... 678 ダーツは今刺さった風エフェクトあり メカ・イベントトリガーは寝ていて触手が反応している 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イベントトリガーが飛び上がる 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イベントトリガー「5」 メカ・ロジック聞いている 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] タブレット(uはundefined) XO. .X. 012 2u0 OXX ... 345 120 XOO ... 678 211 インデックス5に矢印 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック「0」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック走る 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック「5」 メカ・イフ頷く 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イフ走る 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 省略コマ 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面(*はOの上にX) X*. OXX XOO 薄めの強調演出(インデックス5) 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタル「では、次はO(私)ですが」「同じ場所に投げますね」 社長やや不思議な表情 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] クリスタルダーツを投げる 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 壁の盤面(右が左の上に重なっている・Dはダーツ) XO. .X. 012 OXX ..D 345 XOO ... 678 ダーツは今刺さった風エフェクトあり メカ・イベントトリガーは寝ていて触手が反応している 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・イベントトリガー「5」 メカ・ロジック聞いている 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] タブレット(uはundefined) XO. .X. 012 2u0 OXX ... 345 122 XOO ... 678 211 インデックス5に矢印 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック「2」 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] メカ・ロジック首を横に振る 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 盤面(*はOの上にX) X*. OXX XOO 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長納得 【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 社長「すごい!」「これがロジックの力!」大喜び
次のエピソードへ
【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] ゲーム初期化

OXゲーム開発編 第8話:エピソード「ゲームロジック」


 本エピソード「ゲームロジック」は、OXゲーム開発編 第8話です。
 OXゲーム開発編は、OXゲーム(三目並べ・マルバツ)の開発を通じて、ゲームプログラミングの基礎の基礎を解説しています。
 OXゲーム開発編の各エピソードは、それまでのエピソードのマンガ(と解説)を前提としていますので、 もし途中から読み始めた方は、ぜひ最初のエピソード「プログラム」から読み進めてください。

「ゲームロジック」のソースコード例


JavaScript

// 指定マス位置が空いているか(0なら空いている)
if ( 0 === aiSquare[iIndex] ) {
    // 空いていれば今のプレイヤー番号(1か2)を設定
    aiSquare[iIndex] = iPlayerNumber;
    // OかXを描画(以下略)
}

OXゲーム(三目並べ・マルバツ):空いているマスに限定「ゲームロジック」実装検証



[PR]

「ゲームロジック」とは:ルール処理


 「ゲームロジック」の本質「ルール処理」です。
 ゲーム開発では、見た目だけではなく、マンガのように「同じマスは選べない」といった「ルール処理」についても実装し、遊びを制御する必要があります。

ソースコードの仕組み


 今回のプログラムを解説します。

指定マスが空いているか調べる

// 指定マス位置が空いているか(0なら空いている)
if ( 0 === aiSquare[iIndex] ) {
 ここでは iIndex に「マス位置のインデックス(0から8)」が入っています。
 そして aiSquare[iIndex] が、ルール判定用の、すなわちゲームロジック用の内部データとして「配置データ」を保存しています。 既に描かれていればプレイヤー番号(1か2)が、空いていれば0が保持されている仕様です。
 つまり、マンガで2回投げたインデックス5番の内部データは、aiSquare[5] に保存されています。
 その値は、社長がそこに投げる前は 0 のため、if の中の処理に遷移します。
 社長が投げた後では 2 になっています。 そのためクリスタルが投げた処理では、この if が、中の処理を無視します。


空いていれば盤面情報を設定して描画

// 空いていれば今のプレイヤー番号(1か2)を設定
aiSquare[iIndex] = iPlayerNumber;
// OかXを描画(以下略)
 マンガで、インデックス5番に社長が投げた時は、ここに処理が来ます。
 その時点で iPlayerNumber には 2 が入っています。 そのため、このプログラムの処理により、もともと 0 だった aiSquare[5]2 が保持されます。
 この値が設定されることにより、前述の if で、同じ場所に投げられた場合に無視することができるようになります。

「実装検証」で体験しよう


 前記「実装検証」セクションにて、キャンバスをクリックしてみてください。
 OX が描かれます。
 そして、前エピソードの実装検証では何度も同じマスに上書きできましたが、 本実装検証では、それができません。
 ぜひ確認してみてください。

ゲームプログラミングにおける「ゲームロジック」


 ゲームのプログラムは、「プレイヤー操作対応」「グラフィック描画」「サウンド再生」などの要素に加えて、ゲームルールに即した処理も行います。 これがゲームロジックです。

ゲームロジックはゲーム処理の本体


 ゲームロジックは、ゲーム処理の本体とも言える、重要な要素です。
 ゲームの魅力は様々な要素から成り立ちますが、極論すれば、 本質的にゲームが面白いかどうかはゲームロジックが主要因です。 シナリオ・グラフィック・サウンドなどは補助的な要素でしかありません。 ※もちろんゲームジャンルにも寄りますが

ゲームロジックの例


 マンガでは、社長が最初に投げたマスに、既に O が描かれていたものの、 X で上書きするという、ルール違反の問題が発生してしまいました。 これを、ゲームロジックのルール処理を導入して解決しています。
 その他にも、衝突判定、ステージ進行やシナリオ進行など、ゲーム進行遊び全般がゲームロジックです。 キャラクター移動も、内部的にはゲームロジックの処理です。

ゲームロジック用データは別持ち


 一般的に、グラフィックデータサウンドデータなどとゲームロジック用データは、別々に扱います。
 ゲームロジック用データとは、例えばマンガの「マス位置ごとのOXの配置情報」です。 それに基づいてゲームロジックの処理を行います。
 つまり、別の言い方をしますと、そのマスが埋まっているかどうかを判断するために、グラフィックデータを解析していません。
 将来的にはAIを使えば、人間と同様に、画面を見て、あるいは音を聞いてゲームロジックを処理できるかもしれません。 しかし現時点では、別々に扱った方が効率的です。
 むしろ、例えば衝突判定で「見た目(グラフィックデータ)」と「衝突判定用の範囲(ゲームロジック用データ)」を大きく変えることで、気持ち良い遊びに繋げることができたりします。 このあたりは、衝突判定に関する後のエピソードで詳しく解説予定です。

グラフィックやサウンドはゲームロジック用データに基づき生成


 マンガ「OX開発編」のエピソードでは、先にグラフィック描画から進められ、後からゲームロジックの処理が追加されました。
 しかし通常のゲームプログラミングにおいてはデータの流れが逆で、ゲームロジック用の配置情報に基づいて、グラフィック描画の処理をします。 「グラフィック」「サウンド」「テキスト」などは、ゲームロジック用データに基づいて生成されます。
 ゲーム処理の本体は、あくまでもゲームロジックです。

【補足】undefinedについて


 マンガでは、OX の両方がある aiSquare[2]undefined となっていました。
 undefined未定義という意味の英語です。 JavaScript では、値が設定されていない変数などが undefined になります。 ここでは、後からゲームロジック用データを設定したので、この場所は 1(O) でも 2(X) でもないという意図で、このようにしています。
 これは想定外のデータであり、放置すると不具合になります。本来であれば、あってはならないものです。
[PR]

マンガで感じる!本当の基礎から学ぶゲームプログラミングとは


 「マンガで感じる!本当の基礎から学ぶゲームプログラミング」シリーズでは、 主に、ゲーム開発を題材として、プログラミング時に筆者が脳内でイメージするコンピューター内部動作や本質を、マンガにてお伝えします。

プログラミングの本質をマンガで理解


 AI時代のプログラミングは、本質理解が重要です。 本質を理解していれば、あとはAIに任せて、自身を持って完成したプログラムに責任が持てるでしょう。
 そのため本シリーズでは、コーディングの実例や詳細よりも、「本質をイメージとして感じられること」を最優先としています。 まずマンガで、情報をできる限り絞り、プログラミングの仕組みやコンピューターの内部動作を、物理的に可視化してお届けします。
 そして文章の解説で徹底的に深堀りします。

登場人物紹介

【マンガで感じる】ゲームロジック ~ルール処理~ 見た目とは別のゲーム本体【本当の基礎から学ぶゲームプログラミング】[初心者向けゲーム開発入門] 登場人物 社長 クリスタル メカたち  マンガで感じる!本当の基礎から学ぶゲームプログラミングシリーズには、主に社長、クリスタル、およびメカたちが登場します。 ※実在の人物とは関係ありません

社長

 本シリーズの偉い人です。
 マンガでは、指示すなわち「要件定義」を行います。

クリスタル

 社長の指示を、メカを活用して解決します。
 名前は、コンピューター内部で指揮者の役割を果たす「水晶発振器」に由来します。

メカたち

 用途に応じて多数存在し、果たす役割がそれぞれ与えられています。
 クリスタルの指示に従い、ある時はプログラムの変数や関数のように、ある時は電子回路の素子のように振る舞います。

「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にかける想い


 筆者が本シリーズにかける想いや、 より詳しいコンセプトは「マンガで感じる!本当の基礎から学ぶゲームプログラミング」にて語っています。 そちらもぜひご覧ください。

AIを専属の家庭教師にしてゲームロジックを学ぼう


 本エピソードでは、ゲームルールを処理する「ゲームロジック」を解説しました。 ゲームルールはゲーム本体とも言える、遊びにおける重要な要素です。それを処理するゲームロジックも大変重要です。
 マンガを読んで興味が湧いた、解説のこのキーワードが気になった、などあれば、AIを専属の家庭教師に見立てて対話してみましょう。 各人の理解度に応じた質疑応答ができて、理解が深まりますので強くオススメします。
 本エピソードが、ゲームロジックおよびゲームプログラミングの本質理解に少しでもお役に立てれば幸いです。

補足

  • 本記事に記載のプログラムソースコードは、悪意のない範囲で自由に使用・改変していただいて問題ありません。ただし、ご自身の判断と責任でお願いします。
  • 記事内容の検討および検証・添削に生成AIの Anthropic Claude と Google Gemini を利用しております。
  • 記事内の画像の作成に生成AIの Google Gemini を利用しております。
  • 数式表現にMathJaxを使用しております。
  • ※各社の登録商標または商標について「®」「™」等の表記はしておりません。



カテゴリー:マンガで感じる!本当の基礎から学ぶゲームプログラミング,OXゲーム開発編
[PR]