聊聊如何利用uniapp開發一個貪吃蛇小遊戲吧！
uni-app
如何利用uniapp開發一個貪吃蛇小遊戲？以下這篇文章就手把手帶大家在uniapp中實現貪吃蛇小遊戲，希望對大家有幫助！
第一次玩貪吃蛇還隱約記得是?️後父親給我玩的第一個遊戲
該小遊戲使用uniapp開發
前置詳細內容就不細說了詳細看：https://juejin.cn/post/7085727363547283469#heading-14
#遊戲示範
程式碼結構
詳細程式碼結構如果需要請到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.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>登入後複製
給貪吃蛇添加音效
添加遊戲音效遊戲代入感就強了很多現在我們要給蛇加上背景音樂、點擊互動音樂、蛇隔兒屁的音樂、蛇吃掉食物的音樂、蟲子爆炸倒數的音樂和蟲子爆炸的音樂
先給添加上背景音樂總有刁民可以玩到地圖滿為止背景音樂的話要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>登入後複製
結論
特別鳴謝@大帥老猿@末世未然 感謝大帥老師的帶領及指導以及每天的督促，也特別的感謝隊友的幫助與支持
原始碼位址：https://github.com/MothWillion/snake_eat_worm
##原文網址：https://juejin.cn /post/7087525655478272008作者：Sophora推薦：《
uniapp教學》
以上是聊聊如何利用uniapp開發一個貪吃蛇小遊戲吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前
By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
VSCode中如何開發uni-app？ （教學分享）
May 13, 2022 pm 08:11 PM
VSCode中如何開發uni-app？以下這篇文章跟大家分享一下VSCode中開發uni-app的教學課程，這可能是最好、最詳細的教學了。快來看看！
聊聊如何利用uniapp開發一個貪吃蛇小遊戲吧！
May 20, 2022 pm 07:56 PM
如何利用uniapp開發一個貪吃蛇小遊戲？以下這篇文章就手把手帶大家在uniapp中實現貪吃蛇小遊戲，希望對大家有幫助！
uni-app vue3介面請求怎麼封裝
May 11, 2023 pm 07:28 PM
uni-app接口，全域方法封裝1.在根目錄建立一個api文件，在api資料夾中建立api.js，baseUrl.js和http.js檔案2.baseUrl.js檔案程式碼exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js檔案程式碼exportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method
實例講解uniapp實現多選框的全選功能
Jun 22, 2022 am 11:57 AM
這篇文章為大家帶來了關於uniapp的相關知識，其中主要整理了實現多選框的全選功能的相關問題，無法實現全選的原因是動態修改checkbox的checked字段時，界面上的狀態能夠即時變化，但無法觸發checkbox-group的change事件，下面一起來看一下，希望對大家有幫助。
手把手帶你開發一個uni-app日曆插件（並發布）
Jun 30, 2022 pm 08:13 PM
這篇文章手把手帶大家開發一個uni-app日曆插件，介紹下一個日曆插件是如何從開發到發布的，希望對大家有幫助！
聊聊uniapp的scroll-view下拉加載
Jul 14, 2022 pm 09:07 PM
uniapp怎麼實作scroll-view下拉載入？以下這篇文章聊聊uniapp微信小程式scroll-view的下拉加載，希望對大家有幫助！
實例詳解uniapp如何實現電話錄音功能（附代碼）
Jan 05, 2023 pm 04:41 PM
這篇文章為大家帶來了關於uniapp的相關知識，其中主要介紹了怎麼用uniapp實現撥打電話並且還能同步錄音的功能，感興趣的朋友一起來看一下吧，希望對大家有幫助。
