微信小程序贪吃蛇大作战
微信小程序实现贪吃蛇游戏本文实例为大家分享了微信小程序实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
一、项目截图
二、源代码
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;
}
3.JS
代码如下（示例）：
// pages/demo/snake/snake.js
Page({
/**
* 页面的初始数据
*/
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() // 初始化food
this.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] = 1
this.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.ground
ground[row][col] = 2
this.setData({
ground: ground,
food: [row, col]
})
console.log(this.data.food)
},
/**
* 判断鼠标滑动方向
*/
touchStart: function (event) {
this.data.startX = event.touches[0].pageX
this.data.startY = event.touches[0].pageY
},
touchMove: function (event) {
this.data.endX = event.touches[0].pageX
this.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) : 0
let tY = this.data.endY ? (this.data.endY - this.data.startY) : 0
console.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 = this
switch(state){ // 判断滑动方向
case 0:
this.data.timer = setInterval(function(){
that.moveRight()
}, 600)
break
case 1:
this.data.timer = setInterval(function () {
that.moveBottom()
}, 600)
break
case 2:
this.data.timer = setInterval(function () {
that.moveLeft()
}, 600)
break
case 3:
this.data.timer = setInterval(function () {
that.moveTop()
}, 600)
break
}
},
moveRight: function () {
// console.log(this.data.snake)
var snakeArr = this.data.snake
var snakeLen = snakeArr.length
var snakeHead = snakeArr[snakeLen - 1]
var snakeTail = snakeArr[0]
var ground = this.data.ground
for (var i = 0; i < snakeLen - 1; i++) {
snakeArr[i] = snakeArr[i + 1]
}
var x = snakeHead[0]
var y = snakeHead[1] + 1
if (y >= this.data.cols) {
this.gameOver()
return
}
snakeArr[snakeLen - 1] = [x, y]
ground[x][y] = 1
ground[snakeTail[0]][snakeTail[1]] = 0
this.setData({
snake: snakeArr,
ground: ground
})
this.checkGame(snakeTail, [x, y]) // 检查是否gameover
},
moveBottom: function () {
var snakeArr = this.data.snake
var snakeLen = snakeArr.length
var snakeHead = snakeArr[snakeLen - 1]
var snakeTail = snakeArr[0]
var ground = this.data.ground
for (var i = 0; i < snakeLen - 1; i++) {
snakeArr[i] = snakeArr[i + 1]
}
var x = snakeHead[0] + 1
var y = snakeHead[1]
if (x >= this.data.rows) {
this.gameOver()
return
}
snakeArr[snakeLen - 1] = [x, y]
ground[x][y] = 1
ground[snakeTail[0]][snakeTail[1]] = 0
this.setData({
snake: snakeArr,
ground: ground
})
this.checkGame(snakeTail, [x, y]) // 检查是否gameover
},
moveLeft: function () {
var snakeArr = this.data.snake
var snakeLen = snakeArr.length
var snakeHead = snakeArr[snakeLen - 1]
var snakeTail = snakeArr[0]
var ground = this.data.ground
for (var i = 0; i < snakeLen - 1; i++) {
snakeArr[i] = snakeArr[i + 1]
}
var x = snakeHead[0]
var y = snakeHead[1] - 1
if (y < 0) {
this.gameOver()
return
}
snakeArr[snakeLen - 1] = [x, y]
ground[x][y] = 1
ground[snakeTail[0]][snakeTail[1]] = 0
this.setData({
snake: snakeArr,
ground: ground
})
this.checkGame(snakeTail, [x, y]) // 检查是否gameover
},
moveTop: function () {
var snakeArr = this.data.snake
var snakeLen = snakeArr.length
var snakeHead = snakeArr[snakeLen - 1]
var snakeTail = snakeArr[0]
var ground = this.data.ground
for (var i = 0; i < snakeLen - 1; i++) {
snakeArr[i] = snakeArr[i + 1]
}
var x = snakeHead[0] - 1
var y = snakeHead[1]
if (x < 0) {
this.gameOver()
return
}
snakeArr[snakeLen - 1] = [x, y]
ground[x][y] = 1
console.log(y)
ground[snakeTail[0]][snakeTail[1]] = 0
this.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.snake
var len = this.data.snake.length
var food = this.data.food
var ground = this.data.ground
console.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 = true
this.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.snake
let ground = this.data.ground
let row = food[0]
let col = food[1]
let score = this.data.score
let maxScore = this.data.maxScore
if (head[0] === food[0] & head[1] === food[1]) {
ground[row][col] = 1
snake.unshift(tail)
ground[tail[0]][tail[1]] = 1
this.initFood()
score += 5
if (!this.data.isMaxActive) {
maxScore = score
}
}
this.setData({
snake: snake,
ground: ground,
score: score,
maxScore: maxScore
})
},
// 游戏结束
gameOver: function () {
clearInterval(this.data.timer)
let _that = this
let maxS = this.data.maxScore
this.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 () {
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。