前端案例：飞机大战( js+dom 操作，代码完整，附图片素材)

article/2025/10/31 4:57:38

目录

一、案例效果

二、实现思路

三、完整代码+详细注释

四、涉及要点

五、案例素材

一、案例效果

二、实现思路

  • 创建游戏背景板；
  • 创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； onmousemove
  • 创建子弹，让子弹周期性的在战机处发出并让其向 top 值减小的方向(向上)移动，top 小于 0 也就是子弹走出游戏面板时删除自身；
  • 创建敌机，让敌机周期性的在游戏背景板左侧的随机距离的位置产生，并让其向 top 增加的方向(向下)移动；
  • 定义函数，子弹和敌机相遇时消失。

条件：所有的元素都只在鼠标进入游戏背景区域时才触发运动。

三、完整代码+详细注释

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>飞机大战</title><style>* {margin: 0;padding: 0;}/* 背景 */#background {width: 320px;height: 580px;background-image: url(./img/bg.jpg);margin: auto;}/* 我方飞机 */#my_fly {width: 30px;height: 30px;position: absolute;cursor: pointer;}</style>
</head><body><!-- 游戏面板 --><div id="background"></div>
</body>
<script>//创建我方战机var fly = document.createElement('div'); //创建一个divfly.id = 'my_fly'; //为div添加id名fly.innerHTML = '<img src ="./img/my_fly.png" width=30px height=30px>'; //在div中插入飞机的图片document.body.appendChild(fly); //将刚创建的div追加到body中//使飞机鼠标跟随document.onmousemove = function (e) { //onmousemove 当鼠标移动时触发事件var fly = document.getElementById('my_fly'); //获取我方战机var bg = document.getElementById('background'); //获取背景var fly_X = e.clientX - 20; //获取鼠标的坐标 -20是减去飞机宽高的一半，以达到飞机中心与鼠标对应var fly_Y = e.clientY - 20;//游戏背景的区域var bgX = fly_X > bg.offsetLeft && fly_X < bg.offsetLeft + bg.offsetWidth - 30;var bgY = fly_Y > bg.offsetTop && fly_Y < bg.offsetTop + bg.offsetHeight - 30;if (bgX && bgY) { //只有在游戏背景区域内飞机才跟随鼠标移动fly.style.top = fly_Y + 'px'; //将鼠标此时的坐标赋值给我方飞机fly.style.left = fly_X + 'px';//此时飞机跟随鼠标移动，我们为该行为定义一个属性fly.follow = true; //今后follow为true则代表飞机可跟随鼠标移动，false则相反}}//创建子弹var objB = { //子弹相关变量name: 'bullet', //名称num: 1, //数量arr: [], //子弹的属性['id|top|left']width: 5, //子弹宽height: 10, //子弹高path: './img/bullet.png'}creatBullet(objB);function creatBullet(obj) {setInterval(function () {var fly = document.getElementById('my_fly');if (fly.follow) { //当飞机可跟随鼠标移动时可以发射子弹var bull = document.createElement('div'); //创建div元素作为子弹bull.id = obj.name + obj.num; //子弹的id名随创建数量不断变化(因为id值唯一)var length = obj.arr.length;if (length < 40) {obj.arr[length] = bull.id + '|';obj.num++;bull.style.width = obj.width + 'px'; //子弹的相关属性bull.style.height = obj.height + 'px';bull.style.position = 'absolute';bull.style.background = 'url(' + obj.path + ')';bull.style.top = parseInt(fly.style.top) + 'px'; //子弹发出的位置obj.arr[length] = obj.arr[length] + bull.style.top + '|';bull.style.left = parseInt(fly.style.left) + 12 + 'px';obj.arr[length] = obj.arr[length] + bull.style.left;}document.body.appendChild(bull); //将子弹添加到body}}, 700)}//让子弹运动起来function moveBullet() {var fly = document.getElementById('my_fly');if (fly.follow) {for (var i = 0; i < objB.arr.length; i++) { //遍历子弹的对象var newArr = objB.arr[i].split('|'); //将数组arr中的元素切割出来放入新数组var eleB = document.getElementById(newArr[0]);//切割后第0项为id 第一项为top 第二项为left  newArr[1] = parseInt(newArr[1]) - 1; //数组第一项为top，不断减1则子弹便会向上运动eleB.style.top = newArr[1] + 'px';objB.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];if (newArr[1] < 0) { //第一项为top，当top小于0 也就是子弹走出游戏面板时删除该子弹objB.arr.splice(i, 1);var delEle = document.getElementById(newArr[0]); //获取走出面板的子弹delEle.parentNode.removeChild(delEle); //删除自身}}}}//创建敌机（与创建子弹类似）var objF = { //敌机相关变量name: 'foe', //名称num: 1, //数量arr: [], //敌机的属性['id|top|left']width: 34, //敌机宽height: 24, //敌机高path: './img/he_fly.png'}creatFoe(objF);function creatFoe(obj) {setInterval(function () {var fly = document.getElementById('my_fly');var bg = document.getElementById('background'); //获取背景if (fly.follow) { //当飞机可跟随鼠标移动时出现敌机var bull = document.createElement('div'); //创建div元素作为敌机bull.id = obj.name + obj.num; //子弹的id名随创建数量不断变化(因为id值唯一)var length = obj.arr.length;if (length < 40) {obj.arr[length] = bull.id + '|';obj.num++;bull.style.width = obj.width + 'px';bull.style.height = obj.height + 'px';bull.style.position = 'absolute';bull.style.background = 'url(' + obj.path + ')';bull.style.top = 0; //敌机的顶部初始位置为0obj.arr[length] = obj.arr[length] + bull.style.top + '|';bull.style.left = bg.offsetLeft + 290 * Math.random() + 'px'; //敌机的左侧初始位置为随机obj.arr[length] = obj.arr[length] + bull.style.left;}document.body.appendChild(bull); //将敌机添加到body}}, 1000)}//让敌机运动起来function moveFoe() {var fly = document.getElementById('my_fly');var bg = document.getElementById('background'); //获取背景if (fly.follow) {for (var i = 0; i < objF.arr.length; i++) { //遍历敌机的对象var newArr = objF.arr[i].split('|'); //将数组arr中的元素切割出来放入新数组var eleB = document.getElementById(newArr[0]);//切割后第0项为id 第一项为top 第二项为left  newArr[1] = parseInt(newArr[1]) + 1; //数组第一项为top，不断加1则飞机便会向下运动eleB.style.top = newArr[1] + 'px';objF.arr[i] = newArr[0] + '|' + newArr[1] + '|' + newArr[2];if (newArr[1] > bg.offsetLeft - 30) {objF.arr.splice(i, 1);var delEle = document.getElementById(newArr[0]);delEle.parentNode.removeChild(delEle);}}}}//调用运动函数setInterval(function () {moveBullet(); //子弹运动moveFoe(); //敌机运动//子弹和敌机相遇时消失for (var i = 0; i < objF.arr.length; i++) {var newArr = objF.arr[i].split('|');var eleF = document.getElementById(newArr[0]);var xFS = parseInt(newArr[2]);var xFE = parseInt(newArr[2]) + 34;var yFS = parseInt(newArr[1]);var yFE = parseInt(newArr[1]) + 24;for (var j = 0; j < objB.arr.length; j++) {var newArr1 = objB.arr[j].split('|');var eleB = document.getElementById(newArr1[0]);var xB = parseInt(newArr1[2]);var yB = parseInt(newArr1[1]);var xCheck = xB > xFS && xB < xFE;var yCheck = yB > yFS && yB < yFE;if (xCheck && yCheck) {objF.arr.splice(i, 1);eleF.parentNode.removeChild(eleF);objB.arr.splice(j, 1);eleB.parentNode.removeChild(eleB);}}}}, 10)
</script></html>

