JavaScriptでボタンゲームを作っているのですが、ボタンを押して正解だった場合、色が変わり押せなくなるようにしたいのですが、うまくいきません。どうしたら良いか困っています。
原因として「順番が正しいかどうか判定する」ところじゃないかと思います。
<script type="text/javascript">
//初期処理
var suji = "(1)(2)(3)(4)(5)(6)(7)(8)(9)(10)(11)(12)(13)(14)(15)";
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);
}
pushed = 0;
startTime = (new Date()).getTime();
}
// ボタンが押された時の処理
function button_clickHandler(e) {
var ch = e.target.innerHTML; // 押されたボタンの文字
// 順番が正しいかどうか判定する
if (suji.substr(pushed, 1) != ch) {
alert("違います。次は、" + suji.substr(pushed,1));
} else {
$("buttons").innerHTML="";
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);
}
e.target.disabled = true;
e.target.style.backgroundColor = "#909090";
pushed++;
}
if (pushed == labelArray.length) {
var now = new Date().getTime();
var tm = Math.floor((now - startTime) / 1000);
var min = Math.floor(tm % 3600 / 60);
var sec = tm % 60;
alert("おめでとうございます。\n"+ min + "分" + sec +"秒でクリアです!");
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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
確かに、「順番が正しいかどうか判定する」の部分に問題があります。
$("buttons").innerHTML="";
としているので、
e.target.parentNodeがnullになっています。
そのため、
e.target.disabled = true;
e.target.style.backgroundColor = "#909090";
が無効になります。
for(var i = 0; i < labelArray.length; i++) {
var b = document.createElement("button");
b.innerHTML = labelArray[i];
b.onclick = button_clickHandler;
$("buttons").appendChild(b);
}
の中で、labelArray[i]が選択されたものか判断して disabled の設定をすればいいと思います。()が重複するので、そこは工夫が必要です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript gasについて 1 2022/05/31 21:51
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
第3日曜日のみの日付を取得、...
-
javaScript textareaの一行あた...
-
択一形式のテストをつくりたいです
-
分岐処理(アルゴリズム)
-
特定のclassを表示、非表示にする
-
Javascript で可能でしょうか
-
APIを使って埋め込んだグーグル...
-
ASP.NETのコントロールの値をJa...
-
GoogleMap 住所から座標の取得
-
商品コードを入力で、商品名、...
-
javascriptにお詳しい方に質問...
-
アルファベットABCD…をスマート...
-
JavaScriptのindexedDBに格納し...
-
なぜmatchメソッドがエラーにな...
-
ホームページの最終更新日を他...
-
ページ最終行へジャンプする方法
-
GASでGoogleフォームの自動返信...
-
functionから別のfunctionを実...
-
javascriptで自動計算フォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
メールフォームの日付入力フォ...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
ローカルにあるファイルを検索...
-
HTMLで作った時報アプリが動き...
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
javascriptでテーブルに追加し...
-
VSCODE[Python]の設定について
-
JavaScriptで決まった「時刻」...
-
ASP.NET MVCでObjectをjsに渡す
-
イベントが初めの一回しか起き...
-
jqGridについて
おすすめ情報