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

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

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

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

Q&A

解決済

2回答

3625閲覧

javascriptでランダムに文字を出力し続ける

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2017/10/11 15:09

javascriptを使ってPC対クライアントでじゃんけんをするプログラムを作成しています.

作りたいものとしては,
・PC側はランダムにグー,チョキ,パーを画面に出し続ける
・クライアントがグー,チョキ,パーのどれかボタンを押したら↑が止まる->グー,チョキ,パーのどれかが出力
・勝ち,負け,あいこ表示
・あいこの場合,もう一度
というものです.

まずPCの手ボタンを押すとランダムにグー,チョキ,パーが表示されるものはできたのですが,ずっとグー,チョキ,パー,チョキ,パー,パー...とランダムに出力され続けるようにするにはどうしたら良いですか?

html

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <title>じゃんけん</title> 6</head> 7<body> 8 <p> 9 <input type="button" value="PCの手" onclick="pc_hand();" /> 10 </p> 11 <script> 12 function pc_hand(){ 13 var arr=["グー","チョキ","パー"]; 14 var hand=Math.floor(Math.random()*arr.length); 15 console.log(arr[hand]); 16 }; 17 </script> 18</body> 19</html>

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

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

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

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

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

guest

回答2

0

ベストアンサー

setIntervalを使えばいいと思います。

WindowOrWorkerGlobalScope.setInterval()

アドバイスするだけのつもりでしたが作ってしまいました。。(^ ^;

html

1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>じゃんけん</title> 6<script> 7function game(){ 8 var arr=["グー","チョキ","パー"]; 9 var disp1 = document.getElementById("display1"); 10 var disp2 = document.getElementById("display2"); 11 disp2.innerHTML = ""; 12 13 // setIntervalで処理を繰り返させる -> timerにidを代入 14 var timer = setInterval(function(){ 15 var hand=Math.floor(Math.random()*arr.length); 16 disp1.innerHTML = arr[hand]; 17 },250); 18 19 var btns = document.querySelectorAll("input"); 20 Array.prototype.forEach.call(btns,function(elm,i){ 21 elm.addEventListener("click",function(){ 22 // 止めたいときにはclearIntervalに止めたいidを代入 23 clearInterval(timer); 24 var pc_hand = disp1.innerHTML; 25 disp2.innerHTML = ""; 26 disp2.innerHTML += "PC : " + pc_hand + "<br />"; 27 disp2.innerHTML += "あなた : " + arr[i] + "<br /><br />"; 28 disp2.innerHTML += "この勝負、"+["引き分け","勝ち","負け"][(function(pc,ply){ 29 var r = pc-ply; 30 while(r<0) r+=3; 31 return r; 32 })(arr.indexOf(pc_hand),i)]; 33 disp2.innerHTML += "<br /><button onclick='game();'>リセット</button>"; 34 },false); 35 }); 36} 37 38window.addEventListener("load",game,false); 39</script> 40</head> 41<body> 42<div id="display1"></div> 43<input type="button" value="グー" /> 44<input type="button" value="チョキ" /> 45<input type="button" value="パー" /> 46<br /> 47<br /> 48<div id="display2"></div> 49</body> 50</html>

jsfiddle

コード中のvar timer = setInterval(...,250);となっているところで一定間隔での処理を開始しています。
...のところには実行したい処理の関数を渡してください。(例えばhoge()という関数を渡したければhogeと書いてください。)
250のところでは間隔を指定しています。ミリ秒で与えてください。(250は0.25秒のことです。)

clearInterval(timer)で処理を止めています。

「あいこの時やり直し」等は入れていないです。コード全体は参考程度にどうぞ。

投稿2017/10/11 16:15

編集2017/10/11 17:27
namnium1125

総合スコア2043

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

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

退会済みユーザー

退会済みユーザー

2017/10/12 02:49

ありがとうございます!初心者レベルなので,作って頂いたのを参考にしながら自分でも作ってみようと思います!
guest

0

setIntervalで一定時間ごとに手を変えればいいと思います。
止めるには、setIntervalの返り値をclearIntervalに渡せばいいです。

カンタンな例
https://jsfiddle.net/94hsdekq/

投稿2017/10/11 16:15

karamarimo

総合スコア2551

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問