Vue 开发一个简略版的飞机大战小游戏

最新推荐文章于 2024-06-19 10:06:41 发布
最新推荐文章于 2024-06-19 10:06:41 发布
阅读量2.2k 收藏 16
点赞数 2
文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44596681/article/details/109154040
版权

文章目录

使用 Vue 开发一个简略版的飞机大战小游戏

如题，假设你为了向更多访问你博客的人展示你的技术，你决定小试身手开发一个飞机大战小游戏。

功能： 开始游戏前用户名必填，玩家可以发射子弹，敌军与行星随机出现，鼠标可操控玩家移动，敌军可发射子弹

一、实现思路

如题所述：

玩家可操控玩家飞机可发射子弹，敌军与行星随机生成；

这意味着我们需要一个单独的玩家飞机dom，以及敌军、行星与子弹 用 vue 循环生成的3个dom。

敌军与行星生成后的dom的位置由数据里的 x 与 y 值决定。

按下空格时产生的子弹由当时按下空格键的时候的飞机的位置来决定。

敌军随机发射的子弹由当时发射子弹的敌军的位置来决定。

游戏开始时用户名必填，那么我们只需要在 Vue 实例里为该 input 绑定一个数据，再为开始游戏按钮绑定点击事件。随后计算用户名的长度只要大于3，就调用游戏开始函数或初始化函数。

玩家鼠标操控移动飞机移动只需要为其父节点绑定鼠标移动事件，然后更改 player 里的 x 与 y 的数据 （x与y的值不能小于0，x与y的值不能大于父节点的宽高） 并且赋予 玩家飞机即可。

击毁敌军只需要拿 子弹与敌军 的 x,y 计算对比即可。

二、所需知识点

  1. Vue 事件绑定
  2. Vue 监听事件
  3. Vue 计算属性
  4. Vue Style操作

三、实现步骤

  • 第一步：创建 HTML 与 CSS 文件

    HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 飞机大战</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<main>
			-
			<div class="game-plane" 
				@mousemove="touchmove"
				:style="{
      backgroundPosition:'0px '+ positionY +'px'}" ref='plane'>
				
				<div id="hit">
					<h2>击毁：{
  { hitCount }}</h2>
					<h2>与敌机相撞：{
  { boom }}</h2>
					<h2>被击中次数：{
  { HitTimes }}</h2>
					<h2>用户名：{
  { username }}</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="content">
					<div class="left">
