贪吃蛇
最近自学小程序，在练手，就写了个贪吃蛇的代码。借此熟悉下小程序的一些基本元素和语法。
小程序语法上跟js是差不多的。有一些小程序特有的东西。
本篇文章要用到的知识点有：
bindtouchstart属性：绑定触摸开始事件，触摸开始时候触发的，
![]()
![]()
bindtouchmove属性：绑定触摸移动事件，触摸移动时触发的，
bindtouchend属性：绑定触摸结束事件，触摸结束时触发的，
modal元素：wxapp特殊弹出层元素，
wx:for属性：用来遍历数据的属性，比如等会要遍历的数组ground：wx:for="{{ground}}"，
wx:for-item属性：当前遍历对象，
no-cancel属性：是modal元素的属性，写上去表明没有取消按钮，
bindconfirm属性：modal元素的属性，绑定点击确认时触发的函数，
{{}}取值。
这几个比较重要的，一些简单的，就不啰嗦了。
界面：
如何开始游戏：触摸屏幕然后移动一段距离，蛇就会开始移动，会根据手指移动的方向来判断蛇的接下来往哪个方向走。
首先先确定一些变量和界面样式，先把界面显示出来。
1、现在pages下面创建snake文件夹，下面包含4个文件（名字都要一样）
wxml就是相当于.html一样的页面文件。wxss就是相当于.css一样的样式文件。
先把页面设计出来：
<view class="scoreBar">
<view class="snakeView">Snake</view>
<view class="scoreView">
<view class="text">得分</view>
<view class="num">{{score}}</view>
</view>
<view class="scoreView">
<view class="text">最高</view>
<view class="num">{{maxscore}}</view>
</view>
</view>
<!-- controller要把ground包起来 -->
<view class="controller" bindtouchstart='tapStart' bindtouchmove='tapMove' bindtouchend='tapEnd'>
<view class="ground">
<view wx:for="{{ground}}" class="row" wx:for-item="row">
<view wx:for="{{row}}" class="block block_{{item}}">
</view>
</view>
</view>
</view>
<!--no-cancel 隐藏cancel按钮 -->
<modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
<view>游戏结束，重新开始吗？</view>
</modal>
然后是wxss：
.controller{
width: 100%;
height: 100%;
}
.scoreBar{
display: flex;
height: 85px;
padding: 3px
}
.scoreBar view{
flex: 1;
margin: 3px 3px;
border: 1px grey solid;
background-color: grey;
}
.snakeView{
line-height: 70px;
text-align: center;
font-size: 21px;
background-color: deepskyblue !important;
border-color: deepskyblue !important;
}
.text{
text-align: center;
font-size: 12px;
height:40% !important;
line-height: 30px;
}
.num{
text-align: center;
height:40% !important;
margin-right: 5px;
line-height: 30px;
}
.ground{
width: 660rpx;
height:840rpx;
margin-left: 40rpx;
/* background-color: #ccc; */
}
.row{
width:660rpx;
height: 30rpx;
}
.block{
width:30rpx;
height: 30rpx;
float: left;
background: grey
}
.block_1{
background:#f00;
}
.block_2{
background:#0f0;
}
接着会发现wxss里面有一些元素是要取值的（这种{{}}就是取值表达式），是从.js文件里面定义的Page对象里面data属性来取。
所以接下来写js里面的名为data的json对象：
var app=getApp();
Page({
data:{
//隐藏modal
modalHidden:true,
//分数
score:0,
maxscore:0,
//场地（二维数组，存里面颜色的值，0是灰色，1是红色，2是绿色）
ground: [],
rows:28,
cols:22,
//蛇（存的是坐标，例如[[4,5],[5,5],[6,5]]，后面会用这个坐标具体修改场地里面的颜色）
snake:[],
food:[],
//方向
direction:'',
//起始位置
startx:0,
starty:0,
//结束位置
endx:0,
endy:0,
//时间
timer:'',
//判断横竖的变量，大于49是竖
probability : Math.floor(Math.random() * 100)
}
});
getApp()是用来获取小程序实例。
关于Page()函数详细请看：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html
本篇贪吃蛇只用到了Page的data和onLoad。
data就是页面的初始数据，onLoad是页面加载的回调函数，一个页面只会调用一次。
然后是onLoad函数：
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.createFood();
//移动
this.move();
},
初始化场地、蛇、食物：
initGround:function(rows,cols){
for(var i=0;i<rows;i++){
var colArr=[]
this.data.ground.push(colArr);
for(var j=0;j<cols;j++){
this.data.ground[i].push(0)
}
}
},
initSnake: function (len){
var x = Math.floor(Math.random() * this.data.rows);
var y = Math.floor(Math.random() * this.data.cols);
if (this.data.probability>49){
//heng
//if排除越界情况
if (y > this.data.cols - len) {
//重新生成
this.initSnake(len)
} else {
for (var i = 0; i < len; i++) {
this.data.ground[x][y + i] = 1;
this.data.snake.push([x, y + i]);
}
}
}else{
//shu
//if排除越界情况
if (x > this.data.rows-len){
//重新生成
this.initSnake(len)
}else{
for (var i = 0; i < len; i++) {
this.data.ground[x + i][y] = 1;
this.data.snake.push([x + i, y]);
}
}
}
},
createFood:function(){
var x=Math.floor(Math.random()*this.data.rows);
var y=Math.floor(Math.random()*this.data.cols);
var ground=this.data.ground;
//不能生成在蛇身体的位置
if (ground[x][y]==1){
this.createFood()
}else{
ground[x][y] = 2
this.setData({
ground: ground,
food: [x, y]
})
}
},
这样页面还差一步就能显示了，就是修改utils下面的app.json内容将snake进行加载，把红色框里面的写在第一行就能显示出页面了
接下来是触摸事件（游戏开始和控制方向）：
//触发游戏：
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;
var direction='';
if(Math.abs(heng)>5 || Math.abs(shu)>5){
//根据横竖判断方向(0:上下，1：左右)
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';
},
关于触摸事件的对象，他们的结构，我这里将其copy了出来：
{
"type": "touchstart",
"timeStamp": 2439,
"target": {
"id": "",
"offsetLeft": 221,
"offsetTop": 199,
"dataset": {}
},
"currentTarget": {
"id": "",
"offsetLeft": 0,
"offsetTop": 91,
"dataset": {}
},
"touches": [
{
"identifier": 0,
"pageX": 221,
"pageY": 200,
"clientX": 221,
"clientY": 200
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 221,
"pageY": 200,
"clientX": 221,
"clientY": 200
}
]
}
{
"type": "touchmove",
"timeStamp": 2689,
"target": {
"id": "",
"offsetLeft": 161,
"offsetTop": 223,
"dataset": {}
},
"currentTarget": {
"id": "",
"offsetLeft": 0,
"offsetTop": 91,
"dataset": {}
},
"touches": [
{
"identifier": 0,
"pageX": 165,
"pageY": 365,
"clientX": 165,
"clientY": 365
}
],
"changedTouches": [
{
"identifier": 0,
"pageX": 165,
"pageY": 365,
"clientX": 165,
"clientY": 365
}
]
}
{
"type": "touchend",
"timeStamp": 18564,
"target": {
"id": "",
"offsetLeft": 101,
"offsetTop": 259,
"dataset": {}
},
"currentTarget": {
"id": "",
"offsetLeft": 0,
"offsetTop": 91,
"dataset": {}
},
"touches": [],
"changedTouches": [
{
"identifier": 0,
"pageX": 188,
"pageY": 284,
"clientX": 188,
"clientY": 284
}
]
}
然后是蛇的移动：
以左拐弯为例，假如一个竖直的蛇，头向下，并且要左拐弯，那么snake数组里面snake[0]尾巴的坐标都是要去掉的（但是也要单独保存），然后后面的元素往前面copy，最后更新最新蛇头的坐标，逻辑就是这样了。
然后就是将功能用代码实现（主要看left，因为剩下3个方向其实是差不多的）：
move: function () {
var that = this;
this.data.timer = setInterval(function () {
that.changeDirection(that.data.direction);
that.setData({
ground: that.data.ground
})
}, 400);
},
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 snakeArr = this.data.snake;
var snakeLen = this.data.snake.length;
//蛇尾坐标
var snakeTail = snakeArr[0]
var ground = this.data.ground;
ground[snakeTail[0]][snakeTail[1]] = 0;//尾巴位置重置颜色
for (var i = 0; i < snakeLen - 1; i++) {//数组元素往前移一位，尾巴剔除
snakeArr[i] = snakeArr[i + 1];
}
//修改头的坐标
var x = snakeArr[snakeLen-1][0];
var y = snakeArr[snakeLen - 1][1] - 1;//往左
snakeArr[snakeLen-1]=[x,y]
//蛇头坐标(push操作是栈的先进后出)
var snakeHead = snakeArr[snakeLen - 1]
this.checkGame(snakeTail, snakeArr, snakeLen, snakeHead)//检查游戏是否结束
for(var i=0;i<snakeLen;i++){
ground[snakeArr[i][0]][snakeArr[i][1]] = 1
}
this.setData({
ground:ground,
snake: snakeArr
})
},
changeRight: function () {
var snakeArr = this.data.snake;
var snakeLen = this.data.snake.length;
//蛇尾坐标
var snakeTail = snakeArr[0]
var ground = this.data.ground;
ground[snakeTail[0]][snakeTail[1]] = 0;//尾巴位置重置颜色
for (var i = 0; i < snakeLen - 1; i++) {//数组元素往前移一位，尾巴剔除
snakeArr[i] = snakeArr[i + 1];
}
//修改头的坐标
var x = snakeArr[snakeLen - 1][0];
var y = snakeArr[snakeLen - 1][1] + 1;//往右
snakeArr[snakeLen - 1] = [x, y]
//蛇头坐标(push操作是栈的先进后出)
var snakeHead = snakeArr[snakeLen - 1]
this.checkGame(snakeTail, snakeArr, snakeLen, snakeHead)//检查游戏是否结束
for (var i = 0; i < snakeLen ; i++) {
ground[snakeArr[i][0]][snakeArr[i][1]] = 1
}
this.setData({
ground: ground,
snake: snakeArr
})
},
changeTop: function () {
var snakeArr = this.data.snake;
var snakeLen = this.data.snake.length;
//蛇尾坐标
var snakeTail = snakeArr[0]
var ground = this.data.ground;
ground[snakeTail[0]][snakeTail[1]] = 0;//尾巴位置重置颜色
for (var i = 0; i < snakeLen - 1; i++) {//数组元素往前移一位，尾巴剔除
snakeArr[i] = snakeArr[i + 1];
}
//修改头的坐标
var x = snakeArr[snakeLen - 1][0] - 1;//往上
var y = snakeArr[snakeLen - 1][1];
snakeArr[snakeLen - 1] = [x, y]
//蛇头坐标(push操作是栈的先进后出)
var snakeHead = snakeArr[snakeLen - 1]
this.checkGame(snakeTail, snakeArr, snakeLen, snakeHead)//检查游戏是否结束
for (var i = 0; i < snakeLen; i++) {
ground[snakeArr[i][0]][snakeArr[i][1]] = 1
}
this.setData({
ground: ground,
snake: snakeArr
})
},
changeBottom: function () {
var snakeArr = this.data.snake;
var snakeLen = this.data.snake.length;
//当前蛇尾坐标
var snakeTail = snakeArr[0]
var ground = this.data.ground;
ground[snakeTail[0]][snakeTail[1]] = 0;//尾巴位置重置颜色
for (var i = 0; i < snakeLen - 1; i++) {//数组元素往前移一位，尾巴剔除
snakeArr[i] = snakeArr[i + 1];
}
//更新当前蛇头的坐标
var x = snakeArr[snakeLen - 1][0] + 1;//往下
var y = snakeArr[snakeLen - 1][1];
snakeArr[snakeLen - 1] = [x, y]
//蛇头坐标(push操作是栈的先进后出)
var snakeHead = snakeArr[snakeLen - 1]
//检查游戏是否结束，判断是否吃到食物，如果吃到，尾巴变长
this.checkGame(snakeTail, snakeArr, snakeLen, snakeHead)
for (var i = 0; i < snakeLen; i++) {
ground[snakeArr[i][0]][snakeArr[i][1]] = 1
}
this.setData({
ground: ground,
snake: snakeArr
})
},
checkGame: function (snakeTail, snake, len, snakeHead){
//碰到边界
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 (snake[i][0] == snakeHead[0] && snake[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]) {//吃到食物
snake.unshift(snakeTail);
this.setData({
score: this.data.score + 10
});
this.storeScore();
this.createFood();
}
},
//计分器(刷新最高分)
storeScore: function () {
if (this.data.maxscore < this.data.score) {
this.setData({
maxscore: this.data.score
})
wx.setStorageSync("maxscore", this.data.maxscore)
}
},
modalChange:function(){
this.setData({
scoure:0,
ground:[],
snake:[],
food:[],
modalHidden:true,
direction:''
})
this.onLoad()
}
源码地址：https://download.csdn.net/download/u010591472/10310123
如有不足欢迎指出，欢迎转载~~~
浙公网安备 33010602011771号