이 글에서는 위챗 애플릿으로 구현한 스네이크 게임을 주로 소개하고, 위챗 애플릿의 관련 인터페이스 레이아웃과 코드 로직 연산 기술을 분석해 스네이크 게임 기능을 예제 형태로 구현했다. 참고용으로 다운로드하세요. 친구들이 참고할 수 있습니다.
이 글에서는 WeChat 애플릿으로 구현된 스네이크 게임을 예로 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
실행 효과를 먼저 살펴보겠습니다.
구체적인 코드는 다음과 같습니다.
인터페이스 레이아웃 페이지/스네이크/스네이크/스네이크. wxml:
<!--snake.wxml-->
<view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">
<view class="score">
<view class="title">snake</view>
<view class="scoredetail">
<view class="scoredesc">得分</view>
<view class="scorenumber">{{score}}</view>
</view>
<view class="scoredetail">
<view class="scoredesc">历史最高</view>
<view class="scorenumber">{{maxscore}}</view>
</view>
</view>
<view class="ground">
<view wx:for="{{ground}}" class="rows" wx:for-item="cols">
<view wx:for="{{cols}}" class="block block_{{item}}" >
</view>
</view>
</view>
<modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
<view> 游戏结束，重新开始吗？ </view>
</modal>
</view>논리 함수 페이지/snake /snake/snake.js:
//snake.js
var app = getApp();
Page({
data:{
score: 0,//比分
maxscore: 0,//最高分
startx: 0,
starty: 0,
endx:0,
endy:0,//以上四个做方向判断来用
ground:[],//存储操场每个方块
rows:28,
cols:22,//操场大小
snake:[],//存蛇
food:[],//存食物
direction:'',//方向
modalHidden: true,
timer:''
} ,
onLoad:function(){
var maxscore = wx.getStorageSync('maxscore');
if(!maxscore) maxscore = 0
this.setData({
maxscore:maxscore
});
this.initGround(this.data.rows,this.data.cols);//初始化操场
this.initSnake(3);//初始化蛇
this.creatFood();//初始化食物
this.move();//蛇移动
},
//计分器
storeScore:function(){
if(this.data.maxscore < this.data.score){
this.setData({
maxscore:this.data.score
})
wx.setStorageSync('maxscore', this.data.maxscore)
}
},
//操场
initGround:function(rows,cols){
for(var i=0;i<rows;i++){
var arr=[];
this.data.ground.push(arr);
for(var j=0;j<cols;j++){
this.data.ground[i].push(0);
}
}
},
//蛇
initSnake:function(len){
for(var i=0;i<len;i++){
this.data.ground[0][i]=1;
this.data.snake.push([0,i]);
}
},
//移动函数
move:function(){
var that=this;
this.data.timer=setInterval(function(){
that.changeDirection(that.data.direction);
that.setData({
ground:that.data.ground
});
},400);
},
tapStart: function(event){
this.setData({
startx: event.touches[0].pageX,
starty: event.touches[0].pageY
})
},
tapMove: function(event){
this.setData({
endx: event.touches[0].pageX,
endy: event.touches[0].pageY
})
},
tapEnd: function(event){
var heng = (this.data.endx) ? (this.data.endx - this.data.startx) : 0;
var shu = (this.data.endy) ? (this.data.endy - this.data.starty) : 0;
if(Math.abs(heng) > 5 || Math.abs(shu) > 5){
var direction = (Math.abs(heng) > Math.abs(shu)) ? this.computeDir(1, heng):this.computeDir(0, shu);
switch(direction){
case 'left':
if(this.data.direction=='right')return;
break;
case 'right':
if(this.data.direction=='left')return;
break;
case 'top':
if(this.data.direction=='bottom')return;
break;
case 'bottom':
if(this.data.direction=='top')return;
break;
default:
}
this.setData({
startx:0,
starty:0,
endx:0,
endy:0,
direction:direction
})
}
},
computeDir: function(heng, num){
if(heng) return (num > 0) ? 'right' : 'left';
return (num > 0) ? 'bottom' : 'top';
},
creatFood:function(){
var x=Math.floor(Math.random()*this.data.rows);
var y=Math.floor(Math.random()*this.data.cols);
var ground= this.data.ground;
ground[x][y]=2;
this.setData({
ground:ground,
food:[x,y]
});
},
changeDirection:function(dir){
switch(dir){
case 'left':
return this.changeLeft();
break;
case 'right':
return this.changeRight();
break;
case 'top':
return this.changeTop();
break;
case 'bottom':
return this.changeBottom();
break;
default:
}
},
changeLeft:function(){
var arr=this.data.snake;
var len=this.data.snake.length;
var snakeHEAD=arr[len-1][1];
var snakeTAIL=arr[0];
var ground=this.data.ground;
ground[snakeTAIL[0]][snakeTAIL[1]]=0;
for(var i=0;i<len-1;i++){
arr[i]=arr[i+1];
};
var x=arr[len-1][0];
var y=arr[len-1][1]-1;
arr[len-1]=[x,y];
this.checkGame(snakeTAIL);
for(var i=1;i<len;i++){
ground[arr[i][0]][arr[i][1]]=1;
}
this.setData({
ground:ground,
snake:arr
});
return true;
},
changeRight:function(){
var arr=this.data.snake;
var len=this.data.snake.length;
var snakeHEAD=arr[len-1][1];
var snakeTAIL=arr[0];
var ground=this.data.ground;
ground[snakeTAIL[0]][snakeTAIL[1]]=0;
for(var i=0;i<len-1;i++){
arr[i]=arr[i+1];
};
var x=arr[len-1][0];
var y=arr[len-1][1]+1;
arr[len-1]=[x,y];
this.checkGame(snakeTAIL);
for(var i=1;i<len;i++){
ground[arr[i][0]][arr[i][1]]=1;
}
this.setData({
ground:ground,
snake:arr
});
// var y=this.data.snake[0][1];
// var x=this.data.snake[0][0];
// this.data.ground[x][y]=0;
// console.log(this.data.ground[x]);
// console.log(this.data.snake);
// for(var i=0;i<this.data.snake.length-1;i++){
// this.data.snake[i]=this.data.snake[i+1];
// }
// this.data.snake[this.data.snake.length-1][1]++;
// for(var j=1;j<this.data.snake.length;j++){
// this.data.ground[this.data.snake[j][0]][this.data.snake[j][1]]=1;
// }
return true;
},
changeTop:function(){
var arr=this.data.snake;
var len=this.data.snake.length;
var snakeHEAD=arr[len-1][1];
var snakeTAIL=arr[0];
var ground=this.data.ground;
ground[snakeTAIL[0]][snakeTAIL[1]]=0;
for(var i=0;i<len-1;i++){
arr[i]=arr[i+1];
};
var x=arr[len-1][0]-1;
var y=arr[len-1][1];
arr[len-1]=[x,y];
this.checkGame(snakeTAIL);
for(var i=1;i<len;i++){
ground[arr[i][0]][arr[i][1]]=1;
}
this.setData({
ground:ground,
snake:arr
});
return true;
},
changeBottom:function(){
var arr=this.data.snake;
var len=this.data.snake.length;
var snakeHEAD=arr[len-1];
var snakeTAIL=arr[0];
var ground=this.data.ground;
ground[snakeTAIL[0]][snakeTAIL[1]]=0;
for(var i=0;i<len-1;i++){
arr[i]=arr[i+1];
};
var x=arr[len-1][0]+1;
var y=arr[len-1][1];
arr[len-1]=[x,y];
this.checkGame(snakeTAIL);
for(var i=1;i<len;i++){
ground[arr[i][0]][arr[i][1]]=1;
}
this.setData({
ground:ground,
snake:arr
});
return true;
},
checkGame:function(snakeTAIL){
var arr=this.data.snake;
var len=this.data.snake.length;
var snakeHEAD=arr[len-1];
if(snakeHEAD[0]<0||snakeHEAD[0]>=this.data.rows||snakeHEAD[1]>=this.data.cols||snakeHEAD[1]<0){
clearInterval(this.data.timer);
this.setData({
modalHidden: false,
})
}
for(var i=0;i<len-1;i++){
if(arr[i][0]==snakeHEAD[0]&&arr[i][1]==snakeHEAD[1]){
clearInterval(this.data.timer);
this.setData({
modalHidden: false,
})
}
}
if(snakeHEAD[0]==this.data.food[0]&&snakeHEAD[1]==this.data.food[1]){
arr.unshift(snakeTAIL);
this.setData({
score:this.data.score+10
});
this.storeScore();
this.creatFood();
}
},
modalChange:function(){
this.setData({
score: 0,
ground:[],
snake:[],
food:[],
modalHidden: true,
direction:''
})
this.onLoad();
}
});위 내용은 모두의 학습에 도움이 되기를 바랍니다. PHP 중국어 웹사이트!
관련 권장 사항:
WeChat 애플릿에서 여러 파일을 다운로드하기 위한 간단한 패키지
WeChat 애플릿에서 Meituan 메뉴를 구현하는 방법
위 내용은 WeChat 애플릿으로 구현된 스네이크 게임 [소스 코드 포함]의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM本篇文章给大家带来了关于微信小程序的相关问题，其中主要介绍了关于基础架构原理的相关内容，其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容，下面一起来看一下，希望对大家有帮助。
微信小程序云服务配置详解May 27, 2022 am 11:53 AM本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于云服务的配置详解，包括了创建使用云开发项目、搭建云环境、测试云服务等等内容，下面一起来看一下，希望对大家有帮助。
微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了关于富文本编辑器的实战示例，包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容，下面一起来看一下，希望对大家有帮助。
西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM西安坐地铁用的小程序为“乘车码”。使用方法：1、打开手机微信客户端，点击“发现”中的“小程序”；2、在搜索栏中输入“乘车码”进行搜索；3、直接定位城市西安，或者搜索西安，点击“西安地铁乘车码”选项的“去乘车”按钮；4、根据腾讯官方提示进行授权，开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。
微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM本篇文章给大家带来了关于微信小程序的相关问题，其中主要介绍了关于开发工具介绍的相关内容，包括了下载开发工具以及编辑器总结等内容，下面一起来看一下，希望对大家有帮助。
简单介绍：实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM本篇文章给大家带来了关于微信小程序的相关知识，其中主要介绍了怎么实现小程序授权登录功能的相关内容，下面一起来看一下，希望对大家有帮助。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
DVWA
DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는
PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
