JavaScript で英単語をタイピングするゲームのデモを作成する
概要
Javascriptを勉強するために、日本語の単語に対応する英語をタイピングして正否判定するゲームのデモを作ってみました。あくまで素人が勉強のために作ったコードです。
仕様
- 日本語の単語が問題文として表示される
- 英文字をキーボードでタイピングして解答する
- Enterキーが押されたら入力された解答と正解のスペルを照合する
- 正解なら緑色で”〇”、不正解なら赤色で”×”が表示される
- 不正解の場合は正しい答えを表示する
- 解答照合後にEnterキーを押下すると次の問題が表示される
- 全問解答後にEnterキーを押下すると、最初の問題に戻る
HTML部
HTMLはシンプルです。
後からJavascriptで制御する問題文(question)、〇(circle)、×(cross)、答え(answer)、解答(spells)をh1で定義しておきます。answerとspellsに関しては空にしておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TypingJS</title>
<style>
body {text-align:center}
</style>
</head>
<body>
<h1 id="question"></h1>
<h1 id="circle"><font color="#33FF66"><b>〇</b></font></h1>
<h1 id="cross"><font color="#FF0000"><b>×</b></font></h1>
<h1 id="answer"><font color="#000080"><b></b></font></h1>
<h1 id="spells"></h1>
</body>
</html>JavaScript部
主な流れは以下になります。
- questions、answsersに問題と解答の組み合わせを格納
- HTMLで定義したh1のdocumentプロパティを取得
- windows.onkeydownでキー押下イベントを発生
- funckeyでHTML部を制御
<script>
const questions = ["つくる","たべる","いく","ねむる"]; //問題設定
const answers = ["make","have","go","sleep"] //解答設定
const question = document.getElementById("question"); //documentプロパティ取得
const circle = document.getElementById("circle");
const cross = document.getElementById("cross");
const answer = document.getElementById("answer");
const spell = document.getElementById("spells");
var key = ""; //押下キー文字格納用変数
var spells = ""; //単語スペル格納用変数
var cnt = 0; //問題数カウント初期化
var is_checked = 0; //正否判定フラグ
var is_finished = 0; //全問終了フラグ
question.innerText = questions[0] //一問目格納
circle.style.display = "none"; //最初は〇非表示
cross.style.display = "none"; //最初は×非表示
window.onkeydown = funcKey; //キー入力イベント取得
function funcKey(e) {
key = e.key; //押下キー取得
if (is_finished == 0){ //全問終了していない
if (key == "Backspace"){ //バックスペースが押されたとき
spells = ""; //スペルを初期化
} else if( key == "Enter" ){ //エンターが押下された
if (is_checked ==0){ //正否判定前にエンターが押下された
if (spells == answers[cnt]){ //正解だった
circle.style.display = "block"; //〇の表示
is_checked = 1; //正否判定済み
cnt += 1; //問題数カウントアップ
} else if (spells != answers[cnt]){ //不正解だった
cross.style.display = "block"; //×の表示
answer.innerHTML = "<span style='color: navy;'>"+"正解："+answers[cnt]+"</span>";//正解の表示
is_checked = 1; //正否判定フラグ
cnt += 1; //問題数カウントアップ
}
} else { //正否判定後のエンター押下
if (cnt == questions.length){//全ての問題が終了した場合
circle.style.display = "none"; //〇の非表示
cross.style.display = "none"; //×の非表示
answer.innerHTML = ""; //解答を消す
spells = ""; //スペル初期化
key = ""; //キー初期化
is_finished = 1; //終了フラグ
question.innerText="Finished!!"; //終了合図
} else {
circle.style.display = "none"; //〇を消す
cross.style.display = "none"; //×を消す
answer.innerHTML = ""; //解答を消す
question.innerText=questions[cnt]; //次問題表示
spells = ""; //スペル初期化
key = ""; //キー初期化
is_checked = 0; //正否判定フラグ初期化
}
}
} else { //その他のキーが押下された
spells += key; //スペルに追加
}
spell.innerText=spells; //スペルを表示
} else { //全問終了した
if( key == "Enter" ){ //エンターが押された
cnt = 0; //問題数カウント初期化
is_finished = 0; //終了フラグ初期化
is_checked = 0; //正否判定初期化
circle.style.display = "none"; //〇を消す
cross.style.display = "none"; //×を消す
answer.innerHTML = ""; //解答を消す
question.innerText=questions[cnt]; //一問目再表示
}
}
}
</script>デモ
下記をマウスで一回クリックした後に適当にタイピングしてみて下さい。
英語タイピングゲームデモ
〇
×
以上
JavaScriptを一から勉強したい場合
いちばん簡単シリーズは分かりやすいので初心者にはおすすめです。
