3 年之前 · 53a5a146e8
--- a/web/public/remove/css/style.css
+++ b/web/public/remove/css/style.css
@@ -0,0 +1,115 @@
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+#ul1 {
			
 
				+  position: relative;
			
 
				+  margin:0px auto;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+#ul1 li {
			
 
				+  list-style: none;
			
 
				+  background-color: #164778;
			
 
				+  box-shadow: 0px 0px 3px 1px #ccc;
			
 
				+  z-index: 10 !important;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+  text-align: center;
			
 
				+  background-color: #86a7c5;
			
 
				+}
			
 
				+
			
 
				+.box0 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/1.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+
			
 
				+.box1 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/2.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+
			
 
				+.box2 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/3.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+
			
 
				+.box3 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/4.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+
			
 
				+.box4 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/5.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+
			
 
				+.box5 {
			
 
				+  width: 70px;
			
 
				+  height: 70px;
			
 
				+  background: url(../images/6.png) no-repeat;
			
 
				+  background-size: cover;
			
 
				+  float: left;
			
 
				+}
			
 
				+.top{
			
 
				+  display: flex;
			
 
				+  color: #fff;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  height: 30px;
			
 
				+}
			
 
				+.left {
			
 
				+  margin-right: 50px;
			
 
				+}
			
 
				+.end{
			
 
				+  display: none;
			
 
				+  position: absolute;
			
 
				+  top: 45%;
			
 
				+  left: 50%;
			
 
				+  transform: translate(-50%,-50%);
			
 
				+}
			
 
				+.end>div{
			
 
				+  color: #fff;
			
 
				+  margin-top: 30px;
			
 
				+  font-size: 24px;
			
 
				+}
			
 
				+.end .btn{
			
 
				+  cursor: pointer;
			
 
				+  margin: 30px auto 0;
			
 
				+  display: flex;
			
 
				+  justify-content: center;
			
 
				+  align-items: center;
			
 
				+  width: 275px;
			
 
				+  height: 75px;
			
 
				+  background: url('../images/btn.png');
			
 
				+  background-size: 100% 100%;
			
 
				+}
			
 
				+
			
 
				+/* 适配手机端 */
			
 
				+@media screen and (max-width: 600px) {
			
 
				+  #ul1{
			
 
				+    width: 100vw !important;
			
 
				+    height: 100vh !important;
			
 
				+  }
			
 
				+  #ul1 li {
			
 
				+    width: calc(100vw / 7);
			
 
				+    height: calc(100vw / 7);
			
 
				+  }
			
 
				+}
			
--- a/web/public/remove/images/1.png
+++ b/web/public/remove/images/1.png
--- a/web/public/remove/images/2.png
+++ b/web/public/remove/images/2.png
--- a/web/public/remove/images/3.png
+++ b/web/public/remove/images/3.png
--- a/web/public/remove/images/4.png
+++ b/web/public/remove/images/4.png
--- a/web/public/remove/images/5.png
+++ b/web/public/remove/images/5.png
--- a/web/public/remove/images/6.png
+++ b/web/public/remove/images/6.png
--- a/web/public/remove/images/btn.png
+++ b/web/public/remove/images/btn.png
--- a/web/public/remove/index.html
+++ b/web/public/remove/index.html
@@ -0,0 +1,30 @@
 
				+
			
 
				+<html>
			
 
				+<head>
			
 
				+<meta charset="UTF-8">
			
 
				+<title>eliminate</title>
			
 
				+<meta name="viewport" content="width=device-width, initial-scale=1">
			
 
				+<link rel="stylesheet" href="css/style.css"/>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+
			
 
				+  <!-- 计分 -->
			
 
				+  <div class="top">
			
 
				+    <div class="left">总分：<span class="grade">0</span>分</div>
			
 
				+    <div class="right">倒计时：<span class="time">60</span>秒</div>
			
 
				+  </div>
			
 
				+  <!-- 倒计时结束后的页面 -->
			
 
				+  <div class="end">
			
 
				+    <div>游戏结束</div>
			
 
				+    <div>您的分数:<span class="endF">0</span>分</div>
			
 
				+    <div class="btn">重 新 开 始</div>
			
 
				+  </div>
			
 
				+
			
 
				+<ul id="ul1"></ul>
			
 
				+
			
 
				+<script type="text/javascript" src="js/jquery.min.js"></script>
			
 
				+<script type="text/javascript" src="js/index.js"></script>
			
 
				+
			
 
				+</body>
			
 
				+</html>
			
