- 締切済み
JavaScript
下記のプログラム（ボタン早押しゲーム)に以下のようなプログラムを入れたいのですが、どうすれば良いでしょうか？ ・正しい順番にボタンが押されていれば毎回シャッフル（押されたボタンが色が変わり押せなくする。) 間違いならアラートで違うとメッセージを出す。 <script type="text/javascript"> // 初期化処理 var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)(16)"; var pushed = ""; // 押されたボタン管理 var startTime; // ゲーム開始時間を管理 var labelArray = suji.split(""); // 数字を一文字ずつ分割 $("startButton").onclick = start; nextGame(); // スタートボタンを表示する // 開始準備 function nextGame() { $("buttons").innerHTML = ""; $("startButton").style.visibility = "visible"; } // ゲーム開始 function start() { $("startButton").style.visibility = "hidden"; // 配列に数字を代入して順番をシャッフル arrayShuffle(labelArray); // ボタンを作る for (var i = 0; i < labelArray.length; i++) { var b = document.createElement("button"); b.innerHTML = labelArray[i]; b.onclick = button_clickHandler; $("buttons").appendChild(b); } startTime = (new Date()).getTime(); } // ボタンが押された時の処理 function button_clickHandler(e) { var ch = e.target.innerHTML; // 押されたボタンの文字 var tmp = pushed + ch; // 順番が正しいかどうか判定する if (suji.substr(0, tmp.length) != tmp) { alert("違います。次は、" + suji.substr(pushed.length,1)); return; } e.target.disabled = true; e.target.style.backgroundColor = "#202020"; pushed = tmp; if (pushed == suji) { var now = new Date().getTime(); var tm = Math.floor((now - startTime) / 1000); alert("おめでとうございます。\n" + tm + "秒でクリア"); nextGame(); } } // 配列をシャッフルする function arrayShuffle(bs) { for (var i = 0; i < bs.length; i++) { var r = Math.floor(Math.random()*bs.length); var tmp = bs[i]; bs[i] = bs[r]; bs[r] = tmp; } } function $(id) { return document.getElementById(id); } </script>
- greenbard2012
- お礼率0% (0/2)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
ぜんかくくうはくは、はんかくにしてね。 firefox でうごくよ。 そもそも var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)(16)"; を var labelArray = suji.split(""); // 数字を一文字ずつ分割 しても かっこがじゃまだし、すうちが２けたになっても、１けたでぶんかつよ！？ くりっくのような ばぶりんぐする いべんとは、document で かんししようね。 <!DOCTYPE html> <title></title> <meta charset="UTF-8"> <style> #BUTTONS { width : 340px; } #BUTTONS > input { width : 60px; height : 60px; margin : 5px; } </style> <body> <input type="button" value="Start"> <div id="BUTTONS"> <input type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <input type="button" value="4"> <input type="button" value="5"> <input type="button" value="6"> <input type="button" value="7"> <input type="button" value="8"> <input type="button" value="9"> <input type="button" value="10"> <input type="button" value="11"> <input type="button" value="12"> <input type="button" value="13"> <input type="button" value="14"> <input type="button" value="15"> <input type="button" value="16"> </div> <script> var GAME = { time : null, count : null, start : function () { var startButton = document.querySelector ('input[value="Start"]'); startButton.disabled = true; this.reset (); this.time = +new Date; this.count = 1; }, ending : function () { var time = ((+new Date)-this.time) / 1000; var startButton = document.querySelector ('input[value="Start"]'); startButton.disabled = false; alert("おめでとうございます。\n" + time + "秒でクリア"); this.time = null; }, reset : function () { var buttons = document.querySelectorAll ('#BUTTONS > input[type="button"]'); this.shuffle (buttons); this.time = null; this.count = null; Array.prototype.forEach.call (buttons, function (e) { e.disabled = false }); }, shuffle : function (buttons) { var parent = buttons[0].parentNode; var length = buttons.length; while (length) parent.appendChild (buttons[Math.random ()* length-- |0]); }, handleEvent : function (event) { var e = event.target; if ('INPUT' === e.tagName) { if (this.time) { if (String (this.count) === e.value) { e.disabled = true; this.count++; if (16 < this.count) { return this.ending (); } } else { alert("違います。次は、" + this.count); } } else { if ('Start' === e.value) { this.start (); } } } }, init : function () { document.addEventListener ('click', this, false); this.reset (); } }; GAME.init (); </script>
