建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹了怎么使用vue.js編寫藍(lán)色拼圖小游戲，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，先為富順等服務(wù)建站，富順等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為富順企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
Vue的優(yōu)點(diǎn)
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。
Later equals never！說干就干。首先理解游戲的規(guī)則：第一關(guān)為1*1的方塊，第二關(guān)為2*2以此類推
該圖為第三關(guān)3*3的方塊。點(diǎn)擊一個(gè)小方塊，該方塊和它相鄰的方塊的的顏色會(huì)從黃色變?yōu)樗{(lán)色，全部變?yōu)樗{(lán)色就過關(guān)了。
現(xiàn)在規(guī)則清楚了，開動(dòng)吧！
/*style*/
.game_bg{
background: #333;
width: 600px;
height: 600px;
margin: 30px auto;
border-radius: 3px;
}
.card{
background: #E6AB5E;
float: left;
margin: 6px 0 0 6px;
}
.blueCard{
background: #5C90FF;
}
/*html*/
卡片數(shù)為等級的平方，而每張卡片有黃色和藍(lán)色兩種顏色，并且隨著游戲難度的升級，方塊間的距離也在變小。所以在vue構(gòu)造函數(shù)中添加初始化游戲方法
initGame:function(){//初始化游戲函數(shù)
if(this.level<4){
this.margin=12;
}else if(this.level<8){
this.margin=6;
}else if(this.level<16){
this.margin=3;
}else{
this.margin=1;
}
this.cards=[];
this.size=(600-(this.level+1)*this.margin)/this.level;
for(var i=this.level*this.level;i--;){
this.cards.push({
color:false,//false是黃色，true是藍(lán)色
})
}
}對中的div進(jìn)行數(shù)據(jù)綁定
接下來就是點(diǎn)擊一個(gè)方塊進(jìn)行翻牌的方法。它本身和相鄰的卡片的color屬性取反就行了。而我們注意到：位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級；下面的下標(biāo)加等級。要注意的vm.cards下標(biāo)不存在的時(shí)候和在最左邊或最右邊時(shí)雖然下標(biāo)有可能存在但是相鄰的卡片是可能沒有的。所以加了一個(gè)改變相鄰區(qū)域的顏色的方法和在methods中加了一個(gè)翻牌子的方法
var changeNeighbor=function(index){
var cards=vm.cards;
if(index>0){//左邊
if(index%vm.level){//不在最左邊
cards[index-1].color=!cards[index-1].color;
}
}
if(index=0){//上面
cards[index-vm.level].color=!cards[index-vm.level].color;
}
if(index+vm.level每次點(diǎn)擊后都要判斷本關(guān)游戲是否結(jié)束。遍歷vm.cards。發(fā)現(xiàn)如果存在color屬性為false的就是沒有過關(guān)，反之則關(guān)過。
var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};這樣游戲基本的功能就實(shí)現(xiàn)了。然后再加上過關(guān)之后將等級提高1。并且將等級存到localStorage中。每次進(jìn)入頁面都去localStorage中查詢等級。過關(guān)之后給個(gè)提示。將點(diǎn)擊的步驟數(shù)顯現(xiàn)出來。加上重置本輪和重置等級的方法。在細(xì)節(jié)上進(jìn)行一些修改和增加最后的代碼就是這樣
.game_bg{
background: #333;
width: 600px;
height: 600px;
margin: 30px auto;
border-radius: 3px;
}
.card{
background: #E6AB5E;
float: left;
margin: 6px 0 0 6px;
}
.blueCard{
background: #5C90FF;
}
.btn_box{
text-align: center;
}
.info_box{
text-align: center;
}
.info_box span{
padding: 20px;
}
.rule_box{
width: 300px;
position: fixed;
top: 100px;
left: 50px;
color: #333;
}
h2{
margin: 0;
text-align: center;
font-size: 28px;
margin-bottom: 10px;
}
翻牌子游戲
