작가가 jquery를 사용하여 작성한 작은 게임인 '블루 퍼즐'을 본 적이 있습니다. 이번 글을 통해 vue.js를 기반으로 블루 퍼즐 게임을 작성하는 방법을 공유하겠습니다. 구현 코드를 살펴보겠습니다.
Later is 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*/
<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:{},
});로그인 후 복사
카드 갯수는 레벨의 제곱으로, 각 카드는 노란색과 파란색 두 가지 색상으로 이루어져 있으며, 게임 난이도가 높아질수록 블록 사이의 거리도 작아집니다. 따라서 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是蓝色
})
}
}로그인 후 복사
를 <p class='game_bg'></p>데이터 바인딩
<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>로그인 후 복사
<🎜에 추가하세요. > 다음 단계는 사각형을 클릭하여 카드를 뒤집는 것입니다. 그 자체와 인접한 카드의 색상 속성을 반전시키기만 하면 됩니다. 그리고 우리는 카드의 왼쪽에 있는 것이 첨자 빼기 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인 색상 속성이 있으면 합격하지 못한 것이고, 그렇지 않으면 합격한 것으로 나타났습니다.
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="'第'+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>로그인 후 복사
vue2.0을 추가하는 것을 잊지 마세요. 플레이할 준비가 되었습니다.
관련 기사:
몇 분 안에 Vue.js 구성 요소를 살펴보세요
Vue.js 개발에 대한 자세한 설명 사진 및 텍스트 환경을 빠르게 구축하는 방법
require.js+vue를 사용하여 WeChat 업로드 이미지 구성 요소 방법 개발
위 내용은 vue.js를 사용하여 재미있는 퍼즐 게임 예제 코드 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
