今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插，直到你无处可插！看你能过多少关！
简洁大气 黑白搭配
游戏画面非常的简洁，米白色的背景中央，放置着一个不断旋转的太阳状的球体，周边网状似的放射连接着许多小球，又有点宇宙中星球的感觉，所有球体均以黑色为主，与米白色的背景产生出了鲜明的对比，在一定程度上，为玩家带来了一定的视觉冲击感。
试玩一下：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='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script><script src='/images/loading.gif' data-original="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>更多内容： http://www.cnblogs.com/roucheng/p/texiao.html
原标题：HTML5小游戏之见缝插针
关键词：HTML
我知道了 