JS实现消灭星星小游戏
更新时间:2022年01月07日 08:50:03 作者:我莫得感情_
这篇文章主要为大家详细介绍了JS实现消灭星星小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下
先看看效果图:
先准备css和一张星星图片,很简单,body背景设为黑色。
<style> body { background-color: black; } </style>
就直接写JS代码了,解释都写在注释里面了
<script> function start() { //设置一个定时器,重复执行的秒数是500ms timer = setInterval(function() { //创建图片元素 var obj = document.createElement('img'); //星星随机宽度 var w = Math.floor(Math.random() * 80 + 20); obj.width = w; //随机出现的位置 var x = Math.floor(Math.random() * 1400 + 60); var y = Math.floor(Math.random() * 460 + 60); obj.style.position = 'absolute'; //将随机生成的X,Y的值赋给对象 obj.style.top = y + 'px'; obj.style.left = x + 'px'; //给图片参数赋上地址 obj.src = 'imgs/xingxing.gif'; //添加到整个body页面 document.body.appendChild(obj); //创建点击事件,想要消除自己,就是remove掉自己父亲的儿子 obj.addEventListener('click', function() { this.parentNode.removeChild(this); }); }, 500); }; start(); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript-解决mongoose数据查询的异步操作
这篇文章主要介绍了javascript-解决mongoose数据查询的异步操作,具有一定的参考价值,有兴趣的可以了解一下。2016-12-12layui lay-verify form表单自定义验证规则详解
今天小编就为大家分享一篇layui lay-verify form表单自定义验证规则详解,具有很好的参考价值,相信我对大家有所帮助。一起跟随小编过来看看吧2019-09-09JS 动态加载js文件和css文件 同步/异步的两种简单方式
下面小编就为大家带来一篇JS 动态加载js文件和css文件 同步/异步的两种简单方式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-09高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
在处理比较耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应。2010-06-06
最新评论