JS消灭星星小游戏

软件发布|下载排行|最新软件

当前位置:首页IT学院IT技术

JS消灭星星小游戏

我莫得感情_   2022-05-23 我要评论

先看看效果图:

先准备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>

Copyright 2022 版权所有 软件发布 访问手机版

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们