質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5121閲覧

JavaScriptで簡単な数字クリックゲームを作ったのですが・・・。

Yoshinori

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2015/07/05 10:36

以下のコードを実行していただければわかると思いますが
数字を小さい順にタップしていくゲームです
ですがスタートボタンを押したときに0~9の数字が書かれているボタンと10~15まで書かれているボタンでズレが起きてしまいます。
これはどうすれば解決しますか?

lang

1コード
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body>
<h1>小さい数字からタッチ!</h1> <div id="iro"><b><p>Time: <span id ="time">0.0</span> sec. </p></b></div> <div id="board"> <input type="button" id="button_0" value="?" onclick="touched(0);"> <input type="button" id="button_1" value="?" onclick="touched(1);"> <input type="button" id="button_2" value="?" onclick="touched(2);"> <input type="button" id="button_3" value="?" onclick="touched(3);"><br> <input type="button" id="button_4" value="?" onclick="touched(4);"> <input type="button" id="button_5" value="?" onclick="touched(5);"> <input type="button" id="button_6" value="?" onclick="touched(6);"> <input type="button" id="button_7" value="?" onclick="touched(7);"><br> <input type="button" id="button_8" value="?" onclick="touched(8);"> <input type="button" id="button_9" value="?" onclick="touched(9);"> <input type="button" id="button_10" value="?" onclick="touched(10);"> <input type="button" id="button_11" value="?" onclick="touched(11);"><br> <input type="button" id="button_12" value="?" onclick="touched(12);"> <input type="button" id="button_13" value="?" onclick="touched(13);"> <input type="button" id="button_14" value="?" onclick="touched(14);"> <input type="button" id="button_15" value="?" onclick="touched(15);"><br> </div> <br> <p><input id="st" type="button" value="start!" onclick="timerStart();"></p> <script> var currentNum; var timet; var startTime; var isPlaying = false; function timerStart() { initBoard(); currentNum = 0; startTime = (new Date()).getTime(); if (!isPlaying) { isPlaying = true; runTimer(); } } function initBoard() { var nums = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; var num; var btn; for (var i=0; i<16; i++) { num = nums.splice(Math.floor(Math.random() * nums.length), 1); btn = document.getElementById('button_' + i); btn.value = num[0]; btn.disabled = false; } } function touched(n) { var btn = document.getElementById('button_' + n) if (btn.value == currentNum) { btn.disabled = true; currentNum++; } if (currentNum == 16){ clearTimeout(timer); isPlaying = false; alert('Your Score: ' + document.getElementById('time').innerHTML); document.location = "result.html"; } } function runTimer() { document.getElementById('time').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1); timer = setTimeout(function() { runTimer() ; }, 100); } </script>
</body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

<head>の中に、以下のCSS(<style>〜</style>の部分)を追加してみるのは、いかがでしょうか?

lang

1<head> 2<meta charset="utf-8"> 3<style> 4div#board > input { 5 width: 30px; 6 text-align: center; 7} 8</style> 9</head>

参考になれば幸いです。


補足

上記のCSSで、ボタンの幅を30px としているところは
お好みでご調整してみてください。

ちなみに、30px にして、表示させてみたら以下のように
なっています。(ブラウザ:Chrome 最新版)

![イメージ説明]WIDTH:374

投稿2015/07/05 11:00

編集2015/07/05 11:32
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yoshinori

2015/07/05 11:21

ありがとうございます!! 理想の形になりました!!
jun68ykt

2015/07/05 11:25

よかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問