HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插，直到你无处可插！看你能过多少关！
简洁大气 黑白搭配
游戏画面非常的简洁，米白色的背景中央，放置着一个不断旋转的太阳状的球体，周边网状似的放射连接着许多小球，又有点宇宙中星球的感觉，所有球体均以黑色为主，与米白色的背景产生出了鲜明的对比，在一定程度上，为玩家带来了一定的视觉冲击感。
试玩一下：http://hovertree.com/texiao/game/
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1" /> <title>虐心小游戏 见缝插针 - 何问起</title><base target="_blank" /> <meta charset="utf-8" /> <style> body { background-color: #c8c8c8; overflow:scroll; padding: 0; margin: 0; font-family:Helvetica; font-family: Lato; } .center-box { text-align: center; position: absolute; width: 300px; height: 400px; margin: -200px 0 0 -150px; left: 50%; top: 400px; } .title { font-size: 50px; } .button { position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin: -100px 0 0 -50px; border: 2px solid #666; color: #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; font-size: 50px; background: orange; cursor:pointer } .button .text { font-size: 15px; padding: 15px 10px; width: 80px } .tips { position: absolute; width: 300px; height: 63px; left: 100px; top: 27%; margin: -50px 0 0 -100px; } .lee_button1 { z-index: 999; border: 1px solid #0e0e0e; border-radius: 10px; color: #242424; display: block; font-size: 18px; height: 37px; left: 48%; line-height: 37px; margin: -100px 0 0 -75px; position: absolute; top: 93%; width: 160px; cursor:pointer; display:none } .lee_button2 { border: 1px solid #0e0e0e; border-radius: 10px; color: #242424; display: block; font-size: 18px; height: 37px; left: 48%; line-height: 37px; margin: -100px 0 0 -75px; position: absolute; top: 106%; width: 160px; cursor:pointer; } .lee_button3 { border: 1px solid #fd3207; border-radius: 10px; color: #fd3207; display: block; font-size: 18px; height: 37px; left: 48%; line-height: 37px; margin: -100px 0 0 -75px; position: absolute; top: 80%; width: 160px; z-index: 999; display:none } #lvnew { position:absolute; top: 93%; left:48%; margin: -100px 0 0 -40px; } #btnReset{cursor:pointer} .hvtholder{width:789px;margin:2px auto;}a{color:blue} </style> </head> <body> <canvas style="display:none;" id="stage"></canvas> <div class="hvtholder"> <br /> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/gbsam8un.htm">原文</a> </div> <div id="begin"> <section class="center-box"> <span class="title">见缝插针</span> <div class="button"> <div id="txtAr"></div> <div class="text"></div> </div> <span name="btnFW" class="lee_button1" id="btnFW">炫耀一下</span> <a id="rehovertree" class="lee_button2">重头再来</a> <span class="lee_button3" id="btnGuanzhu" onclick="pay()" ontouchstart="pay()">跳过本关</span> <div id="lvnew" style="font-size:14px;color:#555;margin-top: 10px;display:none;"> <span id="btnReset" ontouchstart="document.getElementById('lvnew').style.display='none';return false;">确定</span> <a ontouchstart="document.getElementById('lvnew').style.display='none';return false;" id="cancelhovertree" style="display:inline-block;margin-left:30px;color:#666;cursor:pointer" class="btn_lee">取消</a> <div id="tip" style="font-size:14px;color:#555;margin-top: 15px;display:none;"></div> </div> </section> <section id="wxArrow" style="display: none;"> <div style="position:absolute;width:100%;height:100%;opacity: 0.7;background-color:#000"> </div> </section> </div> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script src="http://hovertree.com/texiao/game/index/jfczhovertree.js"></script> <script> $("#cancelh"+"overtree").on("click", function () { document.getElementById('lvnew').style.display = 'none'; return false; }) $("#rehovertr" + "ee").on("click", function () { document.getElementById('lvnew').style.display = 'block'; return false; }) $("#btnReset").on("click", function () { document.getElementById('lvnew').style.display = 'none'; return false; }) </script> </body> </html>
