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

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

试玩一下：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. SQL Server通过File Header Page来进行Crash Recovery

    SQL Server通过File Header Page来进行Crash Recovery 看了盖总的一篇文章 http://www.eygle.com/archives/2008/11/oracle ...

  2. 公司内部培训SQL Server传统索引结构PPT分享

    公司内部培训SQL Server传统索引结构PPT分享 下载地址 http://files.cnblogs.com/files/lyhabc/SQLServer%E4%BC%A0%E7%BB%9F%E ...

  3. 夜深了，写了个JQuery的省市区三级级联效果

    刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...

  4. 剑指Offer面试题：8.斐波那契数列

    一.题目:斐波那契数列 题目:写一个函数,输入n,求斐波那契(Fibonacci)数列的第n项.斐波那契数列的定义如下: 二.效率很低的解法 很多C/C++/C#/Java语言教科书在讲述递归函数的时 ...

  5. 翻译-使用Ratpack和Spring Boot打造高性能的JVM微服务应用

    这是我为InfoQ翻译的文章,原文地址:Build High Performance JVM Microservices with Ratpack & Spring Boot,InfoQ上的中 ...

  6. Express4 启航指南

    确实有感而发,Nodejs真的发展太快了,这么说的原因有两点:自己去年冬天买了本<了不起的Node.js>,里面介绍Express的版本还是2.x.x:前些天小伙伴买了本<Node. ...

  7. Java 浅析内部类

    这篇文章主要讲述Java 内部类的相关知识,主要讲解下面的知识点. 内部类的概念 内部类的特点与使用 多种形式内部类 为什么要使用内部类 内部类的概念 内部类是指在一个类的内部定义了另一个类.例如下面 ...

  8. 【原】安装Win7和Ubuntu双系统后，Win7耳机无声音的解决办法

    最近安装了Ubuntu的桌面版,作成了双系统,可是发现了一个问题:进入Win7后有时插耳机会没有声音,外放有声音.后来更新驱动也没有解决问题,最后在网上查到了解决办法. 产生原因:进入Ubuntu后, ...

  9. EL

  10. Nginx服务器之 Nginx的基本配置

    本文使用 Linux centos系统 一.Nginx虚拟主机的配置 虚拟主机:通常情况下,为了使每个服务器可以供更多用户使用,可以将一个服务器分为很多虚拟的子服务器,每个子服务器都是互相独立的.这些 ...