第8回　最後の仕上げ

第8回　HIT＆BLOWを完成させよう

前回は、タイトル画面、ゲーム画面、クリア画面を切り替えられるようにしました。

今回は、60回以内に正解できなかった場合のゲームオーバー画面を追加します。

最後にデバッグ表示を隠し、ゲーム全体を通して確認します。

この回は、第7回終了時点のmain.cppから作業を始めます。

---

このページの進め方

このページでは、読む部分とソースを書き換える部分を分けています。

説明
    仕組みを確認する

STEP ○　ここでソースを書き換える！
    main.cppを実際に変更する

動作確認
    ビルドして実行する

STEPを上から順番に進めてください。
詳しい仕組みは、各STEPの前後にある説明で確認できます。

ソースを書き換える場所は、コード内のここから追加、ここを変更、この部分を削除などのコメントで示します。

---

1．今回の完成状態

正しい4桁を入力して4 HITになると、これまでどおりクリア画面へ移動します。

60回目の正常な判定でも正解できなかった場合は、ゲームオーバー画面へ移動します。

ゲームオーバー画面では、次の内容を表示します。

• gameover.png
• ゲームの正解
• 60回以内に正解できなかったこと
• もう一度遊ぶためのpushstart.png

---

2．60回として数えるのは正常な判定だけ

4桁未満や、同じ数字を含む入力は履歴へ追加されません。

そのため、挑戦回数として数えるのは、正常に判定できた入力だけです。

4桁未満
    → エラー
    → 挑戦回数は増えない

同じ数字を含む
    → エラー
    → 挑戦回数は増えない

重複しない4桁
    → HIT・BLOWを判定
    → 履歴へ追加
    → 挑戦回数が1増える

historyCountは履歴件数であると同時に、正常に判定した回数でもあります。

---

STEP 1　ここでソースを書き換える！

変更する場所：INPUT_DIGIT_COUNTの下とGameScene
確認すること：エラーなくビルドできること

デバッグ表示用の定数を追加する

INPUT_DIGIT_COUNTの下へ追加します。

// ここから追加
// 正解確認用の表示を有効にするか
const bool SHOW_DEBUG_ANSWER = false;
// ここまで追加

値を変更すると、ゲーム中の正解表示を切り替えられます。

値	動作
true	ゲーム中に正解を表示する
false	ゲーム中に正解を表示しない

ゲームとして遊ぶときは、正解が見えないようにfalseにします。

GameSceneへゲームオーバーを追加する

現在の列挙型を次のように変更します。

// ここから変更
enum GameScene
{
    SCENE_TITLE,
    SCENE_PLAY,
    SCENE_CLEAR,
    SCENE_GAMEOVER
};
// ここまで変更

ゲームオーバーを追加すると、画面の切り替えは次のようになります。

現在の画面	切り替わる条件	次の画面
SCENE_TITLE	Push Startをクリックする	SCENE_PLAY
SCENE_PLAY	4 HITになる	SCENE_CLEAR
SCENE_PLAY	4 HITではなく、historyCountが60に達する	SCENE_GAMEOVER
SCENE_CLEAR	Push Startをクリックする	SCENE_PLAY
SCENE_GAMEOVER	Push Startをクリックする	SCENE_PLAY

---

STEP 2　ここでソースを書き換える！

変更する場所：画像ハンドルの宣言とLoadGameImages()
確認すること：エラーなくビルドできること

画像ハンドルを追加する

第7回ではpushStartImageのコメントがタイトル画面とクリア画面だけを表していました。 ゲームオーバー画面でも使うので、まずコメントを次のように変更します。

// このコメントを変更
// タイトル画面、クリア画面、
// ゲームオーバー画面で使うボタン画像
int pushStartImage;

続けて、pushStartImageの下へ追加します。

// ここから追加
// ゲームオーバーを表す画像
int gameOverImage;
// ここまで追加

gameover.pngは、クリックするボタンではありません。

ゲームオーバーになったことを示す画像として表示します。

LoadGameImagesへ追加する

pushStartImageの読み込みとエラー確認の後へ追加します。

// ここから追加
gameOverImage = LoadGraph("images/gameover.png");

if (gameOverImage == -1)
{
    return 1;
}
// ここまで追加

---

3．60回目ではクリアを先に確認する

60回目の判定では、4 HITになったかどうかを先に確認します。

4 HITならクリアです。
4 HITではなく、historyCountが60に達していたらゲームオーバーです。

この教材で使っている、昔のIPA式を参考にした簡略表記で書くと次のようになります。

▲ hit = 4
｜・currentScene ← SCENE_CLEAR
＋---------
｜▲ historyCount ≧ 60
｜｜・currentScene ← SCENE_GAMEOVER
｜＋---------
｜｜・次の入力を始める準備
｜▼
▼

この順番にすることで、60回目で正解した場合はゲームオーバーではなくクリアになります。

---

STEP 3　ここでソースを書き換える！

変更する場所：AddHistory()を呼び出した後
確認すること：エラーなくビルドできること

現在の画面遷移部分を、次の処理へ置き換えます。

// ここから変更
// 4 HITならクリア画面へ移動する
if (hit == INPUT_DIGIT_COUNT)
{
    currentScene = SCENE_CLEAR;
}
// 正解できずに60件へ達したら
// ゲームオーバー画面へ移動する
else if (historyCount >= MAX_HISTORY)
{
    currentScene = SCENE_GAMEOVER;
}
else
{
    // 次の入力を始められるように、
    // 入力欄と表示状態を空にする
    inputCount = 0;
    input[0] = '\0';
    inputError = 0;
    hasResult = false;
}
// ここまで変更

