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

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

试玩一下：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. python字符串的使用

    之前在网上看了关于python最基础的一些教程,看着都通俗易懂,但是在写的过程中却感觉还是很生涩.关于字符串的使用还是应该多写多练!如何将“teacher_id = 123 #老师ID”转换成字典或者 ...

  2. OstrichNet 简易统计信息收集工具

    Ostrich 是twitter用于监控服务器性能的一个scala库,项目地址https://github.com/twitter/ostrich, 主要功能是收集.展示统计信息, 同时也提供了关闭服 ...

  3. 一劳永逸：域名支持通配符，ASP.NET Core中配置CORS更轻松

    ASP.NET Core 内置了对 CORS 的支持,使用很简单,只需先在 Startup 的 ConfigureServices() 中添加 CORS 策略: public void Configu ...

  4. Java NIO5：选择器1---理论篇

    选择器 最后,我们探索一下选择器.由于选择器内容比较多,所以本篇先偏理论地讲一下,后一篇讲代码,文章也没有什么概括.总结的,写到哪儿算哪儿了,只求能将选择器写明白,并且将一些相对重要的内容加粗标红. ...

  5. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  6. [.net 面向对象编程基础] (1) 开篇

    [.net 面向对象编程基础] (1)开篇 使用.net进行面向对象编程也有好长一段时间了,整天都忙于赶项目,完成项目任务之中.最近偶有闲暇,看了项目组中的同学写的代码,感慨颇深.感觉除了定义个类,就 ...

  7. Android APK是否需要预解压

    今天在逛论坛的时候,发现有一个朋友问的问题.其主要目的,是想实现 玩家首次进入游戏的时候,或者新安装了版本的时候,对APK进行解压,写入SD卡.这样游戏运行过程中,将不会再从APK中读取资源. 以提高 ...

  8. .NET陷阱之六：从枚举值持久化带来大量空间消耗谈起

    好长时间没有写博文了,今天继续. 这次跟大家分享的内容起因于对一个枚举值列表的序列化,下面简化后的代码即能重现.为了明确起见,我显式指定了枚举的基础类型. // 定义一个枚举类型. public en ...

  9. Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob

    <Windows Azure Platform 系列文章目录> 请读者在参考本文之前,预习相关背景知识:Windows Azure Storage (1) Windows Azure St ...

  10. Azure SQL Database (22) 迁移部分数据到Azure Stretch Database

    <Windows Azure Platform 系列文章目录>  Azure SQL Database (19) Stretch Database 概览      Azure SQL Da ...