JavaScript+css实现的喜庆活动邀请函多页

JavaScript+css实现的喜庆活动邀请函多页面html源码

家好，今天给大家介绍一款，JavaScript+css实现的喜庆活动邀请函多页面html源码（图1）。送给大家哦，获取方式在本文末尾。

图1

模板制作精良美观，主题非常喜庆，慢慢向下滑动，可以看到，包含活动信息、时间地点、公司二维码、地图等，自适应分辨率，适用于各种移动设备（图2）

图2

源码完整，需要的朋友可以下载学习（图3）。

图3

本源码编码：10183，需要的朋友，访问[92ui点net]，搜索10183，即可获取。

果图

各位长友大家早上好！

今天给大家带来的是中国地图导航特效源码！

适合各种地图介绍导航！

大家可以按照自己的意愿进行修改！

有想要文件版源码的朋友可以在以往的文章中找到我的联系

废话不多说，上源码！

CSS：

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, Arial, Helvetica, sans-serif;}

/* b_map */

.b_map{ margin-top:20px;padding-right:20px;width:704px;background:url(../img/chinamap.jpg) no-repeat 0px 0px;height:549px}

.e_map_tags{z-index:1;position:relative}

.e_map_tags li{width:90px;height:25px;z-index:1;position:absolute;text-align:center;padding-bottom:8px;display:block;font:bold 14px/25px simsun, arial, sans-serif;background:url(../img/map_tag1.png) no-repeat 0px 0px;color:#fff;top:0px;cursor:pointer;left:0px}

.e_map_tags .m_beijing{top: 371px;left: 316px;}

.e_map_tags .m_shanghai{top: 370px;

left: 589px;}

.e_map_tags .m_guangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top:314px;left:293px}

.e_map_tags .m_chengdu{top:230px;left:223px}

.e_map_tags .m_xian{top:190px;left:290px}

.e_map_tags .m_xianggang{top:320px;left:345px}

.e_map_tags .m_hangzhou{background:url(../img/map_tag2.png) no-repeat 0px 0px;top: 467px;

left: 415px;}

.e_map_tags li:hover{background-position:0px -38px}

.e_map_tags li.hover,.e_map_tags .centers{background-position:0px -38px}

.e_map_info{z-index:2;position:relative}

