【HTML,CSS,JS】クイズゲーム作成（1/3）

WEBブラウザで動くクイズゲーム
1. アプリ概要
VSCodeで作ってみよう
まとめ
1. アプリの特徴

WEBブラウザで動くクイズゲーム

今回は、HTML、CSS、JavaScriptを使用して簡単なWEBブラウザゲームを作成します。

クイズゲーム（1/3）
クイズゲーム（2/3）
クイズゲーム（3/3）

ブラウザゲームのURL
GitHubのURL

GitHubのPagesで公開しているのでゲームプレイできます。

クイズゲーム

GitHubでソースコードを公開しています。

GitHub - make-and-learn/quiz-game

Contribute to make-and-learn/quiz-game development by creating an account on GitHub.

アプリ概要

HTML, CSS, JavaScriptを使用したインタラクティブなクイズアプリケーション
レスポンシブデザインに対応したユーザーインターフェース
オブジェクト指向プログラミングを活用した効率的なコード構造
複数の問題を順番に出題し、ユーザーの回答を即時評価

VSCodeのインストールがまだの方はこちらをご覧ください。

VSCodeで作ってみよう

作成手順

フォルダを作成。
「.html」「.css」「.js」の各ファイルの作成
「Go Live」でブラウザを立ち上げ実行

まず「VSCode」を起動します。

左端のファイルのマークをクリックして「フォルダを開く」を選択します。

エクスプローラー内で作りたい場所を決め、「新しいフォルダー」をクリックして新規フォルダ「quiz-game」を作成します。

ポップが出ますが、自分で作成したフォルダなので「はい、作成者を信頼します」をクリックします。

「QUIZ-GAME」フォルダ横にあるの新規ファイルのマークをクリックして「index.html」、「styles.css」、「quiz-data.js」、「quiz-game.js」のファイルを作成してください。

ファイルが作成出来たら、以下の完成コードを対応するファイルにコピペしてください。

コードの細かい解説は次のページで行いますのでとりあえず動かしてみましょう。

コードの右上にコピーマークがあります。

HTMLファイル (index.html)

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <!-- ビューポートの設定：レスポンシブデザイン対応 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>クイズゲーム</title>
    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- クイズゲームのメインコンテナ -->
    <div class="quiz-container">
        <h1>クイズゲーム</h1>
        <!-- 問題と選択肢を表示するコンテナ -->
        <div id="question-container">
            <!-- 問題文を表示する要素 -->
            <p id="question"></p>
            <!-- 選択肢を表示する要素 -->
            <div id="choices"></div>
        </div>
        <!-- 結果を表示する要素 -->
        <p id="result"></p>
        <!-- 次の問題へ進むボタン（初期状態では非表示） -->
        <button id="next-button" style="display: none;">次の問題</button>
    </div>
    <!-- クイズデータを含むJavaScriptファイルの読み込み -->
    <script src="quiz-data.js"></script>
    <!-- クイズゲームの動作を制御するJavaScriptファイルの読み込み -->
    <script src="quiz-game.js"></script>
</body>
</html>

CSSファイル (styles.css)

/* ボディ全体のスタイル設定 */
body {
    font-family: Arial, sans-serif; /* フォントをArialに設定 */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    height: 100vh; /* ビューポートの高さいっぱいに設定 */
    margin: 0; /* マージンをリセット */
    background-color: #f0f0f0; /* 背景色を薄いグレーに設定 */
}

/* クイズコンテナのスタイル */
.quiz-container {
    background-color: white; /* 背景色を白に設定 */
    border-radius: 8px; /* 角を丸くする */
    padding: 20px; /* 内側の余白を設定 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影をつける */
    max-width: 500px; /* 最大幅を設定 */
    width: 100%; /* 幅を100%に設定 */
}

/* ボタンのスタイル */
button {
    display: block; /* ブロック要素として表示 */
    width: 100%; /* 幅を100%に設定 */
    padding: 10px; /* 内側の余白を設定 */
    margin: 10px 0; /* 上下のマージンを設定 */
    background-color: #4CAF50; /* 背景色を緑に設定 */
    color: white; /* 文字色を白に設定 */
    border: none; /* ボーダーを削除 */
    border-radius: 4px; /* 角を丸くする */
    cursor: pointer; /* カーソルをポインターに変更 */
}

/* ボタンのホバー時のスタイル */
button:hover {
    background-color: #45a049; /* ホバー時の背景色を濃い緑に変更 */
}

/* 結果表示エリアのスタイル */
#result {
    font-weight: bold; /* フォントを太字に設定 */
    margin-top: 20px; /* 上部のマージンを設定 */
}

クイズデータファイル (quiz-data.js)

// クイズデータを格納する配列
const quizData = [
    // 問題1
    {
        question: "日本の首都は？", // 問題文
        choices: ["大阪", "東京", "京都", "名古屋"], // 選択肢
        correctAnswer: 1 // 正解のインデックス（0から始まるため、1は2番目の「東京」を指す）
    },
    // 問題2
    {
        question: "世界で最も人口の多い国は？", // 問題文
        choices: ["インド", "アメリカ", "中国", "ロシア"], // 選択肢
        correctAnswer: 2 // 正解のインデックス（0から始まるため、2は3番目の「中国」を指す）
    },
    // 問題3
    {
        question: "1 + 1 = ?", // 問題文
        choices: ["1", "2", "3", "4"], // 選択肢
        correctAnswer: 1 // 正解のインデックス（0から始まるため、1は2番目の「2」を指す）
    }
];

