鼠标点击消灭病毒小游戏

分析: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>

效果:

 喜欢就快复制代码去玩一下游戏吧!可以把病毒替换成任何想要消灭的物品哦!

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

super码力

么么哒,夏天来块儿冰西瓜!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值