这个马赛克风格的表情正好 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 上有趣、入门级的开源项目。欢迎留言和我分享开源项目~

https://github.com/521xueweihan/HelloGitHub

好奇!仅 13kB 大小的游戏,源码长啥样?的更多相关文章

  1. html5 canvas简易版捕鱼达人游戏源码

    插件描述:html5利用canvas写的一个js版本的捕鱼,有积分统计,鱼可以全方位移动,炮会跟着鼠标移动,第一次打开需要鼠标移出背景图,再移入的时候就可以控制炮的转动,因为是用的mouseover触 ...

  2. ios源码-ios游戏源码-ios源码下载

    游戏源码   一款休闲类的音乐小游戏源码 该源码实现了一款休闲类的音乐小游戏源码,该游戏的源码很简单,而且游戏的玩法也很容易学会,只要我们点击视图中的grid,就可以 人气:2943运行环境:/Xco ...

  3. 网狐6603棋牌游戏源码.rar

    网狐6603棋牌游戏源码.rar http://pan.baidu.com/s/1dFgGNq5 网络收集仅供学习,下载后请务必在24小时内删除! 以上是原vc6.0源码,下载后使用vs2015编译, ...

  4. 网狐6603手机棋牌游戏源码.rar

    网狐6603手机棋牌游戏源码.rar   文件大小: 333 MB 发布一款手机棋牌游戏源码带教程文档! 仅供学习,下载后请务必在24小时内删除! 网狐6603手机棋牌游戏源码 链接:http://p ...

  5. 射击的乐趣:WIN32诠释打飞机游戏源码补充

    打飞机游戏源码补充 从指定位置加载bmp并显示到对话框. , TRUE);, , LR_LOADFROMFILE);          {         BITMAP bmpinfo;        ...

  6. 15款Cocos2d-x游戏源码

    (1)用cocos2d-x开发的中国象棋游戏源码 使用Cocos2d-X2.2.3开发的一款中国象棋游戏,游戏中可以实现.新局面.悔棋.游戏音乐.胜利后会显示游戏结果. 源码下载:http://www ...

  7. Unity3D游戏-愤怒的小鸟游戏源码和教程(一)

    Unity愤怒的小鸟游戏教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) AngryEva游戏效果: 1 ...

  8. 3D坦克大战游戏源码

    3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...

  9. iOS版打地鼠游戏源码

    打地鼠游戏源码,游戏是一款多关卡基于cocos2d的iPad打地鼠游戏源码,这也是一款高质量的打地鼠游戏源码,可以拥有逐步上升的关卡的设置,大家可以在关卡时设置一些商业化的模式来盈利的,非常完美的一款 ...

随机推荐

  1. Servlet学习笔记(一)之Servlet原理、初始化、生命周期、结构体系

    Servlet是用java语言编写的应用到Web服务器端的扩展技术,与java对象的区别是,Servlet对象主要封装了对HTTP请求的处理,并且它的运行需要Servlet容器的支持(以下会介绍原因, ...

  2. vue 元素拖动效果

    <draggable v-model="preface" chosenClass="chosen" ghost-class="ghost&quo ...

  3. 迭代器生成器阅读【Python3.8官网文档】

    目录 1.迭代器 2.生成器 2.1.yield 表达式 2.2.简要理解概念 2.3.生成器-迭代器的方法 2.4.生成器理解 2.5.例子 3.生成器表达式 1.迭代器 for element i ...

  4. 史上最详细的信号使用说明(已被收藏和N次)

    Unix环境高级编程(第三版) 第10章 信号 文章目录 1. 引言 2. 信号的概念 2.1 信号操作之忽略信号 2.2 信号操作之捕捉信号 2.3 信号操作之执行系统默认操作 2.4 常见的信号 ...

  5. find命令查找某一个时间点以后创建或者修改的文件

    touch -t 201711211615.47 starttouch -t 201711211617.47 end find ./* -newer start |xargs ls -al-rw-r- ...

  6. Redis核心原理与实践--列表实现原理之quicklist结构

    在上一篇文章<Redis列表实现原理之ziplist结构>,我们分析了ziplist结构如何使用一块完整的内存存储列表数据. 同时也提出了一个问题:如果链表很长,ziplist中每次插入或 ...

  7. CodeForce-799B T-shirt buying (STL_set)

    有 n 件T恤.第 i 件T恤的价格为 pi .每个T恤有两面,第 i 件T恤正面颜色为 ai ,反面颜色为 bi . 有 m 个人想买T恤,每个人都恰好买一件.第 j 个人最喜欢颜色 cj. 一个人 ...

  8. Android Studio找不到设备,解决adb占用问题的方法

    使用as连接真机时,找不到设备,发现 D:\Android\Sdk\platform-tools\adb.exe start-server' failed -- run manually if nec ...

  9. PHP中的日期相关函数(二)

    上回文章中我们介绍了三个时间日期相关的对象,不过它们的出镜频率并不是特别地高.今天学习的对象虽说可能不少人使用过,但是它的出镜频率也是非常低的.它们其实就是我们非常常用的那些面向过程的日期函数的面向对 ...

  10. TP5增加扩展配置目录

    ThinkPHP5.0.1版本开始增加了扩展配置目录的概念,在应用配置目录或者模块配置目录下面增加extra子目录,下面的配置文件都会自动加载,无需任何配置. 这极大的方便了我们进行扩展配置,比如在a ...