この記事はSLP-KBIT AdventCalendar2023 19日目の記事です。
はじめに
本記事では、私が現在制作中である英単語のクイズゲームについて、その概要や作る理由、開発手順等を記載します。
ゲームの概要
このゲームは出題された英単語に対し、その意味を日本語で正確に答えることを趣旨としたものです。今年流行したゲーム「漢字でＧＯ！」の英単語版と考えれば分かりやすいと思います。あのゲームほどの面白さやクオリティにするのは不可能ですが、できるだけそれらに近づけていくことを目標としています。
このゲームはWEB上で動作します。トップページにUnit1、Unit2、Unit3といった複数のステージが表示され、それらの中から1つ選択することでゲームが始まります。1ステージごとに英単語が50個出題され、1個答えるごとに正誤判定が下されます。50個答え終わると正答数が表示され、自身の英単語の習熟度を確認することができます。また、出題する英単語や答えは「英単語ターゲット1900」を参考にしています。
開発の動機
私は英単語を勉強する際、よく英単語帳を使用しています。ですが、2年も同じことをしているせいか、意味が書かれた部分を隠し、英単語のみを見てその意味を答えるといった勉強法に飽きてしまい、勉強に身が入らなくなってしまいました。そこで、今までとは異なる方法で英単語を楽しく学習したいと思い、英単語のクイズゲームを作ろうと考えました。
使用したもの
・XAMPP：WEB開発の環境構築やデータベースの活用等、様々な用途で使用
・VS Code：プログラムコードの記述、編集に使用
言語
・HTML
・PHP
・SQL
開発手順
1.WEB開発の環境構築
XAMPPを使用し、WEB上でゲームを作るための準備をしていきます。
下記のサイトを参考にしてXAMPPの使い方を学びながら、ひとまずフォルダ「htdocs」内にゲーム作成に使うファイル「index.php」を作成しました。
【超初心者向け】XAMPP開発環境の手順
2.トップページの作成
ゲームのトップページを作成していきます。
先ほど作った「index.php」に次のコードを記述します。
<html>
<head>
<meta charset="utf-8">
<title>ENGLISH de GO!!</title></head>
<body>
<header>
<h1>ENGLISH de GO!!</h1>
<p>
どの問題で遊ぶか選んでね！
</p>
<form action="Unit1.php" method="get">
<button type="submit">Unit 1</button>
</form>
</body>
</html>
コード自体は基本的なHTMLで構成されています。
実際のページは次のようになります。
あくまでゲーム機能を完成させることを最優先としているため、現時点では見た目がかなり簡素になっています。一通り作り終えたのちに、装飾を施していこうと考えています。
3．問題ページの作成
問題の出題や回答、正誤判定を行う問題ページを作成します。
それらを表示するためのプログラミングコードを記述するファイル「Unit1.php」を作成します。
ここで、実際にコードを書く前に、問題や答えを格納するためのデータベースを作成していきます。
そのために、「XAMPP Control Panel」を開き、「MySQL」の「Admin」から「phpMyAdmin」というツールを使用します。
下記のサイトを参考に、SQL文を用いてデータベースを作っていきます。
MySQLでデータベースを作成しよう
まず、データベース「unit1」を作成するべく、SQL画面にCREATE DATABASE unit1と記述し、実行します。（データベース「unit1」は作成済みなので、代わりに「unit2」作成時の写真を掲載しています）
これによって、データベース「unit1」を作成しました。
次に、テーブル「unit1」とカラム「id」「English」「Japanese」を作成します。
CREATE TABLE unit1(id int, English varchar(20), Japanese varchar(20), PRIMARY KEY(id))と入力し、実行します。
SELECT文で確認すると、ちゃんと作成できていることが分かります。
そして、データベース内にデータを追加します。
写真のようにINSERT文を用いて入力します。
結果、無事データを入力することに成功しました。
ここまでが現在の進行状況です。以降に記述する内容は、実装予定のものとなっています。
3．問題ページの作成（続き）
ファイル「Unit1.php」に次のような機能を実装するためのプログラムを記述していきます。
・データベースから問題、答えを呼び出し、画面に表示する
・回答欄
・回答の正誤判定
・次の問題への移行
・途中でトップページに戻るボタン
4．リザルトページの作成
全ての問題に回答した後に表示されるページの作成を予定しています。
このページでは以下の機能を実装する予定です。
・正答数の表示（〇問中△問正解のように表示する）
・トップページに戻るボタン
5．機能の追加
ゲーム自体は1~4の工程で完成なのですが、もっとこのゲームをより良いものにするべく次のような機能の追加を考えています。
・問題数の追加
・ページ全体の装飾
・正誤判定時に英単語の解説や例文を表示
・制限時間の追加
おわりに
今回は私が制作中のゲームについて紹介しました。
ひとまず完成を目指して頑張っていきたいと思います。
最後まで読んでくださり、本当に、本当にありがとうございました。
参考記事
XAMPPの使い方：【超初心者向け】XAMPP開発環境の手順
データベースの作り方：MySQLでデータベースを作成しよう