AddHistory()を呼び出した後なので、60回目の結果も履歴へ保存されています。

---

STEP 4　ここでソースを書き換える！

変更する場所：UpdateClear()の後と、共通Update()
確認すること：エラーなくビルドできること

UpdateGameOverを追加する

// ゲームオーバー画面を更新する
void UpdateGameOver(void)
{
    if (!leftClicked)
    {
        return;
    }

    // Push Startボタンをクリックしたか
    if (IsPointInRect(
        mouseX,
        mouseY,
        PUSH_START_BUTTON_X,
        PUSH_START_BUTTON_Y,
        PUSH_START_BUTTON_X + PUSH_START_BUTTON_WIDTH,
        PUSH_START_BUTTON_Y + PUSH_START_BUTTON_HEIGHT))
    {
        StartGame();
    }
}

ゲームオーバー画面でも、クリア画面と同じ位置へPush Startを表示します。

第7回と同じく、UpdateGameOver()も引数を持たず、共通変数のleftClickedを使います。

Updateのswitchへ追加する

// ここから追加
case SCENE_GAMEOVER:
    UpdateGameOver();
    break;
// ここまで追加

---

STEP 5　ここでソースを書き換える！

変更する場所：DrawPlay()
確認すること：完成版のゲーム画面になる

これまでのデバッグ用正解表示を、次の処理へ置き換えます。

// ここから変更
// テスト時だけ正解を表示する
if (SHOW_DEBUG_ANSWER)
{
    DrawFormatString(40, 55, yellow, "デバッグ用正解：%s", answer);
}
// ここまで変更

SHOW_DEBUG_ANSWERがfalseのときは、正解を表示しません。

続けて、残り挑戦回数を表示します。

// ここから追加
DrawFormatString(260, 25, white, "残り：%d回", MAX_HISTORY - historyCount);
// ここまで追加

SHOW_DEBUG_ANSWER	正解表示	使う場面
true	表示する	動作を確認するとき
false	表示しない	ゲームとして遊ぶとき

テストするときだけSHOW_DEBUG_ANSWERをtrueへ変更し、確認が終わったらfalseへ戻します。

---

STEP 6　ここでソースを書き換える！

変更する場所：DrawClear()の後と、共通Draw()
確認すること：ゲームオーバー画面が完成する

DrawGameOverを追加する

gameover.pngは200×45なので、DrawGraph()でそのまま表示します。

// ゲームオーバー画面を描画する
void DrawGameOver(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int gray = GetColor(180, 190, 205);

    DrawGraph(300, 150, gameOverImage, TRUE);

    DrawFormatString(315, 245, white, "正解：%s", answer);

    DrawFormatString(250, 290, white, "%d回以内に正解できませんでした。", MAX_HISTORY);

    DrawString(270, 340, "Push Startでもう一度遊べます。", gray);

    DrawGraph(PUSH_START_BUTTON_X, PUSH_START_BUTTON_Y, pushStartImage, TRUE);
}

gameover.pngとpushstart.pngは、役割の違う画像です。

gameover.png
    ゲームオーバーを知らせる表示

pushstart.png
    新しいゲームを始めるボタン

Drawのswitchへ追加する

// ここから追加
case SCENE_GAMEOVER:
    DrawGameOver();
    break;
// ここまで追加

---

4．ゲームオーバーを短時間でテストする

60回分を手入力して確認するのは大変です。

テスト中だけ、次の定数を3へ変更します。

const int MAX_HISTORY = 3;

重複しない間違った4桁を3回判定し、ゲームオーバー画面へ移動することを確認します。

確認後は必ず60へ戻します。

const int MAX_HISTORY = 60;

配列の大きさもこの定数で決まるため、テスト中は履歴を最大3件まで保存します。

---

5．最終動作確認

タイトル画面

• 起動直後にタイトル画面が表示される
• Push Startでゲーム画面へ移動する
• タイトル画面では数字ボタンを操作できない

入力

• 0から始まる4桁を入力できる
• 4桁を超えて入力できない
• 「入力を消す」で入力を空にできる
• 4桁未満はエラーになる
• 同じ数字を含む入力はエラーになる
• 入力エラーは挑戦回数に含まれない

判定と履歴

• HIT数とBLOW数が正しい
• 正常な判定だけが履歴へ追加される
• 15件目まで1ページ目へ表示される
• 16件目で2ページ目へ移動する
• タブをクリックしてページを切り替えられる
• 同じ履歴番号の入力、HIT、BLOWが対応している

クリア

• SHOW_DEBUG_ANSWERを一時的にtrueへ変更する
• 表示された正解を入力する
• 4 HITでクリア画面へ移動する
• 正解した結果も履歴件数に含まれる
• 挑戦回数が正しい
• Push Startで新しい問題と空の履歴から再開する

ゲームオーバー

• MAX_HISTORYを一時的に3へ変更する
• 間違った正常入力を3回判定する
• ゲームオーバー画面へ移動する
• 正解が表示される
• Push Startで新しいゲームを開始できる
• テスト後にMAX_HISTORYを60へ戻す

完成版の設定

最後に、次の2つを確認します。

const bool SHOW_DEBUG_ANSWER = false;
const int MAX_HISTORY = 60;

---

6．うまく動かない場合

60回目でもゲーム画面のままになる