.e_map_info .m_content{z-index:1;border:#ccc 1px solid;position:absolute;padding:15px 20px;background-color:#fff;width:280px;display:block;top:0px;left:0px}

.e_map_info .hide{display:none;}

.e_map_info .m_content i{z-index:1;position:absolute;width:8px;bottom:-8px;display:block;background:url(../img/map_idx1.png) no-repeat 0px 0px;height:8px;overflow:hidden;right:-1px;_right:-2px}

.e_map_info .m_content h4{padding-left:180px;font:16px/33px "microsoft yahei", simsun, arial, sans-serif;margin-bottom:18px;background:url(../img/map_qunar.jpg) no-repeat 0px 0px;height:50px;}

.e_map_info .m_content p{font:14px/22px simsun, arial, sans-serif}

.e_map_info .m_beijing{top: 83px;left: 748px;}

.e_map_info .m_shanghai{top: 83px;

left: 748px;}

.e_map_info .m_guangzhou{top:176px;left:-58px}

.e_map_info .m_chengdu{top:92px;left:-127px}

.e_map_info .m_xian{top:74px;left:-60px}

.e_map_info .m_xianggang{top:204px;left:-4px}

.e_map_info .m_hangzhou{top: 83px;

left: 748px;}

/*m_content_side*/

.m_content_side{ height:1px;width:100%; position:relative;}

.m_content_side a{ position:absolute;top:0; z-index:2;float:left;width:30px; height:30px;}

.m_content_side a img{width:30px; height:30px;}

.m_content_side a.m_left{left:0px;}

.m_content_side a.m_right{right:0;}

个马赛克风格的表情正好 13Kb，有人竟然能用一个表情大小的空间，制作个游戏出来。我就不信这么点的地儿，能写出个花来？游戏能好玩吗？因为这些游戏点开就能玩，我抱着试一试的心态把玩了一会。

事实证明是我的无知限制了我的想象力，这些 13kB 的游戏并没有我想的那么简陋和无聊。它们不仅有丰富的图像，还有音乐、物理、重力系统，包含射击、益智、技巧等不同的类别玩法多样，令我眼前一亮！

下面我就整理出了 3 个我觉得好玩的游戏，并附上了在线体验的地址以及 GitHub 上的源码。

大家先体验一下游戏，后面我们再聊这些游戏都用到了哪些开源项目。

1、Space Huggers（太空保护者）

射击类游戏，消灭所有敌人。通过外接手柄可进行多人游戏，最多支持 4 个人。不仅如此还有敌人和道具系统以及雨、雪、血、爆炸、武器、水等粒子系统。手机端操作需要外接手柄。

操作：

WASD 或方向键：移动、跳跃和攀爬
Z 或左键单击：射击，大多数东西会破裂，有些会燃烧
X 或中键：滚动，短暂的无敌状态，还可灭火
C 或右键单击：手榴弹，每条命有 3 个
还可最多连接 4 个进行合作游戏！

敌人类型：

新兵（绿色）：迟钝，只需要 1 击
士兵（蓝色）：正常的速度，需要 2 次攻击
船长（红色）：可以更频繁地爬墙和跳跃，需要 3 次攻击
专家（白色）：经常跳跃和滚动，需要 4 次攻击
爆破专家（紫色）：投掷手榴弹且不会着火，需要 5 次命中

试玩：https://js13kgames.com/games/space-huggers/index.html
源码：https://github.com/KilledByAPixel/SpaceHuggers

2、Black Hole Square（黑洞广场）

益智类游戏，把所有块清除则过关。

操作：向左划开始游戏，点击块会向箭头方向移动，块进入“黑洞”则被清除
支持移动端

试玩：https://js13kgames.com/games/black-hole-square/index.html
源码：https://github.com/Quinten/black-hole-square

3、PACKABUNCHAS

益智类游戏，用提供的形状拼出指定的形状，

操作：点击旋转，拖动图形
支持移动端

试玩：https://js13kgames.com/games/packabunchas/index.html
源码：https://github.com/MattiaFortunati/packabunchas

Js13kGames 是什么

以上这些游戏都是 2021 Js13kGames 的参赛作品，这个比赛每年举办一次，要求参赛者在为期 30 天的时间里用 JavaScript 做出一款体积小于 13kB 的 HTML5 游戏。

30 天用 JS 做个游戏并不难，难点在于如何让游戏小于 13kB。压缩游戏体积可以从以下四个方面入手：

游戏引擎
压缩代码
图像和声音

下面介绍的这些开源项目，在 Js13kGames 很多参赛作品中都能看到它们的身影。

Ga（游戏引擎）

一个轻量级、极小(6.5kB)、容易上手的 JavaScript 游戏引擎，可用于制作 HTML5 游戏或任何 2D 动作游戏。

https://github.com/kittykatattack/ga

Kontra（游戏引擎）

专注于小体积的 JavaScript 微型游戏引擎，它虽然小但是提供了游戏常用的操控、事件、循环等核心功能。

https://github.com/straker/kontra

压缩代码

压缩代码通常是减少空格和换行之类的无用内容，从而达到减少代码所占体积的目的。

Google Closure Compiler：https://github.com/google/closure-compiler
MiniMinifier：https://github.com/xem/miniMinifier

Piskel（图像）

简单易用的在线像素图像制作工具。

https://github.com/piskelapp/piskel

miniMusic（声音）

可以把音效转化成 JavaScript 的项目，通过这种方式能够有效地减小声音的“体积”，还支持在线可视化的操作方式编辑和生成音效。

https://github.com/xem/miniMusic

看到这里你是不是也蠢蠢欲动地准备写个小游戏了呢？

最后

随着科技的发展，存储空间已经不再“捉襟见肘”，我们在编码时也不用再“斤斤计较”。但如今看到有这么一群极客，在绞尽脑汁用 13kB 完成一个游戏时。我从最初的好奇和难以置信，再到看到他们的游戏和源码后感叹他们高超的编程技巧，最后开始反思自己在编码时对性能和损耗方面思考的太少。感谢这些开源项目让我大开眼界，也让我发现了自己的不足之处。

本期推荐的开源项目代码量不多，适合新手学习和上手游戏编程，感兴趣的读者可以试着用它们写个小游戏。

以上就是本文的全部内容，如果你对本期推荐的开源项目感兴趣欢迎点赞、转发，让这些优秀的开源被更多人发现和喜欢。这里是 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。欢迎留言和我分享开源项目～

- END -

在线咨询

上一篇：css基础篇01-css用武之处
下一篇：Code2prompt：探索高效代码编辑新纪元的开源

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商