使用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，使得“您選擇了”下方的圖片，與我們所點擊的圖片，進行匹配。