次を確認します。

• AddHistory()でhistoryCount++しているか
• AddHistory()の後でhistoryCount >= MAX_HISTORYを調べているか
• SCENE_GAMEOVERをUpdate()とDraw()の両方へ追加したか

60回目で正解してもゲームオーバーになる

4 HITの条件を、回数の条件より先に書いているか確認します。

if (hit == INPUT_DIGIT_COUNT)
{
    currentScene = SCENE_CLEAR;
}
else if (historyCount >= MAX_HISTORY)
{
    currentScene = SCENE_GAMEOVER;
}

ゲームオーバー画像を押しても再開しない

gameover.pngはボタンではありません。

再開するときは、下に表示されているpushstart.pngをクリックします。

テスト後も正解が見えている

次の値をfalseへ戻します。

const bool SHOW_DEBUG_ANSWER = false;

3回でゲームオーバーになる

テスト後に、次の値を60へ戻したか確認します。

const int MAX_HISTORY = 60;

---

7．プログラム全体

完成したmain.cppは、次のようになります。

#include "DxLib.h"

#include <ctype.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>

// 画面の大きさ
const int SCREEN_WIDTH = 800;
const int SCREEN_HEIGHT = 600;

// ゲーム内部を1秒間に更新する回数
const int UPDATE_FPS = 60;

// Update1回分の時間
const double FIXED_DELTA_TIME = 1.0 / UPDATE_FPS;

// 長時間処理が止まった場合に、
// 一度に処理する経過時間の上限
const double MAX_FRAME_TIME = 0.25;

// HIT＆BLOWで使用する数字の数
const int NUMBER_COUNT = 10;

// 入力する桁数
const int INPUT_DIGIT_COUNT = 4;
// ===== 【第8回で追加・変更】正解のデバッグ表示を切り替える定数を追加 ここから =====

// 正解確認用の表示を有効にするか
const bool SHOW_DEBUG_ANSWER = false;
// ===== 【第8回で追加・変更】正解のデバッグ表示を切り替える定数を追加 ここまで =====

// 入力欄の配置
const int INPUT_START_X = 50;
const int INPUT_START_Y = 110;
const int INPUT_IMAGE_SIZE = 80;
const int INPUT_IMAGE_GAP = 10;

// 数字ボタンの配置
const int NUMBER_BUTTON_START_X = 30;
const int NUMBER_BUTTON_START_Y = 335;
const int NUMBER_BUTTON_SIZE = 70;
const int NUMBER_BUTTON_GAP = 8;
const int NUMBER_BUTTON_COLUMNS = 5;

// 判定ボタンの配置
const int JUDGE_BUTTON_X = 120;
const int JUDGE_BUTTON_Y = 510;
const int JUDGE_BUTTON_WIDTH = 200;
const int JUDGE_BUTTON_HEIGHT = 46;


// 解答履歴の最大件数
const int MAX_HISTORY = 60;

// 1ページに表示する履歴の件数
const int HISTORY_PER_PAGE = 15;

// 履歴ページの数
const int HISTORY_PAGE_COUNT = 4;

// 解答履歴欄の配置
const int HISTORY_START_X = 470;
const int HISTORY_TAB_Y = 60;
const int HISTORY_TAB_WIDTH = 78;
const int HISTORY_TAB_HEIGHT = 36;
const int HISTORY_TABLE_Y = 100;
const int HISTORY_TABLE_WIDTH = 312;
const int HISTORY_HEADER_HEIGHT = 28;
const int HISTORY_ROW_HEIGHT = 26;

// Push Startボタンの配置
const int PUSH_START_BUTTON_X = 300;
const int PUSH_START_BUTTON_Y = 390;
const int PUSH_START_BUTTON_WIDTH = 200;
const int PUSH_START_BUTTON_HEIGHT = 45;

// 現在表示している画面
enum GameScene
{
    SCENE_TITLE,
    SCENE_PLAY,
    // ===== 【第8回で追加・変更】ゲームオーバー状態を追加 ここから =====
    SCENE_CLEAR,
    SCENE_GAMEOVER
    // ===== 【第8回で追加・変更】ゲームオーバー状態を追加 ここまで =====
};

// 現在の画面
GameScene currentScene;

// ゲームの正解
char answer[5];

// プレイヤーの入力
char input[5];

// 現在入力されている桁数
int inputCount;

// 入力内容のエラー番号
int inputError;

// 判定結果
int hit;
int blow;

// 判定結果を表示できる状態か
bool hasResult;

// 入力した4桁の履歴
char historyInput[MAX_HISTORY][INPUT_DIGIT_COUNT + 1];

// HIT数の履歴
int historyHit[MAX_HISTORY];

// BLOW数の履歴
int historyBlow[MAX_HISTORY];

// 現在保存されている履歴の件数
int historyCount;

// 現在表示している履歴ページ
int currentHistoryPage;

// マウスカーソルの座標
int mouseX;
int mouseY;

// 1回前のUpdateで取得したマウス状態
int previousMouseInput;

// 左ボタンをクリックした瞬間か
bool leftClicked;

// 右ボタンをクリックした瞬間か
bool rightClicked;

// 0～9の数字ボタン画像
int numberImages[NUMBER_COUNT];

// 入力欄へ表示する0～9の画像
int displayNumberImages[NUMBER_COUNT];

// 未入力の桁に表示する画像
int blankImage;

// 判定ボタン画像
int judgeImage;

