HTML5小游戏之见缝插针
今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插，直到你无处可插！看你能过多少关！
简洁大气 黑白搭配
游戏画面非常的简洁，米白色的背景中央，放置着一个不断旋转的太阳状的球体，周边网状似的放射连接着许多小球，又有点宇宙中星球的感觉，所有球体均以黑色为主，与米白色的背景产生出了鲜明的对比，在一定程度上，为玩家带来了一定的视觉冲击感。
试玩一下：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小游戏之见缝插针的更多相关文章
- 推荐10款超级有趣的HTML5小游戏
HTML5的发展速度比任何人的都想像都要更快.更加强大有效的和专业的解决方案已经被开发......甚至在游戏世界中!这里跟大家分享有10款超级趣味的HTML5游戏,希望大家能够喜欢! Kern Typ ...
- HTML5小游戏UI美化版
HTML5小游戏[是男人就下一百层]UI美化版 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍 ...
- 通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）
亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为 ...
- HTML5小游戏源码收藏
html5魅族创意的贪食蛇游戏源码下载 html5网页版打砖块小游戏源码下载 html5 3D立体魔方小游戏源码下载 html5网页版飞机躲避游戏源码下载 html5三国人物连连看游戏源码下载 js ...
- 菜鸟做HTML5小游戏 - 翻翻乐
记录下开放过程.做小游戏开发,又要跨平台,flash又不支持iPhone,html5是最好的选择. 先看看最后效果: 好了,开始demo. 1.准备工作: 图片素材(省略...最后代码一起打包) 了解 ...
- Html5 小游戏 俄罗斯方块
导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...
- HTML5小游戏【是男人就下一百层】UI美化版
之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的. 结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下. 介绍一下几个主要的类: Frame:帧的定义,主要描 ...
- HTML5小游戏-简单抽奖小游戏
换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏. ...
- 突发奇想想学习做一个HTML5小游戏
前言: 最近一期文化馆轮到我分享了,分享了两个,一个是关于童年教科书的回忆,一个是关于免费电子书的.最后我觉得应该会不敌web,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代. ...
随机推荐
- 剑指Offer面试题：12.在O(1)时间删除链表结点
一.题目:在O(1)时间删除链表结点 题目:给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该结点. 原文采用的是C/C++,这里采用C#,节点定义如下: public class ...
- 细嗅Promise
读完这篇文章,预计会消耗你 40 分钟的时间. Ajax 出现的时候,刮来了一阵异步之风,现在 Nodejs 火爆,又一阵异步狂风刮了过来.需求是越来越苛刻,用户对性能的要求也是越来越高,随之而来的是 ...
- Azure PowerShell (7) 使用CSV文件批量设置Virtual Machine Endpoint
<Windows Azure Platform 系列文章目录> 请注意: - Azure不支持增加Endpoint Range - 最多可以增加Endpoint数量为150 http:// ...
- CI框架搭建
CI 框架等移植到不同等环境十分方便,只要改很少等配置: 1.修改config.php 文件(修改这一个文件就可以跑通了): $config['base_url'] = 'http://127.0.0 ...
- EF：打开Oracle连接时报错
基础提供程序在 Open 上失败. The underlying provider failed on Open. 解决:安装最新的ODTwithODAC121024.
- 《Entity Framework 6 Recipes》中文翻译系列 (33) ------ 第六章 继承与建模高级应用之TPH与TPT (2)
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 6-8 嵌套的TPH建模 问题 你想使用超过一层的TPH继承映射为一张表建模. 解 ...
- Java 浅析三大特性之一继承
上文Java 浅析三大特性之一封装我们说到Java是一个注重编写类,注重于代码和功能复用的语言.Java实现代码复用的方式有很多,这里介绍一个重要的复用方式--继承. 在介绍继承之前,我们要明确一点, ...
- Java this的一两点使用
Java this的一两点使用 之前的文章都是关于Android的使用,这次想写一些关于Java的知识,总结一下Java的使用.这次写的是关于Java this的使用,介绍以下内容: this的概念 ...
- RequireJS学习笔记
前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...
- Spring MVC和CXF集成
前提: 1.spring mvc环境已搭建好,能跑起来. 2.下载apache-cxf-2.7.3.zip的压缩包,解压apache-cxf-2.7.3.zip压缩包,拷贝如下几个jar包即可. 配置 ...