微信小程序实现贪吃蛇游戏

本文实例为大家分享了微信小程序实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

一、项目截图

二、源代码

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 () {

  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现的贪吃蛇游戏【附源码下载】

    本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: <!--snake.wxml--> <view class="control" bindtouchstart="tapStart" bindtouchmove="tapMove" bindtouchend="tapEnd">

  • 微信小程序实现贪吃蛇游戏

    本文实例为大家分享了微信小程序实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下 一.项目截图 二.源代码 1.WXML 代码如下(示例): <view class='container'> <view class='content-bottom' bindtouchmove='touchMove' bindtouchstart='touchStart' bindtouchend='touchEnd'> <view wx:for="{{ground}}"

  • 微信小程序实现简单的摇骰子游戏

    本文实例为大家分享了微信小程序实现摇骰子游戏的具体代码,供大家参考,具体内容如下 页面代码 <view class='top'>{{txt}}</view> <view class='point1'> <image src='{{one_img}}'></image> </view> <view class='point2'> <image src='{{two_img}}'></image> &l

  • 微信小程序版翻牌小游戏

    本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下 一.新建一个quick start项目看看结构 在微信开发工具点击添加项目,选择 无appid,勾上"在当前目录中创建quick start 项目". 可以看到一共有两个目录 pages和utils,和根目录下的3个app文件.pages存放的是小程序的页面,每个也面都有自己独立的文件夹. 一个页面由4文件构成,js文件是程序逻辑:wxss是微信定义的样式文件,语法跟css一样,支持的样式要少一些:wxml文件

  • 微信小程序五子棋游戏AI实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏AI实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋AI篇DEMO 效果图 原理 1. 将棋盘中能够胜利的五子连珠方法遍历一个数组: 2. 当AI持棋时,遍历棋盘中所有棋子的空位: 3. 如果用户落子该位置,给用户该位置的五连珠方式进行加分:1连10分,2连20分,3连40分,4连80分: 4. 如果AI落子该位置,给AI该位置的五连珠方式进行加分:1连15分,2连25分,3连45分,4连85分: 5. 最后对该位置的分值进行比较,取最大分值位置

  • 微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的棋盘,重置,对弈实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋对弈.悔棋DEMO 效果图 分析 1. 采用微信小程序的canvas制作五子棋: 2. 确定棋盘大小及格数: 3. 绘制棋盘--通过棋盘宽高和格数计算间距,同时保存坐标点: 4. 黑方和白方下子--定义一个布尔变量代表各自的身份: 5. 重置棋盘--重新开始: 6. 通过判断当前棋手,悔棋时进行改变. 绘制棋盘 drawLine(arr){ arr.forEach(current

  • 微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】

    本文实例讲述了微信小程序五子棋游戏的悔棋实现方法.分享给大家供大家参考,具体如下: DEMO下载 五子棋悔棋DEMO 效果图 分析 悔棋功能需要的操作: 1. 判断当前持棋人: 2. 清空棋盘: 3. 将当前持棋人的棋子数组的最后一个棋子还原到全局坐标数组的位置: 4. 删除当前持棋人的棋子数组的该坐标. js this.page.changeUndo = function(e){ if (self.START_GAME){ var lastM = self.myPoint.length - 1

  • 微信小程序实现拼图游戏

    本文实例为大家分享了微信小程序实现拼图游戏的具体代码,供大家参考,具体内容如下 页面展示 项目链接 微信小程序实现拼图游戏 项目设计 首页面 wxml <!--index.wxml--> <view class="container"> <!-- 标题 --> <view class="title">游戏选关</view> <!-- 关卡列表 --> <view class="l

  • 微信小程序实现2048小游戏的详细过程

    效果图 实例代码 今天我们要用微信小程序实现2048小游戏,效果图如上面所示.游戏的规则很简单,你需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成为他们的和,每次操作之后会随机生成一个2或者4,最终得到一个"2048"的方块就算胜利了. // 构造一个空的矩阵[[null,..,size.length],[]] empty: function() { var cells = []; for (var x = 0; x < this.size; x++) { v

  • 如何在微信小程序实现一个幸运转盘小游戏

    本人主要介绍如何在微信小程序里面开发一个幸运转盘的小游戏,里面主要用到javascript和 css 语法,就可以轻松实现一个简单的幸运转盘(以6个奖品区为例). 前言 本次教程需要你掌握一定量 javascript 和 css 基础知识,并且你需要有小程序一定的开发经验,具体需要掌握知识点有: css 的 position.transform.transition.overflow javascript基本随机算法 wxs语法 小程序内置动画api 效果图 小程序开发思路 开发思路有三部分,第

随机推荐