// ===== 【第8回で追加・変更】ゲームオーバー画像のハンドルを追加 ここから =====
// タイトル画面、クリア画面、
// ゲームオーバー画面で使うボタン画像
int pushStartImage;

// ゲームオーバーを表す画像
int gameOverImage;
// ===== 【第8回で追加・変更】ゲームオーバー画像のハンドルを追加 ここまで =====

// 選択中の履歴タブ画像
int activeTabImages[HISTORY_PAGE_COUNT];

// 選択されていない履歴タブ画像
int inactiveTabImages[HISTORY_PAGE_COUNT];

// 画像の読み込み結果
int imageLoadError;


// 重複しない4桁の問題を作る
void MakeProblem(char outputAnswer[5])
{
    char temp[] = "0123456789";
    int i;

    for (i = 0; i < 100; i++)
    {
        int index1 = rand() % 10;
        int index2 = rand() % 10;
        char work;

        work = temp[index1];
        temp[index1] = temp[index2];
        temp[index2] = work;
    }

    for (i = 0; i < 4; i++)
    {
        outputAnswer[i] = temp[i];
    }

    outputAnswer[4] = '\0';
}

// 入力内容に問題がないか確認する
int CheckAnswerError(char inputData[])
{
    int i;
    int j;

    // 4桁か確認する
    if (strlen(inputData) != 4)
    {
        return 1;
    }

    // すべて数字か確認する
    for (i = 0; i < 4; i++)
    {
        if (!isdigit((unsigned char)inputData[i]))
        {
            return 2;
        }
    }

    // 同じ数字が含まれていないか確認する
    for (i = 0; i < 4; i++)
    {
        for (j = i + 1; j < 4; j++)
        {
            if (inputData[i] == inputData[j])
            {
                return 3;
            }
        }
    }

    return 0;
}

// HIT数を数える
int CountHit(char correctAnswer[], char inputData[])
{
    int count = 0;
    int i;

    for (i = 0; i < 4; i++)
    {
        if (correctAnswer[i] == inputData[i])
        {
            count++;
        }
    }

    return count;
}

// BLOW数を数える
int CountBlow(char correctAnswer[], char inputData[])
{
    int count = 0;
    int i;
    int j;

    for (i = 0; i < 4; i++)
    {
        for (j = 0; j < 4; j++)
        {
            if (inputData[i] == correctAnswer[j] && i != j)
            {
                count++;
            }
        }
    }

    return count;
}

// ゲームで使用する画像を読み込む
int LoadGameImages(void)
{
    char fileName[64];
    int i;

    // 0～9の画像を読み込む
    for (i = 0; i < NUMBER_COUNT; i++)
    {
        // 青い数字ボタンのファイル名を作る
        sprintf_s(fileName, sizeof(fileName), "images/%d.png", i);

        numberImages[i] = LoadGraph(fileName);

        if (numberImages[i] == -1)
        {
            return 1;
        }

        // 緑色の数字画像のファイル名を作る
        sprintf_s(fileName, sizeof(fileName), "images/%d%d.png", i, i);

        displayNumberImages[i] = LoadGraph(fileName);

        if (displayNumberImages[i] == -1)
        {
            return 1;
        }
    }

    // 未入力の桁に表示する画像を読み込む
    blankImage = LoadGraph("images/kome.png");

    if (blankImage == -1)
    {
        return 1;
    }

    // 判定ボタン画像を読み込む
    judgeImage = LoadGraph("images/judge.png");

    if (judgeImage == -1)
    {
        return 1;
    }

    pushStartImage = LoadGraph("images/pushstart.png");

    if (pushStartImage == -1)
    {
        return 1;
    }

    // ===== 【第8回で追加・変更】ゲームオーバー画像を読み込む ここから =====
    gameOverImage = LoadGraph("images/gameover.png");

    if (gameOverImage == -1)
    {
        return 1;
    }

    // ===== 【第8回で追加・変更】ゲームオーバー画像を読み込む ここまで =====
    // 履歴ページのタブ画像を読み込む
    for (i = 0; i < HISTORY_PAGE_COUNT; i++)
    {
        sprintf_s(fileName, sizeof(fileName), "images/tab%d.png", i + 1);

        activeTabImages[i] = LoadGraph(fileName);

        if (activeTabImages[i] == -1)
        {
            return 1;
        }

        sprintf_s(fileName, sizeof(fileName), "images/tab%da.png", i + 1);

        inactiveTabImages[i] = LoadGraph(fileName);

        if (inactiveTabImages[i] == -1)
        {
            return 1;
        }
    }

    return 0;
}

// 点が長方形の中にあるか調べる
bool IsPointInRect(int pointX, int pointY, int left, int top, int right, int bottom)
{
    return left <= pointX && pointX < right && top <= pointY && pointY < bottom;
}

// 入力中の4桁をすべて消す
void ClearInput(void)
{
    inputCount = 0;
    input[0] = '\0';

    inputError = 0;
    hit = 0;
    blow = 0;
    hasResult = false;
}

// 新しいゲームを始める
void StartGame(void)
{
    // 新しい正解を作る
    MakeProblem(answer);

    // 入力欄と判定結果を空にする
    ClearInput();

    // 解答履歴を空にする
    historyCount = 0;
    currentHistoryPage = 0;

    // ゲーム画面へ移動する
    currentScene = SCENE_PLAY;
}

