微信小程序?qū)崿F(xiàn)貪吃蛇游戲
更新時間:2021年05月25日 10:05:46 作者:Hello world&&
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)貪吃蛇游戲的具體代碼,供大家參考,具體內(nèi)容如下
一、項目截圖
二、源代碼
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({ /** * 頁面的初始數(shù)據(jù) */ data: { gameStart: false, // 游戲是否開始 score: 0, // 當(dāng)前得分 maxScore: 0, // 歷史最高分 isMaxActive: false, rows: 28, // 操場行數(shù) cols: 22, // 操場列數(shù) ground: [[]], // 操場方塊位置 snake: '', // 貪吃蛇的位置 food: [], // food位置 startX: 0, startY: 0, endX: 0, endY: 0, flag: 0, // 當(dāng)前貪吃蛇移動的方向,0 右,1 下,2 左, 3 上 timer: null, modaleHidden: true }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ 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) }, /** * 判斷鼠標(biāo)滑動方向 */ 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 } }, // 撞到食物,游戲繼續(xù) 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 }) }, // 游戲結(jié)束 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 () { } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
JavaScript canvas實現(xiàn)代碼雨效果
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)代碼雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-06-06javascript使用輸出語句實現(xiàn)網(wǎng)頁特效代碼
這篇文章主要介紹javascript使用輸出語句實現(xiàn)網(wǎng)頁特效,有需要的朋友可以參考下2015-08-08