怎么使用vue.js編寫藍色拼圖小游戲
這篇文章主要介紹了怎么使用vue.js編寫藍色拼圖小游戲，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創新互聯自2013年創立以來，先為富順等服務建站，富順等地企業，進行企業商務咨詢服務。為富順企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。
Vue的優點
Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。
Later equals never！說干就干。首先理解游戲的規則：第一關為1*1的方塊，第二關為2*2以此類推
該圖為第三關3*3的方塊。點擊一個小方塊，該方塊和它相鄰的方塊的的顏色會從黃色變為藍色，全部變為藍色就過關了。
現在規則清楚了，開動吧！
/*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,//游戲等級
cards:[],//卡片
size:0,//每張卡片的尺寸
},
methods:{},
});卡片數為等級的平方，而每張卡片有黃色和藍色兩種顏色，并且隨著游戲難度的升級，方塊間的距離也在變小。所以在vue構造函數中添加初始化游戲方法
initGame:function(){//初始化游戲函數
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是藍色
})
}
}對<div class='game_bg'></div>中的div進行數據綁定
<div class='card'
:
:class="{'blueCard':card.color}" v-for="(index,card) in cards"></div>
</div>接下來就是點擊一個方塊進行翻牌的方法。它本身和相鄰的卡片的color屬性取反就行了。而我們注意到：位于該卡片左邊的是下標減1；右邊的是下標加1；上面的是下標減等級；下面的下標加等級。要注意的vm.cards下標不存在的時候和在最左邊或最右邊時雖然下標有可能存在但是相鄰的卡片是可能沒有的。所以加了一個改變相鄰區域的顏色的方法和在methods中加了一個翻牌子的方法
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);
}每次點擊后都要判斷本關游戲是否結束。遍歷vm.cards。發現如果存在color屬性為false的就是沒有過關，反之則關過。
var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};這樣游戲基本的功能就實現了。然后再加上過關之后將等級提高1。并且將等級存到localStorage中。每次進入頁面都去localStorage中查詢等級。過關之后給個提示。將點擊的步驟數顯現出來。加上重置本輪和重置等級的方法。在細節上進行一些修改和增加最后的代碼就是這樣
<!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+'關'"></span>
<span v-text="'點擊'+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>游戲規則</h4>
<h5>點擊相應的方塊該方塊和它相鄰的方塊的的顏色會發生變化，全部變為藍色就過關了</h5>
</div>
<div class="btn_box">
<button @click="resetLevel">重置等級</button>
<button @click="initGame">重新開始本輪</button>
</div>
</div>
<script src="vue/Vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 該函數用來改變點擊的卡片相鄰卡片的顏色
* 位于該卡片左邊的是下標減1；右邊的是下標加1；上面的是下標減等級；下面的下標加等級
*/
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;
}
}
/**
*該函數用來判斷游戲是否結束
*/
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
};
/**
* 將等級儲存止本地
*/
var setLevel=function(level){
localStorage.cardLevel=level;
};
/**
* 得到本地的等級
*/
var getLevel=function(){
if(localStorage.cardLevel) return localStorage.cardLevel*1;
return 0;
};
/**
* 構建vue構造函數
*/
var vm=new Vue({
el:'#game',
data:{
margin:6,//每張卡片間的距離
level:1,//游戲等級
cards:[],//卡片
size:0,//每張卡片的尺寸
stepCount:0,//每輪點擊的次數
},
methods:{
initGame:function(){//初始化游戲函數
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是藍色
})
}
},
flop:function(index){//翻牌
this.stepCount++;
this.cards[index].color=!this.cards[index].color;
changeNeighbor(index);
if(gameOver()){
setTimeout(function(){
alert('恭喜通過第'+vm.level+'關');
vm.level++;
vm.initGame();
},200)
}
},
resetLevel:function(){//重置等級
this.level=1;
localStorage.cardLevel=1;
vm.initGame();
},
},
});
vm.initGame();
</script>
</html>別忘了加上vue2.0。就可以玩了。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么使用vue.js編寫藍色拼圖小游戲”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!
標題名稱：怎么使用vue.js編寫藍色拼圖小游戲
分享鏈接：http://m.kartarina.com/article46/gechhg.html
成都網站建設公司_創新互聯，為您提供網站策劃、企業建站、關鍵詞優化、電子商務、網站改版、移動網站建設
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 網站制作模板_好的品牌網站建設公司重視哪些問題 2016-09-26
- 電商品牌網站建設中如何完善功能系統 2022-04-07
- 制作品牌網站建設解決方案如何做？ 2020-11-27
- 品牌網站建設公司哪家好? 2016-09-19
- 企業品牌網站建設依舊是圍繞用戶需求來提升公司形象 2022-05-20
- 廣州品牌網站建設的優勢是什么？ 2022-12-29
- 企業品牌網站建設需要注意什么關鍵事項？ 2022-12-31
- 高端的品牌網站建設需要做什么前期準備？ 2016-08-13
- 性價比是品牌網站建設重要標準 2016-10-26
- 婚慶品牌網站建設解決方案 2021-06-29
- 哪些因素會影響品牌網站建設的質量 2022-11-15
- 工業品牌網站建設解決方案的特點與重要性 2021-07-25