本文共 3703 字,大约阅读时间需要 12 分钟。
昨天看 “小程序联盟” 这个网站上有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了。
.js:
- <span style="font-family:Arial Black;font-size:14px;color:#3366ff;">var numAi = 0
- var timer
- Page({
- data:{
-
- btnState:false,
-
- winNum:0,
-
- gameOfPlay:'',
-
- imageUserScr:'/pages/image/wenhao.png',
-
- imageAiScr:'',
-
- srcs:[
- '/pages/image/shitou.png',
- '/pages/image/jiandao.png',
- '/pages/image/bu.png'
- ]
- },
-
-
- onLoad: function () {
-
- var oldWinNum = wx.getStorageSync('winNum');
-
- if(oldWinNum != null && oldWinNum !=''){
- this.data.winNum = oldWinNum;
- }
- this.timerGo();
- },
-
-
- changeForChoose(e){
- console.log();
- if(this.data.btnState == true){
- return;
- }
-
-
- this.setData({
- imageUserScr:this.data.srcs[e.currentTarget.id]
- });
-
- clearInterval(timer);
-
-
- var user = this.data.imageUserScr;
- var ai = this.data.imageAiScr;
- var num = this.data.winNum;
- var str = '0.0~\nYou Lost!';
-
-
- if( user == "/pages/image/shitou.png" && ai == "/pages/image/jiandao.png"){
-
- 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(user == ai){
- str = 'Game Draw!';
- }
-
-
- this.setData({
- winNum:num,
- gameOfPlay:str,
- btnState:true
- });
- },
-
-
- timerGo(){
- timer = setInterval(this.move,100);
- },
-
-
- move(){
-
- if(numAi>=3){
- numAi=0;
- }
- this.setData({
-
- imageAiScr: this.data.srcs[numAi],
- })
- numAi++;
- },
-
- again(){
-
- if(this.data.btnState == false){
- return;
- }
-
- this.timerGo();
-
- this.setData({
- btnState:false,
- gameOfPlay:'',
- imageUserScr:'/pages/image/wenhao.png'
- });
- }
- })</span>
.wxml:
- <span style="font-family:Arial Black;font-size:14px;color:#3366ff;">
- <view class="downView" >
-
- <text class="winNum">你已经获胜了<text style="color:red">{ {winNum}}</text>次</text>
- <view class="showView">
- <image src="{ {imageAiScr}}" class="gesturesImgL"></image>
- <text class="winOrLost">{ {gameOfPlay}}</text>
- <image src="{ {imageUserScr}}" class="gesturesImgR"></image>
- </view>
-
-
-
- <view class="chooseForUserView">
- <text class="winNum">出拳吧,少年~</text>
- <view class="choose-V">
- <block wx:for="{ {srcs}}">
- <view class="choose-view" bindtap="changeForChoose" id="{ {index}}">
- <image class="choose-image" src="{ {item}}" ></image>
- </view>
- </block>
- </view>
-
- <button class="againBtn" bindtap="again">再来!</button>
-
- </view>
-
- </view>
- </span>
.wxss:
- <span style="font-family:Arial Black;font-size:14px;color:#3366ff;">
- .downView{
- width: 100%;
- height: 1250rpx;
- background: #FAE738;
- margin: 0rpx;
- text-align: center;
- }
-
-
- .winNum{
- padding-top: 40rpx;
- display: block;
- font-size: 30rpx;
- color: #363527;
- font-weight:500;
- }
-
-
- .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;
- }
-
-
- .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;
- }
-
-
- .againBtn{
- margin:80rpx;
- background: #FAE738;
- }</span>
共享demo:
感谢观看,学以致用更感谢~