--- a/web/public/remove/js/index.js
+++ b/web/public/remove/js/index.js
@@ -0,0 +1,489 @@
 
				+document.ontouchmove = function (ev) {
			
 
				+  ev.preventDefault();
			
 
				+};
			
 
				+ // 获取li的宽，用来设置定位
			
 
				+ console.log(window.screen.width);
			
 
				+ let liWidth =70
			
 
				+ if(window.screen.width<=600)  liWidth = window.screen.width / 7
			
 
				+
			
 
				+// 设置一个总分是变量
			
 
				+let grade = 0
			
 
				+// 设置一个定时器
			
 
				+let timing =61
			
 
				+let timeId = setInterval(() => {
			
 
				+  timing--
			
 
				+  $('.time').text(timing)
			
 
				+  if(timing<=0) {
			
 
				+    $('#ul1').hide()
			
 
				+    $('.top').hide()
			
 
				+    $('.endF').text(grade)
			
 
				+    $('.end').show()
			
 
				+    clearInterval(timeId)
			
 
				+  }
			
 
				+}, 1000);
			
 
				+// 点击重新开始
			
 
				+$('.btn').click(()=>{
			
 
				+  window.location.reload();
			
 
				+})
			
 
				+
			
 
				+$(function () {
			
 
				+  var Game = {
			
 
				+    colNum: 7,
			
 
				+    wH: liWidth,
			
 
				+    timeBtn: true,
			
 
				+    dir: 0,
			
 
				+    dirThis: null,
			
 
				+    init: function () {
			
 
				+      this.oUl = $('#ul1');
			
 
				+      this.createMap();
			
 
				+
			
 
				+    },
			
 
				+    createMap: function () {
			
 
				+      this.oUl.css({ width: this.colNum * this.wH, height: this.colNum * this.wH });
			
 
				+      var numX = 0;
			
 
				+      var numY = 0;
			
 
				+
			
 
				+      for (var i = 0; i < Math.pow(this.colNum, 2); i++) {
			
 
				+        var oLi = $('<li>');
			
 
				+        oLi.attr('class', 'box' + Math.floor(Math.random() * 6));
			
 
				+
			
 
				+        oLi.data({ x: numX, y: numY });
			
 
				+
			
 
				+        numX++;
			
 
				+
			
 
				+        if (numX == this.colNum) {
			
 
				+          numX = 0;
			
 
				+          numY++;
			
 
				+        }
			
 
				+
			
 
				+        this.oUl.append(oLi);
			
 
				+      }
			
 
				+
			
 
				+      this.positionShow();
			
 
				+
			
 
				+      this.removeShow();
			
 
				+
			
 
				+      this.bindTouch();
			
 
				+
			
 
				+    },
			
 
				+    positionShow: function () {
			
 
				+
			
 
				+      this.aLi = this.oUl[0].getElementsByTagName('li');
			
 
				+
			
 
				+      var arr = [];
			
 
				+      $(this.aLi).each(function (i, elem) {
			
 
				+        arr.push([elem.offsetLeft, elem.offsetTop]);
			
 
				+      });
			
 
				+      $(this.aLi).each(function (i, elem) {
			
 
				+        $(elem).css({ position: 'absolute', left: arr[i][0], top: arr[i][1] });
			
 
				+
			
 
				+      });
			
 
				+
			
 
				+      this.arr = arr;
			
 
				+
			
 
				+    },
			
 
				+    bindTouch: function () {
			
 
				+
			
 
				+      var startX = 0;
			
 
				+      var startY = 0;
			
 
				+      var This = this;
			
 
				+      var izIndex = 2;
			
 
				+      var startThis = null;
			
 
				+
			
 
				+      this.oUl.delegate('li', 'touchstart mousedown', function (event) {
			
 
				+
			
 
				+        var data = event.originalEvent.changedTouches ? event.originalEvent.changedTouches[0] : event;
			
 
				+        startX = data.clientX;
			
 
				+        startY = data.clientY;
			
 
				+
			
 
				+        startThis = this;
			
 
				+
			
 
				+        return false;
			
 
				+      });
			
 
				+
			
 
				+      this.oUl.delegate('li', 'touchend mouseup', function (event) {
			
 
				+
			
 
				+        var data = event.originalEvent.changedTouches ? event.originalEvent.changedTouches[0] : event;
			
 
				+
			
 
				+        if (This.timeBtn && (Math.abs(startX - data.clientX) > 10 || Math.abs(startY - data.clientY) > 10)) {
			
 
				+
			
 
				+          $(startThis).css('zIndex', izIndex++);
			
 
				+
			
 
				+          if (Math.abs(startX - data.clientX) > Math.abs(startY - data.clientY)) {// 左右
			
 
				+            if (startX < data.clientX) { //→
			
 
				+
			
 
				+              if ($(startThis).data('x') != This.colNum - 1) {
			
 
				+
			
 
				+                This.dir = 1;
			
 
				+
			
 
				+                var index = $(startThis).data('x') + 1 + $(startThis).data('y') * This.colNum;
			
 
				+
			
 
				+                var nextLi = $(This.oUl).find('li').eq(index);
			
 
				+
			
 
				+                $(startThis).insertAfter(nextLi);
			
 
				+
			
 
				+                $(startThis).animate({ left: This.arr[index][0] }, 300);
			
 
				+                nextLi.animate({ left: This.arr[index - 1][0] }, 300);
			
 
				+
			
 
				+                $(startThis).data('x', $(startThis).data('x') + 1);
			
 
				+                nextLi.data('x', nextLi.data('x') - 1);
			
 
				+
			
 
				+                This.dirThis = nextLi;
			
 
				+
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+            else { //←
			
 
				+
			
 
				+              if ($(startThis).data('x') != 0) {
			
 
				+
			
 
				+                This.dir = 2;
			
 
				+
			
 
				+                var index = $(startThis).data('x') - 1 + $(startThis).data('y') * This.colNum;
			
 
				+
			
 
				+                var prevLi = $(This.oUl).find('li').eq(index);
			
 
				+
			
 
				+                $(startThis).insertBefore(prevLi);
			
 
				+                $(startThis).animate({ left: This.arr[index][0] }, 300);
			
 
				+                prevLi.animate({ left: This.arr[index + 1][0] }, 300);
			
 
				+
			
 
				+                $(startThis).data('x', $(startThis).data('x') - 1);
			
 
				+                prevLi.data('x', prevLi.data('x') + 1);
			
 
				+
			
 
				+                This.dirThis = prevLi;
			
 
				+
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+          }
			
 
				+          else { //上下
			
 
				+
			
 
				+            if (startY < data.clientY) { //↓
			
 
				+
			
 
				+              if ($(startThis).data('y') != This.colNum - 1) {
			
 
				+
			
 
				+                This.dir = 3;
			
 
				+
			
 
				+                var index = $(startThis).data('x') + ($(startThis).data('y') + 1) * This.colNum;
			
 
				+
			
 
				+                var downLi = $(This.oUl).find('li').eq(index);
			
 
				+
			
 
				+                var prevThis = $(startThis).prev();
			
 
				+
			
 
				+                $(startThis).insertAfter(downLi);
			
 
				+                downLi.insertAfter(prevThis);
			
 
				+
			
 
				+                $(startThis).animate({ top: This.arr[index][1] }, 300);
			
 
				+                downLi.animate({ top: This.arr[index - This.colNum][1] }, 300);
			
 
				+
			
 
				+                $(startThis).data('y', $(startThis).data('y') + 1);
			
 
				+                downLi.data('y', downLi.data('y') - 1);
			
 
				+
			
 
				+                This.dirThis = downLi;
			
 
				+
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+            else { //↑
			
 
				+
			
 
				+              if ($(startThis).data('y') != 0) {
			
 
				+
			
 
				+                This.dir = 4;
			
 
				+
			
 
				+                var index = $(startThis).data('x') + ($(startThis).data('y') - 1) * This.colNum;
			
 
				+
			
 
				+                var upLi = $(This.oUl).find('li').eq(index);
			
 
				+
			
 
				+                var prevThis = $(startThis).prev();
			
 
				+
			
 
				+                $(startThis).insertAfter(upLi);
			
 
				+                upLi.insertAfter(prevThis);
			
 
				+
			
 
				+                $(startThis).animate({ top: This.arr[index][1] }, 300);
			
 
				+                upLi.animate({ top: This.arr[index + This.colNum][1] }, 300);
			
 
				+
			
 
				+                $(startThis).data('y', $(startThis).data('y') - 1);
			
 
				+                upLi.data('y', upLi.data('y') + 1);
			
 
				+
			
 
				+                This.dirThis = upLi;
			
 
				+
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+          }
			
 
				+
			
 
				+          This.removeShow();
			
 
				+        }
			
 
				+
			
 
				+        return false;
			
 
				+
			
 
				+      });
			
 
				+    },
			
 
				+    removeShow: function () {
			
 
				+
			
 
				+      var arr = [];
			
 
				+      var This = this;
			
 
				+
			
 
				+      function addArr(aLi) {
			
 
				+
			
 
				+        var prevLi = aLi[0];
			
 
				+        var iNum = 0;
			
 
				+
			
 
				+        for (var i = 0; i < aLi.length; i++) {
			
 
				+          if (aLi[i].className == prevLi.className && i % 7 != 0) {
			
 
				+            iNum++;
			
 
				+          }
			
 
				+          else {
			
 
				+
			
 
				+            if (iNum >= 2) {
			
 
				+              for (var j = 0; j <= iNum; j++) {
			
 
				+                arr.unshift(aLi[(i - 1) - j]);
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+            iNum = 0;
			
 
				+          }
			
 
				+          prevLi = aLi[i];
			
 
				+        }
			
 
				+
			
 
				+        if (iNum >= 2) {
			
 
				+          for (var j = 0; j <= iNum; j++) {
			
 
				+            arr.unshift(aLi[(i - 1) - j]);
			
 
				+          }
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+      }
			
 
				+
			
 
				+      addArr(this.aLi);
			
 
				+      addArr(this.xyChange(this.aLi));
			
 
				+
			
 
				+      for (var i = 0; i < arr.length; i++) {
			
 
				+
			
 
				+        for (var j = 0; j < this.aLi.length; j++) {
			
 
				+          if (arr[i] == this.aLi[j]) {
			
 
				+            this.aLi[j].bBtn = true;
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      var removeNum = 0;
			
 
				+      var removeY = [];
			
 
				+      var changeArr = [];
			
 
				+
			
 
				+      for (var i = 0; i < this.aLi.length; i++) {
			
 
				+        if (this.aLi[i].bBtn) {
			
 
				+          removeNum++;
			
 
				+          removeY.push(this.aLi[i]);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      if (removeY.length) {
			
 
				+        this.timeBtn = false;
			
 
				+        this.dir = 0;
			
 
				+        console.log('消除成功');
			
 
				+        grade +=10
			
 
				+        $('.grade').text(grade)
			
 
				+      }
			
 
				+      else {
			
 
				+        this.toReset();
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      for (var i = 0; i < removeY.length; i++) {
			
 
				+        for (var j = 0; j < this.arrY[$(removeY[i]).data('x')].length; j++) {
			
 
				+
			
 
				+          if (removeY[i] == this.arrY[$(removeY[i]).data('x')][j]) {
			
 
				+            this.arrY[$(removeY[i]).data('x')].iNum++;
			
 
				+            this.arrY[$(removeY[i]).data('x')].splice(j, 1);
			
 
				+            this.arrY[$(removeY[i]).data('x')].unshift(this.oneLi($(removeY[i]).data('x'), this.arrY[$(removeY[i]).data('x')].iNum));
			
 
				+
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      for (var i = 0; i < this.colNum; i++) {
			
 
				+        changeArr = changeArr.concat(this.arrY[i]);
			
 
				+      }
			
 
				+
			
 
				+      var c = this.xyChange(changeArr);
			
 
				+      var removeYnum = 0;
			
 
				+
			
 
				+      for (var i = 0; i < removeY.length; i++) {
			
 
				+
			
 
				+        $(removeY[i]).animate({ opacity: 0 }, function () {
			
 
				+          $(this).remove();
			
 
				+
			
 
				+          removeYnum++;
			
 
				+
			
 
				+          if (removeYnum == removeY.length) {
			
 
				+
			
 
				+
			
 
				+            for (var i = 0; i < c.length; i++) {
			
 
				+              This.oUl.append(c[i]);
			
 
				+            }
			
 
				+
			
 
				+            var numX = 0;
			
 
				+            var numY = 0;
			
 
				+
			
 
				+            for (var i = 0; i < This.aLi.length; i++) {
			
 
				+
			
 
				+              $(This.aLi).eq(i).data({ x: numX, y: numY });
			
 
				+
			
 
				+              numX++;
			
 
				+
			
 
				+              if (numX == This.colNum) {
			
 
				+                numX = 0;
			
 
				+                numY++;
			
 
				+              }
			
 
				+
			
 
				+            }
			
 
				+
			
 
				+            This.movePos();
			
 
				+          }
			
 
				+
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+    },
			
 
				+    xyChange: function (aLi) {
			
 
				+
			
 
				+      var arr = [];
			
 
				+      var This = this;
			
 
				+      this.arrY = {};
			
 
				+      iNum = 0;
			
 
				+
			
 
				+      for (var i = 0; i < this.colNum; i++) {
			
 
				+        this.arrY[i] = [];
			
 
				+        this.arrY[i].iNum = 0;
			
 
				+      }
			
 
				+
			
 
				+      (function () {
			
 
				+
			
 
				+        if (iNum == This.colNum) {
			
 
				+          return;
			
 
				+        }
			
 
				+
			
 
				+        for (var i = 0; i < aLi.length; i++) {
			
 
				+          if (i % This.colNum == iNum) {
			
 
				+            arr.push(aLi[i]);
			
 
				+            This.arrY[iNum].push(aLi[i]);
			
 
				+          }
			
 
				+        }
			
 
				+        iNum++;
			
 
				+        arguments.callee();
			
 
				+
			
 
				+      })();
			
 
				+
			
 
				+      return arr;
			
 
				+
			
 
				+    },
			
 
				+    oneLi: function (x, iNum) {
			
 
				+      var oLi = $('<li>');
			
 
				+      oLi.attr('class', 'box' + Math.floor(Math.random() * 6));
			
 
				+      oLi.css({ position: 'absolute', left: x * this.wH, top: -iNum * this.wH });
			
 
				+      this.oUl.append(oLi);
			
 
				+
			
 
				+      return oLi.get(0);
			
 
				+
			
 
				+    },
			
 
				+    movePos: function () {
			
 
				+
			
 
				+      var bBtn = true;
			
 
				+      var This = this;
			
 
				+
			
 
				+      for (var i = 0; i < this.aLi.length; i++) {
			
 
				+        $(this.aLi[i]).animate({ top: this.arr[i][1] }, function () {
			
 
				+          if (bBtn) {
			
 
				+            bBtn = false;
			
 
				+
			
 
				+            This.timeBtn = true;
			
 
				+
			
 
				+            This.removeShow();
			
 
				+          }
			
 
				+        });
			
 
				+      }
			
 
				+
			
 
				+    },
			
 
				+    toReset: function () {
			
 
				+      console.log('消除不成功');
			
 
				+      switch (this.dir) {
			
 
				+        case 1:
			
 
				+
			
 
				+          var index = $(this.dirThis).data('x') + 1 + $(this.dirThis).data('y') * this.colNum;
			
 
				+
			
 
				+          var nextLi = $(this.oUl).find('li').eq(index);
			
 
				+
			
 
				+          $(this.dirThis).insertAfter(nextLi);
			
 
				+
			
 
				+          $(this.dirThis).animate({ left: this.arr[index][0] }, 300);
			
 
				+          nextLi.animate({ left: this.arr[index - 1][0] }, 300);
			
 
				+
			
 
				+          $(this.dirThis).data('x', $(this.dirThis).data('x') + 1);
			
 
				+          nextLi.data('x', nextLi.data('x') - 1);
			
 
				+
			
 
				+          break;
			
 
				+        case 2:
			
 
				+
			
 
				+          var index = $(this.dirThis).data('x') - 1 + $(this.dirThis).data('y') * this.colNum;
			
 
				+
			
 
				+          var prevLi = $(this.oUl).find('li').eq(index);
			
 
				+
			
 
				+          $(this.dirThis).insertBefore(prevLi);
			
 
				+          $(this.dirThis).animate({ left: this.arr[index][0] }, 300);
			
 
				+          prevLi.animate({ left: this.arr[index + 1][0] }, 300);
			
 
				+
			
 
				+          $(this.dirThis).data('x', $(this.dirThis).data('x') - 1);
			
 
				+          prevLi.data('x', prevLi.data('x') + 1);
			
 
				+
			
 
				+          break;
			
 
				+        case 3:
			
 
				+
			
 
				+          var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y') + 1) * this.colNum;
			
 
				+
			
 
				+          var downLi = $(this.oUl).find('li').eq(index);
			
 
				+
			
 
				+          var prevThis = $(this.dirThis).prev();
			
 
				+
			
 
				+          $(this.dirThis).insertAfter(downLi);
			
 
				+          downLi.insertAfter(prevThis);
			
 
				+
			
 
				+          $(this.dirThis).animate({ top: this.arr[index][1] }, 300);
			
 
				+          downLi.animate({ top: this.arr[index - this.colNum][1] }, 300);
			
 
				+
			
 
				+          $(this.dirThis).data('y', $(this.dirThis).data('y') + 1);
			
 
				+          downLi.data('y', downLi.data('y') - 1);
			
 
				+
			
 
				+          break;
			
 
				+        case 4:
			
 
				+
			
 
				+          var index = $(this.dirThis).data('x') + ($(this.dirThis).data('y') - 1) * this.colNum;
			
 
				+
			
 
				+          var upLi = $(this.oUl).find('li').eq(index);
			
 
				+
			
 
				+          var prevThis = $(this.dirThis).prev();
			
 
				+
			
 
				+          $(this.dirThis).insertAfter(upLi);
			
 
				+          upLi.insertAfter(prevThis);
			
 
				+
			
 
				+          $(this.dirThis).animate({ top: this.arr[index][1] }, 300);
			
 
				+          upLi.animate({ top: this.arr[index + this.colNum][1] }, 300);
			
 
				+
			
 
				+          $(this.dirThis).data('y', $(this.dirThis).data('y') - 1);
			
 
				+          upLi.data('y', upLi.data('y') + 1);
			
 
				+
			
 
				+          break;
			
 
				+      }
			
 
				+
			
 
				+
			
 
				+    },
			
 
				+
			
 
				+
			
 
				+  };
			
 
				+
			
 
				+
			
 
				+  Game.init();
			
 
				+
			
 
				+});
			
--- a/web/public/remove/js/jquery.min.js
+++ b/web/public/remove/js/jquery.min.js
--- a/web/src/assets/img/bg.png
+++ b/web/src/assets/img/bg.png
--- a/web/src/assets/imgM/game.png
+++ b/web/src/assets/imgM/game.png
--- a/web/src/views/gui/component/data.js
+++ b/web/src/views/gui/component/data.js
@@ -549,17 +549,567 @@ let questions = [
 
				     }],
			
 
				     correct: 'B'
			
 
				   },
			
 
				-  // {
			
 
				-  //   title: '',
			
 
				-  //   answer: [{
			
 
				-  //     txt: '',
			
 
				-  //     id: 'A'
			
 
				-  //   }, {
			
 
				-  //     txt: '',
			
 
				-  //     id: 'B'
			
 
				-  //   }],
			
 
				-  //   correct: ''
			
 
				-  // },
			
 
				+  {
			
 
				+    title: '大理洱海科普教育中心展示的蓝藻水华的实景照片拍摄于',
			
 
				+    answer: [{
			
 
				+      txt: '2003年10月',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '2014年10月',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海是云南九大高原湖泊中位于最（ ）边的湖泊',
			
 
				+    answer: [{
			
 
				+      txt: '北',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '西',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海的平均水深大约是抚仙湖的',
			
 
				+    answer: [{
			
 
				+      txt: '三分之一',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '九分之一',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海水域最大的扩张期距今',
			
 
				+    answer: [{
			
 
				+      txt: '1万年-20万年',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '200万年-250万年',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '民居照壁题“清白传家”，代表的是（ ）姓',
			
 
				+    answer: [{
			
 
				+      txt: '杨',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '李',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '民居照壁题“琴鹤家声”，代表的是（ ）姓',
			
 
				+    answer: [{
			
 
				+      txt: '段',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '赵',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '民居照壁题“百忍家风”，代表的是（ ）姓',
			
 
				+    answer: [{
			
 
				+      txt: '王',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '张',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '位于大理洱海科普教育中心附近的湿地公园是',
			
 
				+    answer: [{
			
 
				+      txt: '洱海月湿地公园',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '海舌湿地公园',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '近几十年，洱海生物物种变化趋势是',
			
 
				+    answer: [{
			
 
				+      txt: '土著种减少，耐污种增多',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '土著种增多，耐污种减少',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海保护历程中，水污染防治阶段的标志之一是',
			
 
				+    answer: [{
			
 
				+      txt: '流域禁白',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '流域禁磷',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '“双取消”实行于何时',
			
 
				+    answer: [{
			
 
				+      txt: '1994年-1995年',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '1996年-1997年',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '流域“两违”整治行动当中的“两违”指的是',
			
 
				+    answer: [{
			
 
				+      txt: '违章建筑和餐饮客栈违法经营',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '违章建筑和违法停车',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '下列岩石属于岩浆岩的是',
			
 
				+    answer: [{
			
 
				+      txt: '玄武岩',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '砂岩',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '化石通常被发现于（ ）中',
			
 
				+    answer: [{
			
 
				+      txt: '岩浆岩',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '沉积岩',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '下列属于清洁能源的是',
			
 
				+    answer: [{
			
 
				+      txt: '天然气',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '太阳能',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '“七大家鱼”指的是青鱼、草鱼、鲢鱼、鳙鱼、鲤鱼、鲫鱼和',
			
 
				+    answer: [{
			
 
				+      txt: '鳊鱼',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '鲟鱼',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '海绵是一种',
			
 
				+    answer: [{
			
 
				+      txt: '动物',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '植物',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '仅分布于云南省的螺是',
			
 
				+    answer: [{
			
 
				+      txt: '似瓶圆田螺',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '方田螺',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '蓝藻会不会自主在水中游动',
			
 
				+    answer: [{
			
 
				+      txt: '会',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '不会',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '蓝藻能不能进行光合作用',
			
 
				+    answer: [{
			
 
				+      txt: '能',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '不能',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '鹭科鸟类大多是',
			
 
				+    answer: [{
			
 
				+      txt: '涉禽',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '潜鸟',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '所有绿头鸭的头都是绿色的吗？',
			
 
				+    answer: [{
			
 
				+      txt: '是',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '不是',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '下列鱼类中，鱼鳞数量较少的是',
			
 
				+    answer: [{
			
 
				+      txt: '大眼鲤',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '大理裂腹鱼',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '《诗经》的第一首诗《周南•关雎》中提到了一种水生植物，它是',
			
 
				+    answer: [{
			
 
				+      txt: '荇菜',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '芦苇',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '下列水生植物有毒的是',
			
 
				+    answer: [{
			
 
				+      txt: '茴茴蒜',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '水葱',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '发电原理是将机械能转化为电能的是',
			
 
				+    answer: [{
			
 
				+      txt: '太阳能发电',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '风能发电',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '目前，大理的生活垃圾处理方式主要为',
			
 
				+    answer: [{
			
 
				+      txt: '填埋',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '焚烧',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '建设环湖截污工程的主要目的是',
			
 
				+    answer: [{
			
 
				+      txt: '遏制污水直接流（排）进洱海',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '有效控制农药化肥对洱海的污染',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海属于哪个水系',
			
 
				+    answer: [{
			
 
				+      txt: '澜沧江水系',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '金沙江水系',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海流域人口最多的少数民族是',
			
 
				+    answer: [{
			
 
				+      txt: '白族',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '彝族',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海水的主要来源是',
			
 
				+    answer: [{
			
 
				+      txt: '苍山融雪',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '大气降水',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '《云南省大理白族自治州洱海保护管理条例》最早制定于',
			
 
				+    answer: [{
			
 
				+      txt: '1988年',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '1998年',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '富营养化是一种（ ）等植物营养物质含量过多所引起的水质污染现象',
			
 
				+    answer: [{
			
 
				+      txt: '钾、磷',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '氮、磷',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '蓝藻爆发的原因是',
			
 
				+    answer: [{
			
 
				+      txt: '富营养化',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '外来物种',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '“地球之肾”指的是',
			
 
				+    answer: [{
			
 
				+      txt: '河流',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '湿地',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '什么叫“双取消”（',
			
 
				+    answer: [{
			
 
				+      txt: '取消网箱养鱼、取消机动渔船',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '取消网箱养鱼、取消机动旅游船',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '什么叫“三退三还”',
			
 
				+    answer: [{
			
 
				+      txt: '退塘还湖、退田还林、退房还草',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '退塘还湖、退田还林、退房还湿地',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海流域有（ ）条河溪',
			
 
				+    answer: [{
			
 
				+      txt: '117',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '115',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '洱海的天然出水口是',
			
 
				+    answer: [{
			
 
				+      txt: '西洱河',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '玉龙河',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '“一河二江”指的是',
			
 
				+    answer: [{
			
 
				+      txt: '弥苴河、永安江、罗时江',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '弥苴河、永安江、波罗江',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '（ ）发现了距今约3770年的人工水稻品种',
			
 
				+    answer: [{
			
 
				+      txt: '永平新光遗址',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '宾川白羊村遗址',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '南诏国建立于',
			
 
				+    answer: [{
			
 
				+      txt: '公元618年',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '公元738年',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '公元（ ）年，南诏国迁都阳苴咩城',
			
 
				+    answer: [{
			
 
				+      txt: '780',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '870',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '大理国的皇帝姓',
			
 
				+    answer: [{
			
 
				+      txt: '杨',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '段',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '佛教大约于（ ）代传入大理地区，并成为南诏国国教',
			
 
				+    answer: [{
			
 
				+      txt: '唐',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '宋',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '“三清洁”环境卫生综合整治是指',
			
 
				+    answer: [{
			
 
				+      txt: '清洁家园、清洁水源、清洁城市',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '清洁家园、清洁水源、清洁田园',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '（ ）是一个生命共同体，人的命脉在田，田的命脉在水，水的命脉在山，山的命脉在土，土的命脉在林草。',
			
 
				+    answer: [{
			
 
				+      txt: '山水林田湖草',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '山水林田湖人',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '（B）阐述了经济发展和生态环境保护的关系，揭示了保护生态环境就是保护生产力、改善生态环境就是发展生产力的道理，指明了实现发展和保护协同共生的新路径。',
			
 
				+    answer: [{
			
 
				+      txt: '坚持人与自然和谐共生',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '绿水青山就是金山银山',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '深入打好污染防治攻坚战，要加快推动绿色低碳发展，深入打好（ ）保卫战',
			
 
				+    answer: [{
			
 
				+      txt: '蓝天、碧水、净土',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '蓝天、绿水、青山',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'A'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '在大理，您经常能看到的标语是——像保护（ ）一样保护洱海',
			
 
				+    answer: [{
			
 
				+      txt: '生命',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '眼睛',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				+  {
			
 
				+    title: '在大理，您经常能看到的标语是——（ ），大理兴',
			
 
				+    answer: [{
			
 
				+      txt: '天空净',
			
 
				+      id: 'A'
			
 
				+    }, {
			
 
				+      txt: '洱海清',
			
 
				+      id: 'B'
			
 
				+    }],
			
 
				+    correct: 'B'
			
 
				+  },
			
 
				 ]
			
 
				 
			
 
				 export { questions }
			
--- a/web/src/views/gui/component/game.vue
+++ b/web/src/views/gui/component/game.vue
@@ -0,0 +1,98 @@
 
				+<template>
			
 
				+  <div class="gameMe">
			
 
				+    <div class="conten">
			
 
				+      <div class="top">
			
 
				+        <h2>选择小游戏</h2>
			
 
				+        <i class="el-icon-close" @click="$emit('close')"></i>
			
 
				+      </div>
			
 
				+      <div class="btn" @click="change='Issue'">趣味课题</div>
			
 
				+      <div class="btn" @click="change='Remove'">开心消消乐</div>
			
 
				+    </div>
			
 
				+    <component :is="change" @close="change = ''"></component>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// 答题
			
 
				+import Issue from './issue.vue'
			
 
				+// 消消乐
			
 
				+import Remove from './remove.vue'
			
 
				+export default {
			
 
				+  name: "gameMe",
			
 
				+  components: {Issue,Remove},
			
 
				+  data() {
			
 
				+    return {
			
 
				+      change:''
			
 
				+    };
			
 
				+  },
			
 
				+  computed: {},
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.gameMe {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 9999;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  .conten {
			
 
				+    padding: 100px 20px 20px;
			
 
				+    width: 394px;
			
 
				+    height: 329px;
			
 
				+    background: url("../../../assets/imgM/game.png");
			
 
				+    background-size: 100% 100%;
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    .top {
			
 
				+      margin-bottom: 20px;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+      color: #165491;
			
 
				+      font-weight: 700;
			
 
				+      font-size: 22px;
			
 
				+      margin-bottom: 50px;
			
 
				+      & > i {
			
 
				+        cursor: pointer;
			
 
				+        font-size: 30px;
			
 
				+      }
			
 
				+    }
			
 
				+    .btn{
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      margin-bottom:10px;
			
 
				+      margin: 0 auto 10px;
			
 
				+      background-color: #165491;
			
 
				+      border-radius: 5px;
			
 
				+      cursor: pointer;
			
 
				+      width: 200px;
			
 
				+      height: 40px;
			
 
				+      color: #fff;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+@media only screen and (max-width: 800px) {
			
 
				+  .gameMe{
			
 
				+    .conten{
			
 
				+      width: 100%;
			
 
				+      max-width: 375px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/web/src/views/gui/component/issue.vue
+++ b/web/src/views/gui/component/issue.vue
@@ -15,8 +15,8 @@
 
				         <div class="begin_right">
			
 
				           <p>欢迎来到</p>
			
 
				           <p>大理洱海科普教育中心趣味问答小游戏，</p>
			
 
				-          <p>您将随机抽取十道题进行作答，</p>
			
 
				-          <p>答对六题及以上为闯关成功！</p>
			
 
				+          <p>您将随机抽取二十道题进行作答，</p>
			
 
				+          <p>答对十二题及以上为闯关成功！</p>
			
 
				           <div class="btnn" @click="beginTopic">开始答题</div>
			
 
				         </div>
			
 
				       </div>
			
@@ -174,8 +174,8 @@ export default {
 
				     getTopic() {
			
 
				       this.topic = [];
			
 
				       let arr = [];
			
 
				-      for (let i = 0; i < 50; i++) {
			
 
				-        //一个从0到50的数组
			
 
				+      for (let i = 0; i < 101; i++) {
			
 
				+        //一个从0到101的数组
			
 
				         arr.push(i);
			
 
				       }
			
 
				       arr.sort(function () {
			
@@ -225,9 +225,11 @@ export default {
 
				     z-index: 9999;
			
 
				     width: 1100px;
			
 
				     height: 700px;
			
 
				-    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
			
 
				+    background: url("../../../assets/img/bg.png");
			
 
				+    background-size: 100% 100%;
			
 
				     .top {
			
 
				       margin-bottom: 20px;
			
 
				+      margin-top: 80px;
			
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				       align-items: center;
			
@@ -240,7 +242,7 @@ export default {
 
				       }
			
 
				     }
			
 
				     .begin {
			
 
				-      margin: 100px auto 0;
			
 
				+      margin: 20px auto 0;
			
 
				       display: flex;
			
 
				       width: 750px;
			
 
				       height: 450px;
			
@@ -291,7 +293,7 @@ export default {
 
				       padding: 30px 50px;
			
 
				       border-radius: 3px;
			
 
				       width: 100%;
			
 
				-      height: 610px;
			
 
				+      height: 530px;
			
 
				       background-color: rgba(22, 84, 145, 0.5);
			
 
				       color: #fff;
			
 
				       .topicTxt {
			
@@ -398,7 +400,7 @@ export default {
 
				       color: #fff;
			
 
				       .tini {
			
 
				         position: absolute;
			
 
				-        top: 10px;
			
 
				+        top: 60px;
			
 
				         left: 10px;
			
 
				       }
			
 
				       & > div {
			
@@ -441,6 +443,7 @@ export default {
 
				       padding-top: 70px;
			
 
				       .top {
			
 
				         margin-bottom: 5px;
			
 
				+        margin-top: 0;
			
 
				       }
			
 
				       .begin {
			
 
				         width: 100%;
			
--- a/web/src/views/gui/component/quality.vue
+++ b/web/src/views/gui/component/quality.vue
@@ -98,6 +98,7 @@ export default {
 
				   height: 100vh;
			
 
				   .main {
			
 
				     padding: 20px;
			
 
				+    padding-top: 100px;
			
 
				     border-radius: 3px;
			
 
				     position: absolute;
			
 
				     top: 50%;
			
@@ -105,8 +106,9 @@ export default {
 
				     transform: translate(-50%, -50%);
			
 
				     z-index: 9999;
			
 
				     width: 1100px;
			
 
				-    height: 700px;
			
 
				-    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
			
 
				+    height: 800px;
			
 
				+    background: url("../../../assets/img/bg.png");
			
 
				+    background-size: 100% 100%;
			
 
				   }
			
 
				   .top {
			
 
				     margin-bottom: 20px;
			
--- a/web/src/views/gui/component/remove.vue
+++ b/web/src/views/gui/component/remove.vue
@@ -0,0 +1,99 @@
 
				+<!--  -->
			
 
				+<template>
			
 
				+  <div class="remove">
			
 
				+    <div class="main">
			
 
				+      <div class="top">
			
 
				+        <h2>开心消消乐</h2>
			
 
				+        <i class="el-icon-close" @click="$emit('close')"></i>
			
 
				+      </div>
			
 
				+
			
 
				+      <iframe src="/remove/index.html" frameborder="0"></iframe>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: "remove",
			
 
				+  components: {},
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {};
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  //方法集合
			
 
				+  methods: {},
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {},
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.remove {
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  z-index: 9999;
			
 
				+  width: 100vw;
			
 
				+  height: 100vh;
			
 
				+  .main {
			
 
				+    padding: 20px;
			
 
				+    padding-top: 70px;
			
 
				+    border-radius: 3px;
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    z-index: 9999;
			
 
				+    width: 650px;
			
 
				+    height: 700px;
			
 
				+    background: url("../../../assets/img/bg.png");
			
 
				+    background-size: 100% 100%;
			
 
				+    .top {
			
 
				+      display: flex;
			
 
				+      margin: 10px 0 5px;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+      color: #165491;
			
 
				+      font-weight: 700;
			
 
				+      font-size: 22px;
			
 
				+      & > i {
			
 
				+        cursor: pointer;
			
 
				+        font-size: 30px;
			
 
				+      }
			
 
				+    }
			
 
				+    iframe {
			
 
				+      width: 100%;
			
 
				+      height: 93%;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+@media only screen and (max-width: 800px) {
			
 
				+  .remove{
			
 
				+    .main{
			
 
				+      padding: 0;
			
 
				+      padding-top: 50px;
			
 
				+      width: 100%;
			
 
				+      height: 520px;
			
 
				+      .top{
			
 
				+        padding: 0 20px;
			
 
				+      }
			
 
				+    }
			
 
				+    iframe{
			
 
				+      width: 100%;
			
 
				+      height: 480px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/web/src/views/gui/component/share.vue
+++ b/web/src/views/gui/component/share.vue
@@ -77,17 +77,19 @@ export default {
 
				   height: 100vh;
			
 
				   .main {
			
 
				     padding: 20px;
			
 
				+    padding-top: 120px;
			
 
				     border-radius: 3px;
			
 
				     position: absolute;
			
 
				     top: 50%;
			
 
				     left: 50%;
			
 
				     transform: translate(-50%, -50%);
			
 
				     z-index: 9999;
			
 
				-    width: 500px;
			
 
				-    height: 220px;
			
 
				-    background: url("../../../assets/img/bg.png") no-repeat left bottom #b7cdd9;
			
 
				+    width: 394px;
			
 
				+    height: 392px;
			
 
				+    background: url("../../../assets/imgM/game.png");
			
 
				+    background-size: 100% 100%;
			
 
				     .top {
			
 
				-      margin-bottom: 20px;
			
 
				+      margin-bottom: 50px;
			
 
				       display: flex;
			
 
				       justify-content: space-between;
			
 
				       align-items: center;
			
@@ -123,6 +125,7 @@ export default {
 
				   .share{
			
 
				     .main{
			
 
				       width: 100%;
			
 
				+      max-width: 375px;
			
 
				     }
			
 
				   }
			
 
				 }
			
--- a/web/src/views/gui/menu.vue
+++ b/web/src/views/gui/menu.vue
@@ -335,8 +335,8 @@
 
				     <Share v-if="isShare" @close="isShare = false" />
			
 
				     <!-- 顶部的名字还有浏览人数 -->
			
 
				     <Browse />
			
 
				-    <!-- 答题 -->
			
 
				-    <Issue v-if="isIssue" @close="isIssue = false" />
			
 
				+    <!-- 游戏 -->
			
 
				+    <Game v-if="isIssue" @close="isIssue = false"/>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
@@ -344,9 +344,9 @@
 
				 import Share from "./component/share";
			
 
				 import Quality from "./component/quality";
			
 
				 import Browse from "./component/browse";
			
 
				-import Issue from "./component/issue";
			
 
				+import Game from "./component/game";
			
 
				 export default {
			
 
				-  components: { Quality, Share, Browse, Issue },
			
 
				+  components: { Quality, Share, Browse,Game  },
			
 
				   data() {
			
 
				     return {
			
 
				       mobilShow: false,
			
@@ -362,7 +362,7 @@ export default {
 
				       isGame: false,
			
 
				       // 控制分享
			
 
				       isShare: false,
			
 
				-      // 控制答题
			
 
				+      // 控制游戏
			
 
				       isIssue: false,
			
 
				     };
			
 
				   },