原生JavaScript实现打字游戏

写在最前面

本文主要锻炼的是原生JavaScript的编程能力，运用了函数式编程的思想！

1.页面的排版与布局

主要分成两个页面：a.初始呈现出来的界面；b.点击开始进入游戏的界面。

a界面： 比较丑，大家注重功能实现就好，忽略ui


说明：
a.画页面不是我的目的，所以背景潦草的使用了一张图片简单实现了一下。
b.三个dom元素：两个按钮（开始、说明），点击说明按钮出现的说明内容。

// 初始呈现出来的界面

<div id="gameStart">
   <!-- 1.开始游戏按钮 -->
   <div id="start"></div>
   
   <!-- 2.游戏说明按钮 -->
   <div id="describe"></div>
   
   <!-- 3.游戏说明内容 -->
   <div id="des">
      我是一段认认真真的游戏说明。
      <div id="cl">关闭</div>
   </div>
</div>

/* container 是最外层的包裹容器 */
#container{
   
   /* 宽高就是背景图片的尺寸 */
   width: 521px; 
   height: 342px;
   margin: 50px auto;
   /* 设置相对定位 */
   position: relative;
   /* 后续下落字母落到背景图以下时候，进行隐藏 */
   overflow: hidden;
}

/* 把背景图片放进 gameStart 里 */
#gameStart{
   
   background: url(./img/background.png) no-repeat;
   /* 宽高百分之百，继承父级 */
   width: 100%;
   height: 100%;
   /* display: none; */
}

/* 按钮的定位,两按钮除了距离底部高度不一致外其余都相同 */
#start, #describe{
   
   width: 101px;
   height: 30px;
   /* border: 1px solid black; */
   position: absolute;
   left: 7px;
   border-radius: 20px;
   cursor: pointer;
}
#start{
   
   bottom: 51px;
}
#describe{
   
   bottom: 6px;
}

/* 游戏说明部分 */
#des{
   
   width: 300px;
   height: 100px;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 7px solid skyblue;
   background-color: #fff;
   text-align: center;
   display: none;
}
/* 关闭叉叉 */
#cl{
   
   position: absolute;
   top: 0;
   right: 0;
   cursor: pointer;
   border: 1px solid #ccc;
   font-weight: bold;
   display: none;
}

b.界面： 点击开始按钮进入游戏界面
四个操作按钮：

• 开始按钮 —> 游戏的暂停
• 结束按钮
• 退出游戏 —> 退出到游戏开始的界面
• 设置 —> 设置当前游戏的难度
  
  点击设置，显示游戏难度选择。
  

<!-- 进入游戏界面 -->
<div id="game">
   <!-- 四个操作按钮，使用了事件委托进行js交互 -->
   <div id="oprate">
      <span class="start">开始</span>
      <span class="exit">退出</span>
      <span class="finish">结束</span>
      <span class="set">设置</span>
   </div>

   <!-- 点击设置弹出游戏难度选择 -->
   <div id="select">
      <!-- 一开始是隐藏的 -->
      <select name="" id="">
         <option value="3">慢</option>
         <option value="2">中</option>
         <option value="1">快</option>
      </select>
      <!-- 关闭按钮 -->
      <span id="close">关闭</span>
   </div>

   <!-- 提示打字的得分、正确率和速度 -->
   <div id="tip">
      <p>得分： <span>0</span> 分</p>
      <p>正确率：<span>0 %</span></p>