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/12 02:49