uniapp 游戏开发,
如何利用uniapp开发一个贪吃蛇小游戏？下面本篇文章就手把手带大家在uniapp中实现贪吃蛇小游戏，希望对大家有所帮助！
单一应用程序开发（仿饿了么)开发课程：进入学习
第一次玩贪吃蛇还隐约记得是？后父亲给我玩的第一个游戏
该小游戏使用uniapp开发
前置详细内容就不细说了详细看：金爵https://号。cn/post/7085727363547283469 #标题-14
游戏演示
代码结构
详细代码结构如果需要请到开源代码库查看
主要分为：开始游戏、地块、蛇身、虫子、污染地块，游戏音效
模板
view ref=body class=content
视角蛇蛇目前：{{snakes.length}}米长/查看
view class=game-field
！-地面板块-
view class=block v-for=(x，i) in blocks :key=i/view
/查看
查看v-show=！开始结束游戏板包装
查看v-show=！开始游戏棋盘
view class=title 选择游戏难度/查看
radio-group name= radio @ change= bindLevelChange
label class=label
单选值=1 :选中=级别==1 /text简单模式/文本
/标签
label class=label
单选值=2 :选中=级别==2 /text正常模式/文本
/标签
label class=label
单选值=3 :选中=级别==3 /text困难模式/文本
/标签
label class=label
单选值=4 :选中=级别==4 /text地狱模式/text
/标签
/单选-组
按钮类型=主要@click=开始开始游戏/按钮
/查看
视图v-show= ended class= settle-board
view class=title 游戏结束/查看
视图class=结果您的蛇蛇达到了{{snakes.length}}米/查看
视图class=btns
按钮类型=主要@单击=重新启动再次挑战/按钮
按钮类型=primary plain @click=rePick 重选难度/按钮
/查看
/查看
/查看
/查看
/模板
脚本
导出默认值{
data() {
返回{
块：[],//板块
蠕虫：[],//虫子
蛇：[0,1,2,3],//蛇身
方向：右,//蛇移动方向
};
},
onLoad() {
这个。init game()；
},
方法：{
initGame() {
this.blocks=新数组(100)。填充(0);//生成100个地面板块
这个。虫子=【数学。地板(数学。random()* 96)4]；//随机生成虫子
this.snakes=[0，1，2，3]；//初始化蛇身位置
}
}
}
/脚本
渲染蛇身
给我们的蛇穿上他的外衣
蛇身的渲染根据蛇（里边放着蛇的身体)来匹配地面板块的索引从而找到对应的格格并修改背景图来渲染蛇身蛇头和蛇尾就是取蛇第0位和最后一位并找到对应的格格修改当前背景图
模板
view class=game-field
view class= block :style= ` background-image:$ { BG(x，i)} v-for=(x，i) in blocks :key=i
/查看
/查看
/模板
脚本
从" worm.png "导入蠕虫病毒；
从" snake_body.png "导入蛇身
从snake_head.png 导入蛇头；
从" snake_tail.png "导入蛇尾
从"污染. png "导入污染块；
从" worm_4.png "导入虫吊杆
导出默认值{
方法：{
bg(类型，索引){
设BG=
开关（类型){
案例0: //地板
未设置
打破；
案例1: //虫子
如果(this.boom) {
BG=` URL($ { worm boom })`；
}否则{
BG=` URL($ { worm })`；
}
打破；
案例二：//蛇
让head=这个。蛇【这个。蛇。长度-1]；
让tail=这个。蛇[0]；
if (index===head) {
BG=` URL($ { snakeHead })`；
} else if (index===tail) {
BG=` URL($ { snakeTail })`；
}否则{
BG=` URL($ { snake body })`；
}
打破；
案例3: //污染的地块
BG=` URL($ {污染块})`;
打破；
}
返回BG；
},
}
}
/scipt
控制蛇的方向
控制蛇的方向个人计算机端我们通过监听键盘事件找到对应的键盘键的编码上下左右来改变蛇的方向而手机端我们通过触控时间手指触摸点及滑动点的正常男性染色体组型轴值来判断蛇的方向
模板
view ref= body class= content @ keyup。left= bind left @ keyup。right= bind right @ keyup。向下=向下捆绑
@ keyup。up= bindUp @ touch start= handleTouchStart @ touch move= handleTouchMove
视角蛇蛇目前：{{snakes.length}}米长/查看
view class=game-field
view class= block :style= ` background-image:$ { BG(x，I)}；v-for=(x，i) in blocks :key=i/view
/查看
/查看
/模板
脚本
导出默认值{
data(){
返回{
方向：右，
started: false，//游戏开始了
ended: false，//游戏结束了
级别：1,//游戏难度
lastX: 0，
上次：0,
}
},
onLoad() {
这个。init game()；
},
方法：{
initGame() {
this.blocks=新数组(100)。填充(0);//生成100个地面板块
这个。虫子=【数学。地板(数学。random()* 96)4]；//随机生成虫子
this.snakes=[0，1，2，3]；//初始化蛇身位置
document.onkeydown=(e)={
开关(e.keyCode) { //获取当前按下键盘键的编码
案例37: //按下左箭头键
这个。向左绑定()；
打破；
案例39: //按下右箭头键
这个。绑定right()；
打破；
案例38: //按下上箭头键
如果(!this.started) {
这个。level-；
}否则{
这个。bindup()；
}
打破；
案例40: //按下下箭头键
如果(!this.started) {
这个。水平；
}否则{
这个。向下绑定()；
}
打破；
}
}
},
handleTouchStart(e) {
//手指开始位置
this.lastX=e.touches[0].pageX
this.lastY=e.touches[0].佩吉；
},
handleTouchMove(e) {
设lastX=e.touches[0].pageX//移动的x轴坐标
让lastY=e.touches[0].佩吉；//移动的y轴坐标
设touchX=lastX-this。lastX
让touchY=lastY - this
如果(数学。ABS(touchX)数学。ABS(易怒)){
if (touchX 0) {
if(this.direction===right )返回；
this.direction=左
} else if (touchX 0) {
if(this.direction===left )返回；
this.direction=右
}
}否则{
if (touchY 0) {
if(this.direction===down )返回；
this.direction=up
} else if (touchY 0) {
if(this.direction===up )返回；
this.direction=向下
}
}
this.lastX=lastX
这. lastY=lastY
},
bindUp() {
if (this.direction===down )返回；
this.direction= up
},
bindown(){
if (this.direction===up )返回；
this.direction=向下
},
bindLeft() {
if (this.direction===right )返回；
this.direction=左
},
bindRight() {
if (this.direction===left )返回；
this.direction=对
},
}
}
/脚本
给贪吃蛇添加音效
添加游戏音效游戏代入感就强了很多现在我们要给蛇加上背景音乐、点击交互音乐、蛇隔儿屁的音乐、蛇吃掉食物的音乐、虫子爆炸倒计时的音乐和虫子爆炸的音乐
先给添加上背景音乐总有刁民可以玩到地图满为止背景音乐的话要环播放我们只需要
使用uni.createInnerAudioContext来创建并返回内部声音的上下文innerAudioContext对象拿到音乐的路径并且设置自动播放
脚本
从" bgm.mp3 "导入背景音乐
导出默认值{
data(){
返回{
bgmInnerAudioContext:null，
}
},
方法：{
start() { //开始游戏
这个。init game()；
this.handleBgmVoice()
},
handleBgmVoice() {
//背景音乐
这个。bgminneraudiocontext=uni。createinneraudiocontext()//创建上下文
这个。bgminneraudiocontext。autoplay=true//自动播放
这个。bgminneraudiocontext。src=bgm//音频地址
这个。bgminneraudiocontext。loop=true//循环播放
}
}
}
脚本背景音乐确实响起来了蛇游戏结束后还一直响顿时我听着就不耐烦这时我们在蛇游戏结束后暂停背景音乐中止音乐会暂停而不会清楚
脚本
从" bgm.mp3 "导入背景音乐
导出默认值{
data(){
返回{
bgmInnerAudioContext:null，
}
},
方法：{
start() { //开始游戏
这个。init game()；
this.handleBgmVoice()
},
handleBgmVoice() {
//背景音乐
这个。bgminneraudiocontext=uni。createinneraudiocontext()//创建上下文
这个。bgminneraudiocontext。autoplay=true//自动播放
这个。bgminneraudiocontext。src=bgm//音频地址
这个。bgminneraudiocontext。loop=true//循环播放
}
棋盘游戏(方向，下一步){
设gameover=false
let is snake=this。蛇。(下一个)的索引-1；
设isPollute=this。污染物。(下一个)的索引-1；
//撞到蛇和被污染的地块游戏结束
if (isSnake isPollute) {
游戏结束=真
}
//撞到边界游戏结束
开关（方向){
案例"向上":
如果(下一个0) {
游戏结束=真
}
打破；
案例"向下":
if (next=100) {
游戏结束=真
}
打破；
案例"左":
if (next % 10===9) {
游戏结束=真
}
打破；
案例"右":
if (next % 10===0) {
游戏结束=真
}
打破；
}
返回游戏结束
},
朝向（方向)
let gameover=this.checkGame(方向，下一个);
if (gameover) {
this.ended=true
this.handleDieVoice()
这个。bgminneraudiocontext。pause()//游戏结束暂停背景音乐
清除间隔(这个。定时器)；
clearInterval(这个。吊杆定时器)；
}否则{
//游戏没结束
this.snakes.push(下);
让下一个类型=这个。块[下一个]；
这个。blocks[next]=2；
//如果是空白格
if (nextType===0) {
这个。蛇。shift()；
}否则{
//如果是虫子格
this.handleEatVoice() //吃掉虫子后的音乐
这个。虫子=这个。虫子。过滤器((x)=x！==下一个);
让下一个蠕虫=这个。创建worm()；
这个。虫子。推(下一个蠕虫)；
}
这个。块数[尾数]=0；
这个。paint()；
}
},
}
}
脚本首个音乐添加成功其他的也就简单多了虫子爆炸倒计时也需要爆炸或者游戏结束后需要清楚倒计时音效停止（下次播放会从头开始)剩余的不需要清楚音效和循环播放下面附上剩余的代码
脚本
导出默认值{
data() {
返回{
bgmInnerAudioContext:null，
clockInnerAudioContext:null，
}
},
观察：{
boomCount(val) {
if (val===0) {
//超过爆炸时间还没吃到，则将虫子格子变成被污染的土地，并且重置爆炸状态，同时生成一只新的虫子：
this.handleExplodeVoice() //爆炸的音乐
这个。clockinneraudiocontext。stop()//清楚倒计时音乐
const boom worm=这个。虫子。pop()；
这个。政策。推(吊杆蜗杆)；
这个。blocks[吊杆蠕虫]=3；//被污染的地方我们用3表示
this.boom=false
这个。虫子。推(这个。创建worm())；
}
}
},
方法：{
//蛇吃到食物后的声音
handleEatVoice() {
const innerAudioContext=uni。createinneraudiocontext()；
inneraudiocontext。autoplay=true
inneraudiocontext。src=吃语音；
},
//虫子污染爆炸后的声音
handleExplodeVoice(){
const innerAudioContext=uni。createinneraudiocontext()；
inneraudiocontext。autoplay=true
inneraudiocontext。src=爆炸语音；
},
//游戏背景音乐
handleBgmVoice() {
这个。bgminneraudiocontext=uni。createinneraudiocontext()
这个。bgminneraudiocontext。autoplay=true
这个。bgminneraudiocontext。src=bgm
这个。bgminneraudiocontext。loop=true
},
//按钮点击的声音
handleClickVoice() {
const innerAudioContext=uni。createinneraudiocontext()
inneraudiocontext。autoplay=true
innerAudioContext.src=click
},
//爆炸倒计时的声音
handleClockVoice() {
这个。clockinneraudiocontext=uni。createinneraudiocontext()
这个。clockinneraudiocontext。autoplay=true
这个。clockinneraudiocontext。src=时钟；
},
//蛇游戏结束后的声音
handleDieVoice() {
const innerAudioContext=uni。createinneraudiocontext()
inneraudiocontext。autoplay=true
innerAudioContext.src=die
},
棋盘游戏(方向，下一步){
设gameover=false
let is snake=this。蛇。(下一个)的索引-1；
设isPollute=this。污染物。(下一个)的索引-1；
//撞到蛇和被污染的地块游戏结束
if (isSnake isPollute) {
游戏结束=真
}
//撞到边界游戏结束
开关（方向){
案例"向上":
如果(下一个0) {
游戏结束=真
}
打破；
案例"向下":
if (next=100) {
游戏结束=真
}
打破；
案例"左":
if (next % 10===9) {
游戏结束=真
}
打破；
案例"右":
if (next % 10===0) {
游戏结束=真
}
打破；
}
返回游戏结束
},
paint() {
this.worms.forEach((x)={
这个。块数[x]=1；
});
this.snakes.forEach((x)={
这个。块数[x]=2；
});
这个. force update()；
},
朝向（方向)
let gameover=this.checkGame(方向，下一个);
if (gameover) {
this.ended=true
this.handleDieVoice()
这个。bgminneraudiocontext。pause()//游戏结束暂停背景音乐
这个。clockinneraudiocontext这。clockinneraudiocontext。stop()//清楚倒计时音乐
清除间隔(这个。定时器)；
clearInterval(这个。吊杆定时器)；
}否则{
//游戏没结束
this.snakes.push(下);
让下一个类型=这个。块[下一个]；
这个。blocks[next]=2；
//如果是空白格
if (nextType===0) {
这个。蛇。shift()；
}否则{
//如果是虫子格
this.handleEatVoice() //吃掉虫子后的音乐
这个。虫子=这个。虫子。过滤器((x)=x！==下一个);
让下一个蠕虫=这个。创建worm()；
这个。虫子。推(下一个蠕虫)；
}
这个。块数[尾数]=0；
这个。paint()；
}
},
//生成下一只虫子
createWorm() {
this.boom=false
let blocks=Array.from({
长度：100
}，(v，k)=k)；
//在不是蛇和被污染的地方生成虫子
设休息块=块。过滤器(x=this。蛇。(x)0这个的索引。污染物。(x)0的索引)；
设worm=rest blocks[数学。地板(数学。random()* rest块。长度)]；
//根据游戏难度，概率产出会爆炸的虫子：
这个。boom=数学。random()/this。0.05级；
//生成了新虫子说明吃到了那个爆炸的虫子，重置下爆炸
如果(this.boom) {
this.boomCount=10
这个。吊杆定时器清除间隔(这。吊杆定时器)；
this.handleClockVoice()
这个。boom timer=setInterval(()={
这个。吊杆计数-；
}, 1000)
}否则{
这个。clockinneraudiocontext这。clockinneraudiocontext。停止()
clearInterval(这个。吊杆定时器)；
}
返回蠕虫；
},
}
}
剧本
结语
特别鸣谢@大帅老猿@末世未然感谢大帅老师的带队及指导以及每天的督促，也特别的感谢队友的帮助及支持
源码地址：https://github。com/MothWillion/snake _ eat _ worm
原文地址：金爵https://号。cn/post/7087525655478272008
作者：槐
推荐： 《uniapp教程》 以上就是聊聊如何利用uniapp开发一个贪吃蛇小游戏！的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。