溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用vue.js編寫藍(lán)色拼圖小游戲

發(fā)布時(shí)間：2021-04-26 13:41:07 來(lái)源：億速云 閱讀：176 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹了怎么使用vue.js編寫藍(lán)色拼圖小游戲，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

Later equals never！說(shuō)干就干。首先理解游戲的規(guī)則：第一關(guān)為1*1的方塊，第二關(guān)為2*2以此類推

怎么使用vue.js編寫藍(lán)色拼圖小游戲

該圖為第三關(guān)3*3的方塊。點(diǎn)擊一個(gè)小方塊，該方塊和它相鄰的方塊的的顏色會(huì)從黃色變?yōu)樗{(lán)色，全部變?yōu)樗{(lán)色就過(guò)關(guān)了。

現(xiàn)在規(guī)則清楚了，開(kāi)動(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*/
<div id="game">
<div class='game_bg'>
<div></div>
</div>
</div>
/*js*/
var vm=ew Vue({
el:'#game',
data:{
margin:6,//每張卡片間的距離
level:1,//游戲等級(jí)
cards:[],//卡片
size:0,//每張卡片的尺寸
},
methods:{},
});

卡片數(shù)為等級(jí)的平方，而每張卡片有黃色和藍(lán)色兩種顏色，并且隨著游戲難度的升級(jí)，方塊間的距離也在變小。所以在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)色
})
}
}

對(duì)<div class='game_bg'></div>中的div進(jìn)行數(shù)據(jù)綁定

<div class='card'
: 
:class="{'blueCard':card.color}" v-for="(index,card) in cards"></div>
</div>

 接下來(lái)就是點(diǎn)擊一個(gè)方塊進(jìn)行翻牌的方法。它本身和相鄰的卡片的color屬性取反就行了。而我們注意到：位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級(jí)；下面的下標(biāo)加等級(jí)。要注意的vm.cards下標(biāo)不存在的時(shí)候和在最左邊或最右邊時(shí)雖然下標(biāo)有可能存在但是相鄰的卡片是可能沒(méi)有的。所以加了一個(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<cards.length-1){//右邊
if((index+1)%vm.level){//不在最右邊
cards[index+1].color=!cards[index+1].color;
}
}
if(index-vm.level>=0){//上面
cards[index-vm.level].color=!cards[index-vm.level].color;
}
if(index+vm.level<cards.length){//下面
cards[index+vm.level].color=!cards[index+vm.level].color;
}
}
/*********************************************************/
flop:function(index){//翻牌
this.cards[index].color=!this.cards[index].color;
changeNeighbor(index);
}

每次點(diǎn)擊后都要判斷本關(guān)游戲是否結(jié)束。遍歷vm.cards。發(fā)現(xiàn)如果存在color屬性為false的就是沒(méi)有過(guò)關(guān)，反之則關(guān)過(guò)。

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ò)關(guān)之后將等級(jí)提高1。并且將等級(jí)存到localStorage中。每次進(jìn)入頁(yè)面都去localStorage中查詢等級(jí)。過(guò)關(guān)之后給個(gè)提示。將點(diǎn)擊的步驟數(shù)顯現(xiàn)出來(lái)。加上重置本輪和重置等級(jí)的方法。在細(xì)節(jié)上進(jìn)行一些修改和增加最后的代碼就是這樣

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.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;
}
</style>
</body>
<h2>翻牌子游戲</h2>
<div id="game">
<div class="info_box">
<span v-text="'第'+level+'關(guān)'"></span>
<span v-text="'點(diǎn)擊'+stepCount+'次'"></span>
</div>
<div class='game_bg'>
<div class='card' @click="flop(index)"
: 
:class="{'blueCard':card.color}" v-for="(index,card) in cards"></div>
</div>
<div class="rule_box">
<h4>游戲規(guī)則</h4>
<h5>點(diǎn)擊相應(yīng)的方塊該方塊和它相鄰的方塊的的顏色會(huì)發(fā)生變化，全部變?yōu)樗{(lán)色就過(guò)關(guān)了</h5>
</div>
<div class="btn_box">
<button @click="resetLevel">重置等級(jí)</button>
<button @click="initGame">重新開(kāi)始本輪</button>
</div>
</div>
<script src="vue/Vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 該函數(shù)用來(lái)改變點(diǎn)擊的卡片相鄰卡片的顏色
* 位于該卡片左邊的是下標(biāo)減1；右邊的是下標(biāo)加1；上面的是下標(biāo)減等級(jí)；下面的下標(biāo)加等級(jí)
*/
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<cards.length-1){//右邊
if((index+1)%vm.level){//不在最右邊
cards[index+1].color=!cards[index+1].color;
}
}
if(index-vm.level>=0){//上面
cards[index-vm.level].color=!cards[index-vm.level].color;
}
if(index+vm.level<cards.length){//下面
cards[index+vm.level].color=!cards[index+vm.level].color;
}
}
/**
*該函數(shù)用來(lái)判斷游戲是否結(jié)束 
*/
var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
setLevel(vm.level+1);
vm.stepCount=0;
return true
};
/**
* 將等級(jí)儲(chǔ)存止本地
*/
var setLevel=function(level){
localStorage.cardLevel=level;
};
/**
* 得到本地的等級(jí)
*/
var getLevel=function(){
if(localStorage.cardLevel) return localStorage.cardLevel*1;
return 0;
};
/**
* 構(gòu)建vue構(gòu)造函數(shù)
*/
var vm=new Vue({
el:'#game',
data:{
margin:6,//每張卡片間的距離
level:1,//游戲等級(jí)
cards:[],//卡片
size:0,//每張卡片的尺寸
stepCount:0,//每輪點(diǎn)擊的次數(shù)
},
methods:{
initGame:function(){//初始化游戲函數(shù)
var level=getLevel();
if(level){
this.level=level;
}
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)色
})
}
},
flop:function(index){//翻牌
this.stepCount++;
this.cards[index].color=!this.cards[index].color;
changeNeighbor(index);
if(gameOver()){
setTimeout(function(){
alert('恭喜通過(guò)第'+vm.level+'關(guān)');
vm.level++;
vm.initGame();
},200)
}
},
resetLevel:function(){//重置等級(jí)
this.level=1;
localStorage.cardLevel=1;
vm.initGame();
},
},
});
vm.initGame();
</script>
</html>

別忘了加上vue2.0。就可以玩了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用vue.js編寫藍(lán)色拼圖小游戲”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手