怎么用Vue做个贪吃蛇游戏

这篇文章主要介绍了怎么用Vue做个贪吃蛇游戏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用Vue做个贪吃蛇游戏文章都会有所收获，下面我们一起来看看吧。安装

 npminstalltemir-snake-game-g
 开始游戏

开始游戏
在终端窗口运行temir-sg.对于Windows系统,推荐使用hyper终端进行体验.将Vue渲染到命令行界面使用Vue.js实现命令行贪吃蛇游戏,首先意味着我们要将Vue.js渲染到命令行界面,才能开始具体的游戏实现.我们经常用Vue.js来编写Web应用,但是Vue的能力却不仅仅局限于此,它的舞台也不只有浏览器.Vue3拥有出色的跨平台能力,我们可以通过createRenderer API创建一个自定义渲染器,通过创建宿主环境中对应的Node和Element,并对元素进行增删改查操作.得益于Vue3出色的跨平台能力,我实现了Temir,一个用Vue组件来编写命令行界面应用的工具.开发者只需要使用Vue就可以编写命令行应用,不需要任何额外的学习成本.顺便值得一提的是,它还支持HMR~贪吃蛇游戏实现有了Temir,我们就具备了使用Vue.js编写命令行游戏的条件,接下来我们来看看游戏的具体实现:实现拆解首先我们对游戏实现进行一下简单的拆解,从元素+逻辑的维度来看,可以简单分为几部分:元素初始化竞技台蛇的爬行与食物的生成都需要依赖坐标,最简单的坐标其实只需要一个索引值.因此竞技台的组成也很简单,就是由很多个小盒子(这里以⬛表示)组成,每一个盒子对应一个坐标(索引),我们要做的是一个28*28的竞技台,因此它的索引集合就是(0~783).免费云主机域名

 constbasic=28
constbackgroundIcon='⬛'
constarena=ref([])

functioninitArena(){
arena.value=Array.from({length:basic*basic},()=>backgroundIcon)
}
 蛇

蛇
前面我们提到了坐标的概念,蛇身的组成就是一串有规律的坐标.

 constsnakeIcon='?'
//坐标(索引)30,29长度为2的蛇身
constsnakeBody=ref([30,29])
 食物

食物
食物的生成其实也就是随机一个坐标(索引),只不过要注意的是,我们需要避开蛇身本身的坐标.

 constfoodIcon='?'
//食物坐标
constfoodCoord=ref(77)

//生成食物
functiongenerateFood(){
constfood=Math.floor(Math.random()*basic*basic)
//与蛇身冲突,重新生成
if(snakeBody.value.includes(food)){
generateFood()
return
}
foodCoord.value=food
}
 初始化后的元素长这样 :

初始化后的元素长这样 :
蛇的爬行蛇的爬行逻辑有两个基础元素,方向 + 步数.前面我们提到了竞技台的组成是一个28*28的行列式结构,那么关于方向和步数的映射,就比较清晰了:

 constmap={
left:-1,
right:1,
top:-28,
bottom:28
}
 有了两个基本元素,我们就可以得出我们每一次爬行的下一个坐标.我们只需要在每次爬行的时候往蛇头添加对应的坐标,并移除蛇尾所在的坐标就可以达到蛇爬行的效果.

 functionmove(){
consth=snakeBody.value[0]
//计算下一次爬行坐标,并添加至蛇头
head.value=h+direction.value
snakeBody.value.unshift(head.value)

//吃到食物,重新生成
if(head.value===foodCoord.value){
generateFood()
}
//只有在未吃到食物的时候,才需要移除蛇尾
else{snakeBody.value.pop()}
}
 越界逻辑

有了两个基本元素,我们就可以得出我们每一次爬行的下一个坐标.我们只需要在每次爬行的时候往蛇头添加对应的坐标,并移除蛇尾所在的坐标就可以达到蛇爬行的效果.
越界逻辑
贪吃蛇的游戏结束规则判断就是爬行时蛇头越界(这里的界限指的是超出竞技台的范围)或者碰到蛇身.

 functionisOutOfRange(h:number){
//1.蛇头碰到蛇身
returnsnakeBody.value.indexOf(h,1)>0
//2.蛇头超出竞技台上方
||hbasic*basic-1
//4.蛇头超出竞技台右方
||(direction.value===1&&h%basic===0)
//5.蛇头超出竞技台左方
||(direction.value===-1&&h%basic===basic-1)
}
 方向控制

方向控制
贪吃蛇游戏核心的操作逻辑在于操纵蛇的方向进行食物的捕捉.所以我们需要做的就是捕捉用户方向键的输入进行方向的切换.Temir提供了useInput函数监听用户的输入.

 import{useInput}from'@temir/core'
useInput(onKeyBoard,{isActive:true})

functiononKeyBoard(_,keys){
const{upArrow,downArrow,leftArrow,rightArrow}=keys
constd={
[+leftArrow]:-1,
[+rightArrow]:1,
[+upArrow]:-basic,
[+downArrow]:basic,
}[1]??direction.value
direction.value=(snakeBody.value[1]-snakeBody.value[0]===d)?direction.value:d
}
 UI绘制

UI绘制
关于UI的绘制与呈现Temir提供了一些Vue组件,我们只需要像构建Flexbox布局那样构建终端UI:

演示关于“怎么用Vue做个贪吃蛇游戏”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用Vue做个贪吃蛇游戏”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注百云主机行业资讯频道。

相关推荐: C++11可变参数的模板怎么写

本篇内容介绍了“C++11可变参数的模板怎么写”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在C++11之前，类模板和函数模板只能含有固定数量的模板参数。C++…

免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。