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

一、案例效果

二、实现思路

三、完整代码+详细注释

四、涉及要点

五、案例素材

一、案例效果

二、实现思路

创建游戏背景板；
创建我方战机，鼠标进入游戏面板后其随鼠标轨迹运动； 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

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

前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）
目录一.案例效果二.实现思路三.完整代码+详细注释四.案例素材一.案例效果二.实现思路创建游戏背景板和小鸟,并分别设置相对定位与绝对定位: 初始化背景图的位置: 初始化小鸟的位置: 设置 ...
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码博主的话运行图片目录路径飞机大战.html style.css 进行下一个游戏的开发! 注意事项博主的话当时博主只会html,css和原生JavaScript,假 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
js dom操作实现雪花下落
关于使用dom操作完成雪花下落的实现关于实现雪花下落的实现实现代码段如下 <!DOCTYPE html> <html lang="en"> <he ...
javascript打飞机程序8x8x飞机大战js打飞机程序，飞机大战知识点包含了JavaScript面向过程的全部知识点，包括变量、运算符、判断、循环、数组、自定义函数、系统函数、事件等。...
js打飞机程序,飞机大战知识点包含了JavaScript面向过程的全部知识点,包括变量.运算符.判断.循环.数组.自定义函数.系统函数.事件等. 讲解了JavaScript编程语言制作游戏界面,添加游 ...
HTML实现怀旧小游戏，超级玛丽、飞机大战…等十余款【完整源码分享】
HTML怀旧小游戏介绍超级玛丽.飞机大战.赛车.俄罗斯方块.飞翔的鸟.王校长热狗飞机大战.植物大战僵尸.冒险岛.塔块游戏.五子棋.贪吃蛇怀旧小游戏,简单HTML实现,可下载修改代码调整难度,增加 ...
java飞机大战绪论_一个超级完整的java飞机大战（包括音效和奖励）
[实例简介] 比较完整的飞机大战,里面的解析很清楚,很适合用来当大作业或者学习之用 [实例截图] [核心代码] shootgame └── shoot game ├── 123.png ├── aix ...
奔跑的熊大(案例)内附图片素材
此案例使用了 steps() 步长来显示熊的状态,常规的ease等动画速度,达不到我们需要的效果,因此steps()更契合,而两张背景使用linear来匀速运动来保证速度的一致. 具体代码如下: &l ...
JavaGUI 简易贪吃蛇代码详解+图片素材
简易贪吃蛇运行截图图片素材代码详解 package com.du.snake; import javax.swing.*; import java.awt.*; import java.awt. ...
旋转木马（案例）附图片素材
图片素材是自己找的,此案例效果为:图片围绕3D中的Y轴进行旋转,鼠标移动至图片,停止动画,鼠标离开,继续动画. <!DOCTYPE html> <html lang="en ...

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

一、案例效果

二、实现思路

三、完整代码+详细注释

四、涉及要点

五、案例素材

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

最新文章

热门文章