整个代码的主要难度是理解,js操作dom的代码,如何灵活的添加元素,删除元素,样式的改变,添加class等等,以及一些逻辑,另外则是理解定时器与计时器的创造与删除,创造的计时器必须在网页取消前删除掉。对于js还需多练。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="flycss/style.css">
</head>
<body>
<div class="wrap" id='wrapId'>
<!-- 飞机 -->
<div class="airplaneDiv" id="airplaneId"></div>
</div>
<script>
var doc = document;
function gId(n) {
return doc.getElementById(n)
}
gId('wrapId').onmousemove = function(e) {
var eL = e.pageX - gId('wrapId').offsetLeft - 20;
var eT = e.pageY - gId('wrapId').offsetTop - 30;
gId('airplaneId').style.left = eL + 'px';
gId('airplaneId').style.top = eT + 'px';
}
// 生成子弹
function creatFire(e) {
var _fire = doc.createElement('div');
_fire.style.left = e.pageX - gId('wrapId').offsetLeft + 'px';
_fire.style.top = e.pageY - 80 + 'px';
_fire.setAttribute('class', 'bulletDiv');
gId('wrapId').appendChild(_fire);
// 选出x轴线上所有的目标,然后进行坐标的比对
var _fireTarget_X = [];
var _lis1 = gId('wrapId').querySelectorAll('li')
for (var c = 0; c < _lis1.length; c++) {
if ((_fire.offsetLeft > _lis1[c].offsetLeft) &&
(_fire.offsetLeft < (_lis1[c].offsetLeft + 30))) {
_fireTarget_X.push(_lis1[c]);
}
}
var n = _fire.offsetTop;
var _s = setInterval(
function() {
_fire.style.top = n-- + 'px';
if (_fireTarget_X.length >= 0) {
for (var d = 0; d < _fireTarget_X.length; d++) {
if ((n == _fireTarget_X[d].offsetTop) &&
(_fireTarget_X[d].getAttribute('class') != 'targetDiv yes_boom')) {
_fireTarget_X[d].setAttribute('class', 'targetDiv yes_boom')
var _e = setTimeout(function() {
gId('wrapId').removeChild(_fire);
clearInterval(_s)
clearTimeout(_e);
}, 200)
}
}
}
if (n <= 0) {
gId('wrapId').removeChild(_fire);
clearInterval(_s);
}
}, 10)
}
// 生成敌军 列表数据
function targetListObj() {
var _arrs = [];
for (var i = 0; i < 10; i++) {
var _obj = {};
_obj._x = Math.floor(Math.random() * 10);
_obj._y = Math.floor(Math.random() * 10);
_arrs.push(_obj)
}
creatTarget(_arrs);
}
// 这个方法相当于开始游戏的按钮
targetListObj()
// 生成各个子弹
function creatTarget(_arrs) {
for (var i = 0; i < _arrs.length; i++) {
var _target = doc.createElement('li');
_target.setAttribute('class', 'targetDiv no_boom');
_target.style.left = _arrs[i]._x * 100 + 'px';
gId('wrapId').appendChild(_target);
}
var _lis = gId('wrapId').querySelectorAll('li');
var n = 0;
var _t = setInterval(
function() {
for (var j = 0; j < _lis.length; j++) {
_lis[j].style.top = (_arrs[j]._y++) * 5 + 'px';
n++;
if (n > 900) {
clearInterval(_t)
gId('wrapId').removeChild(_lis[j]);
}
}
}, 100);
}
// 射击子弹
gId('wrapId').onclick = function(e) {
creatFire(e);
}
</script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
ul,
li,
ol {
list-style: none;
}
.wrap {
width: 500px;
height: 500px;
background: #ddd;
margin: 20px auto;
position: relative;
overflow: hidden;
}
/* 飞机 */
.airplaneDiv {
width: 40px;
height: 40px;
position: absolute;
cursor: pointer;
background-image: url(飞机.png);
background-repeat: no-repeat;
background-size: contain;
/* 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 */
}
.targetDiv {
width: 60px;
height: 50px;
position: absolute;
top: -60px;
font-size: 22px;
color: #fff;
background-repeat: no-repeat;
background-size: contain;
}
/* 子弹 */
.bulletDiv {
width: 5px;
height: 30px;
background: #f00;
border-radius: 100%;
position: absolute;
}
.no_boom {
width: 30px;
height: 30px;
background-image: url(飞机.png);
background-size: contain;
}
@keyframes mymove {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* 爆炸 */
.yes_boom {
background-image: url(爆炸.png);
animation: mymove 0.2s;
animation-fill-mode: forwards;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>liuyan</title>
<style>
</style>
</head>
<body>
<div>
<input id='msgId' type="text" placeholder="请输入留言">
<input id='btnId' type="button" value="提交留言">
</div>
<div>
<div id='ulID'>
--------留言列表----------
<br>
</div>
<script type="text/javascript">
var i = 0;
function gId(n) {
return document.getElementById(n)
}
gId('btnId').onclick = function() {
console.log(gId('msgId').value)
var _v = gId('msgId').value
if (_v == '') {
alert('留言不能为空');
return false;
}
i = i + 1;
var _li = document.createElement('span');
var _btn = document.createElement('button');
var _br = document.createElement('br');
_btn.innerHTML = '删除'
_li.id = 'i'; // _li.sstAttribute('id','i') 实现同样的功能,后者更好
_li.innerHTML = _v;
gId('ulID').appendChild(_li);
gId('ulID').appendChild(_btn);
gId('ulID').appendChild(_br);
_btn.onclick = function() {
_li.remove();
_btn.remove();
_br.remove();
}
}
</script>
</div>
</body>
</html>
更多前端资料
请关注微信公众号:前端从入门到SP