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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.