微信小程序如何實現五子棋游戲

蝸牛 互聯網技術資訊 2022-05-25 13 0

本文小編為大家詳細介紹“微信小程序如何實現五子棋游戲”,內容詳細,步驟清晰,細節處理妥當,希望這篇“微信小程序如何實現五子棋游戲”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。

微信小程序如何實現五子棋游戲  微信小程序 第1張

微信小程序如何實現五子棋游戲  微信小程序 第2張

效果圖

.wxml

<view?class="title">
??<view?wx:if="{{currindex?<?324?||?defeat}}">
??{{defeat?'勝出方:'+(outindex?'黑棋':'白棋'):'輪到了:'+(outindex?'白棋':'黑棋')}}
??</view>
??<view?wx:else>平局</view>
</view>
<view?class="gobang">
??<view?wx:for="{{detail}}"?wx:key="index"?bindtap="{{defeat?||?item.type?>?0?'':'palyclass'}}"?data-index="{{index}}">
????<view?class="piece?{{item.type?>?0?item.type?==?1?'black':'white':''}}"></view>
??</view>
</view>
<button?wx:if="{{defeat?||?currindex?>?323}}"?bindtap="reset">重新開始</button>

.wxss

page{background:?#fff;}
.title{width:?100%;display:?flex;align-items:?center;justify-content:?center;margin-top:?20rpx;font-size:?34rpx;}
.gobang{width:?342px;height:?342px;margin:?30rpx?calc((100%?-?342px)?/?2);float:?left;
position:?relative;right:?9.5px;}
.gobang>view{width:?5.55%;height:?19px;float:?left;display:?flex;align-content:?center;justify-content:?center;
border-left:?1px?solid?#333;border-top:?1px?solid?#333;background:?#F0BF7C;}
.gobang>view:nth-child(18n+1){width:?5.6%;border-left:?0;border-top:?0;background:?#fff;}
.gobang>view:nth-child(18n){border-right:?1px?solid?#333;}
.gobang>view:nth-child(n+307){border-left:?0;background:?#fff;border-right:?0;}
.piece{background:?rgba(255,255,255,0);width:?100%;height:?100%;border-radius:?50%;transition:?background?0.3s;
position:?relative;left:?9.5px;bottom:?9.5px;}
.white{background:radial-gradient(15px?15px?at?15px?15px,#fff,#e2e2e2);box-shadow:2px?2px?4px?rgba(0,0,0,0.3);}
.black{background:radial-gradient(10px?10px?at?15px?15px,#e2e2e2,#333);box-shadow:2px?2px?4px?rgba(0,0,0,0.4);}

.js

Page({
??data:?{
??},
??onLoad:?function?(options)?{
????this.reset()
??},
??reset(e){
????var?detail?=?[]
????for(let?i?=?0;i?<?324;i++){
??????detail.push({type:0})
????}
????this.setData({
??????detail:detail,
??????defeat:false,
??????outindex:false,
??????currindex:0,
????})
??},
??palyclass(e){
????var?index?=?e.currentTarget.dataset.index,detail?=?this.data.detail,outindex?=?this.data.outindex,
????currindex?=?this.data.currindex;
????currindex++
????detail[index].type?=?outindex?2:1
????this.setData({
??????detail:detail,
??????outindex:!outindex,
??????currindex:currindex,
????})
????if(currindex?>?8){
??????this.validate(index)
????}
??},
??validate(index){
????var?detail?=?this.data.detail,type?=?this.data.outindex?1:2,remai_left?=?(index%18)+1,remai_right?=?19?-?remai_left,
????remai_upper?=?Math.floor(index?/?18)?+?1,remai_lower?=?19?-?remai_upper,arr?=?[];
????for(let?i?=?1;i?<?(remai_left?>?4?5:remai_left);i++){
??????arr.unshift(index?-?i)
????}
????for(let?i?=?1;i?<?(remai_right?>?4?5:remai_right);i++){
??????arr.push(index?+?i)
????}
????this.result(arr,type).then(()?=>?{
??????arr?=?[];
??????for(let?i?=?1;i?<?(remai_upper?>?4?5:remai_upper);i++){
????????arr.unshift(index?-?(18*i))
??????}
??????for(let?i?=?1;i?<?(remai_lower?>?4?5:remai_lower);i++){
????????arr.push(index?+?(18*i))
??????}
??????this.result(arr,type).then(()?=>?{
????????var?oblique_left?=?remai_upper?<?remai_left?remai_upper:remai_left,
????????oblique_right?=?remai_lower?<?remai_right?remai_lower:remai_right;
????????arr?=?[];
????????for(let?i?=?1;i?<?(oblique_left?>?4?5:oblique_left);i++){
??????????arr.unshift(index?-?(18*i)?-?i)
????????}
????????for(let?i?=?1;i?<?(oblique_right?>?4?5:oblique_right);i++){
??????????arr.push(index?+?(18*i)?+?i)
????????}
????????this.result(arr,type).then(()?=>?{
??????????var?curved_left?=?remai_upper?<?remai_right?remai_upper:remai_right,
??????????curved_right?=?remai_lower?<?remai_left?remai_lower:remai_left;
??????????arr?=?[];
??????????for(let?i?=?1;i?<?(curved_left?>?4?5:curved_left);i++){
????????????arr.unshift(index?-?(18*i)?+?i)
??????????}
??????????for(let?i?=?1;i?<?(curved_right?>?4?5:curved_right);i++){
????????????arr.push(index?+?(18*i)?-?i)
??????????}
??????????this.result(arr,type).then(()?=>?{
????????????return;
??????????})
????????})
??????})
????})
??},
??result(arr,type){
????var?detail?=?this.data.detail,number?=?0;
????for(let?i?=?0;i?<?arr.length;i++){
??????if(detail[arr[i]].type?==?type){
????????number++
??????}else?if(number?>?0){
????????break;
??????}
????}
????return?new?Promise((resolve,?reject)?=>?{
??????if(number?>?3){
????????this.tips(type);
??????}else{
????????resolve()
??????}
????})
??},
??tips(type){
????this.setData({
??????defeat:true,
????})
????wx.showModal({
??????title:?'提示',
??????content:?'恭喜'+(type?==?1?'黑棋':'白棋')+'獲得了勝利',
??????showCancel:false,
??????confirmText:'我知道了'
????})
??},
})

讀到這里,這篇“微信小程序如何實現五子棋游戲”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注蝸牛博客行業資訊頻道。

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看