当前位置：首页 > 资讯 > 技术文档

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

时间：2022-10-29 05:00 编辑：来源：阅读：
扫一扫，手机访问

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

这个游戏主要设计到两点： [b]首先是胜负运算[/b] 由于石头剪刀布是循环性的石头杀剪子剪子杀布布杀石头石头杀剪子。。。根据以上特点找出规律，写出算法即可。 [b]让电脑随机[/b] 这点比较容易，前面我有写过文章介绍，不明白的童鞋可以去看看。 [b]随机刷屏[/b] 其实这个效果不是游戏的关键性，但为了看起来更加互动，好玩，我就给加上了。这里用到了一个取模算法，根据余数去循环显示即可达到效果。 [b]界面截图[/b] [b][img]http://files.jb51.net/file_images/article/201408/2014822103102048.png?2014722103117[/img] [/b] [b]最后上代码[/b]

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

全部评论(0)

上一篇：Bootstrap进度条组件知识详解
下一篇：js求数组中全部数字可拼接出的最大整数示例代码

资讯排行榜
更多>>