// 正常に判定できた1回分を履歴へ追加する
void AddHistory(void)
{
    // 配列の範囲を超える場合は追加しない
    if (historyCount >= MAX_HISTORY)
    {
        return;
    }

    // 入力した4桁を履歴へコピーする
    strcpy_s(historyInput[historyCount], sizeof(historyInput[historyCount]), input);

    // 同じ添え字へHIT数とBLOW数を保存する
    historyHit[historyCount] = hit;

    historyBlow[historyCount] = blow;

    // 履歴件数を1増やす
    historyCount++;

    // 今追加した履歴があるページを表示する
    currentHistoryPage = (historyCount - 1) / HISTORY_PER_PAGE;
}

// 入力内容を確認し、HIT数とBLOW数を求める
void JudgeInput(void)
{
    // 入力内容のエラー番号を受け取る
    inputError = CheckAnswerError(input);

    // 以前の判定結果をいったん消す
    hit = 0;
    blow = 0;
    hasResult = false;

    // 入力内容に問題がない場合だけ判定する
    if (inputError == 0)
    {
        hit = CountHit(answer, input);

        blow = CountBlow(answer, input);

        hasResult = true;

        // 履歴が満杯でなければ、
        // 判定結果を履歴へ保存する
        if (historyCount < MAX_HISTORY)
        {
            AddHistory();

            // 4 HITならクリア画面へ移動する
            if (hit == INPUT_DIGIT_COUNT)
            {
                currentScene = SCENE_CLEAR;
            // ===== 【第8回で追加・変更】60回以内に正解できなければゲームオーバーへ移動 ここから =====
            }
            // 正解できずに60件へ達したら
            // ゲームオーバー画面へ移動する
            else if (historyCount >= MAX_HISTORY)
            {
                currentScene = SCENE_GAMEOVER;
            // ===== 【第8回で追加・変更】60回以内に正解できなければゲームオーバーへ移動 ここまで =====
            }
            else
            {
                // 次の入力を始められるように、
                // 入力欄と表示状態を空にする
                inputCount = 0;
                input[0] = '\0';
                inputError = 0;
                hasResult = false;
            }
        }
    }
}

// ゲーム開始時に1回だけ実行する
void Initialize(void)
{
    // 実行するたびに乱数の並びを変える
    srand((unsigned int)time(NULL));

    mouseX = 0;
    mouseY = 0;
    previousMouseInput = 0;

    SetMouseDispFlag(TRUE);

    // ゲームで使用する画像を読み込む
    imageLoadError = LoadGameImages();


    // 起動直後はタイトル画面を表示する
    currentScene = SCENE_TITLE;
}

// タイトル画面を更新する
void UpdateTitle(void)
{
    if (!leftClicked)
    {
        return;
    }

    // Push Startボタンをクリックしたか
    if (IsPointInRect(
        mouseX,
        mouseY,
        PUSH_START_BUTTON_X,
        PUSH_START_BUTTON_Y,
        PUSH_START_BUTTON_X + PUSH_START_BUTTON_WIDTH,
        PUSH_START_BUTTON_Y + PUSH_START_BUTTON_HEIGHT))
    {
        StartGame();
    }
}

// ゲーム画面を更新する
void UpdatePlay(void)
{
    if (leftClicked)
    {
        int i;

        // 0～9の数字ボタンを順番に調べる
        for (i = 0; i < NUMBER_COUNT; i++)
        {
            int column;
            int row;
            int x;
            int y;

            column = i % NUMBER_BUTTON_COLUMNS;

            row = i / NUMBER_BUTTON_COLUMNS;

            x = NUMBER_BUTTON_START_X + column * (NUMBER_BUTTON_SIZE + NUMBER_BUTTON_GAP);

            y = NUMBER_BUTTON_START_Y + row * (NUMBER_BUTTON_SIZE + NUMBER_BUTTON_GAP);

            if (IsPointInRect(mouseX, mouseY, x, y, x + NUMBER_BUTTON_SIZE, y + NUMBER_BUTTON_SIZE))
            {
                // 4桁未満なら数字を追加する
                if (inputCount < INPUT_DIGIT_COUNT)
                {
                    input[inputCount] = (char)('0' + i);

                    inputCount++;

                    input[inputCount] = '\0';

                    // 入力を変更したので、
                    // 前回のエラーや判定結果を消す
                    inputError = 0;
                    hit = 0;
                    blow = 0;
                    hasResult = false;
                }

                break;
            }
        }

        // 判定ボタンをクリックしたか
        if (IsPointInRect(
            mouseX,
            mouseY,
            JUDGE_BUTTON_X,
            JUDGE_BUTTON_Y,
            JUDGE_BUTTON_X + JUDGE_BUTTON_WIDTH,
            JUDGE_BUTTON_Y + JUDGE_BUTTON_HEIGHT))
        {
            JudgeInput();
        }


        // 履歴ページのタブを順番に調べる
        for (i = 0; i < HISTORY_PAGE_COUNT; i++)
        {
            int tabX;

            tabX = HISTORY_START_X + i * HISTORY_TAB_WIDTH;

            if (IsPointInRect(mouseX, mouseY, tabX, HISTORY_TAB_Y, tabX + HISTORY_TAB_WIDTH, HISTORY_TAB_Y + HISTORY_TAB_HEIGHT))
            {
                currentHistoryPage = i;
                break;
            }
        }
    }

    // 右クリックしたら入力中の数字をすべて消す
    if (rightClicked)
    {
        ClearInput();
    }
}

