使用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 相关文章推荐
jquery ui resizable bug解决方法
Oct 26 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
详解使用nvm管理多版本node的方法
Aug 30 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
vue实现分页的三种效果
Jun 23 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
JS中操作JSON总结
2020/12/06 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
2016/06/27 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
python实现目录树生成示例
2014/03/28 Python
Python多线程爬虫简单示例
2016/03/04 Python
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python @property使用方法解析
2019/09/17 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
聊聊python中的异常嵌套
2020/09/01 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
python opencv实现图像配准与比较
2021/02/09 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2014年九一八事变演讲稿
2014/09/14 职场文书
普宁寺导游词
2015/02/04 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技