使用vue.js编写蓝色拼图小游戏


Posted in Javascript onMarch 17, 2017

之前在网上看到《蓝色拼图》这款小游戏,作者是用jquery写的。于是便考虑能不能用vue.js优雅简单的编写出来呢?

Later equals never!说干就干。首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推

使用vue.js编写蓝色拼图小游戏

该图为第三关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。就可以玩了。

以上所述是小编给大家介绍的vue.js编写蓝色拼图小游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
prototype class详解
Sep 07 Javascript
Ext 今日学习总结
Sep 19 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 Javascript
详解React中的组件通信问题
Jul 31 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 #Javascript
javascript 动态生成css代码的两种方法
Mar 17 #Javascript
AngularJS中$http使用的简单介绍
Mar 17 #Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 #Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 #Javascript
Bootstrap表格制作代码
Mar 17 #Javascript
鼠标经过出现气泡框的简单实例
Mar 17 #Javascript
You might like
基于php split()函数的用法详解
2013/06/05 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
简单了解OpenCV是个什么东西
2017/11/10 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python实现五子棋小程序
2019/06/18 Python
python小程序实现刷票功能详解
2019/07/17 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python中os.remove()用法及注意事项
2021/01/31 Python
美发店5.1活动方案
2014/01/24 职场文书
保研推荐信
2014/05/09 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
二审答辩状格式
2015/05/22 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
「月刊Action」2022年5月号封面公开
2022/03/21 日漫