html + css + js 实现一个打字小游戏（建议收藏）

最新推荐文章于 2023-01-28 14:13:12 发布

扣叮侠

最新推荐文章于 2023-01-28 14:13:12 发布

阅读量3.1k

点赞数 9

分类专栏：前端文章标签：前端 js html css 程序设计

本文链接：https://blog.csdn.net/weixin_44617968/article/details/118024747

版权

前端专栏收录该内容

9 篇文章 16 订阅

订阅专栏

今天江哥手把手带大家实现一个打字小游戏，带你装 X 带你飞

知识点： html + css + js
游戏玩法：点击 Play 开始游戏，随机出现字母对象，按键盘字母，对应的悬浮物消失。

废话不多说，先上效果图

在这里插入图片描述

素材：音乐、背景图
代码实现

<!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: url("images/bg.jpg") center center no-repeat;
            background-size: cover;
            overflow: hidden;
        }
        img{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .specter{
            width: 300px;
            height: 300px;
            background: url("images/yy.png") no-repeat;
            position: absolute;
            top: 1000px;
        }
        .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="">
<!--
注意点:
在谷歌浏览器中默认情况下不允许自动播放音乐, 只有用户和网页交互之后才可以播放音乐
解决方案一:
修改谷歌浏览器的配置
1.在地址栏输入: chrome://flags/
2.在搜索框输入: autoplay
3.修改autoplay的选项为 no user xxx
解决方案二:
让用户和网页交互之后再播放
-->
<audio src="media/bg.ogg" loop></audio>
<!--<div class="specter"><span>m</span></div>-->
<!--<div class="specter"><span>m</span></div>-->
<script>
    let oImg = document.querySelector("img");
    let oAudio = document.querySelector("audio");
    let list = []; // 定义数组保存所有创建出来的鬼魂对象
    oImg.onclick = function () {
        // 1.移出开始游戏按钮
        oImg.parentNode.removeChild(oImg);
        oAudio.play();
        // 2.创建悬浮物
        setInterval(function () {
            let s =  new Specter();
            s.fly();
            list.push(s);
        }, 1000);
    };
    class Specter{
        constructor(){
            // 1.创建div并设置样式
            let oDiv = document.createElement("div");
            // oDiv.className = "specter";
            oDiv.style.top = "1000px";
            oDiv.style.left = Math.random() * 1500 + "px";
            // 2.创建span并设置内容
            let oSpan = document.createElement("span");
            // oSpan.innerText = "m";
            let key = this.generateKey();
            oSpan.innerText = key;
            oDiv.className = "specter " + key;
            // 3.将span添加到div中
            oDiv.appendChild(oSpan);
            // 4.将div添加到body中
            document.body.appendChild(oDiv);
            this.oDiv = oDiv;
        }
        bomb(){
            // 1.删除当前的悬浮物
            document.body.removeChild(this.oDiv);
            // 2.删除当前悬浮物对应的定时器
            clearInterval(this.timer);
        }
        fly(){
            // 1.获取悬浮物当前的top值
            let offset = parseInt(this.oDiv.style.top);
            this.timer = window.setInterval(()=>{
                offset -= 20;
                if(offset <= -300){
                    this.bomb();
                }
                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);
        // 1.根据div找到这个div对应的悬浮物对象在数组中的位置
        let currentIndex = list.findIndex(function (currentValue) {
            return currentValue.oDiv === oDiv;
        });
        if(currentIndex === -1) return;
        // 2.根据位置取出对应的悬浮物对象
        let currentSpecter = list[currentIndex];
        // 3.将悬浮物对应的div从body中删除
        currentSpecter.bomb();
        list.splice(currentIndex, 1);
    }
</script>
</body>
</html>

最后，码字不易，点赞，关注，转发、收藏、一键四连支持。

扣叮侠

关注

9
点赞
踩
37

收藏

觉得还不错? 一键收藏
2
评论
html + css + js 实现一个打字小游戏（建议收藏）

今天江哥手把手带大家实现一个打字小游戏，带你装 X 带你飞知识点： html + css + js游戏玩法：点击 Play 开始游戏，随机出现字母对象，按键盘字母，对应的悬浮物消失。废话不多说，先上效果图素材：音乐、背景图代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>代码情缘-打字.
复制链接

扫一扫