Using JavaScript to implement a small game of rock-paper-scissors (from shallow to deep)

Using JavaScript to implement a small game of rock paper scissors

 

 

 

Simple analysis:

The principle of rock-paper-scissors is similar to the comparison of the size of numbers in an array. Of course, we can also use the corresponding numbers to represent rock-paper-scissors. Here we will 0 - scissors, 1 - rock, 2 - cloth

 

There are several possibilities for how we can get our own victory

 

① We win

 

 

② Draw against the computer

 

 

③ Computer Victory

        

 

 

Idea one:

         Replace rock-paper-scissors with numbers, use numbers as actual parameters, and pass in a method for comparison. Due to the different numbers, the combinations that appear are different. (Here I can use random numbers to let the computer randomly generate any one of the three numbers 0, 1, and 2)

        

Assuming that the first time we use scissors (0), then the computer will have three possibilities (0, 1, 2), and these three energies represent three outcomes

 

We can use if to judge these three results

        

    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 basic/QQ picture 20180427170845.png" ){
                    num =1 ;
                } else  if (img.getAttribute("src") == "js-01 basic/QQ picture 20180427170755.png" ){
                    num =2 ;
                }
                alert(num1);
                alert(num);
                // When the player pulls the scissors 
                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 the player throws stones 
                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;
                }
                
//                 When the player releases 
                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);
                }
                                
            }
            

　　　　Parse the above code:

　　　　We first need to pass in a parameter (the parameter is to set a parameter in the click event of each picture), according to the parameter, we can know which one of the rock-paper-scissors we have selected,

　　　　Then judge according to the operational relationship between 0 1 2.

　　This is the analysis of the above code, and the rest can be obtained in the same way.

　　　　　　

　　　　However, although the first idea can realize our idea, it is not concise enough, so we usually use the second idea to judge this kind of random number.

 

 

　　Idea 2: We can compare and judge in the form of an array

<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 = "Congratulations! You won!" ;
             var s = parseInt(span1.innerText)+1 ;
            span1.innerText = s<10?"0"+s:s;
        }else if(myIndex==comIndex){
            score.innerText = "Tie! Another game!" ;
        }else{
            score.innerText = "sorry! You lost!" ;
             var s = parseInt(span2.innerText)+1 ;
            span2.innerText = s<10?"0"+s:s;
        }
            
        
    }
    
    
</script>

　　The above is the complete script area code

　　First, construct an array of rock-paper-scissors, obtain the corresponding subscripts and addresses of rock-paper-scissors in the array by traversing, and then dynamically bind a function, so that the picture under "You have selected" is the same as the one we clicked. pictures to match.