JavaScript实现一个空中避难的小游戏

前言

最近在看射流研究…中的事件，之前也一直有用到事件，用到最多的就是onclick单击事件，还有填写表单信息时的用到的聚焦聚焦时间，和在布尔事件，最近看到了onmousemove鼠标移动事件，觉得很神奇，就突然很想写一个小游戏，用到了setInterval函数。游戏的功能也很简单，就是天上掉纸片，小人儿要不停的躲，一旦纸片和小人儿相撞，就会游戏结束！

代码如下：

！DOCTYPE htmlhtmlheadstyle .移动{ margin-top : 0px；宽度：40 px高度： 50px背景# ff0位置：绝对；z指数： 999；} .自{ width:40px高度： 50px背景技术# f0f位置：绝对；边距-top : 600 px；左边距left : 643 pxz-index : 999；} .自img { width:40px高度： 50px边界半径： 20px}/styletitle图图up/title/head body on load=' moveDiV()'！- 12个差异就是空中的小纸片-div class=' move ' style=' margin-left :100 px '/div class=' move ' style=' margin-left :200 px '/div class=' move ' style=' margin-left :300 px '/div class=' move ' style=' margin-left :500 px '/div-小人儿用一张图片代替-div id=' self ' class=' self ' img src=' http : images/tutu。jpg '/div/body脚本类型=' text/JavaScript ' var all div=document。queryselectorall(' .move’)；var self div=文档。getelementbyid(' self ')；定义变量计时器，标志；函数moveItem() { //用随机数决定哪一张纸片掉落for(var j=0；数学。圆(数学。random()* 11)；j){ var I=数学。圆(数学。random()* 11)；alldiv[i].style.top=alldiv[i].offsetTop 20 ' px//掉落过程中改变纸片的颜色var RGB=' RGB(' Math . floor(math . random()* 255)'，' math。地板(数学。random()* 255)'，' math。地板(数学。random()* 255)')'；所有div[I]。风格。背景颜色=RGBif (alldiv[i]).offsetTop=600){ all div[I]。风格。top=' 50px//当纸片落到底部，又重新回到起点} } }函数moveDiv(){ timer=set interval(moveItem，20)；//每隔20毫秒掉落标志=设置间隔(会议，1);//间隔一毫秒判断是否相撞} var self div=document。getelementbyid(' self ')；自我分裂。onmousedown=函数(e)//鼠标点击小人儿开始移动{文档。onmousemove=function(e)//小人儿跟着鼠标移动{ if(例如clienty 600){ self div。风格。边距ToP=' 600 px//如果到达屏幕底部就不再往下} else if(e . clientx 1300){ self div。风格。左边距=' 1300 px//到达最右部就回到不再往右} else { //小人儿的位置始终等于鼠标的位置自我分裂。风格。margintop=e . clienty ' px自我分裂。风格。左边距=e .客户端x ' px} } }函数meeting(){ for(var I=0；i alldiv.lengthi ) { //判断是否相撞if (Math.abs(alldiv[i]).偏移顶部自div。偏移顶部)=50数学。防抱死制动系统(全部1级).offsetLeft-self div。offsetLeft)=40){ clearInterval(标志);clearInterval(计时器);警报('一不小心撞到了！游戏结束');} } }/脚本/html效果如图：

全部的代码就这些，动图做的效果不是很好，第一次做动图，发现有很多在线网站都可以，做起来很简单，还是免费的，开心！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。