微信小程式實現貪吃蛇遊戲
阿新 • • 發佈:2021-05-26
本文例項為大家分享了微信小程式實現貪吃蛇遊戲的具體程式碼,供大家參考,具體內容如下
一、專案截圖
二、原始碼
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}}</viewhttp://www.cppcns.com> </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(){ thatwww.cppcns.com.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,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,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,/** * 檢查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位置 modahttp://www.cppcns.comleHidden: true }) _that.onLoad() } } }) },/** * 使用者點選右上角分享 */ onShareAppMessage: function () { } })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。