消表情js小游戏

最新推荐文章于 2024-05-06 10:59:29 发布

一只大菜鸟J

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量3k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_46029283/article/details/123837007

版权

原生js

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消表情小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 700px;
            height: 500px;
            border: 1px solid black;
            margin: 50px auto;
            padding: 30px;
            box-sizing: border-box;
            background: #f9f9f9;
        }

        p {
            text-align: center;
        }

        #wrap>p {
            width: 30px;
            height: 30px;
            background: url(./day03/images/pic.png) no-repeat;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <p>得分:0</p>
    <div id="wrap"></div>

    <script>
        let div = document.getElementById('wrap');
        let p = document.getElementsByTagName('p');
        // console.log(p);
        let n = 0;
        let t = 600;
        //如果点的是❤️让其隐藏并得一分
        div.onclick = function (evs) {
            let ev = window.event || evs;
            let tar = ev.target || srcElement;
            if (tar.nodeName == 'P') {
                n++;
                t -= 10;
                if (t <= 300) {
                    t = 300;
                }
                // tar.style.display = 'none';
                div.removeChild(tar);
                p[0].innerText = '得分:' + n;
            }
        }
        // 每隔 t ms显示一个❤️
        let timer = setInterval(function () {
            let ml = div.offsetLeft;
            let mt = div.offsetTop;
            //ml---ml + 638
            let w = parseInt(Math.random() * ((ml + 638) - ml) + ml);
            //mt--mt + 438
            let h = parseInt(Math.random() * ((mt + 438) - mt) + mt);
            let p = document.createElement('p');
            p.style.left = w + 'px';
            p.style.top = h + 'px';
            div.appendChild(p);

            // 判输赢
            let p1 = document.querySelectorAll('#wrap>p');
            if (p1.length >= 5) {
                clearInterval(timer);
                alert('你不行呀🤣🤣🤣🤣');
            }
        }, t)
    </script>
</body>

</html>

一只大菜鸟J

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
消表情js小游戏

拼手速点击❤️，一个得一分，当界面表情存在数大于等于5时输
复制链接

扫一扫

消表情js小游戏

“相关推荐”对你有帮助么？