javascript-原生javascript实现类似节奏大师小游戏

最新推荐文章于 2022-10-19 12:37:32 发布

chenchenxiaojian

最新推荐文章于 2022-10-19 12:37:32 发布

阅读量1.5k

点赞数 5

分类专栏： javascript css3 文章标签：游戏 css js html

本文链接：https://blog.csdn.net/weixin_42100456/article/details/106354244

版权

本文介绍了作者为课程实验用JavaScript实现的一个类似节奏大师的小游戏，包含计时、计分和成绩排序功能。作者提到在实现过程中遇到JavaScript选择伪元素的问题，并分享了解决方案，涉及DOM操作、键盘事件和定时器等技术。

摘要由CSDN通过智能技术生成

前言

课程实验要求，迫不得已看了一点javascript，实现这个类似“节奏大师”的小游戏，有计时，计分，对玩家成绩进行排序的小功能，感觉自己审美还是不行，还有感觉自己写的javascript好丑陋，没有数据结构的味道。
遇到卡壳的问题：javascript选择伪元素::after，代码中我用::after表示QWER四个键，js无法选择到伪元素，通过设置如下css代码，然后var crack = document.getElementsByClassName(‘crack’)[0]; 之后crack就是伪元素.crack::after。
```
.crack {
     
    pointer-events: none;
}

/*伪元素样式*/
.crack::after {
     
    pointer-events: auto;
}
```
用到javascript知识：Dom，键盘事件，定时器等等=.=

效果

在这里插入图片描述

Code

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <link rel="stylesheet" href="src/css/play.css">
</head>

<body>

    <div id="game-box">
        <div class="game-name">
            <span>游戏名: <span style="color: red;">节奏大师简化版</span></span>&nbsp&nbsp&nbsp
            <span>游戏时间：<span class="time"></span></span>&nbsp&nbsp&nbsp
            <span>积分：<span class="sorce">0</span></span>&nbsp&nbsp&nbsp
            <button onclick="gameTime()">开始游戏</button>
        </div>
        <div class="crack-box">
            <!-- 四个轨道 -->
            <div class="crack"></div>
            <div class="crack"></div>
            <div class="crack"></div>
            <div class="crack"></div>
        </div>
        <div class="prefect">prefect~<br>OvO<br>积分+2</div>
        <div class="good">good~<br>OvO<br>积分+1</div>
        <div class="miss">miss~<br>OvO<br>积分+0</div>
    </div>
    <div id="rank-rule">
        <div class="rankbox">
            
            <div class="rank-list">
                <table class="rank-table">
                    <caption>游戏积分表Top5</caption>
                    <tr>
                        <th>玩家名</th>
                        <th>游戏积分</th>
                    </tr>
                </table>
            </div>

        </div>
        <div class="rulebox">
            <div style="color: red;font-size: