鼠标点击消灭病毒小游戏

小半 • 2022年5月16日下午11:31 • 前端开发 • 阅读 236

分析：1、每调用一次函数就生成一个盒子，盒子里面放图片，通过随机函数来获取位置信息赋值给病毒盒子在页面出生的位置；2、当点击病毒的时候，让病毒的父级盒子消失连带病毒一起消失

病毒：

样式代码：

<style>
        body {
            background-color: rgb(80, 182, 241);
            overflow: hidden;
        }
        
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 80px;
            height: 80px;
        }
        
        .box img {
            width: 100%;
            height: 100%;
        }
</style>

js代码：

<script>
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        bd();

        function bd() {
            var newbox = document.createElement('div');
            newbox.className = 'box';
            var img = document.createElement('img');
            img.src = 'images/病毒.png';
            newbox.appendChild(img);
            var w = getRandom(40, 120) + 'px';
            newbox.style.width = w;
            newbox.style.height = w;
            newbox.style.top = getRandom(0, window.innerHeight) + 'px';
            newbox.style.left = getRandom(0, window.innerWidth) + 'px';
            document.body.appendChild(newbox);
        }
        var timer = setInterval(bd, 500);
        document.addEventListener('click', function(e) {
            document.body.removeChild(e.target.parentNode);
        });
</script>

效果：