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

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

试玩一下：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. Android中SQLite数据库小计

    2016-03-16 Android数据库支持 本文节选并翻译<Enterprise Android - Programing Android Database Applications for ...

  2. 打造程序员的高效生产力工具-mac篇

    打造程序员的高效生产力工具-mac篇 1   概述 古语有云:“工欲善其事,必先利其器” [1] ,作为一个程序员,他最重要的生产资源是脑力知识,最重要的生产工具是什么?电脑. 在进行重要的脑力成果输 ...

  3. MySQL 清空慢查询文件

    标签:配置慢查询 概述 本章主要写当慢查询文件很大的时候怎样在线生成一个新的慢查询文件. 测试环境:mysql 5.6.21 步骤 配置慢查询 默认的my.cnf文件在/etc/目录下 vim /et ...

  4. Web3DGame之路，Babylonjs 和TypeScript学习笔记（一）

    一个开源的Webgl3D引擎,javascript or typescript http://www.babylonjs.com 啥是WebGL WebGL 网页图形库,简称WebGL,是一个JS库, ...

  5. Android开发学习之路-Android Studio真神器！

    放假之后电脑配置升级就开始用Android Studio(下面简称AS)了,那个酸爽真的不是一般的啊,这里开一篇博客来记录下AS里面各种酷炫的功能,有更好玩的,大家不要吝啬,评论告诉我吧! 最近And ...

  6. 页面静态化技术Freemarker技术的介绍及使用实例.

    一.FreeMarker简介 1.动态网页和静态网页差异 在进入主题之前我先介绍一下什么是动态网页,动态网页是指跟静态网页相对应的一种网页编程技术.静态网页,随着HTML代码的生成,页面的内容和显示效 ...

  7. 使用Emit把Datatable转换为对象集合(List<T>)

    Emit生成动态方法部分摘自网上,但是经过修改,加入了对委托的缓存以及类结构的调整,使之调用更简洁方便.大致的思路是:要实现转换datatable到某个指定对象的集合,本质是实现转换一个datarow ...

  8. 详解 JavaScript的 call() 和 apply()

    定义 ECMAScript规范为所有函数都包含两个方法(这两个方法非继承而来), call 和 apply .这两个函数都是在特定的作用域中调用函数,能改变函数的作用域,实际上是改变函数体内 this ...

  9. storm 集群配置

    配置storm集群的过程中出现写问题,记录下来 1.storm是通过zookeeper管理的,先要安装zookeeper,从zk官网上下来,我这里下下来的的3.4.9,下载后移动到/usr/local ...

  10. mock.js

    mock.js http://mockjs.com/ https://github.com/nuysoft/Mock/wiki 为了完成angularjs的karma测试,看到这个好东东,这货能拦截a ...