// クリア画面を更新する
void UpdateClear(void)
{
    if (!leftClicked)
    {
        return;
    }

    // Push Startボタンをクリックしたか
    if (IsPointInRect(
        mouseX,
        mouseY,
        PUSH_START_BUTTON_X,
        PUSH_START_BUTTON_Y,
        PUSH_START_BUTTON_X + PUSH_START_BUTTON_WIDTH,
        PUSH_START_BUTTON_Y + PUSH_START_BUTTON_HEIGHT))
    {
        StartGame();
    }
}

// ===== 【第8回で追加・変更】ゲームオーバー画面の更新処理を追加 ここから =====
// ゲームオーバー画面を更新する
void UpdateGameOver(void)
{
    if (!leftClicked)
    {
        return;
    }

    // Push Startボタンをクリックしたか
    if (IsPointInRect(
        mouseX,
        mouseY,
        PUSH_START_BUTTON_X,
        PUSH_START_BUTTON_Y,
        PUSH_START_BUTTON_X + PUSH_START_BUTTON_WIDTH,
        PUSH_START_BUTTON_Y + PUSH_START_BUTTON_HEIGHT))
    {
        StartGame();
    }
}

// ===== 【第8回で追加・変更】ゲームオーバー画面の更新処理を追加 ここまで =====
// 現在の画面に対応した更新処理を呼び出す
void Update(void)
{
    int mouseInput;

    // 現在のマウス座標を取得する
    GetMousePoint(&mouseX, &mouseY);

    // 現在のマウスボタン状態を取得する
    mouseInput = GetMouseInput();

    // 左クリックした瞬間を求める
    leftClicked = (mouseInput & MOUSE_INPUT_LEFT) != 0 && (previousMouseInput & MOUSE_INPUT_LEFT) == 0;

    // 右クリックした瞬間を求める
    rightClicked = (mouseInput & MOUSE_INPUT_RIGHT) != 0 && (previousMouseInput & MOUSE_INPUT_RIGHT) == 0;

    switch (currentScene)
    {
    case SCENE_TITLE:
        UpdateTitle();
        break;

    case SCENE_PLAY:
        UpdatePlay();
        break;

    case SCENE_CLEAR:
        UpdateClear();
        // ===== 【第8回で追加・変更】Update()にゲームオーバー状態を追加 ここから =====
        break;

    case SCENE_GAMEOVER:
        UpdateGameOver();
        // ===== 【第8回で追加・変更】Update()にゲームオーバー状態を追加 ここまで =====
        break;
    }

    // 今回の状態を次回の比較用に保存する
    previousMouseInput = mouseInput;
}


// 解答履歴とページタブを描画する
void DrawHistory(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int gray = GetColor(150, 160, 175);

    unsigned int lineColor = GetColor(80, 95, 115);

    unsigned int backgroundColor = GetColor(25, 30, 40);

    int tableBottom;
    int startIndex;
    int endIndex;
    int i;

    DrawString(HISTORY_START_X, 30, "解答履歴", white);

    // 4ページ分のタブを描画する
    for (i = 0; i < HISTORY_PAGE_COUNT; i++)
    {
        int tabX;
        int imageHandle;

        tabX = HISTORY_START_X + i * HISTORY_TAB_WIDTH;

        imageHandle = inactiveTabImages[i];

        if (i == currentHistoryPage)
        {
            imageHandle = activeTabImages[i];
        }

        DrawGraph(tabX, HISTORY_TAB_Y, imageHandle, TRUE);
    }

    tableBottom = HISTORY_TABLE_Y + HISTORY_HEADER_HEIGHT + HISTORY_PER_PAGE * HISTORY_ROW_HEIGHT;

    // 履歴表の背景と外枠を描画する
    DrawBox(HISTORY_START_X, HISTORY_TABLE_Y, HISTORY_START_X + HISTORY_TABLE_WIDTH, tableBottom, backgroundColor, TRUE);

    DrawBox(HISTORY_START_X, HISTORY_TABLE_Y, HISTORY_START_X + HISTORY_TABLE_WIDTH, tableBottom, lineColor, FALSE);

    // 表の見出しを描画する
    DrawString(HISTORY_START_X + 7, HISTORY_TABLE_Y + 5, "No", gray);

    DrawString(HISTORY_START_X + 50, HISTORY_TABLE_Y + 5, "INPUT", gray);

    DrawString(HISTORY_START_X + 151, HISTORY_TABLE_Y + 5, "HIT", gray);

    DrawString(HISTORY_START_X + 221, HISTORY_TABLE_Y + 5, "BLOW", gray);

    // 縦線を描画する
    DrawLine(HISTORY_START_X + 40, HISTORY_TABLE_Y, HISTORY_START_X + 40, tableBottom, lineColor);

    DrawLine(HISTORY_START_X + 140, HISTORY_TABLE_Y, HISTORY_START_X + 140, tableBottom, lineColor);

    DrawLine(HISTORY_START_X + 210, HISTORY_TABLE_Y, HISTORY_START_X + 210, tableBottom, lineColor);

    // 見出しと履歴行を分ける線を描画する
    DrawLine(
        HISTORY_START_X,
        HISTORY_TABLE_Y + HISTORY_HEADER_HEIGHT,
        HISTORY_START_X + HISTORY_TABLE_WIDTH,
        HISTORY_TABLE_Y + HISTORY_HEADER_HEIGHT,
        lineColor);

    // 15行分の横線を描画する
    for (i = 1; i <= HISTORY_PER_PAGE; i++)
    {
        int lineY;

        lineY = HISTORY_TABLE_Y + HISTORY_HEADER_HEIGHT + i * HISTORY_ROW_HEIGHT;

        DrawLine(HISTORY_START_X, lineY, HISTORY_START_X + HISTORY_TABLE_WIDTH, lineY, lineColor);
    }

    // 現在のページで表示する履歴の範囲を求める
    startIndex = currentHistoryPage * HISTORY_PER_PAGE;

    endIndex = startIndex + HISTORY_PER_PAGE;

    if (endIndex > historyCount)
    {
        endIndex = historyCount;
    }

    // 現在のページにある履歴を表示する
    for (i = startIndex; i < endIndex; i++)
    {
        int row;
        int y;

        row = i - startIndex;

        y = HISTORY_TABLE_Y + HISTORY_HEADER_HEIGHT + 4 + row * HISTORY_ROW_HEIGHT;

        DrawFormatString(HISTORY_START_X + 7, y, white, "%02d", i + 1);

        DrawString(HISTORY_START_X + 50, y, historyInput[i], white);

        DrawFormatString(HISTORY_START_X + 165, y, white, "%d", historyHit[i]);

        DrawFormatString(HISTORY_START_X + 242, y, white, "%d", historyBlow[i]);
    }
}

