zoukankan      html  css  js  c++  java
  • 使用JavaScript实现剪刀石头布的小游戏(由浅到深)

    使用JavaScript实现剪刀石头布的小游戏

     

    简单的解析:

    剪刀石头布的原理类似于一个数组中数字大小的比较,当然我们也可以将其分别使用对应的数字来代表剪刀石头布,在这里我们将 0 - 剪刀, 1 – 石头 , 2 – 布

    我们要得到自己胜利的方式有一下几种可能

    ① 我们胜利

     

    ② 和电脑平局

     

    ③ 电脑胜利

            

    思路一:

             将剪刀石头布分别使用数字代替,将数字作为实参,传入一个进行比较的方法,由于数字的不同,也使得出现的组合就不同。(这里我能使用随机数来让电脑随机生成0,1,2三个数的任意一个)

            

    假设我们第一次出的是剪刀(0),那么电脑会有三种可能(0 ,1, 2),而这三种能也就代表了三种结果

    我们就可以对这三种结果使用if进行判断

            

        function getValue(num1){
                    var num = 0;
                    var img = document.getElementById("computer");
                    var sheng = document.getElementById("sheng");
                    var shu = document.getElementById("shu");
                    if(img.getAttribute("src") == "js-01基础/QQ图片20180427170838.png"){
                        num = 0 ;
                        
                    }else if(img.getAttribute("src")== "js-01基础/QQ图片20180427170845.png"){
                        num=1;
                    }else if(img.getAttribute("src") == "js-01基础/QQ图片20180427170755.png"){
                        num=2;
                    }
                    alert(num1);
                    alert(num);
                    //玩家出剪刀时
                    if(num1 == 0){
                        if(num1 - num == -1){
                            shu.innerText = parseInt(shu.innerText)+1;
                        }else if(num1 - num == -2){
                            sheng.innerText = parseInt(sheng.innerText)+1;
                        }else if(num1 - num==0){
                            sheng.innerText = parseInt(sheng.innerText);
                            shu.innerText = parseInt(shu.innerText);
                        }
                    }
                    //玩家出石头时
                    if(num1 - num == 1){
                        sheng.innerText = parseInt(sheng.innerText)+1;
                    }else if(num1 - num==0){
                        sheng.innerText = parseInt(sheng.innerText);
                        shu.innerText = parseInt(shu.innerText);
                    }else if(num1-num == -1){
                        shu.innerText = parseInt(shu.innerText)+1;
                    }
                    
    //                玩家出布的时候
                    if(num1- num ==2){
                        shu.innerText = parseInt(shu.innerText)+1;
                    }else if(num1-num == 1){
                        sheng.innerText = parseInt(sheng.innerText)+1;
                    }else if(num1 - num==0){
                        sheng.innerText = parseInt(sheng.innerText);
                        shu.innerText = parseInt(shu.innerText);
                    }
                                    
                }
                

        对上面的代码进行解析:

        我们首先需要传入一个参数(参数是在每个图片的点击事件中自己设定一个参数),根据参数我们可以知道我们选定的是剪刀石头布中的哪一个,

        然后再根据 0 1 2 之间的运算关系进行判断。

      这就是对于上述代码的解析,同理可以得出其余情况。

          

        但是思路一虽然能够实现我们的想法,但是不够简洁,因此我们通常使用思路二的方式,来针对这种对随机数的判断

      思路二:我们可以采用数组的形式来进行比较判断

    <script type="text/javascript">
        var imgs = document.querySelectorAll("#imgs img");
        
        var imgSrc = ["img/jiandao.png","img/shitou.png","img/bu.png"];
        
        imgs.forEach(function(item,index,arr){
            item.onclick = function(){
                document.getElementById("myImg").src = item.getAttribute("src");
                
                var id = setInterval(function(){
                    var num =  parseInt(Math.random()*3);
                    document.getElementById("computer").src = imgSrc[num];
                },20);
                
                setTimeout(function(){
                    clearInterval(id);
                    var myImg = document.getElementById("myImg").getAttribute("src");
                    var comImg = document.getElementById("computer").getAttribute("src");
                    
                    var myIndex = imgSrc.indexOf(myImg);
                    var comIndex = imgSrc.indexOf(comImg);
                    
                    check(myIndex,comIndex);
                },500);
                
            };
        });
        
        function check(myIndex,comIndex){
            var score = document.getElementById("score");
            var span1 = document.querySelectorAll("#scoreFen span")[0];
            var span2 = document.querySelectorAll("#scoreFen span")[1];
            if(myIndex==0&&comIndex==2 || myIndex==1&&comIndex==0
                || myIndex==2&&comIndex==1){
                score.innerText = "恭喜!你赢啦!";
                var s = parseInt(span1.innerText)+1;
                span1.innerText = s<10?"0"+s:s;
            }else if(myIndex==comIndex){
                score.innerText = "平局!再来一局吧!";
            }else{
                score.innerText = "sorry!你输啦!";
                var s = parseInt(span2.innerText)+1;
                span2.innerText = s<10?"0"+s:s;
            }
                
            
        }
        
        
    </script>

      以上为完整的script区域代码

      首先通过构造一个剪刀石头布的数组,通过遍历取到数组中剪刀石头布相对应的下标还有地址,然后动态绑定一个function,使得“您选择了”下方的图片,与我们所点击的图片,进行匹配。

      

  • 相关阅读:
    UVa 10118 记忆化搜索 Free Candies
    CodeForces 568B DP Symmetric and Transitive
    UVa 11695 树的直径 Flight Planning
    UVa 10934 DP Dropping water balloons
    CodeForces 543D 树形DP Road Improvement
    CodeForces 570E DP Pig and Palindromes
    HDU 5396 区间DP 数学 Expression
    HDU 5402 模拟 构造 Travelling Salesman Problem
    HDU 5399 数学 Too Simple
    CodeForces 567F DP Mausoleum
  • 原文地址:https://www.cnblogs.com/Code-ccc/p/8971100.html
Copyright © 2011-2022 走看看