整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个马赛克风格的表情正好 13Kb，有人竟然能用一个表情大小的空间，制作个游戏出来。我就不信这么点的地儿，能写出个花来？游戏能好玩吗？因为这些游戏点开就能玩，我抱着试一试的心态把玩了一会。
事实证明是我的无知限制了我的想象力，这些 13kB 的游戏并没有我想的那么简陋和无聊。它们不仅有丰富的图像，还有音乐、物理、重力系统，包含射击、益智、技巧等不同的类别玩法多样，令我眼前一亮！
下面我就整理出了 3 个我觉得好玩的游戏，并附上了在线体验的地址以及 GitHub 上的源码。
大家先体验一下游戏，后面我们再聊这些游戏都用到了哪些开源项目。
射击类游戏，消灭所有敌人。通过外接手柄可进行多人游戏，最多支持 4 个人。不仅如此还有敌人和道具系统以及雨、雪、血、爆炸、武器、水等粒子系统。手机端操作需要外接手柄。
操作：
敌人类型：
试玩：https://js13kgames.com/games/space-huggers/index.html
源码：https://github.com/KilledByAPixel/SpaceHuggers
益智类游戏，把所有块清除则过关。
试玩：https://js13kgames.com/games/black-hole-square/index.html
源码：https://github.com/Quinten/black-hole-square
益智类游戏，用提供的形状拼出指定的形状，
试玩：https://js13kgames.com/games/packabunchas/index.html
源码：https://github.com/MattiaFortunati/packabunchas
以上这些游戏都是 2021 Js13kGames 的参赛作品，这个比赛每年举办一次，要求参赛者在为期 30 天的时间里用 JavaScript 做出一款体积小于 13kB 的 HTML5 游戏。
30 天用 JS 做个游戏并不难，难点在于如何让游戏小于 13kB。压缩游戏体积可以从以下四个方面入手：
下面介绍的这些开源项目，在 Js13kGames 很多参赛作品中都能看到它们的身影。
一个轻量级、极小(6.5kB)、容易上手的 JavaScript 游戏引擎，可用于制作 HTML5 游戏或任何 2D 动作游戏。
https://github.com/kittykatattack/ga
专注于小体积的 JavaScript 微型游戏引擎，它虽然小但是提供了游戏常用的操控、事件、循环等核心功能。
https://github.com/straker/kontra
压缩代码通常是减少空格和换行之类的无用内容，从而达到减少代码所占体积的目的。
Google Closure Compiler：https://github.com/google/closure-compiler
MiniMinifier：https://github.com/xem/miniMinifier
简单易用的在线像素图像制作工具。
https://github.com/piskelapp/piskel
可以把音效转化成 JavaScript 的项目，通过这种方式能够有效地减小声音的“体积”，还支持在线可视化的操作方式编辑和生成音效。
https://github.com/xem/miniMusic
看到这里你是不是也蠢蠢欲动地准备写个小游戏了呢？
随着科技的发展，存储空间已经不再“捉襟见肘”，我们在编码时也不用再“斤斤计较”。但如今看到有这么一群极客，在绞尽脑汁用 13kB 完成一个游戏时。我从最初的好奇和难以置信，再到看到他们的游戏和源码后感叹他们高超的编程技巧，最后开始反思自己在编码时对性能和损耗方面思考的太少。感谢这些开源项目让我大开眼界，也让我发现了自己的不足之处。
本期推荐的开源项目代码量不多，适合新手学习和上手游戏编程，感兴趣的读者可以试着用它们写个小游戏。
以上就是本文的全部内容，如果你对本期推荐的开源项目感兴趣欢迎点赞、转发，让这些优秀的开源被更多人发现和喜欢。这里是 HelloGitHub 分享 GitHub 上有趣、入门级的开源项目。欢迎留言和我分享开源项目～
- END -
用HTML5+javascript代码来完成的，其实这个原理还是跟普通的游戏差不多的，本人开发这个游戏，其实就是想锻炼下自己的编程思维及自己的javascript算法。
虽然只录制了两关。但我写了很多关的，而且难度越来越大，其实每一关其实都有一个编程小故事的，能过十关你就了不起了！
界面如下：
效果全部代码已经上传群250777811
界面看起来很简陋，不是很华丽，但是里面的内容和代码还是很有意思的，大家可以下载源码亲自试一试。当初拿着游戏手柄插着卡在电视上玩，想想现在自己可以开发这样的游戏还是有点成就感的，其实我从零基础学前端也只有三个多月，现在学习到H5和javascript的时候想找点案例来锻炼下自己能力。大家想学习前端的可以加HTML5进阶群250777811，无论你是大牛还是想学习的都可以加进来，只要你想学前端。
下面来看看这个代码，虽然代码有点多，但是有很多重复的，最重要的还是那几行H5和javascript代码
想要这个游戏代码亲自试一试的可以加HTML5进阶群250777811，获取源码看你能闯几关。
源代码已经全部上传群250777811
最后面那几关连我自己也难闯过去，哈哈，不过这也使我蛮高兴的，因为我还有提升的空间嘛！
用代码将我的梦想照进现实，谢谢提问于点评
习前端还是很有趣的，因为可以较快的上手，然后自己开发一些好玩的项目来练手，并且网上也可以搜集很多关于前端开发的小项目，可还是新手的你，在学习的时候不知道可以做什么，以及怎么做；因此，就整理了一些前端资料，希望可以帮助正在学习前端的小伙伴。为了方便你，大概把前端可以做的项目分为三类：
?游戏类
?实用类
?好玩类
然后依次推荐一些项目资料，想要学习的小伙伴可以看看~
游戏类
其实很多常见的小游戏都是纯前端开发出来的，比如曾经风靡的2048、别踩白块啊等等，简单有趣，对于初学者来说，这些小游戏是非常不错的练手项目。
网页版2048
项目通过搭建一个网页版的 2048 ，让大家学习 web 应用程序的开发流程、以及如何让应用在移动端自适应处理以应对各种大小的屏幕，布局和初始化，编写游戏的逻辑、实现让它能移动，判定结果。
是不是和我们玩的2048一模一样呀，O(∩_∩)O~
HTML5两步实现拼图游戏
项目使用HTML5和css3实现的九宫格拼图游戏。只要两步既可以实现炫酷的效果和动画。详细的讲解，让你清楚地知道每一句代码的作用。自己开发完之后还可以玩玩，告诉你，你可以开发它，但是玩可不一定行哦~
网页版扫雷
项目实现一个Web版本的扫雷游戏，通过该项目将学习并实践 JavaScript 和 CSS 等基本的Web开发知识。
看着就有想玩的冲动啊，有木有~
网页版-别踩白块游戏
项目用最基础的html，css，以及原生的JavaScript实现一个网页版本的“别踩白块”游戏。
做完后可以试着玩玩，看看速度如何，太快或者太慢都可以随时调整。
HTML5实现抓怪物小游戏
项目利用 HTML5 的 Canvas 特性，结合 js 来开发一个抓小怪物的小游戏。从中我们可以学习到如何用 HTML5 来构建一个 WebApp。
JavaScript打地鼠游戏
项目为打地鼠，是大家耳熟能详的一款经典的小游戏，用前端技术来实现这个游戏，简单有趣。
JavaScript按键控制坦克移动
项目使用javascript按键控制坦克在网页上移动，通过使用很简单的，清晰明了的代码使坦克在页面上平滑的移动，通过学习，可以掌握javascript的按键操作，从而让页面更好的与用户互动。
看效果图很简单，但是只要稍微发挥你的想象力，把坦克改成其他的物体，就可以变成其他的小游戏了，比如加一个迷宫，就是走出迷宫游戏了。
实用类
前面介绍了前端开发游戏的项目教程，当然前端还可以开发一些非常实用的功能，比如小到网站的导航条啊，一个抽奖页面啊等等，这些在网页上经常看到的页面展示功能，基本都是前端开发出来的，因此，下面介绍一些比较实用的前端项目教程。
CSS与JavaScript实现选项卡
这个项目实现前端网页经常用到的 Tab 选项卡效果。主要用到 HTML、CSS 和 JavaScript 技术，比较适合前端入门练习。
一起来抽奖吧
一到各种节假日就各种的抽奖活动数不胜数，大奖很丰厚，但是，你懂得。这个项目教大家使用CSS3来制作一个抽奖转盘，一窥抽奖转盘的秘密。
Java和WebSocket开发网页聊天室
WebSocket是HTML5一种新的协议，它实现了浏览器与服务器全双工通信，这个项目使用WebSocket来开发网页聊天室，前端框架会使用AmazeUI，后台使用Java，编辑器使用UMEditor。
瀑布流加载图片墙
项目通过瀑布流加载图片墙，实现无限图片展示的效果，类似百度图片一样的加载方式，体现图片的交错排列。从中学习在没有后端开发者提供数据的背景下，由我们前端自己模拟数据及数据接口，自己就能给自己提供任何自己想要的数据。
canvas实现放大镜效果
项目由 HTML5 的 canvas 实现放大镜效果，和淘宝图片放大器类似的效果，主要依靠 canvas 中的 drawImage() 函数，希望能通过实现这个简单的项目来让大家初步认识 canvas ，学会基本的 canvas 操作。
用CSS和jQuery打造一个简单的图片编辑器
项目利用 CSS 的 filter 和简单的 Jquery 代码来实现一个简单的图片编辑器包括对图片的透明度，黑白，图片亮度等调节。
120行代码实现简单的即时搜索
项目利用 Meteor 和 MongoDB 实现一个简单的即时搜索服务。通过本项目将学习到 Mongodb 数据库的操作，Meteor 快速制作 Web App。
纯前端打造实时markdown编辑器
项目通过纯前端打造一个实时 markdown 编辑器，用到的库或框架主要有 marked，Ace，highlight.js，Bootstrap。通过本实验学习如何编写一个 web 应用程序的相关知识。
CSS3实现“红包照片”模糊效果
微信朋友圈里的红包照片，还有 ios7 带来的“毛玻璃”菜单效果都很吸引眼球，该项目就尝试用熟悉的 CSS3 来实现这个效果。
使用 Electron 编写跨平台桌面应用
该项目主要学习如何用 Electron 配合 JavaScript 等 web 技术创建跨 Linux/Windows/macOS 平台的桌面应用。
好玩类
前端还可以用比较简单的方式实现一些可爱的东西，比如暖男-大白，萌宠-小黄人等等，只要你能想到的，几乎都可以用前端来实现，下面就介绍几个项目教程。
打造网页版「大白」
该项目利用 HTML 和 CSS 来打造《超能陆战队》里的 “暖男” -「大白」。学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象的样式。
JavaScript实现玫瑰花
项目学习如何在网页中如何使用JavaScript语言实现一朵漂亮的玫瑰花。其中会用到html，css，javascript等技术。
这个玫瑰花的最后效果是慢慢开放和显现出来的，很浪漫的赶脚啊~
SCSS（SASS）画小黄人
项目通过 SCSS（SASS）画一个会眨眼睛的小黄人，主要学习 CSS3。其中将涉及 SASS 安装，代码的编写，以及绘制小黄人的相关结构逻辑。
看完以上3个项目，你能想象都是用前端来实现的么，O(∩_∩)O~
源码可以私信我哦
以上呢，介绍了那么多的前端开发项目，如果你还说你找不到项目，不知道做什么，没有完整的教程，那么就是你的不对了，所以，挑选一个感兴趣的项目开始学习吧！
*请认真填写需求信息，我们会在24小时内与您取得联系。
