JavaScript(三十五)——div子节点操作,飞机大战游戏,小球碰撞边界、焦点事件
发布日期:2021-06-30 16:35:32
浏览次数:2
分类:技术文章
本文共 5119 字,大约阅读时间需要 17 分钟。
目录
div中子节点操作
HTML DOM createElement() 方法
createElement() 方法通过指定名称创建一个元素,所有主要浏览器都支持 createElement() 方法
例子:向div末尾添加节点
1
2
运行结果:
例子:在div中间插入节点,注意这里的div中<p>2</p></div>分开会有一个文本节点
1
2
运行结果:
例子:在div中删除最后一个节点
1
2
运行结果:
例子:创建一个input,添加到div中
1
2
运行结果:
小球碰撞边界实验
先绘制一个边界框,然后在边界框内创建一个小球,注意边界框用相对定位,小球用绝对定位
HTML
CSS
效果如下:
然后使用JavaScript代码让小球运动,碰到边界框后弹回
JavaScript
运行结果:
input焦点事件
例子:聚焦input框的内容,控制台输出焦点事件
运行结果:
飞机大战游戏
HTML代码:
CSS代码:
*{ margin: 0; padding: 0;}/*主窗口界面*/#mainScreen{ width: 512px; height: 768px; margin: 0 auto; position: relative; /*背景图片滚动超出隐藏*/ overflow: hidden;}/*背景图片样式*/.bg{ width: 512px; height: 768px; position: absolute; background-image: url(../img/bg3.jpg);}#bg2{ top: -768px;}/*飞机图片样式*/#airplane{ width: 109px; height: 82px; background-image: url(../img/air.png); position: absolute; left: 200px; top: 670px;}/*子弹样式*/.bullent{ position: absolute; width: 5px; height: 5px; border-radius: 50%; background-color: yellow; }/*敌人样式*/.tank{ position: absolute; width: 50px; height: 50px; background-image: url(../img/tank.png); background-size: 50px 50px;}/*游戏结束*/.gameover{ width: 400px; height: 100px; color: red; position: absolute; top: 200px; left: 100px; font-size: 30px;}
JavaScript代码:
//让背景动起来var jsbg1 = document.getElementById('bg1')var jsbg2 = document.getElementById('bg2')var timebg = setInterval(function(){ //背景图片滚动 jsbg1.style.top = jsbg1.offsetTop + 1 +'px' jsbg2.style.top = jsbg2.offsetTop + 1 +'px' //判断一张图片是否走完 if(jsbg1.offsetTop >= 768){ jsbg1.style.top = '-768px' } if(jsbg2.offsetTop >= 768){ jsbg2.style.top = '-768px' }},10)var mainscreen = document.getElementById('mainScreen')//拖拽让飞机动起来var plane = document.getElementById('airplane')//给飞机添加鼠标按下事件plane.addEventListener('mousedown',function(e){ var ev = e || window.event //飞机当前位置 basex = ev.pageX basey = ev.pageY console.log(basex,basey) //飞机移动位置 movex = 0 movey = 0 //给窗口添加监听事件,鼠标移动 mainscreen.onmousemove = function(e){ var ee = e || window.event movex = ee.pageX - basex basex = ee.pageX movey = ee.pageY - basey basey = ee.pageY plane.style.left = plane.offsetLeft + movex + 'px' plane.style.top = plane.offsetTop + movey + 'px' } //鼠标抬起时取消事件 plane.addEventListener('mouseup',function(){ mainscreen.onmousemove = null },false)},false)//发射子弹var timebullent = setInterval(function(){ //创建子弹div var bullent = document.createElement('div') //给子弹添加一个类名,在CSS中修饰子弹 bullent.className = 'bullent' bullent.style.left = plane.offsetLeft + 53 +'px' bullent.style.top = plane.offsetTop -10 + 'px' mainscreen.appendChild(bullent) //让子弹飞 var bullentfly = setInterval(function(){ bullent.style.top = bullent.offsetTop -5 + 'px' //当子弹超出主屏幕时 if(bullent.offsetTop <= -20){ //关闭让子弹飞 clearInterval(bullentfly) mainscreen.removeChild(bullent) } },50) bullent.timer = bullentfly},500)//随机数 敌人位置function randomNum(min,max){ return parseInt(Math.random() * (max - min) + min)}//随机颜色function randomcolor(){ var r = parseInt(Math.random() * 256) var g = parseInt(Math.random() * 256) var b = parseInt(Math.random() * 256) var colorstring = "rgb(" + r + "," + g + "," + b + ")" return colorstring}//敌方下落var timetank = setInterval(function(){ //创建敌人div var tank = document.createElement('div') //给子弹添加一个类名,在CSS中修饰子弹 tank.className = 'tank' tank.style.left = randomNum(0,462) + 'px' tank.style.top = '0px' mainscreen.appendChild(tank) //让敌人进攻 var tankfly = setInterval(function(){ tank.style.top = tank.offsetTop + 10 + 'px' //当子弹超出主屏幕时 if(tank.offsetTop >= 768){ //关闭让子弹飞 clearInterval(tankfly) mainscreen.removeChild(tank) } },50) tank.timer = tankfly},1000)//子弹和敌人碰撞检测var pzjc = setInterval(function(){ var alltanks = document.getElementsByClassName('tank') var allbullents = document.getElementsByClassName('bullent') for(var i = 0;i < allbullents.length;i++){ for(var j = 0;j < alltanks.length;j++){ var b = allbullents[i] var t = alltanks[j] //子弹和敌人碰撞检测,然后全部移除 if(pzjcfun(b,t)){ clearInterval(b.timer) clearInterval(t.timer) mainscreen.removeChild(b) mainscreen.removeChild(t) break } } }},100)var pzjcfun = function(obj1,obj2){ var obj1left = obj1.offsetLeft var obj1top = obj1.offsetTop var obj1width = obj1left + obj1.offsetWidth var obj1height = obj1top + obj1.offsetHeight var obj2left = obj2.offsetLeft var obj2top = obj2.offsetTop var obj2width = obj2left + obj2.offsetWidth var obj2height = obj2top + obj2.offsetHeight if( !(obj1left > obj2width || obj1width < obj2left ||obj1top > obj2height ||obj1height < obj2top)){ return true }else{ return false }}//飞机死亡检测var diejc = setInterval(function(){ var alltanks = document.getElementsByClassName('tank') for(var i = 0;i < alltanks.length;i++){ if(pzjcfun(alltanks[i],plane)){ for(var j = 0;j<100;j++){ clearInterval(j) } var gameover = document.createElement('p') gameover.className = 'gameover' gameover.innerHTML = '你失败了,游戏结束' mainscreen.appendChild(gameover) break } }},100)
运行结果:
图片素材:
一起学习,一起进步 -.- ,如有错误,可以发评论
转载地址:https://kongchengji.blog.csdn.net/article/details/97135991 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月30日 17时35分16秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
【NLP学习笔记】NLP基础知识框架图
2019-04-30
【深度学习笔记】卷积的输入输出的通道、维度或尺寸变化过程
2019-04-30
【NLP学习笔记】训练集、验证集和测试集的概念及划分
2019-04-30
【NLP学习笔记】conda换源
2019-04-30
【深度学习笔记】标准卷积
2019-04-30
【深度学习笔记】组卷积
2019-04-30
【深度学习笔记】循环神经网络和递归神经网络区别
2019-04-30
【学习笔记】英文科技论文常见英语句式积累
2019-04-30
【深度学习笔记】PixelShuffle
2019-04-30
【python3学习笔记】斜杠和双斜杠运算符的区别
2019-04-30
【深度学习笔记】用torch.nn.Sequential()搭建神经网络模型
2019-04-30
【深度学习笔记】用torch.nn.ModuleList搭建神经网络
2019-04-30
【深度学习笔记】pytorch的点乘(dot product)
2019-04-30
【深度学习笔记】残差
2019-04-30