Share the code of developing stone scissors cloth with WeChat applets

This article mainly introduces the code of the small program stone scissors cloth instance. if you need it, you can refer to this article to introduce the code of the small program stone scissors cloth instance, for more information, see

Applet stone scissors cloth

Yesterday I saw a stone scissors cloth exercise. I took it out and did it. the layout code wasted a lot of time. as a result, CSS is not very skillful. the following code is directly used.

Var numAi = 0var timerPage ({data: {// whether the control button can be clicked btnState: false, // record the number of wins winNum: 0, // "Ho ~" in the middle ~ You Win "gameOfPlay:'', // user-selected image imageUserScr: '/pages/image/wenhao.png', // random computer image imageAiScr :'', // srcs: ['/pages/image/shitou.png', '/pages/image/jiandao.png', '/pages/image/bu.png']}, // life cycle, just entered onLoad: function () {// Obtain the local cache "successful times" var oldWinNum = wx. getStorageSync ('winnum'); // if there is a cache, the value is assigned; otherwise, the value is 0 if (oldWinNum! = Null & oldWinNum! = '') {This. data. winNum = oldWinNum;} this. timerGo () ;}, // Click changeForChoose (e) {console. log (); if (this. data. btnState = true) {return ;}// obtain the image of the user in the array, and the stone scissors cloth. This. setData ({imageUserScr: this. data. srcs [e. currentTarget. id]}); // clear the timer clearInterval (timer); // obtain the data source var user = this. data. imageUserScr; var ai = this. data. imageAiScr; var num = this. data. winNum; var str = '0. 0 ~ \ NYou Lost! '; // Determine whether to win if (user = "/pages/image/shitou.png" & ai = "/pages/image/jiandao.png ") {// increase the number of wins, change the text content, and cache the number of wins. num ++; str = 'ho ~ \ NYou Win! '; Wx. setStorageSync ('winnum', num) ;}; if (user = "/pages/image/jiandao.png" & ai = "/pages/image/bu.png ") {num ++; str = 'ho ~ \ NYou Win! '; Wx. setStorageSync ('winnum', num) ;}; if (user = "/pages/image/bu.png" & ai = "/pages/image/shitou.png ") {num ++; str = 'ho ~ \ NYou Win! '; Wx. setStorageSync ('winnum', num) ;}; // if the Draw is if (user = ai) {str = 'Game Draw! ';} // Refresh the data this. setData ({winNum: num, gameOfPlay: str, btnState: true}) ;}, // enable the timer timerGo () {timer = setInterval (this. move, 100) ;}, // ai rolling method move () {// if it is greater than or equal to 3, reset if (numAi> = 3) {numAi = 0;} this. setData ({// get the image of the Ai, Stone scissors cloth in the array. ImageAiScr: this. data. srcs [numAi],}) numAi ++;}, again () {// control button if (this. data. btnState = false) {return;} // start the timer this. timerGo (); // refresh data this. setData ({btnState: false, gameOfPlay: '', imageUserScr: '/pages/image/wenhao.png '});}})

. Wxml:

   
  
   
You have already won.
   
    
{WinNum} text> Secondary text>
     
     Image>
     
      
{GameOfPlay} text>
      Image> view>
       
       
         Blow a fist, boy ~ Text>
         
          
           
           Image> view> block> view>
           Come back! Button> view>
          
         
        
       
      
     
    
   
  
 

. Wxss:

/* BOTTOM */. downView {width: 100%; height: 1250rpx; background: # FAE738; margin: 0rpx; text-align: center;}/* number of victories */. winNum {padding-top: 40rpx; display: block; font-size: 30rpx; color: #363527; font-weight: 500;}/* display punch results */. showView {display: flex; width: 100%; margin-top: 30rpx; height: 200rpx ;}. gesturesImgL {height: 180rpx; width: 180rpx; margin-left: 80rpx ;}. gesturesImgR {height: 180rpx; width: 180rpx ; Margin-right: 80rpx ;}. winOrLost {color: orangered; flex: 1; font-size: 30rpx; margin-top: 75rpx;}/* User punch */. chooseForUserView {margin: 40rpx; height: 800rpx; background: white; text-align: center ;}. choose-V {display: flex; margin-top: 40rpx ;}. choose-view {flex: 1; content: none! Important; height: 140rpx; width: 140rpx; border: 1px solid white ;}. choose-image {height: 160rpx; width: 160rpx; border-radius: 80rpx;}/* then */. againBtn {margin: 80rpx; background: # FAE738 ;}

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

The above is to share the details of the code of the stone scissors cloth instance developed by the applet. For more information, see other related articles in the first PHP community!