JavaScript写的一个石头剪子布游戏,大家进来玩玩吧!

游戏通常都要做到以下两点

  • 电脑随机
  • 判断胜负

首先是胜负算法,游戏规则

  • 石头 杀 剪子
  • 剪子 杀 抹布
  • 抹布 杀 石头
  • 石头 杀 剪子

根据以上规则找出规律,写出算法即可。

让电脑随机,这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看。

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

完整代码

<!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=['石头','抹布','剪子'];
        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>
    <div><p><a href="https://www.qttc.net" target="_blank">琼台博客 www.qttc.net</a></p></div>
  </body>
</html> 
分享

TITLE: JavaScript写的一个石头剪子布游戏,大家进来玩玩吧!

LINK: https://www.qttc.net/138-javascript-rock-paper-scissors.html

NOTE: 原创内容,转载请注明出自琼台博客