JavaScript实现打字项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小鱼打字</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        body {

            /*background-color: red;*/
            background-image: url("images/bg.jpg");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            overflow: hidden;
        }
        img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .specter {
            width: 300px;
            height: 300px;
            background: url("images/yy.png") no-repeat;
            position: absolute;
        }
        .specter>span{
            position: absolute;
            left: 70px;
            top: 200px;
            font-size: 60px;
            font-weight: bold;
            text-shadow: 5px 5px 5px #3e437a;
        }
    </style>
</head>
<body>
    <img src="images/play.png" alt="">
    <audio src="media/bg.ogg" autoplay loop></audio>
    <!--<div class="specter"><span>m</span></div>-->
<script>
    let oImg = document.querySelector("img");
    let oAudio = document.querySelector("audio");

    oImg.onclick = function () {
        // 移除按钮
        oImg.parentNode.removeChild(oImg);
        // 播放bgm
        oAudio.play();
        // 只有当用户点击按钮时, 才会开始创建幽灵
        setInterval(function () {
            let s = new Specter();
            s.fly();
        }, 1000);
    };

    // 将幽灵封装成一个类
    class Specter {
        constructor() {
            // 1.创建div 并添加类名
            let oDiv = document.createElement("div");
            oDiv.style.top = "1000px";
            oDiv.style.left = Math.random()*1500 + "px";
            // 2.创建span 并设置内容
            let oSpan = document.createElement("span");
            // oSpan.innerHTML = "M"
            // 随机生成字母
            let key = this.generateKey();
            oDiv.className = "specter " + key;

            oSpan.innerHTML = key;
            // 3.将span添加到div中
            oDiv.appendChild(oSpan);
            // 4.将div添加到body中
            document.body.appendChild(oDiv);
            //将oDiv设置为类的属性
            this.oDiv = oDiv;
        }

        boom() {
            // 删除幽灵
            document.body.removeChild(this.oDiv);
            // 删除定时器
            clearInterval(this.timer);
        }

        fly() {
            let offset = parseInt(this.oDiv.style.top);

            this.timer = setInterval(() => {
                offset = offset - 40;
                // 判断幽灵是否移出屏幕
                if (offset <= -300) {
                    this.boom();
                }
                this.oDiv.style.top = offset + "px";
            }, 200);
        }

        generateKey() {
            let num = Math.floor(Math.random() * (90 - 65 + 1)) + 65;
            return String.fromCharCode(num);
        }

    }

    document.body.onkeydown = function (event) {
        let key = event.key.toUpperCase();
        let oDiv = document.querySelector("." + key);
        document.body.removeChild(oDiv);
    };


    /*
    // 产生指定范围的随机值
    function getRandomIntInclusive(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值,含最小值
    }*/
</script>
</body>
</html>
上一篇:JavaScript运动基础


下一篇:js鼠标拖拽,不能拖出指定对象,吸附作用(类似PS工具框)