白店小二手搓井字棋

2021-10-23 22:51:26 字數 2579 閱讀 8561

井字棋難度在於判斷勝利條件,說起來容易三子連一線,就算獲勝,但是實施起來很困難。

我這裡使用了乙個較為取巧的辦法:我將所有可能獲勝的方式歸總起來,存在乙個陣列裡,再把下棋雙方所下的每一步棋子都放置在乙個陣列中,然後對元素大於3的存棋陣列進行子陣列遍歷,取出其中長度為3的子陣列與獲勝陣列進行比較,若子陣列在獲勝陣列裡有出現,則判斷勝利。

效果圖

**

"button"

>

class

="drag-test"

>

class

="drag"

>

"drag-ele"

draggable

="true"

@dragstart

="whendragstart($event)"

>

別拽我span

>

div>

class

="box"

@drop.prevent

="eledrop($event)"

@dragover

="dragoverprevent($event)"

>

}div

>

div>

class

="checkerboard"

>

class

="piece"

v-for

="(item,index) in list"

:key

="index"

@click

="clickplay(item)"

>

>

}span

>

div>

div>

class

="footer"

>

>

@click

="gotouplv"

>

returnspan

>

div>

>

@click

="gotonextlv"

>

gospan

>

div>

footer

>

div>

import utils from

'../../utils/index.js'

export

default,,

,,,,

,,],

counts:1,

winner:[[

0,1,

2],[

3,4,

5],[

6,7,

8],[

0,3,

6],[

1,4,

7],[

2,5,

8],[

0,4,

8],[

2,4,

6]],

xresult:

, oresult:

, wintof:

false}}

,mounted()

, methods:

,eledrop

(e),

dragoverprevent

(e),

gotouplv()

,gotonextlv()

);},

clickplay

(ele)})

this

.winneresult

('x');

}this

.counts++;}

elseif(

this

.counts %2==

0&&this

.list[ele.id -1]

.content =='')

})this

.winneresult

('o');

}this

.counts++;}

}},winneresult

(query)

,100

)this

.wintof =

true}}

)}else

,100

)this

.wintof =

true}}

)}})

}}else,0

)}})

}else,0

)}})

}})}

}}}}

#button

.drag-test

.drag

.box

.footer

.footer div

.footer div span

.checkerboard

.piece

.piece:nth-child(3n-1)

白店小二手搓穿梭框

想當初我大四實習第一次面試的時候,機試題就是手寫出來穿梭框,不能用元件裡帶的,我當時在那傻坐了乙個多小時,也沒寫出來,尷尬!確實當時對於框架 元件都是能使用,但是不能問,問就是不會,更別說讓我寫個原生的了,理所當然的面試失敗,這也就成了我的乙個執念,我當時就想著我一定要自己把穿梭框給手搓出來,於是它...

白店小二的js知識 基礎

值型別 基本型別 字串 string 數字 number 布林 boolean 對空 null 未定義 undefined symbol。引用資料型別 物件 object 陣列 array 函式 function 注 symbol 是 es6 引入了一種新的原始資料型別,表示獨一無二的值。小知識 基...

白店小二的面試總結 閉包

閉包是指有權訪問另乙個函式作用域中的變數的函式,並且在閉包內部形成乙個外部無法訪問的區域性作用域。建立閉包的常見方式是在乙個函式內部建立另乙個函式。通過另乙個函式訪問這個函式的區域性變數,利用閉包可以突破作用鏈域,將函式內部的變數和方法傳遞到外部。閉包是一種機制 函式要訪問乙個變數的時候,就會先從自...