Utilisez vue.js pour écrire un exemple de code de jeu de puzzle amusant

J'ai déjà vu le petit jeu "Blue Puzzle" sur Internet. L'auteur l'a écrit en utilisant jquery. À travers cet article, je vais partager avec vous comment écrire un jeu de puzzle bleu basé sur vue.js Jetons un coup d'œil au code d'implémentation.

Plus tard, c'est jamais ! Fais-le c'est tout. Comprenez d'abord les règles du jeu : le premier niveau est un bloc 1*1, le deuxième niveau est un 2*2 et ainsi de suite

L'image est un troisième niveau 3*3 de carrés. Cliquez sur un petit carré, et la couleur du carré et de ses carrés adjacents passera du jaune au bleu. Si tous deviennent bleus, vous passerez le niveau.

Maintenant que les règles sont claires, commençons !

/*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*/
<p id="game">
<p class=&#39;game_bg&#39;>
<p></p>
</p>
</p>
/*js*/
var vm=ew Vue({
el:&#39;#game&#39;,
data:{
margin:6,//每张卡片间的距离
level:1,//游戏等级
cards:[],//卡片
size:0,//每张卡片的尺寸
},
methods:{},
});

Le nombre de cartes est le carré du niveau, et chaque carte a deux couleurs, jaune et bleu, et à mesure que la difficulté du jeu augmente, la distance entre les blocs devient également plus petite. Ajoutez donc la méthode de jeu d'initialisation

dans le constructeur 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是蓝色
})
}
}

aux <p class="'game_bg'"></p>data liant le p dans

<p class=&#39;card&#39;
:style="{&#39;width&#39;:size+&#39;px&#39;,&#39;height&#39;:size+&#39;px&#39;,&#39;marginTop&#39;:margin+&#39;px&#39;,&#39;marginLeft&#39;:margin+&#39;px&#39;}" 
:class="{&#39;blueCard&#39;:card.color}" v-for="(index,card) in cards"></p>
</p>

L'étape suivante consiste à cliquer sur un carré pour retourner les cartes. Inversez simplement l'attribut de couleur de lui-même et de la carte adjacente. Et nous avons remarqué : celui de gauche de la carte est l'indice moins 1 ; celui de droite est l'indice plus 1 ; celui du dessus est l'indice moins le niveau ; celui du dessous est l'indice plus le niveau. Il est à noter que lorsque l'indice vm.cards n'existe pas et qu'il se trouve à l'extrême gauche ou à droite, bien que l'indice puisse exister, la carte adjacente peut ne pas l'être. J'ai donc ajouté une méthode pour changer la couleur des zones adjacentes et une méthode pour retourner les cartes dans les méthodes

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);
}

À chaque fois que vous cliquez, vous devez juger si la partie est terminée. Parcourez les vm.cards. On constate que s'il y a un attribut de couleur avec false, il ne passera pas, sinon il passera.

var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};

De cette façon, les fonctions de base du jeu sont réalisées. Ensuite, après avoir réussi le niveau, le niveau sera augmenté de 1. Et enregistrez le niveau dans localStorage. Chaque fois que vous entrez dans la page, accédez à localStorage pour interroger le niveau. Donnez-moi un indice après avoir passé le niveau. Affiche le nombre d'étapes cliquées. Plus des méthodes pour réinitialiser ce tour et réinitialiser le niveau. Apportez quelques modifications dans les détails et ajoutez le code final comme celui-ci

<!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>
<p id="game">
<p class="info_box">
<span v-text="&#39;第&#39;+level+&#39;关&#39;"></span>
<span v-text="&#39;点击&#39;+stepCount+&#39;次&#39;"></span>
</p>
<p class=&#39;game_bg&#39;>
<p class=&#39;card&#39; @click="flop(index)"
:style="{&#39;width&#39;:size+&#39;px&#39;,&#39;height&#39;:size+&#39;px&#39;,&#39;marginTop&#39;:margin+&#39;px&#39;,&#39;marginLeft&#39;:margin+&#39;px&#39;}" 
:class="{&#39;blueCard&#39;:card.color}" v-for="(index,card) in cards"></p>
</p>
<p class="rule_box">
<h3>游戏规则</h3>
<h4>点击相应的方块该方块和它相邻的方块的的颜色会发生变化，全部变为蓝色就过关了</h4>
</p>
<p class="btn_box">
<button @click="resetLevel">重置等级</button>
<button @click="initGame">重新开始本轮</button>
</p>
</p>
<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:&#39;#game&#39;,
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(&#39;恭喜通过第&#39;+vm.level+&#39;关&#39;);
vm.level++;
vm.initGame();
},200)
}
},
resetLevel:function(){//重置等级
this.level=1;
localStorage.cardLevel=1;
vm.initGame();
},
},
});
vm.initGame();
</script>
</html>

N'oubliez pas d'ajouter vue2.0. C’est prêt à jouer.

Articles connexes :

Vous présente les composants Vue.js en quelques minutes

Explication détaillée du développement de Vue.js avec images et textes Comment créer rapidement un environnement

Utilisez require.js vue pour développer la méthode de composant d'image de téléchargement WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!