vue3飞机大战,
本文主要详细介绍了Vue实现的飞机作战游戏。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
目录
用Vue开发一个简短版的飞机战争游戏一、实现思路二。必学知识点三。实施步骤
使用 Vue 开发一个简略版的飞机大战小游戏
例如，假设你决定尝试开发一个飞机对飞机的小游戏，以便向更多访问你博客的人展示你的技能。
功能：游戏开始前需要用户名。玩家可以发射子弹。敌人和行星随机出现。鼠标可以控制玩家移动。敌人可以发射子弹。
一、实现思路
如题所述：
玩家可以控制玩家的飞机发射子弹，敌人和行星随机生成；
这意味着我们需要一个单人玩家平面dom，以及vue循环为敌人、星球和子弹生成的三个DOM。
用敌方行星生成的dom的位置由数据中的x和y值决定。
按空格键时产生的子弹是由当时按空格键时飞机的位置决定的。
敌人随机发射的子弹是由当时发射子弹的敌人的位置决定的。
游戏开始时需要用户名，所以我们只需要在Vue实例中为输入绑定一个数据，然后为开始游戏按钮绑定click事件。然后，如果计算的用户名长度大于3，将调用游戏开始函数或初始化函数。
鼠标控制的移动飞机移动只需要将鼠标移动事件绑定到其父节点，然后改变player中X和Y的数据(X和Y的值不能小于0，X和Y的值不能大于父节点的宽度和高度)并将飞机交给玩家。
要消灭敌人，只需要把子弹和敌人的X，Y计算进行对比。
二、所需知识点
1.Vue事件绑定
2.Vue监控事件
3.Vue计算属性
4.Vue风格操作
三、实现步骤
第一步：创建HTML和CSS文件
超文本标记语言
！声明文档类型
超文本标记语言
头
meta charset=utf-8
TitleVue飞机战斗/标题
link rel= style sheet href= CSS/style . CSS
/头
身体
主要的
-
div class=游戏飞机
@mousemove=touchmove
:style= { background position: 0px positionY px } ref= plane
div id=hit
H2被摧毁：{{ hitCount }}/h2
H2与敌机相撞：{{ boom }}/h2
H2点击次数：{{ HitTimes }}/h2
H2用户名：{{用户名}}/h2
/div
！-玩家-
img src= image/player . png alt= player id= p :style= { top:p . y px ，left:p.x px}
！-星球-
img v-for=(item，index)of plane . arr :style= { top:item . y px ，left:item . x px } src= image/plane . png alt= plane
！-敌人-
img v-for=(item，index)of e . arr :style= { top:item . y px ，left:item . x px } src= image/e . png class= e alt= e
！子弹
img v-for=(item，index) of bullets.arr class=b
:style={top:item.y px ，left:item.x px}
:src=item.tag==p ？ image/p_b.png : image/e_b.png
alt=p_b
/div
！-开始面板-
div class=alert ref=alert
div class=内容
div class=left
H1Vue飞机战斗/h1
p作者：柴不是柴/p
img:src= face change class= face
/div
div class=右
input= text v-model= username placeholder=请输入您的姓名
type= submit @ click= startbtnclick value=开始游戏
/div
/div
/div
/main
script src=js/vue.js/script
script src=js/data.js/script
script src=js/app.js/script
/body
/html
半铸钢钢性铸铁(Cast Semi-Steel)
* {
填充：0；
边距：0；
}
主要{
显示器：flex
justify-content:居中；
对齐-项目：居中；
宽度：100%；
身高：100vh
背景色：# 282828；
}
主要的。游戏平面{
位置：相对；
宽度：1200px
最大宽度：1200像素；
高度：900px
背景-图像：url(./image/background . png)；
背景尺寸：100%自动；
box-shadow: 0 2px 30px rgba(255，255，255，0.5)；
溢出：隐藏；
}
主要的。游戏平面图像{位置：绝对；}。警报{
位置：绝对；
top:calc(50%-100px)；
左：0;
宽度：100%;
高度：200像素
背景：# FFF；
箱形阴影：0 0 0 999em rgba(0，0，0，0.5)；
}。警惕。内容{
显示：网格；
网格-模板-列：4fr 6fr
网格-模板-行：100%;
差距：20px
边距：0自动；
最大宽度：1200像素；
宽度：100%;
身高：100%;
}。警惕。内容。左侧{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
对齐-内容：居中；
}。警惕。内容. left * { margin:5px 0；}。警惕。内容。右{
显示器：flex
伸缩方向：列；
对齐-项目：居中；
对齐-内容：居中；
}。警惕。内容。右输入{
宽度：100%;
显示：块；
框大小：边框-框；
填充：10px
}。e {变换：旋转(180度);}。b {宽度：30px} #点击{
位置：绝对；
top:20px；
左：20px
颜色：# FFF；
}
第二步：创建一个全局数据文件
窗户。El=文档。查询选择器(.游戏平面);
window.data={
p : {//玩家运动员
w:document . query selector(" # p ").偏离宽度，
h:document . query selector(" # p ").偏高，
x:El。offsetwidth/2-文档。查询选择器(“# p”).偏移量/2,
y:El。偏八-文档。查询选择器(“# p”).偏高
},
e : {//敌机敌机
arr : []，
速度：6,
},
平面：{ arr : [] }，//星球
项目符号：{ arr : [] }，//子弹
点击次数：0,//击中总数
boom : 0，//碰撞次数
HitTimes : 0，//被击中次数
start : false，//游戏是否开始
positionY : 0，//背景Y值
计时器：[],//定时器
脸：普通,//表情
用户名： //玩家名
}
第三步：创建某视频剪辑软件实例
var Game=new Vue({
El:“主”，
数据，
方法：{
startBtnClick() {
if ( this.username.length=2)返回警报(用户名不可少于3位字符哦!);
这个。init()；
},
init() {//初始化
让这个=这个
this.start=true
这个参考文献。警惕。风格。display= none
这个。createe()；
这个。创建平面()；
这个。计时器。推(setInterval(这个。bgmove，20))
这个。计时器。push(setInterval(function(){ _ this。move( bullets )}，20))
},
bgMove () { //背景移动顺带判断玩家是否装上敌军
这个。positiony=5；
如果(这个。hit _ check(这个。p))这个。boom
},
touchmove(){//飞机移动
让触摸，x，y；
如果(!this.start)返回；
如果(事件。触摸)触摸=事件。触摸[0]；
否则触摸=事件；
x=touch.clientX - this .$参考文献。飞机。向左偏移-这个。p . w/2；
y=touch.clientY - this .$参考文献。飞机。偏置-这个。p . h/2；
y=y 0？0 : y(这个参考文献。飞机。偏八-这个。p . h)？这个参考文献。飞机。偏八-这个。p . h:y；
x=x 0？0 : x(这个参考文献。飞机。偏-这个。p . w)？这个参考文献。飞机。偏-这个。p . w:x；
这个。p . x=x
这个。p . y=y
},
createE() { //创建敌军
let _this=this，x；
这个。计时器。push(setInterval(function(){
x=数学。ceil(数学。random()*(_ this .$参考文献。飞机。offsetwidth-80))；
_this.build(e ，{ x: x，y: 5 })
}, 1000 ));
这个。计时器。push(setInterval(function(){ _ this。move( e )}，20))；
},
createPlane() {//创建行星
let _this=this，x；
这个。计时器。push(setInterval(function(){
x=数学。ceil(数学。random()*(_ this .$参考文献。飞机。offsetwidth-80))；
_this.build(plane ，{ x: x，y: 5 })
}, 2000 ));
这个。计时器。push(setInterval(function(){ _ this。move( plane )}，20))；
},
createButter(table，e) {//创建子弹
如果(!this.start)返回；
让布尔特={
x:(e.x (e.w？e.w : 30)/2)，
y:e.y - (e.h？体长：-30),
speed : table==p ？-6 : 10,
标签:表格
};
this.build(bullets ，bullter)；
},
构建（表，数据){//公共创建
让这个=这个
本[表].arr.push(数据);
},
移动（表格){//公共移动
对于(设I=0；我本[表].由…改编长度；i ){
设e=这个[表]。arr[i]，
math=Math.random() * 100
速度=这个[表格]。速度？这张[桌子]。速度：5;
if(table== bullets )speed=e . speed；
e.y=速度；
如果（表！==bullets ) {//如果不是子弹数字正射影像图的移动
如果(例如这个参考文献。飞机。偏移高度-55)本【表】。由…改编拼接(I，1)；
if(table== e math 1){ this。创造黄油( e ，e)；}
}否则{
if ( e.tag==p ) {
如果(这个。hit _ check(e))这个[表]。由…改编拼接(I，1)；
else if(e y 0)这个[table]。由…改编拼接(I，1)；
}否则{
if ( this.hit(e，this.p) ) {
this[table].arr.splice(i，1)；
这个HitTimes
}
否则如果(例如这.$参考文献。飞机。偏移高度-30)本【表】。由…改编拼接(I，1)；
}
}
}
},
hit_check(b) {//是否击毁敌军
对于(设I=0；我这就是arrive）长度；i ){
如果(this.hit(b，this。e . arr[I]){
这就是排列拼接(I，1)；
这个。点击次数；
返回真实的
}
}
},
hit(b，e) {//碰撞
设d=this.judgeHit( b.x，b.y，e.x，e . y)；
如果(草35)返回真实的
},
judgeHit(x1，y1，x2，y2) {//计算两个点的距离差
设a=x1 - x2，
b=y1 - y2，
result=Math.sqrt( Math.pow( a，2) Math.pow( b，2))；
返回数学.圆(结果);
},
pause() {//暂停
this.start=false
这个。计时器。foreach(element={ clear interval(element))；})
}
},
观察：{
用户名(){//监听玩家输入事件
如果(这个。用户名。长度2)这个。face=害羞；
else this.face=普通；
}
},
已安装(){
让这个=这个
document.onkeyup=function(e) {
(e . key code==32)_ this。创造黄油( p ，_ this。p)；
//(e . key code==80)_ this。pause()；
}
},
已计算：{变脸(){ return image/ this。脸.png ；} }
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。