vue.js编写蓝色拼图小游戏
2017-03-16 19:43
387 查看
之前在网上看到《蓝色拼图》这款小游戏,作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢?
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' :style="{'width':size+'px','height':size+'px','marginTop':margin+'px','marginLeft':margin+'px'}" :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;
}
h1{
margin: 0;
text-align: center;
font-size: 28px;
margin-bottom: 10px;
}
</style>
</body>
<h1>翻牌子游戏</h1>
<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)"
:style="{'width':size+'px','height':size+'px','marginTop':margin+'px','marginLeft':margin+'px'}"
:class="{'blueCard':card.color}" v-for="(index,card) in cards"></div>
</div>
<div class="rule_box">
<h3>游戏规则</h3>
<h4>点击相应的方块该方块和它相邻的方块的的颜色会发生变化,全部变为蓝色就过关了</h4>
</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。就可以玩了。
不过悲剧的是我也就是第6关的水平
相关文章推荐
- 使用vue.js编写蓝色拼图小游戏
- Vue.js笔记-数字拼图小游戏
- 使用vue编写一个点击数字计时小游戏
- Vue.js结合vue-router和webpack编写单页路由项目
- 教你如何编写Vue.js的单元测试
- js编写“贪吃蛇”的小游戏
- 使用subline实现vue文件的高亮显示以及html和js的快速编写
- 详解如何使用Node.js编写命令工具――以vue-cli为例
- 如何使用Node.js编写命令工具——以vue-cli为例
- Vue.js入门学习--组件的注册使用+开奖小游戏(八)
- 解决vue.js在编写过程中出现空格不规范报错的问题
- Vue.js结合vue-router和webpack编写单页路由项目
- 基于vuejs+Element的注册插件的编写
- h5学习笔记:vuejs 编写进度条
- Vue.js结合vue-router和webpack编写单页路由项目
- HTML+CSS+JS 编写拼图小程序
- js编写“贪吃蛇”的小游戏
- Vue.js结合vue-router和webpack编写单页路由项目