四、涉及要点

鼠标进入游戏界面时触发元素运动

dom 事件 onmousemove 当指针在元素上方移动时，发生此事件。

创建战机、子弹

document.createElement(element)

创建 HTML 元素，可以 element.id、element.style、element.innerHTML 等为其设置相关属性；

//创建我方战机
var fly = document.createElement('div'); //创建一个div
fly.id = 'my_fly'; //为div添加id名

删除战机、子弹

document.removeChild(element)

删除 HTML 元素，可以结合父元素 parentNode 使用，如我们删除走出游戏面板的子弹，先找到子弹，再删除该子弹自身，其实就是删除该元素的父元素的子元素；

var delEle = document.getElementById(newArr[0]); //获取走出面板的子弹
delEle.parentNode.removeChild(delEle); //删除自身

将创建的 dom 元素追加到页面

document.appendChild(element)

添加 HTML 元素， 每一个创建完的 dom 元素都需要添加后才能显示，如我们将创建的我方战机添加到 body 中；

document.body.appendChild(fly); //将刚创建的div追加到body中

五、案例素材

背景 bg.jpg

己方飞机 my_fly.png

敌方飞机 he_fly.png

子弹 bullet.png


http://chatgpt.dhexx.cn/article/5ufU5ZLy.shtml

相关文章

