HTML5小游戏之见缝插针

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

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

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 文件上传文件的权限–lnmp 环境配置,尤其整个项目复制过来

    文件上传文件的权限–lnmp 环境配置,尤其整个项目复制过来

    2021年10月27日
  • 嵌套查询效率_sql嵌套查询例子

    嵌套查询效率_sql嵌套查询例子嵌套查询的查询优化TableofContents1.嵌套查询的分类和优化概述2.Kim:OnOptimizinganSQL-likeNestedQuery2.1.嵌套查询的分类2.1.1.A类2.1.2.N类2.1.3.J类2.1.4.JA类2.1.5.D类2.2.嵌套查询的优化3.Kiessling,SQ

  • git部署到服务器上_git部署代码到服务器

    git部署到服务器上_git部署代码到服务器搭建Git服务器并感受hook使用通常情况下我们都是将项目托管到Github,Coding等服务商。如果你有一台自己的Linux云主机,在上面搭建Git服务器比想象中要简单的多。这篇文章讲解如何搭建Git服务器及使用git的hook机制(使用post-receive这个hook,在git服务器受到push请求,并且接受完代码提交时…文章飞凡的陀螺2018-04-22819浏览量Git远程仓库…

  • 索引优缺点

    索引优缺点一、为什么要创建索引呢(优点)?创建索引可以大大提高系统的性能。第一,   通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。第二,   可以大大加快数据的检索速度,这也是创建索引的最主要的原因。第三,   可以加速表和表之间的连接,特别是在实现数据的参考完整性方面特别有意义。第四,   在使用分组和排序子句进行数据检索时,同样可以显著减少查询中分组和排序的时间。第五,   通过使用索引,…

  • assertEquals

    assertEqualsassertEqualspublicstaticvoidassertEquals(longexpected,longactual)Assertsthattwolongsare

  • oncopy和onpaste

    oncopy和onpaste

    2021年11月28日

发表回复

您的电子邮箱地址不会被公开。

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