【JS】从零开始编一个JS游戏（3）

本文链接：https://blog.youkuaiyun.com/SugaryoTT/article/details/54428427

本文详细介绍了一个基于CSS的页面样式设计方案，包括界面布局、元素定位、字体大小调整等内容，并提供了具体的样式代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面的

这篇文章主要就是总结一下CSS中的页面样式了，基本上没有什么特别的地方，都是CSS中的基本知识，贴出来大家看一下就OK了。

CSS篇

再上一遍图：

这里写图片描述

<style type="text/css">
            @charset "utf-8";
            *{
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;     
            }
            <!--界面的容器-->
            .wrap{
                width: 100%;
                height: 100%;
                background-color: black;
                color: #fff;
                position: absolute;
                cursor: default;
                font-family: "微软雅黑";
            }
            <!--顶部容器包括剩余时间和分数-->
            .top{
                width: 100%;
                height: 10%;
                position: absolute;
                top: 2%;
            }
            <!--剩余时间-->
            .top .time{
                width: 50%;
                height: 100%;
                line-height: 100%;
                font-size: 2em;
                position: absolute;
                left: 20px;
                text-align: left;
                display: table-cell;
                vertical-align: middle;
            }
            <!--剩余分数-->
            .top .score{
                width: 50%;
                height: 100%;
                line-height: 100%;
                font-size: 2em;
                position: absolute;
                right: 20px;
                text-align: right;
                display: table-cell;
                vertical-align: middle;
            }
            <!--主界面中的显示区域-->
            .content {
                width: 100%;
                height: 50%;
                top: 20%;
                position: absolute;
                font-size: 9em;
                text-align: center;
                line-height: 200px;
            }
            <!--游戏规则区域-->
            .rule{
                width: 100%;
                height: 10%;
                top: 55%;
                line-height: 1.5em;
                font-size: 1.5em;
                text-align: center;
                position: absolute;
            }
            <!--按钮区域-->
            .colorButtons{
                width: 100%;
                text-align: center;
                position: absolute;
                top: 65%;   
            }
            <!--单个按钮-->
            .colorButtons span {
                font-size: 60px;
                text-align: center;
                cursor: pointer;
                transition: all 0.5s;
            }
            <!--重新开始-->
            .again {
                width: 100%;
                font-size: 3em;
                text-align: center;
                position: absolute;
                bottom: 30px;
                cursor: pointer;
            }
        </style>

总结

对于CSS而言，无论你把界面整成什么样的，只要不影响鼠标的操作就可以了，为了增加难度，你可以把SPAN的位置放在屏幕中随机出现，当然，这样的难度我觉得只有OSU的玩家能接受了，一般人还是算了吧。接下来就是最重要的JS部分，在JS部分我会把核心的算法用不同的方式表现出来，也算是算法的优化吧，可能也会给你一些结构上的启发吧。