博客前端模板

博客前端模板

文章目录 序言效果展示菜单栏实现内容布局底部代码 序言 一直后端开发写接口&#xff0c;时间久了&#xff0c;把前端知识忘得一干二净了。最近公司项目不是很忙&#xff0c;想写一个博客练练手。模仿别人博客用bootstrap写了一个博客模板记录下。 效果展示 首页大屏效果&am…
阅读更多...
前端设计类网站汇总

前端设计类网站汇总

设计前端类网站汇总 一、素材类 1、图片 其实国内对图片版权保护这块的意识不是很够&#xff0c;在免费的素材库和收费素材库都能找到同一张图片&#xff0c;但作者署名却都不一样。所以小编现在基本不用国内这些图库网&#xff0c;跟大家推荐几个免费又没有版权纠纷的图库网站…
阅读更多...
前端的你平时都在哪找免费的可商业用的图片素材？

前端的你平时都在哪找免费的可商业用的图片素材？

周末好&#xff01;有段时间没有更新了&#xff0c;最近遇到找素材的苦恼&#xff0c;所以总结了一篇文章。前端中少不了与素材打交道&#xff0c;UI设计就更用说了&#xff0c;但能白嫖就白嫖&#xff0c;嘿嘿&#xff01;&#xff01;&#xff01;下面推荐一下有关能免费的可…
阅读更多...
三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTMLCSS

三个漂亮的网页登录页面源码及素材——可用于前端初学者练习HTMLCSS

注&#xff1a;这三个登录页面涉及到的图片素材可自行寻找&#xff0c;字体图标素材可以在阿里字体图标库获取&#xff08;https://www.iconfont.cn/home/index?spma313x.7781069.1998910419.2&#xff09;&#xff0c;如需原版素材可联系作者QQ&#xff08;3416252112&#x…
阅读更多...
前端素材库网站集合——网站集合

前端素材库网站集合——网站集合

UI矢量图库 1.摄图网 https://699pic.com/ https://699pic.com/tupian/tubiao.html?from215 图片素材图库 1.图库 https://picsum.photos/ 随机获取图片&#xff1a;&#xff08;每次刷新都可以获取一个新的图片&#xff09; http://picsum.photos/360/460?random1<d…
阅读更多...
分享三个免费的前端模板网站

分享三个免费的前端模板网站

1、模板之家 网页模板,网站模板,DIVCSS模板,企业网站模板下载 http://www.cssmoban.com/ 2、站长之家 HTML5模板 HTML5模板免费下载 https://sc.chinaz.com/tag_moban/html5.html 3、jQuery之家 自由分享jQuery、html5、css3的插件库 http://www.htmleaf.com/
阅读更多...
前端好用的素材网站分享

前端好用的素材网站分享

前端设计推荐的一些网站&#xff09; 1.[站酷](https://www.zcool.com.cn/)2.[ColorPalette](https://arco.design/palette/list)3.[unDraw](https://undraw.co/illustrations)4.[OUCH](https://icons8.cn/illustrations/style--pale)&#xff08;应该是叫这个吧&#xff09;5.…
阅读更多...
前端常用素材网站整理

前端常用素材网站整理

最近整理了网页收藏夹&#xff0c;将平时遇到与前端相关的素材网站归置归置 注意&#xff1a;有的下载模版需要充值 PPChart 让图表更简单 echarts图表案例 很全 啥图都有 http://www.ppchart.com/#/ ———————————————————————————————————…
阅读更多...
Redis可视化管理工具推荐

Redis可视化管理工具推荐

AnotherRedisDesktopManager 码云地址&#xff1a;https://gitee.com/qishibo/AnotherRedisDesktopManager github地址&#xff1a;https://github.com/qishibo/AnotherRedisDesktopManager/ 很好用。推荐一下。
阅读更多...
Redis 管理工具 RedisInsight

Redis 管理工具 RedisInsight

Redis 安装好并运行一段时间后&#xff0c;如何清晰的看到 Redis 占了多大内存&#xff0c;有多少个 KEY&#xff0c;所占的网络如何&#xff0c;这个在 RedisInsight 下就是一目了然了&#xff0c;特别方便。 下载也特别简单&#xff0c;到此网站下载你想要的版本就行。 ps&a…
阅读更多...
Redis 管理工具 TreeNMS

Redis 管理工具 TreeNMS

