這個游戲主要設計到兩點：
首先是勝負運算
由于石頭剪刀布是循環性的
石頭 殺 剪子
剪子 殺 布
布 殺 石頭
石頭 殺 剪子
。。。
根據以上特點找出規律，寫出算法即可。
讓電腦隨機
這點比較容易，前面我有寫過文章介紹，不明白的童鞋可以去看看。
隨機刷屏
其實這個效果不是游戲的關鍵性，但為了看起來更加互動，好玩，我就給加上了。這里用到了一個取模算法，根據余數去循環顯示即可達到效果。
界面截圖
最后上代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>JS寫的石頭剪子布游戲 - 瓊臺博客</title> <style type="text/css"> div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;} div#cu{font-weight:bold;font-size:30px;height:40px;color:red;} div#la{border:none;background:none;display:none;} span{color:red;font-weight:bold;} </style> <script type="text/javascript"> var se = null,time=20,you=0,arr=new Array('石頭','抹布','剪子'); function p(n){ you = n; document.getElementById('you').innerHTML=s(n); document.getElementById('st').disabled=true; document.getElementById('mb').disabled=true; document.getElementById('jz').disabled=true; document.getElementById('cu').innerHTML = '...'; se = setInterval('t()',50); } function agin(){ document.getElementById('st').disabled=false; document.getElementById('mb').disabled=false; document.getElementById('jz').disabled=false; document.getElementById('la').style.display = 'none'; document.getElementById('you').innerHTML = ''; document.getElementById('pc').innerHTML = ''; document.getElementById('cu').innerHTML = ''; document.getElementById('you').innerHTML= '請選擇'; } function bt(){ var pc = Math.floor(Math.random() * 3 + 1); document.getElementById('pc').innerHTML = s(pc); var str=''; if(pc==you){ str += '平局'; }else{ var b = pc-you; if(b>0){ if(b==1){ str += '電腦贏'; }else{ str += '你贏啦'; } }else{ b = b*-1; if(b==1){ str += '你贏啦'; }else{ str += '電腦贏'; } } } document.getElementById('la').style.display = 'block'; document.getElementById('cu').innerHTML = str; } function t(){ if(time>0){ document.getElementById('pc').innerHTML = arr[time%3]; time--; }else{ clearInterval(se); se = null; time = 20; bt(); } } function s(n){ if(n==1){ return '石頭'; }else if(n==2){ return '抹布'; }else{ return '剪子'; } } </script> </head> <body> <div> <p>你出什么？<span id="you">請選擇</span></p> <p><button id="st" onclick="p(1);">石頭</button></p> <p><button id="mb" onclick="p(2);">抹布</button></p> <p><button id="jz" onclick="p(3);">剪子</button></p> </div> <div> <p>電腦出？</p> <span style="" id="pc"></span> </div> <div id="cu"></div> <div id="la"><button id="agin" onclick="agin()">再來一次</button></div> </body></html> |
