{"id":737,"date":"2017-03-06T16:50:06","date_gmt":"2017-03-06T08:50:06","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=737"},"modified":"2017-03-06T16:25:35","modified_gmt":"2017-03-06T08:25:35","slug":"h5%e5%ae%9e%e7%8e%b0%e5%bc%b9%e7%90%83%e6%b8%b8%e6%88%8f%ef%bc%8c%e8%b6%85%e5%a5%bd%e7%8e%a9","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=737","title":{"rendered":"h5\u5b9e\u73b0\u5f39\u7403\u6e38\u620f\uff0c\u8d85\u597d\u73a9"},"content":{"rendered":"<pre class=\"brush:html;toolbar:false\">&lt;!doctype html&gt;\r\n&lt;head&gt;\r\n  &lt;style type=\"text\/css\"&gt;\r\n    .panel{\r\n      position: relative;\r\n      z-index: 0;\r\n      top:0px;\r\n      left: 400px;\r\n      width: 300px;\r\n      height: 500px;\r\n    }\r\n    .console{\r\n      position: absolute;\r\n      z-index: 1;\r\n      top:0;\r\n      left:0;\r\n      width:100%;\r\n      height: 40px;\r\n      background-color: #bbb;\r\n    }\r\n    .message{\r\n      position: absolute;\r\n      z-index: 1;\r\n      top:40px;\r\n      left:0;\r\n      width:100%;\r\n      height: 460px;\r\n      color: white;\r\n      font-size: 50px;\r\n      text-align: center;\r\n      line-height: 460px;\r\n      background-color: #999;\r\n    }\r\n    .start,.score,.pause{\r\n      position: absolute;\r\n      z-index: 2;\r\n      top: 0;\r\n      width: 100px;\r\n      height: 100%;\r\n      font-size: large;\r\n      color: white;\r\n      text-align: center;\r\n      line-height: 40px;\r\n      background: -webkit-linear-gradient(top,#4ca8ff,yellow);\r\n    }\r\n    .start{\r\n      left: 0px;\r\n    }\r\n    .score{\r\n      left:100px;\r\n      background-color: red;\r\n    }\r\n    .pause{\r\n      left:200px;\r\n    }\r\n    .start:after,.pause:before{\r\n      content: \"\";\r\n      position: absolute;\r\n      z-index: 2;\r\n      top: 0;\r\n      width: 3px;\r\n      height: 100%;\r\n      background: -webkit-linear-gradient(top,#666,#999);\r\n    }\r\n    .start:after{\r\n      left: 97px;\r\n    }\r\n    .pause:before{\r\n      left: 0px;\r\n    }\r\n    .start:hover,.pause:hover{\r\n      cursor: pointer;\r\n      background: -webkit-linear-gradient(top,#4ca8ff,red);\r\n    }\r\n    .panel span{\r\n      position: absolute;\r\n      z-index: 0;\r\n      top:50%;\r\n      left: 50%;\r\n      font-size: 50px;\r\n      color: blue;\r\n    }\r\n    .ball,.secondBall{\r\n      position:absolute;\r\n      z-index: 2;\r\n      border-radius:50%;\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n    .ball{\r\n      top: 460px;\r\n      left:140px;\r\n      background-color: red;\r\n    }\r\n    .secondBall{\r\n      top: 40px;\r\n      left:140px;\r\n      background-color: red;\r\n    }\r\n    .plate{\r\n      position: absolute;\r\n      top:480px;\r\n      left: 100px;\r\n      z-index: 2;\r\n      width: 100px;\r\n      height: 20px;\r\n      background-color: #e5e5e5;\r\n    }\r\n    .promte{\r\n      margin-top: 20px;\r\n      text-align: center;\r\n    }\r\n  &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div id=\"panel\" class=\"panel\"&gt;\r\n    &lt;div class=\"console\"&gt;\r\n      &lt;div id=\"start\" class=\"start\"&gt;\u5f00\u59cb&lt;\/div&gt;\r\n      &lt;div id=\"score\" class=\"score\"&gt;0&lt;\/div&gt;\r\n      &lt;div id=\"pause\" class=\"pause\"&gt;\u6682\u505c&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div id=\"message\" class=\"message\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"ball\" class=\"ball\"&gt;&lt;\/div&gt;\r\n    &lt;div id=\"plate\" class=\"plate\"&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"promte\"&gt;\u63d0\u793a\uff1a\u952e\u76d8\u5de6\u53f3\u7bad\u5934\u63a7\u5236\u6ed1\u677f&lt;\/div&gt;\r\n  &lt;script  type=\"text\/javascript\"&gt;\r\n  \/\/ \u524d\u7aefABC-qdabc.cn\r\n    (function(){\r\n      document.onkeydown = function(e){\r\n        var e = e || window.event;\r\n        if(e.keyCode == 37){\r\n          \/\/\u952e\u76d8\u5411\u5de6\u952e\r\n          plateMove(\"left\");\r\n        }else if(e.keyCode == 39){\r\n          \/\/\u952e\u76d8\u5411\u53f3\u952e\r\n          plateMove(\"right\");\r\n        }\r\n      }\r\n    })();\r\n    var panel = document.getElementById(\"panel\"),\r\n      message = document.getElementById(\"message\"),\r\n      plate = document.getElementById(\"plate\"),\r\n      ball = document.getElementById(\"ball\"),\r\n      start = document.getElementById(\"start\"),\r\n      score = document.getElementById(\"score\"),\r\n      pause = document.getElementById(\"pause\"),\r\n      secondBall;\r\n    var startGame, x = x2 = -1, y = y2 = -1, speed = 1, positionArr = [], pauseActive = false,\r\n      \/\/\u4e00\u4e2a\u6807\u5fd7\uff1a\u8868\u793a\u96be\u5ea6\u662f\u5426\u8fd8\u80fd\u589e\u52a0\r\n      flag = true,\r\n      \/\/\u7403\u7684\u8d77\u59cb\u4f4d\u7f6e\r\n      ballX, ballY, secondBallX, secondBallY,\r\n      \/\/\u8fb9\u754c\r\n      minX = 0,\r\n      maxX = panel.offsetWidth - ball.offsetWidth,\r\n      minY = 40;\r\n      maxY = panel.offsetHeight - ball.offsetHeight - plate.offsetHeight;\r\n    window.onload = function(){\r\n      if(window.addEventListener){\r\n        start.addEventListener(\"click\",startClick,false);\r\n        pause.addEventListener(\"click\",pauseClick,false);\r\n      }else if(window.attachEvent){\r\n        start.attachEvent(\"onclik\",startClick);\r\n        pause.attachEvent(\"onclik\",pauseClick);\r\n      }else{\r\n        start.onclik = startClick;\r\n        pause.onclik = pauseClick;\r\n      }\r\n    }\r\n    \r\n    function plateMove(direction){\r\n      if(direction == \"left\"){\r\n        if(plate.offsetLeft &gt; 0){\r\n          plate.style.left = (plate.offsetLeft-30 &lt; 0? 0 : plate.offsetLeft-30)+\"px\";\r\n        }\r\n      }\r\n      if(direction == \"right\"){\r\n        if(plate.offsetLeft &lt; 200){\r\n          plate.style.left = (plate.offsetLeft+30 &gt; 200? 200 : plate.offsetLeft+30)+\"px\";\r\n        }\r\n      }\r\n    }\r\n    function startClick(){\r\n      if(!pauseActive){\r\n        resetGame();\r\n      }else{\r\n        pauseActive = !pauseActive;\r\n      }\r\n      startGame = setInterval(function(){\r\n        \/\/console.log(ballX+\"======\"+ballY);\r\n        positionArr = setPosition(ballX,ballY,true);\r\n        if(positionArr == \"GAMEOVER\"){\r\n          return;\r\n        }\r\n        ballX = positionArr[0];\r\n        ballY = positionArr[1];\r\n        \/\/\u8bbe\u7f6e\u7403\u7684\u4f4d\u7f6e\r\n        ball.style.left = ballX+\"px\";\r\n        ball.style.top = ballY+\"px\";\r\n        if(!flag){\r\n          positionArr = setPosition(secondBallX,secondBallY,false);\r\n          secondBallX = positionArr[0];\r\n          secondBallY = positionArr[1];\r\n          secondBall.style.left = secondBallX+\"px\";\r\n          secondBall.style.top = secondBallY+\"px\";\r\n        }else{\r\n          addDifficulty();\r\n        }\r\n      },30);\r\n    }\r\n    function pauseClick(){\r\n      pauseActive = true;\r\n      clearInterval(startGame);\r\n    }\r\n\r\n    function resetGame(){\r\n      clearInterval(startGame);\r\n      message.innerHTML=\"\";\r\n      score.innerHTML=\"0\";\r\n      ball.style.left = \"140px\";\r\n      ball.style.top = \"460px\";\r\n      plate.style.left = \"100px\";\r\n      plate.style.top = \"480px\";\r\n      ballX = ball.offsetLeft;\r\n      ballY = ball.offsetTop;\r\n      speed = 1;\r\n      flag = true;\r\n      \/\/\u7b2c\u4e8c\u4e2a\u7403\u8bbe\u7f6e\u9690\u85cf\r\n      if(secondBall){\r\n        secondBall.style.display=\"none\";\r\n        secondBall.style.left = \"140px\";\r\n        secondBall.style.top = \"40px\";\r\n      }\r\n    }\r\n\r\n    function addDifficulty(){\r\n      if(parseInt(score.innerHTML) &gt; 500 &amp;&amp; parseInt(score.innerHTML) &lt; 2000){\r\n        speed = 1.2;\r\n      }else if(parseInt(score.innerHTML) &gt; 2000 &amp;&amp; parseInt(score.innerHTML) &lt; 5000){\r\n        speed = 1.5;\r\n      }else if(parseInt(score.innerHTML) &gt; 5000){\r\n        if(typeof secondBall != \"undefined\"){\r\n          secondBall.style.display=\"\";\r\n        }else{\r\n          secondBall = document.createElement('div');\r\n        }\r\n        \r\n        secondBall.className = 'secondBall';\r\n        panel.appendChild(secondBall);\r\n        secondBallX = secondBall.offsetLeft;\r\n        secondBallY = secondBall.offsetTop;\r\n        flag = false;\r\n      }\r\n    }\r\n    function setPosition(_x,_y,firstball){\r\n      if(_x == minX || _x == maxX){\r\n        \/\/x*=-1;\r\n        firstball? x*=-1 : x2*=-1;\r\n      }\r\n      if(_y == minY || _y == maxY){\r\n        \/\/y*=-1;\r\n        firstball? y*=-1 : y2*=-1;\r\n      }\r\n      if(_y == maxY){\r\n        \/\/\u5224\u65ad\u6321\u677f\u7684\u4f4d\u7f6e\u662f\u4e0d\u662f\u5728\u7403\u7684\u8303\u56f4\u5185\r\n        if(plate.offsetLeft &gt; _x || (plate.offsetLeft + plate.offsetWidth) &lt; _x){\r\n          clearInterval(startGame);\r\n          message.innerHTML=\"GAMEOVER\";\r\n          return \"GAMEOVER\";\r\n        }\r\n      }\r\n      if(firstball){\r\n        _x+=4*x*speed;\r\n        _y+=5*y*speed;\r\n      }else{\r\n        _x+=4*x2*speed;\r\n        _y+=5*y2*speed;\r\n      }\r\n      \r\n      \/\/\u8fb9\u754c\u5904\u7406\r\n      _x = _x &lt; minX? minX : _x;\r\n      _x = _x &gt; maxX? maxX : _x;\r\n      \r\n      _y = _y &lt; minY? minY : _y;\r\n      _y = _y &gt; maxY? maxY : _y;\r\n      \/\/\u8bbe\u7f6e\u5206\u6570\r\n      score.innerHTML=parseInt(score.innerHTML)+10*speed;\r\n      return [_x,_y];\r\n    }\r\n  &lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p class=\"post-copyright\">\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a<a href=\"http:\/\/www.qdabc.cn\">\u524d\u7aefABC<\/a> &raquo; <a href=\"http:\/\/www.qdabc.cn\/?p=737\">h5\u5b9e\u73b0\u5f39\u7403\u6e38\u620f\uff0c\u8d85\u597d\u73a9<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>&lt;!doctype html&gt; &lt;head&gt; &lt;style type=&#8221;text\/css&#8221;&gt; .panel{ position: relative; z-index [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":317,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,3],"tags":[156,175],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/737"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=737"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/737\/revisions"}],"predecessor-version":[{"id":738,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/737\/revisions\/738"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/317"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=737"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=737"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}