uniapp实现贪吃蛇小游戏

游戏演示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LO1iCMQ9-1655362014052)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ff97fe3fec99448896e1b4175fa96e9d~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

代码结构

详细代码结构如果需要请到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">游戏结束</view><view class="result">您的蛇蛇达到了{{snakes.length}}米</view><view class="btns"><button type="primary" @click="reStart">再次挑战</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>

渲染蛇身

给我们的蛇穿上他的外衣蛇身的渲染根据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端我们通过监听键盘事件找到对应的键盘键的编码上下左右来改变蛇的方向而手机端我们通过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, // 游戏结束了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.lastYif (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>

给贪吃蛇添加音效

添加游戏音效游戏代入感就强了很多现在我们要给蛇加上背景音乐、点击交互音乐、蛇隔儿屁的音乐、蛇吃掉食物的音乐、虫子爆炸倒计时的音乐和虫子爆炸的音乐

先给添加上背景音乐总有刁民可以玩到地图满为止背景音乐的话要loop播放我们只需要使用uni.createInnerAudioContext来创建并返回内部 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() // 创建上下文this.bgmInnerAudioContext.autoplay = true; // 自动播放this.bgmInnerAudioContext.src= bgm; // 音频地址this.bgmInnerAudioContext.loop = true; // 循环播放}}
}
<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() // 创建上下文this.bgmInnerAudioContext.autoplay = true; // 自动播放this.bgmInnerAudioContext.src= bgm; // 音频地址this.bgmInnerAudioContext.loop = true; // 循环播放}checkGame(direction, next) {let gameover = false;let isSnake = this.snakes.indexOf(next) > -1;let isPollute = this.pollutes.indexOf(next) > -1;// 撞到蛇和被污染的地块游戏结束if (isSnake || isPollute) {gameover = true;}// 撞到边界游戏结束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() // 游戏结束 暂停背景音乐clearInterval(this.timer);clearInterval(this.boomTimer);} else {// 游戏没结束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(下次播放会从头开始) 剩余的不需要清楚音效和循环播放下面附上剩余的代码

<script>
export default {data() {return {bgmInnerAudioContext:null,clockInnerAudioContext:null,}},watch: {boomCount(val) {if (val === 0) {// 超过爆炸时间还没吃到,则将虫子格子变成被污染的土地,并且重置爆炸状态,同时生成一只新的虫子: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;// 撞到蛇和被污染的地块游戏结束if (isSnake || isPollute) {gameover = true;}// 撞到边界游戏结束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() // 游戏结束 暂停背景音乐this.clockInnerAudioContext && this.clockInnerAudioContext.stop() // 清楚倒计时音乐clearInterval(this.timer);clearInterval(this.boomTimer);} else {// 游戏没结束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)];// 根据游戏难度,概率产出会爆炸的虫子: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>