使用vue.js编写蓝色拼图小游戏_网络技术_宿州市腾雀网络科技有限公司

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

发布时间 - 2026-01-11 00:13:42 点击率：次

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

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

该图为第三关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编写蓝色拼图小游戏，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# vue # js # 小游戏 # 使用vue编写一个点击数字计时小游戏 # Vue实现开心消消乐游戏算法 # 基于Vue.js实现数字拼图游戏 # vue实现打地鼠小游戏 # 如何利用vue3实现一个俄罗斯方块 # 的是 # 关了 # 小编 # 本轮 # 游戏等级 # 都要 # 有可能 # 在此 # 也在 # 两种 # 遍历 # 这款 # 以此类推 # 再加上 # 要注意 # 注意到 # 给大家 # 不存在 # 后将 # 别忘了

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：网友不敢相信iQOO Z11 Turbo会有金属中框产品经

下一篇：利用Joomla进行多语言网站构建的最佳方法

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：网友不敢相信iQOO Z11 Turbo会有金属中框产品经

下一篇：利用Joomla进行多语言网站构建的最佳方法