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

最新推荐文章于 2024-10-06 19:27:13 发布

柴不是柴

最新推荐文章于 2024-10-06 19:27:13 发布

阅读量2.3k

点赞数 2

文章标签： javascript vue

本文链接：https://blog.csdn.net/weixin_44596681/article/details/109154040

版权

本文介绍了如何使用Vue开发一个简略版的飞机大战小游戏，包括实现思路、所需知识点和详细步骤。玩家可以输入用户名、发射子弹，敌军与行星随机出现。游戏涉及Vue事件绑定、监听事件、计算属性和Style操作等技术。

摘要由CSDN通过智能技术生成

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

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

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

一、实现思路

如题所述：

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

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

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

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

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

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

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

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

二、所需知识点

Vue 事件绑定
Vue 监听事件
Vue 计算属性
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">