vue.js を使用して楽しいパズルゲームのサンプルコードを作成する-jsチュートリアル-php.cn

vue.js を使用して楽しいパズルゲームのサンプルコードを作成する

高洛峰

リリース： 2017-03-25 11:18:31

オリジナル

2551 人が閲覧しました

以前インターネットで「Blue Puzzle」という小さなゲームを見たことがあります。作者はjqueryを使ってそれを書きました。この記事では、vue.js をベースにした青いパズルゲームの書き方を皆さんと共有します

実装コードを見てみましょう。やるだけ。まずゲームのルールを理解してください。最初のレベルは 1*1 ブロック、2 番目のレベルは 2*2 などです

vue.js を使用して楽しいパズルゲームのサンプルコードを作成する

この写真は、3 番目のレベルの 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*/
<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:{},
});

ログイン後にコピー

カードの数はレベルの 2 乗で、各カードには黄色と青の 2 色があり、ゲームの難易度が上がるにつれてブロック間の距離も小さくなります。そこで、初期化ゲームメソッド

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

ログイン後にコピー

を vue
コンストラクター

に

data binding the p in <p class='game_bg'></p>

<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>

ログイン後にコピー

に追加します。次のステップは、正方形をクリックしてカードを裏返すことです。自分と隣接するカードの色属性を反転するだけです。そして、カードの左側は添え字から 1 を引いたもの、右側は添え字から 1 を引いたもの、下の添え字はレベルを引いたものであることに気づきました。 vm.cards の添え字が存在しない場合や、それが左端または右端にある場合、添え字は存在しても、隣接するカードが存在しない可能性があることに注意してください。そこで、隣接する領域の色を変更するメソッドと、カードを裏返すメソッドをメソッドに追加しました

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 をトラバースします。 falseのcolor属性があれば通過せず、そうでない場合は通過することが分かります。

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>
<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>

ログイン後にコピー

vue2.0 を追加することを忘れないでください。プレイする準備ができました。

数分で Vue.js コンポーネントを試してみましょう

Vue.js 開発環境を素早く構築する方法についての詳細なグラフィックとテキストの説明

require.js+vue の使用WeChat アップロード画像コンポーネントメソッドを開発する

以上がvue.js を使用して楽しいパズルゲームのサンプルコードを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。