今日&#xff0c;日月给大家介绍一款redis管理工具TreeNMS.下面我就详细给大家介绍一下treeNMS的安装及各项功能。 1、下载安装 下载地址&#xff1a;http://www.treesoft.cn/dms.html 下载到的是一个zip包&#xff0c;解压到指定的目录即可 windows下&#xff0c;直接双…
阅读更多...
在window系统安装reids、并使用Redis可视化工具进行管理

在window系统安装reids、并使用Redis可视化工具进行管理

下载地址 https://github.com/tporadowski/redis/releases 选择 Redis-x64-5.0.14.1.msi (微软的安装包 下载 安装好之后 打 开 一 个 cmd 窗 口 使 用 cd 命 令 切 换 目 录 到 安装目录下 D:\Program Files\Redis 执行命令 redis-server.exe redis.windows.conf 接下来…
阅读更多...
Redis 可视化工具

Redis 可视化工具

Redis 可视化工具 Redis做为现在web应用开发的黄金搭担组合&#xff0c;大量的被应用&#xff0c;广泛用于存储session信息,权限信息&#xff0c;交易作业等热数据。Redis作为业界最好的缓存数据库&#xff0c;过去几年发展很快。相对Memcached&#xff0c;Redis提供了更多种数…
阅读更多...
一款可视化的Redis管理工具-Another Redis DeskTop Manager

一款可视化的Redis管理工具-Another Redis DeskTop Manager

文章目录 前言项目地址 前言 “ Another Redis DeskTop Manager 是 GitHub 上的一个开源项目&#xff0c;是 Redis 可视化管理的利器&#xff0c;提供在 Windows、MacOS 平台的安装包&#xff0c;体积小&#xff0c;完全免费。” 提供了以可视化的方式管理 Redis 的功能&#…
阅读更多...
Redis管理工具（Redis Assistant）更新啦

Redis管理工具（Redis Assistant）更新啦

目前更新到1.3.0.0版本&#xff0c;引入以下功能&#xff08;下载链接&#xff1a;http://www.redisant.cn/&#xff09; 内存分析&#xff1a;使用Redis Assistant及时了解整个数据库内存使用情况&#xff0c;排查故障的好帮手。 多样化搜索&#xff1a;可以搜索Key&#xf…
阅读更多...
宝塔面板Redis数据管理工具hash和zset类型报错的解决方法

宝塔面板Redis数据管理工具hash和zset类型报错的解决方法

问题描述 在宝塔面板的Redis数据管理工具中,查询其他数据都没问题,但是查询hash和zset类型的数据时页面上会出现一个黑框,并且右侧没有出现数据. (写文章的时候已经解决了,所以没截到图,如果你也有这个问题,那你应该能明白我在说啥) 查了半天发现竟然没人提过这个问题,既然没有…
阅读更多...
Redis集群管理工具redis-trib

Redis集群管理工具redis-trib

Redis3.0 及其之后的版本提供了 redis-cluster 集群支持&#xff0c;用于在多个redis节点间共享数据&#xff0c;以提高服务的可用性。构建 redis-cluster 集群可以通过 redis-trib.rb 工具来完成。redis-trib.rb 是redis官方提供的一个集群管理工具&#xff0c;集成在redis安装…
阅读更多...
推荐一款 Redis 可视化管理工具——Another Redis Desktop Manager

推荐一款 Redis 可视化管理工具——Another Redis Desktop Manager

文章目录 :pushpin: 简介:clipboard: 基础配置基础设置 :pencil2: 使用方法1.连接Redis实例2.监控Redis性能3.执行Redis命令 :tada:下载安装1.下载地址2.安装 &#x1f4cc; 简介 Redis是一种快速、高效的NoSQL数据库&#xff0c;广泛用于缓存、会话管理、消息队列等领域。为了…
阅读更多...
mac安装redis管理工具rmd

mac安装redis管理工具rmd

2019独角兽企业重金招聘Python工程师标准>>> 官网教程&#xff1a;http://docs.redisdesktop.com/en/latest/install/#build-from-source 1、从官网下载最新源码 转载于:https://my.oschina.net/carmen001/blog/825983
阅读更多...
redis web工具

redis web工具

安利web版redis管理工具一款&#xff0c;首先来个正面照 界面看上去挺简洁&#xff0c;下面就演示如何得到他 本机 Python 2.7.5 Linux dev 3.10.0-862.14.4.el7.x86_64 #1 SMP Wed Sep 26 15:12:11 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux 命令行&#xff1a; git clone …
阅读更多...
推荐文章

Copyright @ 2022~2023