JavaScript实现消灭星星游戏完整教程

 * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
 
    div {
        position: relative;
        width: 1000px;
        height: 500px;
        margin: 100px auto;
        background-color: black;
    }
</style>
 
<body>
    <div>
 
    </div>

var div = document.querySelector('div');//获取到div盒子
        function creatImg(num) {
            for (var i = 0; i < num; i++) {    //随机生成num个星星
 
                var imgs = document.createElement('img');   //创建img标签
                imgs.style.position = 'absolute';   //给星星图片添加绝对定位
                var width = Math.floor(Math.random() * (50 - 10 + 1) + 10);
                var height = width;   //随机生成宽度和高度，星星的宽高一致
                var top = Math.floor(Math.random() * (450 - 0 + 1) + 0);
                var left = Math.floor(Math.random() * (950 - 0 + 1) + 0);
 
                //将星星的宽、高、left、top值全部修改为随机生成的
                imgs.style.width = width + 'px';
                imgs.style.height = height + 'px';
                imgs.style.left = left + 'px';
                imgs.style.top = top + 'px';
 
                //将星星图片的链接添加到img标签中
                imgs.src = 'images/xingxing.gif';
            
                //将创建的img标签添加到div盒子里面
                div.appendChild(imgs);
            }
        }

creatImg(5);    //调用函数并生成五颗星星
        setInterval(function () {    //每隔1s执行一次里面的代码
 
            var img = document.querySelectorAll('img');        //获取到星星图片
 
            //给每个星星添加点击事件
            for (var i = 0; i < img.length; i++) {
                img[i].addEventListener('click', function () {
                    //点击之后删除点击的img
                    div.removeChild(this);
                })
            }
            creatImg(1);
        }, 1000);