今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插，直到你无处可插！看你能过多少关！

简洁大气 黑白搭配
游戏画面非常的简洁，米白色的背景中央，放置着一个不断旋转的太阳状的球体，周边网状似的放射连接着许多小球，又有点宇宙中星球的感觉，所有球体均以黑色为主，与米白色的背景产生出了鲜明的对比，在一定程度上，为玩家带来了一定的视觉冲击感。

试玩一下：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>

更多内容： http://www.cnblogs.com/roucheng/p/texiao.html

HTML5小游戏之见缝插针的更多相关文章

  1. 推荐10款超级有趣的HTML5小游戏

    HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...

  2. HTML5小游戏UI美化版

    HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...

  3. 通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）

    亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...

  4. HTML5小游戏源码收藏

    html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...

  5. 菜鸟做HTML5小游戏 - 翻翻乐

    记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...

  6. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  7. HTML5小游戏【是男人就下一百层】UI美化版

    之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...

  8. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  9. 突发奇想想学习做一个HTML5小游戏

    前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代. ...

随机推荐

  1. Lesson 13 The Greenwood Boys

    Text The Greenwood Boys are group of pop singers. At present, they are visiting all parts of the cou ...

  2. Unity3D游戏开发初探—1.跨平台的游戏引擎让.NET程序员新生

    一.Unity3D平台简介 Unity是由Unity Technologies开发的一个让轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的 ...

  3. Why MVC is Better？（翻译）

    (本文翻译自CodeProject上的一篇关于ASP.NET MVC的文章,原文地址:http://www.codeproject.com/Articles/821275/Webforms-vs-MV ...

  4. Generate input file for OVITO

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  5. 东哥读书小记 之 《MacTalk人生元编程》

         一直以来的自我感觉:自己是个记性偏弱的人.反正从小读书就喜欢做笔记(可自己的字写得巨丑无比,尼玛不科学呀),抄书这事儿真的就常发生俺的身上. 因为那时经常要背诵课文之类,反正为了怕自己忘记, ...

  6. Outlook HTML渲染引擎

    OutLook始终不离不弃 是不是很讨厌为Email代码兼容Outlook? 太遗憾了!虽然光都有尽头,但Outlook始终存在. 为了应付Email的怪癖,我们花了很多时间测试,确保我们搞定了所有O ...

  7. hibernate注解方法使用总结（转）

    原博文地址:http://blog.sina.com.cn/s/blog_935ebb670101dnre.html 1.类级别注解 @Entity     映射实体类 @Table    映射数据库 ...

  8. 如何在多线程leader-follower模式下正确的使用boost::asio。

    #include <assert.h> #include <signal.h> #include <unistd.h> #include <iostream& ...

  9. Android ImageView图片透明区域不响应点击事件，不规则图片透明区域响应点击事件

    转载:http://blog.csdn.net/aminfo/article/details/7872681 经常会在项目中用到透明图片,不规则图片,特别是做游戏的时候,需要对图片的透明区域的点击事件 ...

  10. document.getElementById()与 $()区别

    document.getElementById()返回的是DOM对象,而$()返回的是jQuery对象 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象.jQuery对象 ...