使用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 相关文章推荐
event.X和event.clientX的区别分析
Oct 06 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 Javascript
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
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
js有序数组的连接问题
2013/10/01 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
python生成1行四列全2矩阵的方法
2018/08/04 Python
详解python:time模块用法
2019/03/25 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
绿色家庭事迹材料
2014/05/01 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
企业标语口号
2014/06/10 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
简短的36句中秋节祝福信息语句
2019/09/09 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android