<!DOCTYPE html> <!-- 最新バージョンのHTMLですよという宣言 -->
<html lang="ja"> <!-- ここからHTML要素 -->
<head> <!-- ここからHTML要素の中のhead要素 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fast Hit</title>
<style> /* styleを要素として書くときはhead要素の中に書く */
#startButton{ /* idで指定するときは「#+id」 */
width: 250px;
height: 40px;
font-size: 25px;
color: blue;
}
button{ /* タグでの指定は何もつけずにタグ名 */
width: 50px;
height: 50px;
font-size: 30px;
}
</style>
</head>
<body> <!-- ここからHTML要素の中のbody要素 -->
<div style="font-size:40px; color:gold; "> <!-- ゲームのタイトル -->
Fast Hit !!!
</div>
<div id="field"> <!-- 各種ボタンを配置する「field」という名のid -->
<button id="startButton" onClick="start()">START</button> <!-- スタートボタンを設置 -->
</div>
<script> // ここからHTML要素内の、body要素内の、script要素
let arrayChoice = []; // 5つの数(問題)を格納する配列
let startTime; // ゲーム開始時刻を格納する変数
// スタートボタンクリックで呼び出される関数(イベントハンドラー)
function start(){
document.getElementsByTagName("button")[0].remove(); // スタートボタン削除
for (let i=0; i<5; i++){ // 整数2桁の乱数を5回発生させて格納するforループ
let num = Math.floor(Math.random()*90)+10;
arrayChoice.push(num);
}
for (let i=0; i<5; i++){ // 格納した整数で5つのボタンを設置するforループ
let newBtn = document.createElement("button"); // 新しいbuttonエレメントを作るオブジェクトを宣言(ここではnewBtn)
newBtn.textContent = arrayChoice[i]; // newBtnのtextContentプロパティにarrayChoiceに格納した整数を設定
newBtn.onclick = btnClick; // newBtnのonclickプロパティにbtnClick関数を設定
field.appendChild(newBtn); // field内に新しいbuttonエレメント(newBtn)を設置する
}
arrayChoice.sort();
startTime = new Date();
}
// 数字ボタンクリック時のイベントハンドラー
function btnClick(e){ // 引数eは発生したイベントオブジェクト(慣習的にeventの「e」を使う)
let pushNum = e.target.textContent; // e.targetでイベントオブジェクトの要素を取得(ここでは更にその中のtextContentを取得)
if (pushNum!=arrayChoice[0]){ // イベント発生ボタンのtextContentが最も小さい数でなければ
return; // returnで何もせずに関数を抜ける
}
e.target.style.backgroundColor = "gray"; // 最小数字と一致ならボタン色を灰色に変更
arrayChoice.splice(0,1); // さらに最小値の整数を削除(これで2番目だった値が最小値となる)
if (arrayChoice.length==0){ // 整数を格納しているarrayChoiceがカラになればゲームクリアなので、以下その処理
let now = new Date();
let clearTime = (now-startTime)/1000;
window.alert("おめでとう\n" + clearTime + "秒でクリア");
}
}
</script>
</body>
</html>
