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

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

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

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

Q&A

解決済

1回答

730閲覧

JavaScriptでスロットゲーム

kaatoxuun

総合スコア12

JavaScript

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

0グッド

0クリップ

投稿2018/09/10 06:57

JavaScriptでスロットゲームを作っているのですが
絵柄が同じになったときに”おめでとう”、違ったときに”残念”と
表示させたいのですがうまくいきません。

いろいろ調べても解決しなかったのでここで質問させていただきました。
どうか回答のほどよろしくお願いいたします。

<script> var firstOne; var secondOne; function start1() { var firstOne = Math.floor(Math.random() * 4); var image; if (firstOne == 0) { image = "raion.png"; } else if (firstOne == 1) { image = "tora.png"; } else if (firstOne == 2) { image = "zou.png"; } else if (firstOne == 3) { image = "ushi.png"; } else { image = "usagi.png"; } stop1 = setTimeout("start1()",1000); document.getElementById("picture1").src="images/" + image; } function start2() { var secondOne = Math.floor(Math.random() * 4); var image; if (secondOne == 0) { image = "raion.png"; } else if (secondOne == 1) { image = "tora.png"; } else if (secondOne == 2) { image = "zou.png"; } else if (secondOne == 3) { image = "ushi.png"; } else { image = "usagi.png"; } stop2 = setTimeout("start2()",1000); document.getElementById("picture2").src="images/" + image; } function slotstop1() { clearTimeout(stop1); } function slotstop2() { clearTimeout(stop2); } if (firstOne == secondOne) { document.getElementById("result").innerHTML = "<p>おめでとう</p>"; } else { document.getElementById("result").innerHTML = "<p>残念</p>"; } function restart() { location.reload(); } </script>
</head> <body> <h1>スロットマシーンで遊ぼう!</h1> <div> <button id="start" onclick="start1();start2();">スタート!</button> </div> <table> <thead> <tr><th>スロット1</th><th>スロット2</th></tr> </thead> <tbody> <tr> <td><img src="images/usagi.png" id="picture1"></td> <td><img src="images/usagi.png" id="picture2"></td> </tr> </tbody> </table> <div id="stop_box"> <button id="stop1" onclick="slotstop1()">ストップ1</button> <button id="stop2" onclick="slotstop2()">ストップ2</button> </div> <div id="result"></div> <button id="reset" onclick="restart()">もう一度する!</button> </body> </html>

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

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

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

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

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

guest

回答1

0

ベストアンサー

JavaScript

1if (firstOne == secondOne) { 2document.getElementById("result").innerHTML = "<p>おめでとう</p>"; 3} else { 4document.getElementById("result").innerHTML = "<p>残念</p>"; 5}

がボタン押す前から処理されてるのが原因かと思います。

スタートしてるかやボタン2回押しなどのチェックを入れず最低限は

JavaScript

1<html> 2<head> 3<script> 4var stopCount = 0; 5var firstOne = null; 6var secondOne = null; 7function start1() { 8 firstOne = Math.floor(Math.random() * 4); 9 var image; 10 if (firstOne == 0) { 11 image = "raion.png"; 12 } else if (firstOne == 1) { 13 image = "tora.png"; 14 } else if (firstOne == 2) { 15 image = "zou.png"; 16 } else if (firstOne == 3) { 17 image = "ushi.png"; 18 } else { 19 image = "usagi.png"; 20 } 21 stop1 = setTimeout("start1()", 1000); 22 document.getElementById("picture1").src="images/" + image; 23} 24 25function start2() { 26 secondOne = Math.floor(Math.random() * 4); 27 var image; 28 if (secondOne == 0) { 29 image = "raion.png"; 30 } else if (secondOne == 1) { 31 image = "tora.png"; 32 } else if (secondOne == 2) { 33 image = "zou.png"; 34 } else if (secondOne == 3) { 35 image = "ushi.png"; 36 } else { 37 image = "usagi.png"; 38 } 39 stop2 = setTimeout("start2()",1000); 40 document.getElementById("picture2").src="images/" + image; 41} 42 43function slotstop1() { 44 clearTimeout(stop1); 45 slotStopFunc(); 46} 47function slotstop2() { 48 clearTimeout(stop2); 49 slotStopFunc(); 50} 51 52function slotStopFunc() { 53 stopCount++; 54 if(stopCount >= 2) { 55 if (firstOne == secondOne) { 56 document.getElementById("result").innerHTML = "<p>おめでとう</p>"; 57 } else { 58 document.getElementById("result").innerHTML = "<p>残念</p>"; 59 } 60 } 61} 62 63function restart() { 64 location.reload(); 65} 66</script> 67</head> 68<body> 69<h1>スロットマシーンで遊ぼう!</h1> 70<div> 71<button id="start" onclick="start1();start2();">スタート!</button> 72</div> 73 74<table> 75<thead> 76<tr><th>スロット1</th><th>スロット2</th></tr> 77</thead> 78<tbody> 79<tr> 80<td><img src="images/usagi.png" id="picture1"></td> 81<td><img src="images/usagi.png" id="picture2"></td> 82</tr> 83</tbody> 84</table> 85 86<div id="stop_box"> 87<button id="stop1" onclick="slotstop1()">ストップ1</button> 88<button id="stop2" onclick="slotstop2()">ストップ2</button> 89</div> 90 91<div id="result"></div> 92<button id="reset" onclick="restart()">もう一度する!</button> 93 94</body> 95</html>

はこんな感じかな

投稿2018/09/10 07:12

rururu3

総合スコア5545

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

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

kaatoxuun

2018/09/11 00:51

的確な回答ありがとうございます!初心者の私にもすごくわかりやすく記述して教えてくださり感謝です!助かりました(*・ω・*)ペコリ
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問