个人中心
gpt4 book ai didi

JavaScript实现的石头剪刀布游戏源码分享

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现的石头剪刀布游戏源码分享由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

这个游戏主要设计到两点:

首先是胜负运算 。

由于石头剪刀布是循环性的 石头 杀 剪子 剪子 杀 布 布   杀  石头 石头  杀  剪子 。。。 根据以上特点找出规律，写出算法即可.

让电脑随机 。

这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看.

随机刷屏 。

其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果.

界面截图 。

JavaScript实现的石头剪刀布游戏源码分享

最后上代码 。

?
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 >          

  。

最后此篇关于JavaScript实现的石头剪刀布游戏源码分享的文章就讲到这里了,如果你想了解更多关于JavaScript实现的石头剪刀布游戏源码分享的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： jQuery实现列表自动滚动循环滚动展示新闻
文章推荐： 用jquery修复在iframe下的页面锚点失效问题
文章推荐： 一个很有趣3D球状标签云兼容IE8
文章推荐： wap图片滚动特效无css3元素纯js脚本编写
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com