クイズゲームロジックファイル (quiz-game.js)

class QuizGame {
    constructor(quizData) {
        this.quizData = quizData; // クイズデータを保存
        this.currentQuestionIndex = 0; // 現在の問題インデックス
        this.score = 0; // スコア

        // HTML要素の取得
        this.questionElement = document.getElementById('question');
        this.choicesElement = document.getElementById('choices');
        this.resultElement = document.getElementById('result');
        this.nextButton = document.getElementById('next-button');

        // 次の問題ボタンにイベントリスナーを追加
        this.nextButton.addEventListener('click', () => this.loadNextQuestion());
        this.loadQuestion(); // 最初の問題を読み込む
    }

    loadQuestion() {
        const currentQuestion = this.quizData[this.currentQuestionIndex];
        this.questionElement.textContent = currentQuestion.question; // 問題文を設定
        this.choicesElement.innerHTML = ''; // 選択肢をクリア

        // 選択肢ボタンを生成
        currentQuestion.choices.forEach((choice, index) => {
            const button = document.createElement('button');
            button.textContent = choice;
            button.addEventListener('click', () => this.checkAnswer(index));
            this.choicesElement.appendChild(button);
        });

        this.resultElement.textContent = ''; // 結果表示をクリア
        this.nextButton.style.display = 'none'; // 次の問題ボタンを非表示
    }

    checkAnswer(choiceIndex) {
        const currentQuestion = this.quizData[this.currentQuestionIndex];
        if (choiceIndex === currentQuestion.correctAnswer) {
            this.score++; // スコアを増やす
            this.resultElement.textContent = '正解！';
        } else {
            this.resultElement.textContent = '不正解。正解は: ' + currentQuestion.choices[currentQuestion.correctAnswer];
        }

        this.disableChoices(); // 選択肢を無効化
        this.nextButton.style.display = 'block'; // 次の問題ボタンを表示
    }

    disableChoices() {
        // すべての選択肢ボタンを無効化
        const buttons = this.choicesElement.getElementsByTagName('button');
        for (let button of buttons) {
            button.disabled = true;
        }
    }

    loadNextQuestion() {
        this.currentQuestionIndex++; // 次の問題へ
        if (this.currentQuestionIndex < this.quizData.length) {
            this.loadQuestion(); // 次の問題を読み込む
        } else {
            this.showFinalResult(); // 全問題終了時の結果表示
        }
    }

    showFinalResult() {
        this.questionElement.textContent = 'クイズ終了！';
        this.choicesElement.innerHTML = ''; // 選択肢をクリア
        this.resultElement.textContent = `あなたの得点: ${this.score} / ${this.quizData.length}`;
        this.nextButton.style.display = 'none'; // 次の問題ボタンを非表示
    }
}

// DOMの読み込みが完了したらQuizGameインスタンスを作成
document.addEventListener('DOMContentLoaded', () => {
    new QuizGame(quizData);
});

コピペが終わったら左上の「ファイル」のメニューから「すべて保存」を押してください。

※Ctrlを押しながらKを押して、キーを離してSを押すとショートカットキーですべてのファイルを保存できます。

最後に右下の「Go Live」をクリックするとブラウザが立ち上がりプログラムが実行されます。

画像が小さく見にくい場合は、画像をクリックすると拡大されます。

拡張機能の「Live Server」をインストールしていると「Go Live」を使用できます。拡張機能の「Live Server」のインストールがまだの方はこちらをご覧ください。

以下のようにブラウザが立ち上がりゲームが開始されます。

まとめ

アプリの特徴

シンプルで直感的なUI:
- クリーンなデザインと明確な情報表示
- ユーザーフレンドリーな操作フロー
動的コンテンツ生成:
- JavaScriptによる問題と選択肢の動的表示
- ユーザーの操作に応じたリアルタイムのフィードバック
モジュール化された設計:
- HTML, CSS, JavaScriptの明確な分離
- 再利用可能なクイズデータ構造
レスポンシブレイアウト:
- さまざまなデバイスやスクリーンサイズに適応
拡張性:
- 新しい問題の追加が容易
- 機能拡張のための柔軟な基盤

このクイズアプリケーションは、モダンなWeb技術を効果的に活用して構築されています。HTMLによる構造化、CSSによるスタイリング、そしてJavaScriptによる動的な機能実装が、シームレスに統合されています。

アプリケーションの中核はQuizGameクラスにカプセル化されており、これによりコードの再利用性と保守性が高められています。ユーザーインターフェースはシンプルかつ直感的で、問題の表示、回答の選択、結果の確認という基本的なフローがスムーズに行えるよう設計されています。

レスポンシブデザインの採用により、デスクトップからモバイルまで幅広いデバイスでの利用が可能となっています。クイズデータを外部で定義する設計により、コンテンツの更新や拡張が容易になっています。