HTML5小游戏之见缝插针

今天给大家带来的就是一款叫做《见缝插针》的游戏。有空你就往里插,直到你无处可插!看你能过多少关!简洁大气黑白搭配游戏画面非常的简洁,米白色的背景中央,放置着一个不断旋转的太阳状的球体,周边网状似的放

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

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

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

 

试玩一下: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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120687.html原文链接:https://javaforall.net

(0)
上一篇 2021年12月21日 下午2:00
下一篇 2021年12月21日 下午3:00


相关推荐

  • opc服务器不显示目录,opc客户端搜不到opc服务器

    opc服务器不显示目录,opc客户端搜不到opc服务器opc客户端搜不到opc服务器内容精选换一换ELB可以针对客户访问的业务为访问者提供个性化的管理策略,制定策略之前需要获取来访者的真实IP。TOA内核模块主要用来获取ELB转化过的访问者真实IP地址(仅支持IPv4),该插件安装在ELB后端服务器。本文档仅适用于四层(TCP协议)服务,当客户需要在操作系统中编译TOA内核模块时,可参考本文档进行配置。Linux内核版本为2.6.32块存储调优主要…

    2022年6月20日
    36
  • sdn小结(一)_SDN的基本概念

    sdn小结(一)_SDN的基本概念看了一周的sdn,写下一点总结和心得体会。1.sdn中不一定非得用openflow来作为南向协议,其他的南向接口协议还有很多,比如pcep,netconf,snmp,bgp-ls2.segmentrouting也需要一个集中的控制器,只要硬件条件支持,sr可以和sdn进行结合3.ECMP通过对流的数据包头部进行哈希取模运算,将数据流映射到不同的转发路径4.谷歌的B4采取的是i…

    2025年9月24日
    7
  • android开发股票数据接口,股票数据接口-股票数据接口api「建议收藏」

    原标题:股票数据接口-股票数据接口api量亿数据专注金融领域API数据接口,其中包括期货、股票、期权、外汇等,只需要注册即可申请使用。免费申请网址:http://www.liangyee.com/如何获取股票数据,股票数据接口-股票数据接口api,以美股API数据接口为例。5分钟K线接口地址:http://stock.liangyee.com/bus-api/USStock/marketData/…

    2022年4月7日
    50
  • 所谓的代码段、数据段

    所谓的代码段、数据段

    2021年8月20日
    63
  • 开启1521端口监听_Oracle数据库常用命令、Linux监听配置、Oracle linux下开放1521端口…

    开启1521端口监听_Oracle数据库常用命令、Linux监听配置、Oracle linux下开放1521端口…一、Linux下Oracle数据库常用命令Oracle用户下执行:$sqlplussystem/manager@file.sql执行sql脚本文件$sqlplussystem/manager登录sqlplus,使用system用户$sqlplus/nolog以不连接数据库的方式启动sqlplus,启动数据时会用到$lsnrctlstatus/stop/startOrac…

    2022年6月7日
    47
  • SLAM算法调研「建议收藏」

    SLAM算法调研「建议收藏」作为一名机器人运行控制算法工程师,SLAM算法的调研已初步完成,特意分享。

    2022年6月16日
    49

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号