专栏首页蚂蚁开源社区【开源游戏/跑酷】我就是我

【开源游戏/跑酷】我就是我

游戏说明:

我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不用死。

领导问我为毛效率这么低?我认真回答:“做自己不解释。”然后就打开了这个了解真相的游戏,这是一款恶搞的小游戏。点击屏幕开始跑步,如果不小心掉下去就长按屏幕不放,就能飞上去。

源码演示:

代码摘要:

HTML

div class="aliForPc"><img src="me/forpc.png"></div>
<div id="legend">
<div style="position:absolute;margin:0;padding:0;overflow:visible;-webkit-transform:translateZ(0);z-index:0;">
<canvas id="legend_canvas" style="margin:0;padding:0;width:640px;height:1136px;" width="640" height="1136">
</canvas>
</div>
<div id="legend_InputText" style="position:absolute;margin:0;padding:0;z-index:10;display:none;">
<textarea rows="1" id="legend_InputTextareaBox" style="resize:none;background:transparent;border:0px;">
</textarea>
<input type="text" id="legend_InputTextBox" style="background:transparent;border:0px;">
<input type="password" id="legend_passwordBox" style="background:transparent;border:0px;">
</div>
</div>
<link href="me/sprite.css" rel="stylesheet" type="text/css">
<div style="position: absolute;right:0px;top:0px;max-width: 640px;margin: 0 auto;left: 0;height:1px;">
<img id="myimg" src="me/174232_1708.jpg" onclick="toggleFrdlist();">
<div style="margin:10px 0 0 0;">
我就是我<br>人品值:999999  </div>
<div id="frdlist">
<ul>
<li style="float:left;" class="page1 ">
<a href="me/index.html" target="_blank">
<img src="me/174232_1708.jpg" style="width:22%;margin:10px;float:left;">
</a>
<div style="margin:10px 0 0 0;">
xxx<br>人品:</div>
</li> </ul>
<div style="display:block;text-align: center;position: absolute;top: 275px;left: 15%;">
<span class="icon icon-arrow-left" onclick="prev();"></span>
<font>1/1</font>
<span class="icon icon-arrow-right" onclick="next();"></span>
</div>
</div>
</div>

CSS:

#frdlist{display:none;background-color: rgba(255, 255, 255, 0.8);
width: 50%;
height: 250px;
box-shadow: 0px 4px 5px #CCC;
border-radius: 6px;margin-left: 5px;
margin-top: 15px;}
#myimg{width:12%;float: left;margin:10px;box-shadow: 0px 4px 5px #CCC;}
.r45{transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.hidden{display:none;}
 .aliForPc {display:none;position:fixed;top:5px;right:5px;width:200px;height:230px;overflow:hidden;z-index:99999;}
</style>

JS:

#frdlist{display:none;background-color: rgba(255, 255, 255, 0.8);
width: 50%;
height: 250px;
box-shadow: 0px 4px 5px #CCC;
border-radius: 6px;margin-left: 5px;
margin-top: 15px;}
#myimg{width:12%;float: left;margin:10px;box-shadow: 0px 4px 5px #CCC;}
.r45{transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.hidden{display:none;}
 .aliForPc {display:none;position:fixed;top:5px;right:5px;width:200px;height:230px;overflow:hidden;z-index:99999;}
</style>

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5 Canvas和jQuery实时天气预报代码解析「附源码」

    这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用...

    用户5997198
  • 【前端艺术】HTML5 Canvas和jQuery实时动态天气预报

    这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用...

    用户5997198
  • CSS3导航菜单背景模糊特效代码解析/源码下载

    在第一个demo中,我们希望菜单项在开始时是模糊的。为了做到这一点,我们给超链接元素透明的颜色和白色的文字阴影。并为所有的属性添加transitions。

    用户5997198
  • 前端基础-CSS基础(七)

    efonfighting
  • JQuery生成图片列表

    彼岸舞
  • 2篇搞定CSS基础知识----第二篇

    padding-top(上内边距),padding-right(右内边距),padding-bottom(下内边距),padding-left(左内边距)

    Lemon黄
  • css单边投影与双侧投影

    早晨在前端交流群里,有个朋友问css实现单侧投影的办法,因为这个朋友前几天刚发过照片,晒他买的csssecrets,我问他你书买来还没看吗? 他说来不及翻书了...

    练小习
  • css3 transition 原

    css3 transition 需要4个参数  transition-property, transition-duration, transition-t...

    tianyawhl
  • css内容 元素 元素空间的练习

    用户7873631
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习

扫码关注云+社区

领取腾讯云代金券