前提・実現したいこと
5✖5のテーブルのマスを作って、モグラたたきゲームを作っています。
やりたいことは、タイマー関数を使って1秒ごとにテーブルに”●”をTextContentに表示し、
何もしなければ1秒後に自動的に消えて、次の”●”が表示されるようにしたいです。
(こんな感じです)
1秒:”●” 1秒後: 新しい”●” 1秒前に表示された”●”→消える
発生している問題・エラーメッセージ
”●”が表示された瞬間に消えます。 //timer2 = clearTimeout();// でタイマーを消してるつもりですが間違ってるのでしょうか?
該当のソースコード
<!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <style> td.box{ } </style> <script> "use strict"; var timer,timer2; var s; var date =[]; function init() { //繰り返しでテーブルを作成 var table = document.getElementById("table1") for (var i = 0; i < 5; i++) { date[i] = [ 0, 0, 0, 0, 0]; var tr = document.createElement("tr"); for (var j = 0; j < 5; j++) { var td = document.createElement("td"); td.className = "box"; td.onclick = click; td.id = 5 * i + j; tr.appendChild(td); } table.appendChild(tr); } //1秒ごとに呼び出してる timer = setInterval(tick, 1000); } //クリックされたら function click(e) { var c = e.target; c.textContent = "〇"; } //毎秒呼ばれる function tick() { timer2 = clearTimeout(); var a = Math.floor(Math.random() * 5); var b = Math.floor(Math.random() * 5); s = 5 * a + b; date[a][b] = 1; document.getElementById(s).textContent = "●"; timer2 = setTimeout(crea, 999); } function crea() { document.getElementById(s).textContent = ""; } </script> </head> <body onload="init()"> <table id="table1"></table> </body>h </html>
試したこと
呼び出すタイミングを
timer2 = setTimeout(crea, 999);
と、1000ではなく999にしてみましたがうまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
Firefoxですが、1秒毎にどこかしらに●が表示されるように動作していますよ。clearTimeoutは強制解除する場合に使います。(メモリリークするのかどうかなどは知りませんすいません。)
回答3件
あなたの回答
tips
プレビュー