一、项目截图

二、源代码

1.WXML

代码如下（示例）：

<view class='container'><view class='content-bottom' bindtouchmove='touchMove' bindtouchstart='touchStart' bindtouchend='touchEnd'><view wx:for="{{ground}}" wx:for-item="cols" class='ground-row'><view wx:for="{{cols}}" class='ground-col'><view class='block block{{item}}'></view></view></view></view><view class='content-top'><view class='top-item top-score'><view class='score-description'>得分</view><view class='score-number'>{{score}}</view></view><view class='top-item top-start' bindtap='goStart'>START</view><view class='top-item top-score'><view class='score-description'>历史最高</view><view class='score-number'>{{maxScore}}</view></view></view></view>

2.WXSS

代码如下（示例）：

/* pages/demo/snake/snake.wxss */.content-top {display: flex;}.top-item {flex: 1;height: 150rpx;margin: 0 20rpx;line-height: 150rpx;text-align: center;border-radius: 16rpx;}.top-start {font-size: 22px;background: deepskyblue;color: #fff;}.top-score {background: #eee4da;}.score-description {line-height: 70rpx;}.score-number {line-height: 60rpx;}.content-bottom {display: flex;flex-direction: column;width: 660rpx;height: 840rpx;margin: 50rpx auto 0;}.ground-row {display: flex;}.ground-col {flex: 1;width: 30rpx;height: 30rpx;}.block {width: 100%;height: 100%;background: #eee;}.block1 {background: black;border-radius: 5px;}.block2 {background:red;border-radius: 5px;}

2.JS

代码如下（示例）：

// pages/demo/snake/snake.jsPage({/*** 页面的初始数据*/data: {gameStart: false, // 游戏是否开始score: 0, // 当前得分maxScore: 0, // 历史最高分isMaxActive: false,rows: 28, // 操场行数cols: 22, // 操场列数ground: [[]], // 操场方块位置snake: '', // 贪吃蛇的位置food: [], // food位置startX: 0,startY: 0,endX: 0,endY: 0,flag: 0, // 当前贪吃蛇移动的方向，0 右，1 下，2 左， 3 上timer: null,modaleHidden: true},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.initGround(this.data.rows, this.data.cols) // 初始化操场console.log(wx.getStorageSync("MaxScore"))if (wx.getStorageSync("MaxScore")) {this.setData({maxScore: wx.getStorageSync("MaxScore"),isMaxActive: true})} else {this.setData({isMaxActive: false})}},goStart: function () {this.setData({gameStart: true})this.onLoad()this.initSnake(3) // 初始化贪吃蛇位置this.initFood() // 初始化foodthis.move(0)},/*** 初始化操场*/initGround: function (rows, cols) {this.data.ground = []for (let i = 0; i < rows; i++) {let arr = []this.data.ground.push(arr)for (let j = 0; j < cols; j++) {this.data.ground[i].push(0)}}this.setData({ground: this.data.ground})},/*** 初始化贪吃蛇*/initSnake: function (n) {this.data.snake = []for (let i = 0; i < n; i++) {this.data.ground[0][i] = 1this.data.snake.push([0,i])}this.setData({ground: this.data.ground,snake: this.data.snake})},/*** 初始化food*/initFood: function () {let row = Math.floor(Math.random()*this.data.rows)let col = Math.floor(Math.random() * this.data.cols)var ground = this.data.groundground[row][col] = 2this.setData({ground: ground,food: [row, col]})console.log(this.data.food)},/*** 判断鼠标滑动方向*/touchStart: function (event) {this.data.startX = event.touches[0].pageXthis.data.startY = event.touches[0].pageY},touchMove: function (event) {this.data.endX = event.touches[0].pageXthis.data.endY = event.touches[0].pageY// console.log(this.data.endX, this.data.endY)},touchEnd: function (event) {let tX = this.data.endX ? (this.data.endX - this.data.startX) : 0let tY = this.data.endY ? (this.data.endY - this.data.startY) : 0console.log(tX, tY)if (!this.data.gameStart) {return false}if (tY < 0 && Math.abs(tX) <= Math.abs(tY)) {// 向下滑动this.data.flag = 3} else if (tY > 0 && Math.abs(tX) <= Math.abs(tY)) {// 向上滑动this.data.flag = 1} else if (tX < 0 && Math.abs(tX) > Math.abs(tY)) {// 向左滑动this.data.flag = 2} else if (tX > 0 && Math.abs(tX) > Math.abs(tY)) {// 向右滑动this.data.flag = 0}if(this.data.modaleHidden){this.move(this.data.flag)}},/*** snake 移动*/move: function (state) {clearInterval(this.data.timer)// console.log(this.data.snake.length)var that = thisswitch(state){// 判断滑动方向case 0:this.data.timer = setInterval(function(){that.moveRight()}, 600)breakcase 1:this.data.timer = setInterval(function () {that.moveBottom()}, 600)breakcase 2:this.data.timer = setInterval(function () {that.moveLeft()}, 600)breakcase 3:this.data.timer = setInterval(function () {that.moveTop()}, 600)break}},moveRight: function () {// console.log(this.data.snake)var snakeArr = this.data.snakevar snakeLen = snakeArr.lengthvar snakeHead = snakeArr[snakeLen - 1]var snakeTail = snakeArr[0]var ground = this.data.groundfor (var i = 0; i < snakeLen - 1; i++) {snakeArr[i] = snakeArr[i + 1]}var x = snakeHead[0]var y = snakeHead[1] + 1if (y >= this.data.cols) {this.gameOver()return}snakeArr[snakeLen - 1] = [x, y]ground[x][y] = 1ground[snakeTail[0]][snakeTail[1]] = 0this.setData({snake: snakeArr,ground: ground})this.checkGame(snakeTail, [x, y]) // 检查是否gameover},moveBottom: function () {var snakeArr = this.data.snakevar snakeLen = snakeArr.lengthvar snakeHead = snakeArr[snakeLen - 1]var snakeTail = snakeArr[0]var ground = this.data.groundfor (var i = 0; i < snakeLen - 1; i++) {snakeArr[i] = snakeArr[i + 1]}var x = snakeHead[0] + 1var y = snakeHead[1]if (x >= this.data.rows) {this.gameOver()return}snakeArr[snakeLen - 1] = [x, y]ground[x][y] = 1ground[snakeTail[0]][snakeTail[1]] = 0this.setData({snake: snakeArr,ground: ground})this.checkGame(snakeTail, [x, y]) // 检查是否gameover},moveLeft: function () {var snakeArr = this.data.snakevar snakeLen = snakeArr.lengthvar snakeHead = snakeArr[snakeLen - 1]var snakeTail = snakeArr[0]var ground = this.data.groundfor (var i = 0; i < snakeLen - 1; i++) {snakeArr[i] = snakeArr[i + 1]}var x = snakeHead[0]var y = snakeHead[1] - 1if (y < 0) {this.gameOver()return}snakeArr[snakeLen - 1] = [x, y]ground[x][y] = 1ground[snakeTail[0]][snakeTail[1]] = 0this.setData({snake: snakeArr,ground: ground})this.checkGame(snakeTail, [x, y]) // 检查是否gameover},moveTop: function () {var snakeArr = this.data.snakevar snakeLen = snakeArr.lengthvar snakeHead = snakeArr[snakeLen - 1]var snakeTail = snakeArr[0]var ground = this.data.groundfor (var i = 0; i < snakeLen - 1; i++) {snakeArr[i] = snakeArr[i + 1]}var x = snakeHead[0] - 1var y = snakeHead[1]if (x < 0) {this.gameOver()return}snakeArr[snakeLen - 1] = [x, y]ground[x][y] = 1console.log(y)ground[snakeTail[0]][snakeTail[1]] = 0this.setData({snake: snakeArr,ground: ground})this.checkGame(snakeTail, [x, y]) // 检查是否gameover},/*** 检查gameover* 撞墙 - gameover，弹出框提示是否重新开始，重新load* 自己撞到自己 - gameover* 吃到食物 - snake身体变长，重新生成食物*/checkGame: function (snakeTail, snakeHead) {console.log("测试snake移动")console.log(snakeHead)var snakeArrs = this.data.snakevar len = this.data.snake.lengthvar food = this.data.foodvar ground = this.data.groundconsole.log(this.data.snake[len-1])// 判断有没有撞墙if (snakeHead[0] >= 0 & snakeHead[0] < this.data.rows & snakeHead[1] >= 0 & snakeHead[1] < this.data.cols){this.data.modaleHidden = truethis.collisionSnakeFood(snakeTail, snakeHead, food)this.setData({// snake: this.data.snakeArr,// ground: this.data.ground,modaleHidden: this.data.modaleHidden})} else {this.gameOver()return}},// 撞到食物，游戏继续collisionSnakeFood: function (tail, head, food) {let snake = this.data.snakelet ground = this.data.groundlet row = food[0]let col = food[1]let score = this.data.scorelet maxScore = this.data.maxScoreif (head[0] === food[0] & head[1] === food[1]) {ground[row][col] = 1snake.unshift(tail)ground[tail[0]][tail[1]] = 1this.initFood()score += 5if (!this.data.isMaxActive) {maxScore = score}}this.setData({snake: snake,ground: ground,score: score,maxScore: maxScore})},// 游戏结束gameOver: function () {clearInterval(this.data.timer)let _that = thislet maxS = this.data.maxScorethis.setData({modaleHidden: false,timer: null})if (wx.getStorageSync("MaxScore")){let hisScore = wx.getStorageSync("MaxScore")if (hisScore < maxS) {wx.setStorageSync("MaxScore", maxS)}} else {wx.setStorageSync("MaxScore", maxS)}wx.showModal({title: '游戏失败',content: '点击确定，重新开始新一局游戏；点击取消，返回首页',success: function(res) {if(res.confirm) {_that.setData({score: 0,gameStart: false, // 游戏是否开始snake: '', // 贪吃蛇的位置food: [], // food位置modaleHidden: true})_that.onLoad()}}})},/*** 用户点击右上角分享*/onShareAppMessage: function () {}})

总结

如果觉得《微信小程序-贪吃蛇》对你有帮助，请点赞、收藏，并留下你的观点哦！