使用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 &amp; json的省市区联动代码
Jun 26 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
详解vue的数据binding绑定原理
Apr 12 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
vue项目接口域名动态获取操作
Aug 13 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
深入浅析React中diff算法
May 19 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
php下封装较好的数字分页方法
2010/11/23 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
深入解析Python编程中JSON模块的使用
2015/10/15 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python web框架中实现原生分页
2019/09/08 Python
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
自主招生自荐信
2013/12/08 职场文书
大学生通用个人的自我评价
2014/02/10 职场文书
装修设计师求职信
2014/02/26 职场文书
协议书怎么写
2014/04/21 职场文书
低碳环保口号
2014/06/12 职场文书
办理信用卡工作证明
2014/09/30 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
平安建设汇报材料
2014/12/29 职场文书
SQL SERVER触发器详解
2022/02/24 SQL Server