前端小白系列——打字游戏

最新推荐文章于 2024-03-19 04:35:44 发布

VIP文章丨小确幸丨

最新推荐文章于 2024-03-19 04:35:44 发布

阅读量1.9k

点赞数

分类专栏： javascript 文章标签： javascript 面向对象

本文链接：https://blog.csdn.net/Small_Wchen/article/details/75014280

版权

纯JS的打字游戏算是JavaScript入门的一个检验吧，我开始做的时候也是各种蒙圈，确实作为前端小白有点不知道该怎么入手，但是学习了那么久的知识，总得磨刀霍霍向猪羊…啊呸，总得实践出真知啊。所以在网上研究了和分析了别人的程序（我想知道实现的思路却全都是代码，大概别人都觉得这个太简单了吧-,-），花了一段时间把代码写出来了，现在来分享一下我的成果~

一、太长不看我只要代码

Edition 1：（点这里下载版本1代码）

这部分代码是属于完全的功能的堆砌，没有对JavaScript代码进行对象化处理，属于人家一看就觉得low但是作为初学者的我好理解的类型（ps: 为了美观起见，我还是不是纯JS的代码，有部分样式设计）。关门，放代码：

<!--  index.html  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typing Game</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
    <!--  显示游戏提示  -->
    <div id="tools">
        <div class="list">
            <h2>单词大战</h2>
            <p>
                到达底线消灭游戏框中出现的字母
            </p>
        </div>
        <div class="list">
            <h2>游戏得分</h2>
            <p>首局游戏需得分<span id="need">10</span>分
            </p>
        </div>
    </div>
    <!--  背景盒  -->
    <div id="box" style="height: 640px; width: 760px;">
        <div id="panel">得分：<span id="score">0</span></div>
        <button id="start" class="btn">开始游戏</button>
        <button id="stop" class="btn">停止游戏</button>
        <!--  游戏的部分  -->
        <div id="gameBox" style="height: 610px; width: 585px;">
        </div>
        <div id="danger">
            <hr/>
        </div>
    </div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
/*  style.css  */
* {
    margin: 0;
    padding: 0;
}

html, body {
    /*  Box-model  */
    height: 100%;
    /*  Typography  */
    color: #fff;
    font-family: helvetica, arial, sans-serif;
    /*  Visual  */
    background: -webkit-linear-gradient(#3a3a3a, #c3c3c3);
    background: -o-linear-gradient(#3a3a3a, #c3c3c3);
    background: -moz-linear-gradient(#3a3a3a, #c3c3c3);
    background: linear-gradient(#3a3a3a, #c3c3c3);
}

#container {
   
    /*  Positioning  */
    position: relative;
    margin-left: auto;
    margin-right: auto;
    /*  Box-model  */
    display: block;
    width: 80%;
    max-width: 1140px;
}

#tools {
   
    /* Positioning */
    position: absolute;
    top: 32%;
    left: 25%;
    margin-top: 50px;
    z-index: 100;
    /*  Box-model  */
    display: block;
    padding: 5px;
}

#tools .list {
   
    /* Positioning */
    margin-bottom: 35px;
    /*  Typography  */
    font-family: "Microsoft YaHei UI", "微软雅黑";
}

#panel {
   
    /* Positioning */
    position: absolute;
    right: 5%;
    top: 5%;
    z-index: 100;
    /*  Box-model  */
    display: none;
    /*  Typography  */
    font-family: "Microsoft YaHei UI", "微软雅黑";
    font-weight: 700;
    /*  Visual  */
    text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.5);
    /*  Misc  */
}

.btn {
    /*  Positioning  */
    z-index: 100;
    /*  Box-model  */
    display: inline-block;
    width: 80px;
    height: 40px;
    /*  Typography  */
    font-family: helvetica, Arial, sans-serif;
    line-height: 40px;
    text-align: center;
    /*  Visual  */
    color: #fff;
    background-color: #999;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 2px 5px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: 0 0 2px 5px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 2px 5px rgba(255, 255, 255,

最低0.47元/天解锁文章

丨小确幸丨

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
前端小白系列——打字游戏

纯JS的打字游戏算是JavaScript入门的一个检验吧，我开始做的时候也是各种蒙圈，确实作为前端小白有点不知道该怎么入手，但是学习了那么久的知识，总得磨刀霍霍向猪羊…啊呸，总得实践出真知啊。所以在网上研究了和分析了别人的程序（我想知道实现的思路却全都是代码，大概别人都觉得这个太简单了吧-,-），花了一段时间把代码写出来了，现在来分享一下我的成果~一、太长不看我只要代码Edition 1：（点这里下
复制链接

扫一扫