Ich habe das kleine Spiel „Blue Puzzle“ schon einmal im Internet gesehen. Der Autor hat es mit jquery geschrieben. In diesem Artikel werde ich mit Ihnen teilen, wie Sie ein blaues Puzzlespiel basierend auf vue.js schreiben. Werfen wir einen Blick auf den Implementierungscode.
Später ist nie! Tun Sie es einfach. Verstehen Sie zunächst die Spielregeln: Die erste Ebene ist ein 1*1-Block, die zweite Ebene ist ein 2*2 und so weiter
Das Bild ist eine dritte Ebene 3*3 Quadrate. Klicken Sie auf ein kleines Quadrat und die Farbe des Quadrats und seiner angrenzenden Quadrate ändert sich von Gelb zu Blau. Wenn alle Quadrate blau werden, bestehen Sie das Level.
Jetzt, da die Regeln klar sind, kann es losgehen!
/*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='game_bg'>
<p></p>
</p>
</p>
/*js*/
var vm=ew Vue({
el:'#game',
data:{
margin:6,//每张卡片间的距离
level:1,//游戏等级
cards:[],//卡片
size:0,//每张卡片的尺寸
},
methods:{},
});Nach dem Login kopieren
Die Anzahl der Karten entspricht dem Quadrat des Levels, und jede Karte hat zwei Farben, Gelb und Blau, und mit zunehmender Schwierigkeit des Spiels wird auch der Abstand zwischen den Blöcken kleiner. Fügen Sie also die Initialisierungsspielmethode
im 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是蓝色
})
}
}Nach dem Login kopieren
-Konstruktor
hinzu, um <p class='game_bg'></p>data das p in
< zu binden 🎜>
<p 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"></p>
</p>Nach dem Login kopieren
Der nächste Schritt besteht darin, auf ein Quadrat zu klicken, um die Karten umzudrehen. Kehren Sie einfach das Farbattribut von sich selbst und der angrenzenden Karte um. Und wir haben festgestellt: Der Index auf der linken Seite ist der Index minus 1; der Wert auf der rechten Seite ist der Index minus der Ebene; Es ist zu beachten, dass, wenn der Index „vm.cards“ nicht vorhanden ist und sich ganz links oder rechts befindet, der Index zwar vorhanden sein kann, die benachbarte Karte jedoch möglicherweise nicht. Deshalb habe ich eine Methode zum Ändern der Farbe benachbarter Bereiche und eine Methode zum Umdrehen von Karten in den Methoden hinzugefügt.
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);
}Nach dem Login kopieren
Nach jedem Klick muss festgestellt werden, ob das Spiel beendet ist. Durchqueren Sie vm.cards. Es wurde festgestellt, dass ein Farbattribut mit false bedeutet, dass es nicht bestanden wurde, andernfalls ist es bestanden.
var gameOver=function(){
var cards=vm.cards;
for(var i=cards.length;i--;){
if(!cards[i].color) return false;
}
return true
};Nach dem Login kopieren
Auf diese Weise werden die Grundfunktionen des Spiels realisiert. Nach dem Bestehen des Levels wird das Level um 1 erhöht. Und speichern Sie das Level in localStorage. Gehen Sie jedes Mal, wenn Sie die Seite betreten, zu localStorage, um die Ebene abzufragen. Gib mir einen Hinweis, nachdem du das Level bestanden hast. Zeigt die Anzahl der angeklickten Schritte an. Plus Methoden zum Zurücksetzen dieser Runde und zum Zurücksetzen des Levels. Nehmen Sie einige Änderungen an den Details vor und fügen Sie den endgültigen Code wie folgt hinzu
<!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="'第'+level+'关'"></span>
<span v-text="'点击'+stepCount+'次'"></span>
</p>
<p class='game_bg'>
<p 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"></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:'#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>Nach dem Login kopieren
Vergessen Sie nicht, vue2.0 hinzuzufügen. Es ist bereit zum Spielen.
Verwandte Artikel:
Führen Sie in wenigen Minuten durch die Vue.js-Komponenten
Detaillierte Erklärung der Vue.js-Entwicklung mit Bilder und Texte So erstellen Sie schnell eine Umgebung
Verwenden Sie require.js+vue, um die WeChat-Methode zum Hochladen von Bildkomponenten zu entwickeln
Das obige ist der detaillierte Inhalt vonVerwenden Sie vue.js, um Beispielcode für ein unterhaltsames Puzzlespiel zu schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
