贪吃蛇小游戏

优化：加字体图标、加使用说明

Author: xingorg1

gluttonousSnake/css/style.css

@@ -2,7 +2,7 @@
  * @Author: @Guojufeng 
  * @Date: 2019-12-13 13:16:06 
  * @Last Modified by: @Guojufeng
- * @Last Modified time: 2019-06-08 17:53:01
+ * @Last Modified time: 2019-06-08 18:52:27
  */
 html,
 body,
@@ -17,6 +17,7 @@ body,
   font-family: sans-serif;
   overflow: hidden;
 }
+
 .main{
   position: fixed;
   top: 0;
@@ -33,6 +34,14 @@ body {
   -khtml-user-select: none;
   user-select: none;
 }
+ul{
+  text-align: left;
+  padding: 0;
+}
+li{
+  list-style: none;
+  margin-bottom: 10px;
+}
 p{
   margin: 0;
 }
@@ -105,7 +114,18 @@ p{
   animation: none;
 }
 
+/* 求help */
+.help{
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  line-height: 30px;
+  background: url('data:image/png;base64,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') no-repeat center center/100% 100%;
 
+}
 /* count-down */
 .count-down {
   display: none;
@@ -176,30 +196,33 @@ p{
 
 .pause-btn {
   position: absolute;
-  top: 14px;
-  left: 40px;
-  width: 0;
-  height: 0;
+  top: 10px;
+  left: 10px;
+  width: 30px;
+  height: 30px;
   text-indent: -999px;
-
-  border-style: solid;
+  border-radius: 50%;
+  background: url('../img/bofang.png') no-repeat center center/100% 100%;
+  /* border-style: solid; */
   cursor: pointer;
 }
 
 .pause-btn.off {
-  border-width: 15px;
+  /* border-width: 15px;
   border-top-color: transparent;
   border-right-color: transparent;
-  border-bottom-color: transparent;
+  border-bottom-color: transparent; */
+
 }
 
 .pause-btn.on {
-  border-left-width: 9px;
-  border-right-width: 9px;
-  height: 28px;
-  border-top: 0;
-  border-bottom: 0;
-  width: 10px;
+  /* border-left-width: 9px;
+  border-right-width: 9px; */
+  /* height: 28px; */
+  /* border-top: 0;
+  border-bottom: 0; */
+  /* width: 10px; */
+  background-image: url('../img/zanting.png');
 }
 
 .pause-btn:hover,
@@ -515,6 +538,20 @@ p{
   font-size: 14px;
   color: #666;
 }
+.max-count{
+  position: relative;
+}
+
+.max-count::before{
+  content: "";
+  display: inline-block;
+  vertical-align: -4px;
+  margin-right: 4px;
+  width: 20px;
+  height: 20px;
+  background: url('data:image/png;base64,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') no-repeat center center / 100% 100%;
+}
+
 
 .reload {
   width: 100%;
@@ -546,9 +583,26 @@ p{
 
   }
 }
+/* 说明信息 */
+.info{
+  z-index: 3;
+}
+.info-box{
+  padding: 20px;
+}
+.info-box li{
+  padding-left: 20px;
+  position: relative;
+  counter-increment: myNum;
+}
+.info-box li::before{
+  content: counter(myNum) '.';
+  margin-right: 8px;
 
+}
 /* footer */
 footer {
+  font-size: 10px;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -569,6 +623,10 @@ footer {
     font-size: 14px;
     transform: translate(-50%, -50%) translateZ(0);
   }
+  .info-box{
+    padding: 20px;
+    width: 220px;
+  }
   .game-over{
     margin: 5px 0 0;
   }

gluttonousSnake/img/bangzhu.png

@@ -6,7 +6,7 @@
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta name="author" content="xing.org1^">
-  <title>xing.org1^牌贪吃蛇小游戏</title>
+  <title>小石头的贪吃蛇</title>
   <link rel="stylesheet" href="./css/style.css">
 </head>
 
@@ -16,6 +16,7 @@
     <div class="header">
       <div class="pause-btn off" id="pause">开始</div>
       <!-- <div class="pause-btn on active">暂停</div> -->
+      <div class="help" id="help"></div>
       <h2 class="score">
         分数：
         <span class="playing-score" id="score">0</span>
@@ -73,6 +74,18 @@ <h2 class="game-over">
         <p class="max-count" id="maxCountParent">历史最高<span id="maxCount">45</span>分</p>
       </div>
     </div>
+    <!-- 游戏说明 -->
+    <div class="layer info hide" id="helpLayer">
+      <div class="info-box end-layer">
+        <ul>
+          <li>点击“开始游戏”，倒计时结束后操纵蛇头，使蛇头和食物发生碰撞，就算吃到食物，计1分;</li>
+          <li>分数越高，蛇的运动速度越快;</li>
+          <li>可点击右下角的方向键操控蛇头移动方向;</li>
+          <li>电脑端可用上下左右键控制蛇头的移动方向;</li>
+          <li>手机端可用手势滑动控制蛇头的移动方向;</li>
+        </ul>
+      </div>
+    </div>
     <!-- footer -->
     <footer>
       copyright @xing.org1^ guojufeng <br/>20181213-20181215-20190201-20190608

gluttonousSnake/img/bg.png

@@ -2,24 +2,26 @@
  * @Author: @Guojufeng 
  * @Date: 2018-12-13 14:55:22 
  * @Last Modified by: @Guojufeng
- * @Last Modified time: 2019-06-08 17:46:33
+ * @Last Modified time: 2019-06-08 18:47:29
  * +移动端
  */
 
 (function () {
   var debug = false,
     isPhone = xingorg1Utils.isPhone();
-  startX = 0,
+    startX = 0,
     startY = 0,
     pauseDom = document.getElementById('pause'), //暂停|开始按钮
     foodDom = document.getElementById('food'), // 食物
     foodBodyDom = document.getElementById('foodBody'), //为了给食物改颜色获取的。
     snakeDom = document.getElementById('snake'), //蛇
     dirDom = document.getElementById('direction'), //方向手柄
     dirDomSpans = dirDom.getElementsByTagName('span'),
+    helpBtn = document.getElementById('help'),//查看游戏说明
+    helpLayer= document.getElementById('helpLayer'),
+    showHelp = false;
     layerDom = document.getElementById('layer'); //计分板
 
-
   function SnakeGame() {
     var contDom = document.getElementById('cont');
     this.canOw = contDom.clientWidth; // 视口宽度
@@ -469,11 +471,25 @@
       console.log('支持localStorage，并且第一次打开游戏没有最高分记录')
      xingorg1Utils.wls.setItem('maxCount','0');
     }
-
     /* // 第二种写法 - if的这两种写法，第二种没有加大括号的，if条件不成立时，setItem的函数调用也执行了啊。自己给自己留的坑
     if(window.localStorage && ls.getItem('maxCount') === null)
       ls.setItem('maxCount','0'); */
 
+    /* 添加help */
+    helpBtn.onclick = function(){
+      if(showHelp){
+        helpLayer.className = 'layer hide'
+        showHelp = false;
+      }else{
+        helpLayer.className = 'layer'
+        showHelp = true;
+      }
+    }
+    helpLayer.onclick = function(){
+      helpLayer.className = 'layer hide'
+      showHelp = false;
+    }
+    
   }