###前提・実現したいこと
数当てゲームを作っています。
コードは以下の通りです。
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="utf8"> 6 <title>数当て</title> 7 </head> 8 <body> 9 <p> 10 選んだ数字(0~99):<input id="1" type="text" size="3"></input> 11 <button id="2">挑戦</button><br> 12 コンピュータの回答:<b><span id="3">??</span></b><br> 13 コンピュータの回答はあなたが選んだ数字より大きいですか?小さいですか? 14 <button id="4" value="big">大きい</button><button id="5" value="small">小さい</button><br><br> 15 <span id="6">??</span>回目で正解です。 16 <script src="kazuate.js"></script> 17 </body> 18</html> 19
javascript
1var suzi = document.getElementById('1'); 2var kazuate = document.getElementById('2'); 3var kaitou = document.getElementById('3'); 4var ookii = document.getElementById('4'); 5var tiisai = document.getElementById('5'); 6var kaisuu = document.getElementById('6'); 7var ans1= Math.round(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成 8var turn = 0; //答えた回数を保持する変数 9var ans2 = parseint(suzi.value); //プレイヤーが入力した答え 10kazuate.addEventListener('click', function () { //挑戦をクリックした場合 11 if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら 12 kaitou.textContent = ans1; //「コンピュータの回答:」欄の横にコンピュータの回答を表示 13 kaisuu.textContent = turn; //「:回目で正解です」欄に回数を表示 14 } 15 } 16 tiisai.addEventListener('click', function () { //小さいをクリックした場合 17 if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら 18 kaitou.textContent = ans1; //「コンピュータの回答:」欄により小さな数字の表示 19 } 20 turn++;//回数をふやす 21 } 22 ookii.addEventListener('click', function () { //大きいをクリックした場合 23 if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら 24 kaitou.textContent = ans1; //「コンピュータの回答:」欄により大きな数字の表示 25 } 26 turn++;//回数を増やす 27 }
このようにプログラムを考えてみたのですが、全く動きません。
また、コンピュータが選んだ数字がもっと大きい(小さい)場合に、より大きな(小さな)数値を表示するところはさっぱりわかりませんでした。
kaitou.textContent = ans1; //「コンピュータの回答:」欄により小さな数字の表示
kaitou.textContent = ans1; //「コンピュータの回答:」欄により大きな数字の表示
のところです。
一応、各コードになぜこのように書いたか説明しました。
今回実現したいことが分かる方がいらっしゃいましたら、ご教示お願いします。
追記:
丁寧な回答ありがとうございます。
それらの回答に基づいて編集してみました。
javascript
1var suzi = document.getElementById('1'); 2var kazuate = document.getElementById('2'); 3var kaitou = document.getElementById('3'); 4var ookii = document.getElementById('4'); 5var tiisai = document.getElementById('5'); 6var kaisuu = document.getElementById('6'); 7var ans1= Math.floor(Math.random()*100)+0; //コンピュータがランダムで2桁の回答を作成 8var turn = 0; //答えた回収を保持する変数 9 var ans2 = parseInt(suzi.value); //プレイヤーが入力した答え 10 11 function kakunin(){ 12 if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら 13 kaitou.textContent = ans1; //「コンピュータの回答:」欄にコンピュータの回答を表示 14 kaisuu.textContent = turn; //「:回目で正解です」欄に回数を表示 15 } 16} 17 18 tiisai.addEventListener('click', function () { //小さいをクリックした場合 19 turn++; 20 if(ans2 > ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら 21 ans1=Math.floor(Math.random()*((99+1)- ans1)) +ans1; 22 //追加項目 最大値を99、最小値をans1と指定? 23 kaitou.textContent = ans1; //より大きい数字の表示 24 kakunin(); 25 } 26 }); 27 28 ookii.addEventListener('click', function () { //大さいをクリックした場合 29 turn++; 30 if(ans2 < ans1){ //もしコンピュータが出した答えがプレイヤーが入力した数値より大きかったら 31 ans1=Math.floor(Math.random()*((ans1+1)- 0)) +0; 32 //追加項目 最大値を((ans1+1)- 0))、最小値を0と指定?? 33 kaitou.textContent = ans1; //「コンピュータの回答:」欄により大きい数字の表示 34 kakunin(); 35 } 36 }); 37 38
変更点は、
最初は、
javascript
1kazuate.addEventListener('click', function () { //挑戦をクリックした場合 2 if(ans2 = ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら 3 kaitou.textContent = ans1; //「コンピュータの回答:」欄の横にコンピュータの回答を表示 4 kaisuu.textContent = turn; //「:回目で正解です」欄に回数を表示 5 } 6 }
だったのを、
javascript
1 function kakunin(){ 2 if(ans2 == ans1){ //もしプレイヤーが入力した数値とコンピュータが出した答えが一緒なら 3 kaitou.textContent = ans1; //「コンピュータの回答:」欄にコンピュータの回答を表示 4 kaisuu.textContent = turn; //「:回目で正解です」欄に回数を表示 5 } 6}
に変えました。
また、turn++の位置をあげ、
もしコンピュータが出した答えがプレイヤーが入力した数値より小さかったら
ans1=Math.floor(Math.random()((99+1)- ans1)) +ans1;
もしコンピュータが出した答えがプレイヤーが入力した数値よりおおきかったら
ans1=Math.floor(Math.random()((ans1+1)- 0)) +0;
としました。
どうしても分からなかったのが、おっしゃていた
var ans2 = parseInt(suzi.value);
をどの位置にやるのかです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/06 09:45
2016/11/06 10:03 編集
2016/11/06 11:52
2016/11/06 12:20
2016/11/06 12:23
2016/11/06 13:29