站長資訊網(wǎng)如何利用uniapp開發(fā)一個貪吃蛇小游戲？下面本篇文章就手把手帶大家在uniapp中實現(xiàn)貪吃蛇小游戲，希望對大家有所幫助！
第一次玩貪吃蛇還隱約記得是?️后父親給我玩的第一個游戲
該小游戲使用uniapp開發(fā)
前置詳細內(nèi)容就不細說了詳細看：https://juejin.cn/post/7085727363547283469#heading-14
游戲演示
代碼結(jié)構(gòu)
詳細代碼結(jié)構(gòu)如果需要請到github查看
主要分為：開始游戲、地塊、蛇身、蟲子、污染地塊，游戲音效
<template> <view ref="body" class="content"> <view>蛇蛇目前：{{snakes.length}}米長</view> <view class="game-field"> <!-- 地面板塊 --> <view class="block" v-for="(x, i) in blocks" :key="i"></view> </view> <view v-show="!started || ended" class="game-board-wrap"> <view v-show="!started" class="game-board"> <view class="title">選擇游戲難度</view> <radio-group name="radio" @change="bindLevelChange"> <label class="label"> <radio value="1" :checked="level==1" /><text>簡單模式</text> </label> <label class="label"> <radio value="2" :checked="level==2" /><text>正常模式</text> </label> <label class="label"> <radio value="3" :checked="level==3" /><text>困難模式</text> </label> <label class="label"> <radio value="4" :checked="level==4" /><text>地獄模式</text> </label> </radio-group> <button type="primary" @click="start">開始游戲</button> </view> <view v-show="ended" class="settle-board"> <view class="title">游戲結(jié)束</view> <view class="result">您的蛇蛇達到了{{snakes.length}}米</view> <view class="btns"> <button type="primary" @click="reStart">再次挑戰(zhàn)</button> <button type="primary" plain @click="rePick">重選難度</button> </view> </view> </view> </view> </template> <script> export default { data() { return { blocks: [], // 板塊 worms: [], // 蟲子 snakes: [0, 1, 2, 3], // 蛇身 direction: "right", // 蛇移動方向 }; }, onLoad() { this.initGame(); }, methods: { initGame() { this.blocks = new Array(100).fill(0); // 生成100個地面板塊 this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機生成蟲子 this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置 } } } </script>
渲染蛇身
給我們的蛇穿上他的外衣 蛇身的渲染根據(jù)snakes(里邊放著蛇的身體)來匹配地面板塊的索引 從而找到對應的格格并修改背景圖來渲染蛇身 蛇頭和蛇尾就是取snakes第0位和最后一位 并找到對應的格格修改當前背景圖
<template> <view class="game-field"> <view class="block" :style="`background-image: ${bg(x, i)}" v-for="(x, i) in blocks" :key="i"> </view> </view> </template> <script> import worm from "worm.png"; import snakeBody from "snake_body.png"; import snakeHead from "snake_head.png"; import snakeTail from "snake_tail.png"; import polluteBlock from "pollute.png"; import wormBoom from "worm_4.png"; export default { methods: { bg(type, index) { let bg = ""; switch (type) { case 0: // 地板 bg = "unset"; break; case 1: // 蟲子 if (this.boom) { bg = `url(${wormBoom})`; } else { bg = `url(${worm})`; } break; case 2: // 蛇 let head = this.snakes[this.snakes.length - 1]; let tail = this.snakes[0]; if (index === head) { bg = `url(${snakeHead})`; } else if (index === tail) { bg = `url(${snakeTail})`; } else { bg = `url(${snakeBody})`; } break; case 3: // 污染的地塊 bg = `url(${polluteBlock})`; break; } return bg； }, } } </scipt>
控制蛇的方向
控制蛇的方向pc端我們通過監(jiān)聽鍵盤事件找到對應的鍵盤鍵的編碼上下左右來改變蛇的方向 而手機端我們通過touch時間手指觸摸點及滑動點的XY軸值來判斷蛇的方向
<template> <view ref="body" class="content" @keyup.left="bindLeft" @keyup.right="bindRight" @keyup.down="bindDown" @keyup.up="bindUp" @touchstart="handleTouchStart" @touchmove="handleTouchMove"> <view>蛇蛇目前：{{snakes.length}}米長</view> <view class="game-field"> <view class="block" :style="`background-image: ${bg(x, i)}; v-for="(x, i) in blocks" :key="i"></view> </view> </view> </template> <script> export default { data(){ return { direction: "right", started: false, // 游戲開始了 ended: false, // 游戲結(jié)束了 level: 1, // 游戲難度 lastX: 0, lastY: 0, } }, onLoad() { this.initGame(); }, methods:{ initGame() { this.blocks = new Array(100).fill(0); // 生成100個地面板塊 this.worms = [Math.floor(Math.random() * 96) + 4]; // 隨機生成蟲子 this.snakes = [0, 1, 2, 3]; // 初始化蛇身位置 document.onkeydown = (e) => { switch (e.keyCode) { // 獲取當前按下鍵盤鍵的編碼 case 37: // 按下左箭頭鍵 this.bindLeft(); break; case 39: // 按下右箭頭鍵 this.bindRight(); break; case 38: // 按下上箭頭鍵 if (!this.started) { this.level--; } else { this.bindUp(); } break; case 40: // 按下下箭頭鍵 if (!this.started) { this.level++; } else { this.bindDown(); } break; } } }, handleTouchStart(e) { // 手指開始位置 this.lastX = e.touches[0].pageX; this.lastY = e.touches[0].pageY; }, handleTouchMove(e) { let lastX = e.touches[0].pageX; // 移動的x軸坐標 let lastY = e.touches[0].pageY; // 移動的y軸坐標 let touchX = lastX - this.lastX; let touchY = lastY - this.lastY if (Math.abs(touchX) > Math.abs(touchY)) { if (touchX < 0) { if(this.direction === "right") return; this.direction = 'left' } else if (touchX > 0) { if(this.direction === "left") return; this.direction = 'right' } } else { if (touchY < 0) { if(this.direction === "down") return; this.direction = 'up' } else if (touchY > 0) { if(this.direction === "up") return; this.direction = 'down' } } this.lastX = lastX; this.lastY = lastY; }, bindUp() { if (this.direction === "down") return; this.direction = "up"; }, bindDown() { if (this.direction === "up") return; this.direction = "down"; }, bindLeft() { if (this.direction === "right") return; this.direction = "left"; }, bindRight() { if (this.direction === "left") return; this.direction = "right"; }, } } </script>
給貪吃蛇添加音效
添加游戲音效游戲代入感就強了很多 現(xiàn)在我們要給蛇加上背景音樂、點擊交互音樂、蛇隔兒屁的音樂、蛇吃掉食物的音樂、蟲子爆炸倒計時的音樂和蟲子爆炸的音樂
先給添加上背景音樂 總有刁民可以玩到地圖滿為止 背景音樂的話要loop播放 我們只需要 使用uni.createInnerAudioContext來創(chuàng)建并返回內(nèi)部 audio 上下文 innerAudioContext 對象 拿到音樂的路徑并且設置自動播放
<script> import bgm from 'bgm.mp3'; export default { data(){ return { bgmInnerAudioContext:null, } }, methods:{ start() { // 開始游戲 this.initGame(); this.handleBgmVoice() }, handleBgmVoice() { // 背景音樂 this.bgmInnerAudioContext = uni.createInnerAudioContext() // 創(chuàng)建上下文 this.bgmInnerAudioContext.autoplay = true; // 自動播放 this.bgmInnerAudioContext.src= bgm; // 音頻地址 this.bgmInnerAudioContext.loop = true; // 循環(huán)播放 } } } <script>
背景音樂確實響起來了 蛇gameover后還一直響 頓時我聽著就不耐煩 這時我們在蛇gameover后暫停背景音樂pause音樂會暫停而不會清楚
<script> import bgm from 'bgm.mp3'; export default { data(){ return { bgmInnerAudioContext:null, } }, methods:{ start() { // 開始游戲 this.initGame(); this.handleBgmVoice() }, handleBgmVoice() { // 背景音樂 this.bgmInnerAudioContext = uni.createInnerAudioContext() // 創(chuàng)建上下文 this.bgmInnerAudioContext.autoplay = true; // 自動播放 this.bgmInnerAudioContext.src= bgm; // 音頻地址 this.bgmInnerAudioContext.loop = true; // 循環(huán)播放 } checkGame(direction, next) { let gameover = false; let isSnake = this.snakes.indexOf(next) > -1; let isPollute = this.pollutes.indexOf(next) > -1; // 撞到蛇和被污染的地塊游戲結(jié)束 if (isSnake || isPollute) { gameover = true; } // 撞到邊界游戲結(jié)束 switch (direction) { case "up": if (next < 0) { gameover = true; } break; case "down": if (next >= 100) { gameover = true; } break; case "left": if (next % 10 === 9) { gameover = true; } break; case "right": if (next % 10 === 0) { gameover = true; } break; } return gameover; }, toWards(direction) { let gameover = this.checkGame(direction, next); if (gameover) { this.ended = true; this.handleDieVoice() this.bgmInnerAudioContext.pause() // 游戲結(jié)束 暫停背景音樂 clearInterval(this.timer); clearInterval(this.boomTimer); } else { // 游戲沒結(jié)束 this.snakes.push(next); let nextType = this.blocks[next]; this.blocks[next] = 2; // 如果是空白格 if (nextType === 0) { this.snakes.shift(); } else { // 如果是蟲子格 this.handleEatVoice() // 吃掉蟲子后的音樂 this.worms = this.worms.filter((x) => x !== next); let nextWorm = this.createWorm(); this.worms.push(nextWorm); } this.blocks[tail] = 0; this.paint(); } }, } } <script>
首個音樂添加成功其他的也就簡單多了 蟲子爆炸倒計時也需要爆炸或者gameover后需要清楚倒計時音效stop(下次播放會從頭開始) 剩余的不需要清楚音效和循環(huán)播放 下面附上剩余的代碼
<script> export default { data() { return { bgmInnerAudioContext:null, clockInnerAudioContext:null, } }, watch: { boomCount(val) { if (val === 0) { // 超過爆炸時間還沒吃到,則將蟲子格子變成被污染的土地,并且重置爆炸狀態(tài),同時生成一只新的蟲子: this.handleExplodeVoice() // 爆炸的音樂 this.clockInnerAudioContext.stop() // 清楚倒計時音樂 const boomWorm = this.worms.pop(); this.pollutes.push(boomWorm); this.blocks[boomWorm] = 3; // 被污染的地方我們用3表示 this.boom = false; this.worms.push(this.createWorm()); } } }, methods:{ // 蛇吃到食物后的聲音 handleEatVoice() { const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = eatVoice; }, // 蟲子污染爆炸后的聲音 handleExplodeVoice(){ const innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.src = explodeVoice; }, // 游戲背景音樂 handleBgmVoice() { this.bgmInnerAudioContext = uni.createInnerAudioContext() this.bgmInnerAudioContext.autoplay = true; this.bgmInnerAudioContext.src= bgm; this.bgmInnerAudioContext.loop = true; }, // 按鈕點擊的聲音 handleClickVoice() { const innerAudioContext = uni.createInnerAudioContext() innerAudioContext.autoplay = true; innerAudioContext.src= click; }, // 爆炸倒計時的聲音 handleClockVoice() { this.clockInnerAudioContext = uni.createInnerAudioContext() this.clockInnerAudioContext.autoplay = true; this.clockInnerAudioContext.src= clock; }, // 蛇gameover后的聲音 handleDieVoice() { const innerAudioContext = uni.createInnerAudioContext() innerAudioContext.autoplay = true; innerAudioContext.src= die; }, checkGame(direction, next) { let gameover = false; let isSnake = this.snakes.indexOf(next) > -1; let isPollute = this.pollutes.indexOf(next) > -1; // 撞到蛇和被污染的地塊游戲結(jié)束 if (isSnake || isPollute) { gameover = true; } // 撞到邊界游戲結(jié)束 switch (direction) { case "up": if (next < 0) { gameover = true; } break; case "down": if (next >= 100) { gameover = true; } break; case "left": if (next % 10 === 9) { gameover = true; } break; case "right": if (next % 10 === 0) { gameover = true; } break; } return gameover; }, paint() { this.worms.forEach((x) => { this.blocks[x] = 1; }); this.snakes.forEach((x) => { this.blocks[x] = 2; }); this.$forceUpdate(); }, toWards(direction) { let gameover = this.checkGame(direction, next); if (gameover) { this.ended = true; this.handleDieVoice() this.bgmInnerAudioContext.pause() // 游戲結(jié)束 暫停背景音樂 this.clockInnerAudioContext && this.clockInnerAudioContext.stop() // 清楚倒計時音樂 clearInterval(this.timer); clearInterval(this.boomTimer); } else { // 游戲沒結(jié)束 this.snakes.push(next); let nextType = this.blocks[next]; this.blocks[next] = 2; // 如果是空白格 if (nextType === 0) { this.snakes.shift(); } else { // 如果是蟲子格 this.handleEatVoice() // 吃掉蟲子后的音樂 this.worms = this.worms.filter((x) => x !== next); let nextWorm = this.createWorm(); this.worms.push(nextWorm); } this.blocks[tail] = 0; this.paint(); } }, // 生成下一只蟲子 createWorm() { this.boom = false; let blocks = Array.from({ length: 100 }, (v, k) => k); // 在不是蛇和被污染的地方生成蟲子 let restBlocks = blocks.filter(x => this.snakes.indexOf(x) < 0 && this.pollutes.indexOf(x) < 0); let worm = restBlocks[Math.floor(Math.random() * restBlocks.length)]; // 根據(jù)游戲難度,概率產(chǎn)出會爆炸的蟲子: this.boom = Math.random() / this.level < 0.05; // 生成了新蟲子說明吃到了那個爆炸的蟲子，重置下爆炸 if (this.boom) { this.boomCount = 10; this.boomTimer && clearInterval(this.boomTimer); this.handleClockVoice() this.boomTimer = setInterval(() => { this.boomCount--; }, 1000) } else { this.clockInnerAudioContext && this.clockInnerAudioContext.stop() clearInterval(this.boomTimer); } return worm; }, } } <script>
結(jié)語
特別鳴謝@大帥老猿@末世未然 感謝大帥老師的帶隊及指導以及每天的督促，也特別的感謝隊友的幫助及支持
源碼地址：https://github.com/MothWillion/snake_eat_worm
原文地址：https://juejin.cn/post/7087525655478272008
作者：Sophora
推薦：《uniapp教程》
