使用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 trim() 功能源代码
Feb 14 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
layui选项卡效果实现代码
May 19 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
Vue隐藏显示、只读实例代码
Jul 18 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
JavaScript实现弹出窗口效果
Dec 09 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
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript取得键盘按下方向键是哪个的方法
2015/08/04 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
react.js组件实现拖拽复制和可排序的示例代码
2018/08/20 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
浅谈MySQL中的触发器
2015/05/05 Python
python写一个md5解密器示例
2018/02/23 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Django中URL的参数传递的实现
2019/08/04 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
python爬虫如何解决图片验证码
2021/02/14 Python
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
三年大学自我鉴定
2014/01/16 职场文书
开票员岗位职责
2015/02/12 职场文书
学前班教学反思
2016/02/24 职场文书
python 实现图片特效处理
2022/04/03 Python
mysql 获取相邻数据项
2022/05/11 MySQL