Use JavaScript to implement a small game of scissors and stone cloth (from shallow to deep)

Use JavaScript to implement a small game of scissors and stone cloth

Simple parsing:

The principle of scissors and stone cloth is similar to the comparison of the numbers in an array, of course, we can use the corresponding numbers to represent the scissors stone cloth, here we will 0-scissors,-

We're going to get our own way of winning there are several possibilities

① We win

② and computer Draw

③ Computer victory

Idea One:

The Scissors stone cloth uses the number instead, takes the number as the argument, passes in a comparison method, because the number difference, also causes the appearance the combination to be different. (Here I can use random numbers to randomly generate a random number of 0,1,2 three)

Assuming that we first have scissors (0), then the computer will have three possibilities (0, 1, 2), and three of these can represent three results.

We can judge these three results using if.

    functionGetValue (NUM1) {varnum = 0; varimg = document.getElementById ("Computer"); varSheng = document.getElementById ("Sheng"); varShu = document.getElementById ("Shu"); if(Img.getattribute ("src") = = "js-01 basic/qq picture 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 is out of 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); }                }                //when the player is out of stone                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 is out of the cloth                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); }                                            }            

The above code is parsed:

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 parameters we can know which of the scissors stone cloth we selected,

Then, according to the operation relationship between 0 1 2.

This is the interpretation of the above code, the same can be obtained in the rest of the situation.

　　　　　　

However, although the idea of thinking can achieve our ideas, but not concise, so we usually use the way of thinking two, to the random number of the judgment

Idea two: We can use the form of array to compare and judge

<script type= "Text/javascript" >varIMGs = Document.queryselectorall ("#imgs img"); varIMGSRC = ["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")); varid = setinterval (function(){                varnum = parseint (Math.random ()); document.getElementById ("Computer"). src =Imgsrc[num]; },20); SetTimeout (function() {clearinterval (ID); varmyimg = document.getElementById ("myimg"). getattribute ("src"); varcomimg = document.getElementById ("Computer"). getattribute ("src"); varMyindex =Imgsrc.indexof (MYIMG); varComindex =Imgsrc.indexof (COMIMG);            Check (Myindex,comindex); },500);    };        }); functionCheck (myindex,comindex) {varScore = document.getElementById ("Score"); varSpan1 = Document.queryselectorall ("#scoreFen span") [0]; varSpan2 = Document.queryselectorall ("#scoreFen span") [1]; if(myindex==0&&comindex==2 | | myindex==1&&comindex==0 | | myindex==2&&comindex==1) {Score.innertext= "Congratulations!" You won! "; vars = parseint (Span1.innertext) +1; Span1.innertext= s<10? " 0 "+s:s; }Else if(myindex==Comindex) {Score.innertext= "Draw!" One more game! "; }Else{Score.innertext= "sorry! You lost! "; vars = parseint (Span2.innertext) +1; Span2.innertext= s<10? " 0 "+s:s; }                        }        </script>

The above is the complete script area code

First by constructing an array of scissors and stone cloth, by traversing to the array of scissors and stone cloth corresponding to the subscript and address, and then dynamically bind a function, so that "you select" below the picture, and we clicked on the picture, to match.

　　

Use JavaScript to implement a small game of scissors and stone cloth (from shallow to deep)