// ゲーム画面を描画する
void DrawPlay(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int yellow = GetColor(255, 255, 0);

    unsigned int red = GetColor(255, 80, 80);

    // ゲームタイトルを表示する
    DrawString(40, 25, "HIT & BLOW", white);

    // ===== 【第8回で追加・変更】正解表示を切り替え、残り回数を表示 ここから =====
    // テスト時だけ正解を表示する
    if (SHOW_DEBUG_ANSWER)
    {
        DrawFormatString(40, 55, yellow, "デバッグ用正解：%s", answer);
    }

    DrawFormatString(260, 25, white, "残り：%d回", MAX_HISTORY - historyCount);
    // ===== 【第8回で追加・変更】正解表示を切り替え、残り回数を表示 ここまで =====

    // 画像の読み込みに失敗していた場合
    if (imageLoadError != 0)
    {
        DrawString(40, 110, "画像を読み込めませんでした。", red);

        DrawString(40, 140, "imagesフォルダーの場所を確認してください。", red);

        return;
    }

    DrawString(40, 85, "数字を4桁入力してください", white);

    // 4桁の入力欄を描画する
    for (int i = 0; i < INPUT_DIGIT_COUNT; i++)
    {
        int x;
        int imageHandle;

        // i番目の桁を表示するX座標
        x = INPUT_START_X + i * (INPUT_IMAGE_SIZE + INPUT_IMAGE_GAP);

        // 未入力の場合に表示する画像
        imageHandle = blankImage;

        // 入力済みで、数字が入っている場合
        if (i < inputCount)
        {
            int number;

            // 文字の数字を整数へ変換する
            number = input[i] - '0';

            // 対応する緑色の数字画像を選ぶ
            imageHandle = displayNumberImages[number];
        }

        // 入力欄の画像を80×80で表示する
        DrawGraph(x, INPUT_START_Y, imageHandle, TRUE);
    }

    DrawFormatString(40, 215, white, "入力：%s", input);

    // 正しく判定できた場合はHIT数とBLOW数を表示する
    if (hasResult)
    {
        DrawFormatString(40, 245, white, "HIT ：%d", hit);

        DrawFormatString(40, 275, white, "BLOW：%d", blow);
    }
    // 入力に問題がある場合は、
    // エラー番号に対応したメッセージを表示する
    else if (inputError == 1)
    {
        DrawString(40, 245, "4桁入力してください。", red);
    }
    else if (inputError == 2)
    {
        DrawString(40, 245, "0～9の数字だけを入力してください。", red);
    }
    else if (inputError == 3)
    {
        DrawString(40, 245, "同じ数字を2回使わないでください。", red);
    }

    DrawString(40, 300, "数字ボタン", white);

    // 0～9の数字ボタンを描画する
    for (int i = 0; i < NUMBER_COUNT; i++)
    {
        int column;
        int row;
        int x;
        int y;

        // 5個ずつ並べるための列と行を求める
        column = i % NUMBER_BUTTON_COLUMNS;

        row = i / NUMBER_BUTTON_COLUMNS;

        // 列と行から画面座標を求める
        x = NUMBER_BUTTON_START_X + column * (NUMBER_BUTTON_SIZE + NUMBER_BUTTON_GAP);

        y = NUMBER_BUTTON_START_Y + row * (NUMBER_BUTTON_SIZE + NUMBER_BUTTON_GAP);

        // 数字ボタンを70×70で表示する
        DrawGraph(x, y, numberImages[i], TRUE);
    }

    // 判定ボタンを表示する
    DrawGraph(JUDGE_BUTTON_X, JUDGE_BUTTON_Y, judgeImage, TRUE);

    // 右クリックで入力を消せることを表示する
    DrawString(330, 525, "右クリック：入力を消す", gray);

    // 右側へ解答履歴を表示する
    DrawHistory();
}

// タイトル画面を描画する
void DrawTitle(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int gray = GetColor(180, 190, 205);

    unsigned int red = GetColor(255, 80, 80);

    DrawString(315, 165, "HIT & BLOW", white);

    DrawString(225, 255, "4桁の数字を当てるゲームです。", gray);

    DrawString(208, 290, "数字と場所を推理して正解を探そう！", gray);

    if (imageLoadError != 0)
    {
        DrawString(235, 350, "画像を読み込めませんでした。", red);

        return;
    }

    DrawGraph(PUSH_START_BUTTON_X, PUSH_START_BUTTON_Y, pushStartImage, TRUE);
}

