微信小程序?qū)崿F(xiàn)井字棋游戲
更新時(shí)間:2022年05月23日 15:36:53 作者:換日線°
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)井字棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)井字棋游戲的具體代碼,供大家參考,具體內(nèi)容如下
效果圖
.wxml
<view class="title"> ? <view wx:if="{{currindex < 9 || defeat}}"> ? {{defeat?'勝出方:':'輪到了:'}}<span class="span">{{defeat?(outindex?'○':'x'):(outindex?'x':'○')}}</span> ? </view> ? <view wx:else>平局</view> </view> <view class="curr_toe"> ? <view wx:for="{{detail}}" wx:key="index" class="curr_item"? ? bindtap="{{item.type > 0 || defeat?'':'tactoe'}}" data-index="{{index}}"> ? ? <view wx:if="{{item.type > 0}}">{{item.type == 1?'○':'×'}}</view> ? </view> </view> <button wx:if="{{defeat || currindex > 8}}" bindtap="reset">重新開始</button>
.wxss
page{background: #fff;} .title{width: 100%;display: flex;align-items: center;justify-content: center;margin-top: 20rpx;font-size: 34rpx;} .span{font-size: 60rpx;} .curr_toe{width: 510rpx;height: 510rpx;margin: 30rpx calc((100% - 500rpx) / 2);border-top:1px solid #ddd;border-right: 1px solid #ddd;} .curr_item{border-left: 1px solid #ddd;width: 33.33%;height: 170rpx;display: flex;align-items: center;justify-content: center;color:red; font-size:170rpx;float: left;border-bottom: 1px solid #ddd;}
.js
Page({ ? data: { ? ? lines:[ ? ? ? [0, 1, 2], ? ? ? [3, 4, 5], ? ? ? [6, 7, 8], ? ? ? [0, 3, 6], ? ? ? [1, 4, 7], ? ? ? [2, 5, 8], ? ? ? [0, 4, 8], ? ? ? [2, 4, 6], ? ? ] ? }, ? onLoad: function (options) { ? ? this.reset() ? }, ? reset(e){ ? ? this.setData({ ? ? ? detail:[ ? ? ? ? {type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0},{type:0} ? ? ? ], ? ? ? defeat:false, ? ? ? outindex:false, ? ? ? currindex:0 ? ? }) ? }, ? tactoe(e){ ? ? var index = e.currentTarget.dataset.index,currindex = this.data.currindex, ? ? detail = this.data.detail,outindex = this.data.outindex; ? ? currindex++ ? ? detail[index].type = outindex?2:1 ? ? this.setData({ ? ? ? detail:detail, ? ? ? currindex:currindex, ? ? ? outindex:!outindex ? ? }) ? ? if(currindex > 4){ ? ? ? this.validate() ? ? } ? }, ? validate(e){ ? ? var detail = this.data.detail,lines = this.data.lines; ? ? for(let i = 0;i < lines.length;i++){ ? ? ? const [a, b, c] = lines[i]; ? ? ? if(detail[a].type && detail[a].type == detail[b].type && detail[a].type == detail[c].type){ ? ? ? ? wx.showModal({ ? ? ? ? ? title: '提示', ? ? ? ? ? content: (detail[a].type == 1?'○':'×')+'獲得了勝利', ? ? ? ? ? showCancel:false, ? ? ? ? ? confirmText:'我知道了' ? ? ? ? }) ? ? ? ? this.setData({ ? ? ? ? ? defeat:true ? ? ? ? }) ? ? ? ? return false; ? ? ? } ? ? } ? }, })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)列表滾動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)列表滾動(dòng)的方法,較為詳細(xì)的分析了javascript實(shí)現(xiàn)列表滾動(dòng)的頁面布局及javascript滾動(dòng)效果的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對(duì)象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對(duì)象的9種方式,幫助大家更好地學(xué)習(xí)javascript面向?qū)ο?,感興趣的小伙伴們可以參考一下2016-01-01JS加密插件CryptoJS實(shí)現(xiàn)的DES加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的DES加密,結(jié)合實(shí)例形式分析了javascript使用CryptoJS插件進(jìn)行des加密的各種常見模式使用技巧,需要的朋友可以參考下2018-08-08