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

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

试玩一下：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. eclipse下打包实践

    前提: 配置好打包相关的插件,看打包的结果分别添加不同的plugin,装好m2eclipse. 以下步骤以war包的packing为例. 步骤: 如下图:右键,选择Run As 或者 Debug As ...

  2. [CORS：跨域资源共享] 同源策略与JSONP

    Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...

  3. Elasticsearch查询——布尔查询Bool Query

    Elasticsearch在2.x版本的时候把filter查询给摘掉了,因此在query dsl里面已经找不到filter query了.其实es并没有完全抛弃filter query,而是它的设计与 ...

  4. Spring学习记录(五)---bean的作用域scope

    作用域:singleton:单例,整个应用中只创建一个实例(默认) prototype:原型,每次注入时都新建一个实例 session:会话,每个会话创建一个实例 request:请求,每个请求创建一 ...

  5. 关于ie11 的开发者工具

    win7旗舰系统64为,更新ie11: 新安装了ie11浏览器,安装以后发现原来可以正常使用的开发者工具不能使用,提示 Imposible use F12 Developer Tools (Excep ...

  6. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  7. OpenCascade Chinese Text Rendering

    OpenCascade Chinese Text Rendering eryar@163.com Abstract. OpenCascade uses advanced text rendering ...

  8. String,StringBuffer与StringBuilder的区别??

    转自http://blog.csdn.net/rmn190/article/details/1492013 String 字符串常量 StringBuffer 字符串变量(线程安全) StringBu ...

  9. IOS遍历网页获取网页中<img>标签中的图片url

    前言: 项目中遇见一个需求遍历网页中所有的<img>标签并且去处图片的url 第一步:编写获取<img >标签的正则表达式,代码如下: -(NSArray*)getImgTag ...

  10. PHP精选数组函数

    编程怎么能少的了数组呢,以下是学习PHP时常用的数组处理函数.在编程中要遵循一个原则就是DRY(Don`t Repeat Yourself)原则,PHP中有大量的函数,都记住这些函数不太现实,但常用的 ...