• 締切済み

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>

みんなの回答

回答No.1

ぜんかくくうはくは、はんかくにしてね。 firefox でうごくよ。 そもそも var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)(16)"; を var labelArray = suji.split(""); // 数字を一文字ずつ分割 しても かっこがじゃまだし、すうちが2けたになっても、1けたでぶんかつよ!? くりっくのような ばぶりんぐする いべんとは、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>

すると、全ての回答が全文表示されます。

専門家に質問してみよう