最低0.47元/天 解锁文章
柴不是柴
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3——pixi初学，编写一个简单的小游戏,复制粘贴可用学习
Wancc123的博客
09-19 1245
两个文件夹 一个index.html 一个data.js。
8个开源的Vue/React小游戏，个个经典
ApologizeError的博客
10-18 968
该项目使用的技术栈包括：TypeScript、Webpack、React、Redux、React Router。其功能包括：15个关卡、快速下落和硬下落、方块放置预览、音效和背景音乐、简化的得分系统等。使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 构建的经典国际象棋游戏。本文来分享 8 个基于 Vue / React 的小游戏，包括俄罗斯方块、贪吃蛇、扫雷、国际象棋等，个个经典！
【前端网页游戏开发】Vue3＋PixiJS开发2D闯关打怪游戏，更新内容（打斗）
最新发布
m0_61279136的博客
06-19 484
本次更新内容：怪物攻击，怪物死亡，怪物刷新，自动跟随玩家，靠近玩家时自动攻击，玩家点击键盘J键可以攻击怪物，玩家血量为10，怪物的血量为5，怪物每5秒钟刷新一次，并且大于5只时不再刷新，怪物的伤害为攻击一次减1血量，玩家的伤害为攻击减2血量，当玩家或者怪物死亡时倒地，并且不再移动，玩家死亡游戏结束，弹出提示框，是否回到主界面重新开始游戏，杀死怪物10只后游戏通关，提示是否进入下一关。
Vue2模拟俄罗斯方块小游戏
qq_44930306的博客
06-12 2054
这章主要分享一个俄罗斯方块小游戏，比贪吃蛇逻辑稍微复杂一点。
vue实现推箱子小游戏
qq_74405602的博客
12-22 936
最近都没有怎么写过文章，都断更很久了吧。学习前端一年多，快两年了，学习的热情相比一开始，自我感觉没有变化多少，但是学习的动力却好像时有时无。就好像是没了目标一样，不知道自己现在应该学些什么，从哪里提升自己，是为了工作，还是为了程序员这个职业。自己沉迷一段时间，真的出现一种躺平的状态。今天不知道怎么了，突然想起自己好久没有写过博客了，一边想着想写什么，一边找着以前自己的github项目，偶然间看见自己以前给别人写的一个推箱子小游戏，就写下了这篇文章。
使用Vue3 + Canvas 实现塔防小游戏
三拾的博客
04-23 569
通过上述步骤，我们成功实现了一个简单的塔防小游戏。我们使用了Vue3和Canvas来实现游戏的UI和逻辑，并且添加了交互功能。希望这篇文章对你有所帮助！
小游戏（飞机大战）vue版
weixin_45260684的博客
02-11 615
vue实现飞机大战
基于vue3实现飞机大战游戏源码.zip
03-03
基于vue3实现飞机大战游戏源码.zip Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and fixes files yarn lint
使用vue3+RenderAPI开发的一个飞机大战网页游戏源码.zip
03-03
使用vue3的语法来开发一个小的网页游戏，飞机大战 二、实现原理： 实现了自定义的vue Renderer,渲染使用pixijs 三、目的： 需求驱动学习vue3+pixijs 以开发小游戏的形式去完善Renderer 四、飞机大战玩法： 1、启动: ...
基于Vue和Javascript的植物大战僵尸游戏设计源码
04-16
该项目是一个用canvas实现的植物大战僵尸游戏，旨在为用户提供娱乐和挑战。系统提供了丰富的游戏功能，包括植物种植、僵尸攻击、关卡挑战等。通过该项目，开发者可以学习并实践Vue和Javascript技术的应用，为后续的...
纯前端写的飞机大战游戏
07-31
【Day15-飞机大战】这个文件名可能是项目开发过程中的一个阶段，表示这是第15天的开发成果，可能包含了游戏的源代码、资源文件（如图片、音频）和其他相关文档。通过研究这些文件，开发者可以深入理解如何利用...
vue-maze-一个由Vue.js组件制作的小巧迷宫游戏-Vue.js开发
05-27
Vue-maze由Vue.js组件制作的迷宫游戏PLAY DEMO自动适应组件大小Mousemove / Touchmove / ArrowKey移动p Vue-maze由Vue.js组件制作的迷宫游戏PLAY DEMO Fit自动更改为组件大小Mousemove / Touchmove / ArrowKey移动玩家选择难度选择迷宫生成策略使用您自己的飞行员/目标图像安装$ npm install maze vue-maze-从'vue'保存import Vue从'vue- import import迷宫” let v = new Vue（{el：'#app'，template：` `，组件：{迷宫}}）道具道具类型
基于Vue开发的猜数字小游戏源码(课程作业).zip
10-07
基于Vue开发的猜数字小游戏源码(课程作业).zip基于Vue开发的猜数字小游戏源码(课程作业).zip基于Vue开发的猜数字小游戏源码(课程作业).zip基于Vue开发的猜数字小游戏源码(课程作业).zip基于Vue开发的猜数字小游戏...
2048小游戏 vue+uni-app 简单实现了一下
m0_57533694的博客
04-19 3806
做的一个 挺有意思的小游戏
＜ 纯前端实现「羊了个羊」小游戏 ＞
一个平平无奇的技术宅
10-27 2876
最近简单的「羊了个羊」小游戏火到出圈，据说狂赚几百几千万。即便是前端，我上我也行！
VUE3项目-飞机大战1
yuan_fang09的博客
03-25 4618
整体分析： （1）页面切换：创建开始页面——>导入开始按钮——>处理按钮的点击事件——>引入开始游戏页面——>开始页面和游戏页面的切换——>创建结束页面（和开始页面一样） （2）地图逻辑 （3）飞机逻辑：A我方飞机：.创建飞机组件——>飞机移动 B.敌方飞机：确定数据结构——>创建飞机组件——>飞机移动，随机生成位移和飞行速度 （4）我方子弹：创建子弹组件——>确定数据结构——>添加静态的子弹（兄弟节点间的数据通信）——>子弹移动
微信小程序| 做一款多人实时线上的五指棋联机游戏
陶人超有料的博客
12-03 3346
本文基于最容易上手的html和vue技术，搭建了一套可以多人联机游戏的五指棋游戏，让大家每个人都能享受到游戏的乐趣！相信我，从中你可能能学到很多！
vue制作翻牌游戏
2201_75321887的博客
03-21 765
点击开始进行翻牌游戏
[vue]基于vue的单页面应用游戏——桌游:《乌托邦引擎》
热门推荐
身披白袍的博客
08-17 1万+
乌托邦引擎是由Nick Hayes设计的一款单人桌面游戏，玩家扮演一个科学家，探索丛林、深渊，收集材料来打造乌托邦引擎，避免星球毁灭的发生。
vue飞机大战小游戏
11-27
以下是使用Vue开发飞机大战小游戏的简要步骤： 1.创建Vue实例并定义数据，包括玩家、敌人、子弹等的位置和状态。 2.使用Vue的计算属性来计算玩家、敌人、子弹的样式和位置。 3.使用Vue的事件绑定来监听键盘事件，控制玩家移动和发射子弹。 4.使用Vue的监听事件来监听敌人和子弹的碰撞事件，更新敌人和子弹的状态。 5.使用Vue的Style操作来动态设置敌人、玩家、子弹的样式。 6.最后，将Vue实例挂载到HTML页面上。 下面是一个简单的Vue飞机大战小游戏的代码示例： ```html <template> <div class="game"> <div class="player" :style="playerStyle"></div> <div class="enemy" v-for="(enemy, index) in enemies" :key="index" :style="enemyStyle(enemy)"></div> <div class="bullet" v-for="(bullet, index) in bullets" :key="index" :style="bulletStyle(bullet)"></div> </div> </template> <script> export default { data() { return { player: { x: 0, y: 0, width: 50, height: 50, }, enemies: [], bullets: [], }; }, computed: { playerStyle() { return { left: `${this.player.x}px`, top: `${this.player.y}px`, width: `${this.player.width}px`, height: `${this.player.height}px`, }; }, }, methods: { enemyStyle(enemy) { return { left: `${enemy.x}px`, top: `${enemy.y}px`, width: `${enemy.width}px`, height: `${enemy.height}px`, }; }, bulletStyle(bullet) { return { left: `${bullet.x}px`, top: `${bullet.y}px`, }; }, movePlayer(event) { switch (event.keyCode) { case 37: this.player.x -= 10; break; case 38: this.player.y -= 10; break; case 39: this.player.x += 10; break; case 40: this.player.y += 10; break; case 32: this.bullets.push({ x: this.player.x + this.player.width / 2, y: this.player.y, }); break; } }, moveEnemies() { setInterval(() => { this.enemies.push({ x: Math.floor(Math.random() * 500), y: 0, width: 50, height: 50, }); }, 1000); setInterval(() => { this.enemies.forEach((enemy, index) => { enemy.y += 10; if (enemy.y > 500) { this.enemies.splice(index, 1); } }); }, 100); }, moveBullets() { setInterval(() => { this.bullets.forEach((bullet, index) => { bullet.y -= 10; if (bullet.y < 0) { this.bullets.splice(index, 1); } }); }, 100); }, checkCollision() { setInterval(() => { this.enemies.forEach((enemy, enemyIndex) => { this.bullets.forEach((bullet, bulletIndex) => { if ( bullet.x >= enemy.x && bullet.x <= enemy.x + enemy.width && bullet.y <= enemy.y + enemy.height ) { this.enemies.splice(enemyIndex, 1); this.bullets.splice(bulletIndex, 1); } }); }); }, 100); }, }, mounted() { window.addEventListener("keydown", this.movePlayer); this.moveEnemies(); this.moveBullets(); this.checkCollision(); }, }; </script> <style> .game { position: relative; width: 500px; height: 500px; border: 1px solid #ccc; } .player { position: absolute; background-color: blue; } .enemy { position: absolute; background-color: red; } .bullet { position: absolute; width: 5px; height: 10px; background-color: black; } </style> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值