JS实现消灭星星小游戏
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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.class="lazy" data-src = 'imgs/xingxing.gif';
//添加到整个body页面
document.body.appendChild(obj);
//创建点击事件,想要消除自己,就是remove掉自己父亲的儿子
obj.addEventListener('click', function() {
this.parentNode.removeChild(this);
});
}, 500);
};
start();
</script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341