使用JavaScript實現剪刀石頭布的小遊戲（由淺到深）

標籤：img   reac   att   ref   text   不同   就是   div   基礎   

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

　　

 

使用JavaScript實現剪刀石頭布的小遊戲（由淺到深）