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,只能说是自己在这中间回忆了一下那个只是会学习的年代,那个充满梦想的年代. ...
随机推荐
- 智能路由器操作系统OpenWrt
小米路由器的“MiWiFi”又让路由器成了关键词,每台智能路由器的系统是该款产品的亮点之一,其系统肯定有不少“好玩”的地方.为自己的智能路由器量身打造系统,并且纷纷开发了适合智能手机.平板电脑等使用的 ...
- HTML5- Canvas入门（四）
前几章我们学习了矩形.多边形.圆形.曲线等图形的绘制,今天来学习下更简单一些的文本绘制及其各种功能方法. 在canvas中我们可以通过 strokeText() 和 fillText() 来绘制描边文 ...
- JS原型继承和类式继承
前言 一个多月前,卤煮读了一篇翻译过来的外国人写的技术博客.此君在博客中将js中的类(构造)继承和原型继承做了一些比较,并且得出了结论:建议诸位在开发是用原型继承.文中提到了各种原型继承的优点,详细的 ...
- 关于新加坡IT薪酬
很多朋友发邮件或留言问我关于新加坡IT薪酬的问题,由于前段时间比较忙,所以没有及时一一回复,在此表示抱歉. 新加坡IT薪酬范围大概如下(月薪,新加坡币对人民币为1:5): Junior Develop ...
- 链表&LRU
简介 链表就是链式存储数据的一种数据结构.双向链表每个数据存储都包含他的前后数据节点的位置信息(索引/指针). class DSChain<T> { //使用栈来进行废弃空间回收 priv ...
- EF-DbUpdateException解决方案
图二:
- nodejs 使用fs实现多级联动
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0gAAAEdCAIAAAC5WdDhAAAgAElEQVR4nO3da3Mc153f8X4feq5lFR
- 前端工程师技能之photoshop巧用系列第二篇——测量篇
× 目录 [1]测量信息 [2]实战 [3]注意事项 前面的话 前端工程师使用photoshop进行的大量工作实际上是测量.本文是photoshop巧用系列第二篇——测量篇 测量信息 在网页制作中需要 ...
- jquery EasyUI的formatter格式化函数代码
要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt' ...
- .Net处理Oracle中Clob类型字段总结
最近在做项目中用到Clob这个字段,Clob是存储无限长字符的Oracle字段,用的时候网上找资料找了好久,内容不是很多,大部分都不能用,当然也有可以用的,测试了不同版本,整理了一下,给大家在做项目的 ...