<!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>