// クリア画面を描画する
void DrawClear(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int yellow = GetColor(255, 225, 80);

    unsigned int gray = GetColor(180, 190, 205);

    DrawString(270, 150, "CONGRATULATIONS!", yellow);

    DrawFormatString(315, 230, white, "正解：%s", answer);

    DrawFormatString(285, 275, white, "%d回で正解しました。", historyCount);

    DrawString(270, 330, "Push Startでもう一度遊べます。", gray);

    if (imageLoadError == 0)
    {
        DrawGraph(PUSH_START_BUTTON_X, PUSH_START_BUTTON_Y, pushStartImage, TRUE);
    }
}

// ===== 【第8回で追加・変更】ゲームオーバー画面を描画 ここから =====
// ゲームオーバー画面を描画する
void DrawGameOver(void)
{
    unsigned int white = GetColor(255, 255, 255);

    unsigned int gray = GetColor(180, 190, 205);

    DrawGraph(300, 150, gameOverImage, TRUE);

    DrawFormatString(315, 245, white, "正解：%s", answer);

    DrawFormatString(250, 290, white, "%d回以内に正解できませんでした。", MAX_HISTORY);

    DrawString(270, 340, "Push Startでもう一度遊べます。", gray);

    DrawGraph(PUSH_START_BUTTON_X, PUSH_START_BUTTON_Y, pushStartImage, TRUE);
}

// ===== 【第8回で追加・変更】ゲームオーバー画面を描画 ここまで =====
// 現在の画面に対応した描画処理を呼び出す
void Draw(void)
{
    switch (currentScene)
    {
    case SCENE_TITLE:
        DrawTitle();
        break;

    case SCENE_PLAY:
        DrawPlay();
        break;

    case SCENE_CLEAR:
        DrawClear();
        // ===== 【第8回で追加・変更】Draw()にゲームオーバー状態を追加 ここから =====
        break;

    case SCENE_GAMEOVER:
        DrawGameOver();
        // ===== 【第8回で追加・変更】Draw()にゲームオーバー状態を追加 ここまで =====
        break;
    }
}


// Update1回分の時間を秒で返す
double DeltaTime(void)
{
    return FIXED_DELTA_TIME;
}

int WINAPI WinMain(
    HINSTANCE hInstance,
    HINSTANCE hPrevInstance,
    LPSTR lpCmdLine,
    int nCmdShow)
{
    LONGLONG previousTime;
    double accumulator;

    // ウィンドウモードで起動する
    ChangeWindowMode(TRUE);

    // 画面の大きさを設定する
    SetGraphMode(SCREEN_WIDTH, SCREEN_HEIGHT, 32);

    // ScreenFlipで垂直同期を待つ
    SetWaitVSyncFlag(TRUE);

    // DxLibを初期化する
    if (DxLib_Init() == -1)
    {
        return -1;
    }

    // 描画先を裏画面にする
    SetDrawScreen(DX_SCREEN_BACK);

    // ゲームを初期化する
    Initialize();

    // 時間計測を開始する
    previousTime = GetNowHiPerformanceCount();

    // まだUpdateで処理していない時間
    accumulator = 0.0;

    // ゲームループ
    while (ProcessMessage() == 0)
    {
        LONGLONG currentTime;
        double frameTime;

        // ESCキーが押されたら終了する
        if (CheckHitKey(KEY_INPUT_ESCAPE) != 0)
        {
            break;
        }

        // 現在時刻を取得する
        currentTime = GetNowHiPerformanceCount();

        // 前回から実際に経過した時間を秒で求める
        frameTime = (currentTime - previousTime) / 1000000.0;

        // 次の計測に備えて現在時刻を保存する
        previousTime = currentTime;

        // 長時間止まった場合は、処理する時間を制限する
        if (frameTime > MAX_FRAME_TIME)
        {
            frameTime = MAX_FRAME_TIME;
        }

        // 実際に経過した時間をためる
        accumulator += frameTime;

        // 1/60秒以上たまっている間、ゲームを更新する
        while (accumulator >= DeltaTime())
        {
            Update();

            // Updateで処理した時間を引く
            accumulator -= DeltaTime();
        }

        // 裏画面を黒で消す
        ClearDrawScreen();

        // ゲーム画面を描画する
        Draw();

        // 裏画面を表画面へ表示する
        ScreenFlip();
    }

    // DxLibを終了する
    DxLib_End();

    return 0;
}

---

8．全8回のまとめ

コンソール版で使っていたゲームのルールを、画面付きのDxLib版へ移しました。

コンソール版
    printf()で表示
    scanf()で入力
    while文の中で判定

DxLib版
    Draw()で表示
    Update()で入力と判定
    画面状態を切り替えて進行

全8回で、次の内容を作りました。

第1回　コンソール版とゲームループの違い
第2回　ゲームのルールをDxLibへ移す
第3回　画像を使って画面を作る
第4回　数字ボタンから入力する
第5回　HITとBLOWを判定する
第6回　解答履歴を保存して表示する
第7回　タイトル画面とクリア画面を作る
第8回　ゲームオーバーを追加して完成させる

完成したプログラムでは、入力、判定、履歴、画面遷移、再スタートまでを1本のゲームとして実行できます。