整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
览器和 JavaScript 的功能逐年不断的变强变大。曾几何时，任何类型的游戏都需要Flash。但随着 HTML5 发展，HTML5 + WebGL 游戏式就慢慢占领着这个舞台。以下是30款流行的游戏，它们可以在所有现代浏览器中运行，并且只使用web技术构建。
地址：http://hexgl.bkcore.com/
类型：街机，赛车
HexGL 是一款基于HTML5，JavaScript和WebGL的快节奏的赛车游戏。玩家可以使用键盘，触摸屏设备或leap motion(体感控制器)来控制太空飞船。
地址：http://www.cross-code.com/en/home
类型：动作，角色扮演
一个复古灵感的2D游戏设定在遥远的未来。这是一个充满伟大的游戏机制，如组合，拼图，技能树，任务，物品等等。
地址：https://sketch-out.appspot.com/
类型：街机
Sketchout的任务保护你的行星，并通过改变流星的方向来消灭对手，通过使流星偏转来保护您的星球并消灭对方，这款游戏有很棒的视觉效果和音乐特效。
地址：http://www.treasurearena.com/类型：多人，角色扮演，动作
Treasure Arena 是一款动态的竞技场战斗游戏，最多可容纳4名玩家。它具有不同的游戏模式，出色的帧率和配乐，是一个非常有趣的游戏。
地址：http://bejeweled.popcap.com/html5/
类型：街机，解谜，娱乐
HTML5格式的经典“宝石迷阵”游戏。这是一个官方克隆，因此可以正常运行且外观完美。
地址：http://missile-game.bwhmather.com/类型：街机
这是一款非常具有挑战性的游戏，游戏中我们扮演的是一枚被发射进隧道的导弹。游戏有很酷的黑白图像，玩的时候会有很强的场景效果。
地址：http://www.deconstructeam.com/games/gods-will-be-watching/类型：拼图
在这个令人毛骨悚然（但又很棒）的游戏中，我和自己团队必须独自生存40天。团队有六名成员，其中包括一只狗，一名精神病医生和一个机器人，您必须与他们互动，以使其保持温暖，温饱和理智的状态。
地址：http://www.sinuousgame.com/类型：街机
一个简单的游戏，极简的图形和流畅的帧率。拾取电源时避免与红点碰撞。此外，如果你想要那些额外的积分，就需要不停向前移动
地址：http://swooop.playcanvas.com/类型：街机
在一个美丽多彩的3D世界里，到处飞翔，收集宝石和星星。
地址：http://www.freeriderhd.com/
Free Rider HD 是一款令人上瘾的游戏，你可以在其他玩家绘制的赛道上骑自行车。可以在成千上万的播放器曲目中选择一个播放，也可以创建自己的曲目并分享。
地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html类型:拼图,娱乐
这个游戏的目的是通过在网格上放置线段来创建一条尽可能长的路径。你可以单独玩，也可以和朋友一起玩。
地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp
类型：动作，街机
用“Escape from XP”来庆祝 Windows XP 的终结。你的任务是拯救最后一个陷入Clippy暴政的开发人员。
地址：http://polycraftgame.com/类型：角色扮演，塔防，动作
在这个很棒的3D游戏中，你到处收集资源，建造东西，完成任务。关于它的所有东西都经过抛光，并且运行也非常顺畅。
地址：https://gabrielecirulli.github.io/2048/类型：拼图
一个非常上瘾的游戏，你可能已经玩过了。在 2048 ，你移动编号的图块并合并它们。当界面中最大数字是`2048 时，游戏胜利。
地址：http://arcade.lostdecadegames.com/onslaught_arena/
类型:动作
一种快节奏的复古生存游戏，您可以使用不同的武器与成群的敌人作战。
地址：http://chrome.angrybirds.com/类型:游戏
《愤怒的小鸟》游戏，这就不用介绍了。
地址:https://www.cubeslam.com/mcycrs
类型：街机，多人
具有丰富的色彩和炫酷的3D图形乒乓球游戏。我们可以通过向朋友发送一个URL来挑战他们，还可以通过网络摄像头看到对方。
地址：http://hypnoticowl.com/games/the-wizard/类型：动作，角色扮演，策略
Wizard 是基于回合的地牢爬行者，在里面会遇到神话般的怪物并找到奇妙的咒语。该游戏具有酷炫的战斗机制，有时可能会带来很大挑战。
地址：http://phoboslab.org/xtype/类型：动作，街机
在这款酷炫的太空射击游戏中，你目的就是要起战胜 Boss。
地址：http://orteil.dashnet.org/cookieclicker/类型：休闲，搞笑
Cookie clicker 是一款可能为了开玩笑而创建的游戏，但仍然提供了大量的乐趣。你可以从0个cookie开始，然后单击一些有效率的cookie，最后你可能会发现自己拥有数十亿个cookie。
地址：http://play.elevatorsaga.com/类型：拼图，编码
这类属于程序员类型游戏 。在电梯中的任务是通过对电梯的运动进行编程，以最有效的方式运送人员，这些都是用 JavaScript 来完成的。
地址：http://gameofbombs.com/landing类型：动作，角色扮演，多人
Game of Bombs是一个轰炸机类型的游戏，在广阔地图上，都有着敌方玩家。收集力量，皮肤和成就，以成为最佳轰炸机玩家的方式。
地址：http://or.paleozoic.com/类型：平台游戏，动作
Olympia Rising具有漂亮复古外观图形的游戏。它坐落在古希腊，在那里我们扮演的女人被赋予了重新的机会，所以我们的任务就是逃离死者的世界。
地址: https://ned.im/pixel-race-game/类型：街机，赛车
Pixel Race是一款简单概念概念，你可以在收集硬币的同时控制汽车以避开障碍物。如果有足够的耐心和空闲时间，那么你可能会打破记录（记录为36309个硬币）。
地址：https://littlealchemy.com/类型：拼图
从这四个基本元素开始，将它们组合起来，创建510种可能的组合。
地址：http://www.kevs3d.co.uk/dev/arena5/类型：街机
在数字领域中飞行并射击几何敌人以获得高分。
地址:https://vector-runner-remix.tresensa.com/
类型：街机
在这个充满色彩和几何形状的平台游戏中，尽你所能奔跑吧。
地址：http://playbiolab.com/类型:动作
一款出色的像素艺术平台游戏，你必须在这里逃脱充满突变生物和其他不良生物的实验室。
地址:http://worldsbiggestpacman.com/#类型：街机
地址：http://games.jessefreeman.com/new-super-resident-raver/
从即将到来的僵尸入侵中拯救惊慌失措的人们。收集钱，升级你的武器和战斗僵尸。
作者：Danny Markov 来源：tutorialzin 译者：前端小智
原文：https://tutorialzine.com/2015/02/30-amazing-games-made-only-with-html5
者 | huangjianke
责编 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
【CSDN 编者按】据微信最新数据，微信小游戏累计注册用户量已突破10亿。那么初学者如何开发一款好玩又烧脑的微信小游戏呢？本文作者将详细为大家讲解。
“启逻辑之高妙，因想象而自由。”层叠拼图Plus是一款需要空间想象力和逻辑推理能力完美结合的微信小游戏，偶消奇不消，在简单的游戏规则下却有着无数种可能性，需要你充分发挥想象力去探索，看似简单却具有极大的挑战性和趣味性，Talk is cheap. Show me the code！
层叠拼图Plus微信小游戏采用JavaScript+Canvas实现，没有使用任何游戏引擎，对于初学者来说，也比较容易入门。下面是小游戏页面：
Canvas 绘图时，会从两个物理像素的中间位置开始绘制并向两边扩散 0.5 个物理像素。当设备像素比为 1 时，一个 1px 的线条实际上占据了两个物理像素（每个像素实际上只占一半），由于不存在 0.5 个像素，所以这两个像素本来不应该被绘制的部分也被绘制了，于是 1 物理像素的线条变成了 2 物理像素，视觉上就造成了模糊
绘图模糊的原因知道了，在微信小游戏里面又该如何解决呢？
可以看到，我们先通过 wx.getSystemInfoSync.pixelRatio 获取设备的像素比ratio，然后将在屏 Canvas 的宽度和高度按照所获取的像素比ratio进行放大，在绘制文字、图片的时候，坐标点 x、y 和所要绘制图形的 width、height均需要按照像素比 ratio 进行缩放，这样我们就可以清晰的在高清屏中绘制想要的文字、图片。
可参考微信官方缩放策略调整
另外，需要注意的是，这里的 canvas 是由 weapp-adapter 预先调用 wx.createCanvas 创建一个上屏 Canvas，并暴露为一个全局变量 canvas。
任意一个多边形图形，是由多个平面坐标点所组成的图形区域。
在游戏画布内，我们以左上角为坐标原点 {x: 0, y: 0} ，一个多边形包含多个单位长度的平面坐标点，如：[{ x: 1, y: 3 }, { x: 5, y: 3 }, { x: 3, y: 5 }] 表示为一个三角形的区域，需要注意的是，x、y 并不是真实的平面坐标值，而是通过屏幕宽度计算出来的单位长度，在画布内的真实坐标值则为 {x: x * itemWidth, y: y * itemWidth} 。
绘制多边形代码实现如下：
使用：
效果如下图：
CanvasRenderingContext2D其他使用方法可参考：CanvasRenderingContext2D API 列表
1 + 1 = 0，是层叠拼图Plus小游戏玩法的精髓所在。
有经验的同学，也许一眼就发现了，1 + 1 = 0 刚好符合通过异或运算得出的结果。当然，细心的同学也可能已经发现，上文有一句特殊的代码：this.ctx.globalCompositeOperation = 'xor'，也正是通过设置 CanvasContext 的 globalCompositeOperation 属性值为 xor 便实现了「偶消奇不消」的神奇效果。
globalCompositeOperation 是指 在绘制新形状时应用的合成操作的类型，其他效果可参考：globalCompositeOperation 示例
当回转数为 0 时，点在闭合曲线外部。
讲到这里，我们已经知道如何在Canvas画布内绘制出偶消奇不消效果的层叠图形了，接下来我们来看下玩家如何移动选中的图形。我们发现绘制出的图形对象并没有提供点击事件绑定之类的操作，那又如何判断玩家选中了哪个图形呢？这里我们就需要去实现如何判断玩家触摸事件的x，y坐标在哪个多边形图形内部区域，从而判断出玩家选中的是哪一个多边形图形。
判断一个点是否在任意多边形内部有多种方法，比如：
射线法
面积判别法
叉乘判别法
回转数法
...
在层叠拼图Plus小游戏内，采用的是回转数法来判断玩家触摸点是否在多边形内部。回转数是拓扑学中的一个基本概念，具有很重要的性质和用途。当然，展开讨论回转数的概念并不在该文的讨论范围内，我们仅需了解一个概念：当回转数为 0 时，点在闭合曲线外部。
图源：http://www.html-js.com/article/1538
上面面这张图动态演示了回转数的概念：图中红色曲线关于点（人所在位置）的回转数为 2。
对于给定的点和多边形，回转数应该怎么计算呢？
用线段分别连接点和多边形的全部顶点
图源：http://www.html-js.com/article/1538
计算所有点与相邻顶点连线的夹角
图源：http://www.html-js.com/article/1538
计算所有夹角和。注意每个夹角都是有方向的，所以有可能是负值
图源：http://www.html-js.com/article/1538
最后根据角度累加值计算回转数。360°（2π）相当于一次回转。
在使用 JavaScript 实现时，需要注意以下问题：
JavaScript 的数只有 64 位双精度浮点这一种。对于三角函数产生的无理数，浮点数计算不可避免会造成一些误差，因此在最后计算回转数需要做取整操作。
通常情况下，平面直角坐标系内一个角的取值范围是 -π 到 π 这个区间，这也是 JavaScript 三角函数 Math.atan2 返回值的范围。但 JavaScript 并不能直接计算任意两条线的夹角，我们只能先计算两条线与 x 正轴夹角，再取两者差值。这个差值的结果就有可能超出 -π 到 π 这个区间，因此我们还需要处理差值超出取值区间的情况。
代码实现：
探索的过程固然精彩，而结果却更令我们期待
通过前面的介绍我们可以知道，判断游戏结果是否正确其实就是比对玩家组合图形的 xor 结果与目标图形的 xor 结果。那么如何求多个多边形 xor 的结果呢？polygon-clipping 正是为此而生的。它不仅支持 xor 操作，还有其他的比如：union, intersection, difference 等操作。在层叠拼图Plus游戏内通过 polygon-clipping 又是怎样实现游戏结果判断的呢？
目标图形
多边形平面坐标点集合：
获取 多个多边形 xor 结果：
xor结果：
同理计算出玩家操作图形的xor结果进行比对即可得出答案正确与否。
需要注意的是，获取玩家的 xor 结果并不能直接拿来与目标图形xor 结果进行比较，我们需要将xor 的结果以左上角为参考点将图形平移至原点内，然后再进行比较，如果结果一致，则代表玩家答案正确。
有人的地方就有江湖，有江湖的地方就有排行
在看本章节内容之前，建议先浏览一遍排行榜相关的官方文档：好友排行榜、关系链数据，以便对相关内容有个大概的了解。
开放数据域
开放数据域是一个封闭、独立的 JavaScript 作用域。要让代码运行在开放数据域，需要在 game.json 中添加配置项 openDataContext 指定开放数据域的代码目录。添加该配置项表示小游戏启用了开放数据域，这将会导致一些限制。
在游戏内使用 wx.setUserCloudStorage(obj) 对玩家游戏数据进行托管。
在开放数据域内使用 wx.getFriendCloudStorage(obj)拉取当前用户所有同玩好友的托管数据
展示关系链数据
如果想要展示通过关系链 API 获取到的用户数据，如绘制排行榜等业务场景，需要将排行榜绘制到 sharedCanvas 上，再在主域将 sharedCanvas 渲染上屏。
sharedCanvas 是主域和开放数据域都可以访问的一个离屏画布。在开放数据域调用 wx.getSharedCanvas 将返回 sharedCanvas。
在主域中可以通过开放数据域实例访问 sharedCanvas，通过 drawImage 方法可以将 sharedCanvas 绘制到上屏画布。
sharedCanvas 本质上也是一个离屏 Canvas，而重设 Canvas 的宽高会清空 Canvas 上的内容。所以要通知开放数据域去重绘 sharedCanvas。
需要注意的是：sharedCanvas 的宽高只能在主域设置，不能在开放数据域中设置。
性能优化，简而言之，就是在不影响系统运行正确性的前提下，使之运行地更快，完成特定功能所需的时间更短。
一款能让人心情愉悦的游戏，性能问题必然不能成为绊脚石。那么可以从哪些方面对游戏进行性能优化呢？
在层叠拼图Plus小游戏内，针对需要大量使用且绘图繁复的静态场景，都是使用离屏 Canvas进行绘制的，如首页网格背景、关卡列表、排名列表等。在微信内 wx.createCanvas 首次调用创建的是显示在屏幕上的画布，之后调用创建的都是离屏画布。初始化时将静态场景绘制完备，需要时直接拷贝离屏Canvas的图像即可。Canvas 绘制本身就是不断的更新帧从而达到动画的效果，通过使用离屏 Canvas，就大大减少了一些静态内容在上屏Canvas的绘制，从而提升了绘制性能。
内存优化
玩家在游戏过程中拖动方块的移动其实就是不断更新多边形图形的坐标信息，然后不断的清空画布再重新绘制，可以想象，这个绘制是非常频繁的，按照普通的做法就需要不断去创建多个新的 Block 对象。针对游戏中需要频繁更新的对象，我们可以通过使用对象池的方法进行优化，对象池维护一个装着空闲对象的池子，如果需要对象的时候，不是直接new，而是从对象池中取出，如果对象池中没有空闲对象，则新建一个空闲对象，层叠拼图Plus小游戏内使用的是官方demo内已经实现的对象池类，实现如下：
垃圾回收
小游戏中，JavaScript 中的每一个 Canvas 或 Image 对象都会有一个客户端层的实际纹理储存，实际纹理储存中存放着 Canvas、Image 的真实纹理，通常会占用相当一部分内存。
每个客户端实际纹理储存的回收时机依赖于 JavaScript 中的 Canvas、Image 对象回收。在 JavaScript 的 Canvas、Image 对象被回收之前，客户端对应的实际纹理储存不会被回收。通过调用 wx.triggerGC 方法，可以加快触发 JavaScriptCore Garbage Collection（垃圾回收），从而触发 JavaScript 中没有引用的 Canvas、Image 回收，释放对应的实际纹理储存。
但 GC 具体触发时机还要取决于 JavaScriptCore 自身机制，并不能保证调用 wx.triggerGC 能马上触发回收，层叠拼图Plus小游戏在每局游戏开始或结束都会触发一下，及时回收内存垃圾，以保证最良好的游戏体验。
对于游戏来说，每帧 16ms 是极其宝贵的，如果有一些可以异步处理的任务，可以放置于 Worker 中运行，待运行结束后，再把结果返回到主线程。Worker 运行于一个单独的全局上下文与线程中，不能直接调用主线程的方法，Worker 也不具备渲染的能力。Worker与主线程之间的数据传输，双方使用 Worker.postMessage 来发送数据，Worker.onMessage 来接收数据，传输的数据并不是直接共享，而是被复制的。
需要注意的是：Worker 最大并发数量限制为 1 个，创建下一个前请用 Worker.terminate 结束当前 Worker
其他 Worker相关的内容请参考微信官方文档：多线程 Worker
短短的一篇文章，定不能将层叠拼图Plus小游戏的前前后后讲明白讲透彻。其实最让人心累的还是软著的申请过程，由于各种原因前前后后花了将近三个月的时间，后续可以给大家分享软著申请相关的内容，希望可以帮助到需要的童鞋。
江湖不远，我们游戏里见！
作者简介：huangjianke，高级iOS开发/前端开发工程师，五年开发经验。
需要体验小游戏的童鞋可在微信小程序搜索层叠拼图Plus。
【END】
源：众成翻译 译者：betsey
游戏的灵感
在使用过一段时间的SVG动画之后，我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台，例如Greensock，和原生的CSS动画简直是绝配。于是我便打算深入地研究一下，看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样，好的游戏拥有许多细致的动画细节。有一天夜里，我的脑海中突然闪现了一个游戏的灵感，我马上起来，画了一些草图，之后给我的哥哥看--他是一个专业的网页设计师。我们立即开始着手设计，讨论了所有的细节动画后（试着画出来并且配以音效），我便开始进行游戏开发。
如何玩: 来回弹跳的球是可以改变颜色的。你必须随时观察球当前的颜色，并且在球和柱子相接触的一瞬间，确保两者的颜色是一样的。点击柱子可以改变它的颜色，单击变红，双击变黄，三击则变为紫色。
这里是游戏的完整版: http://codepen.io/gregh/full/yVLOyO
创作的过程
在开发这款游戏的过程中，我不断地遇到问题并重构代码。其中的一个最主要的问题就是，如何能让游戏在所有的设备和所有尺寸的显示器上都看起来不错。我使用我的Macbook Pro 开发，游戏的画面很棒。但是当到了 27" iMac screen 上时，整个画面就看起来特别小，当然在iPhone又会显得特别大。我真心地希望可以有一把适配所有设备的“万能钥匙”。经过了许多次的尝试之后，我清楚地意识到，传统的使用媒体查询的技术来做响应式设计是行不通的。
这篇文章并不是一个教程，因此我将不会逐行的解释我的代码。但是，我会展示给你一些十分酷的东西，你可以通过在CodePen上或者是在浏览器的调试工具里面修改参数进行测试。同样，我也会在相应的地方写出一些参考资料。在CodePen上，我尽可能多的写出代码注释，赶快去看看代码吧！
十分强大的GSAP让我理所当然地选择了它，而我选择在CodePen上面写码的原因是它内置了一个Babel编译器，这样我就可以在上面书写ES6的语法，你不知道Class和箭头函数有多好用！ 关于ES6的特性介绍，你可以点击这里: https://github.com/DrkSephy/es6-cheatsheet
使用GreenSock制作动画
我下面假设你熟悉GSAP用法,但如果你不熟悉的话，你可以看下这个“讨厌番茄”的人的关于GSAP的教程。https://ihatetomatoes.net/get-greensock-101/
背景动画
几乎所有你能在背景上看到的东西都是用SVG制作的。每个波浪是一个独立的<div>,每一层的山峰也是一个<div>,甚至云也是<div>。当你在制作一个复杂的动画时，有一点是需要注意的。你完全可以使用一整个SVG当做背景，然后为这个SVG的子元素和路径来制作动画。Greensock允许我们这样做，你需要做的仅仅是为这些SVG的元素（比如说path，group等等）分配一些ID，然后用过ID选择到他们。但这样做的问题在于，在移动设备上，这些动画跑不动。所以你最好是把这些背景元素放在独立的<div>里面，然后为这些<div>添加动画，我实际上就是使用这些SVG的作为背景。
通过类似于上面的代码，我们就得到了一些简单的补间动画。这些动画可以将背景水平地移动54个像素（也就是背景的宽度），在这里我们想要背景匀速地移动，所以我们不需要缓动动画。当我们为每个背景设置不同的移动速度的时候，他们就有表现出了视觉差的效果，看上去很酷吧！
看到画面上漂浮着一些白色的小圆点了没？我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。
这样他们就缓慢地进行圆周运动，但看上去却像随机运动一样。
柱子动画
每一个柱子里都有一些会动的小元素，这些小元素仅仅是由HTML和CSS制作出来的。使用SASS可以节省很多时间和代码量（通常情况下是这样的）。我通过创建形状的mixins来为这些柱子里面的小东西添加效果。如果我们看下bublble这个效果的代码，我们就会发现每个圆圈都使用了绝对定位并使用到了这个mixin。在CSS中创造三角形需要很多的代码，所以mixin就派上了大用场。
让我们看看红色的柱子，柱子里面包含着很多的气泡：
所以现在，如果想要在柱子里面创造一些气泡的话，我只需要调用这些mixin，设置气泡的大小，然后让把他们放在柱子的特定的位置上就好了：
当你需要通过边框来制作一些小的三角形的时候，你需要用大概20行的css代码来生成，所以使用mixin实在是太有必要了。
气泡的动画
我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。点击这个链接，你可以了解更多的关于交错动画的知识:http://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/
三角形的动画
在黄色的柱子里面，我使用到了旋转的效果。但是你可能注意到，有些旋转是围绕着X轴的，有些是围绕着Y轴进行运动的。我们在这里使用到了 cycle属性。
方块的动画
在制作方块的动画的时候，我们也使用到了相同的技术。因此，有一半的方块是从左向右移动的，而另外一般则做反方向的运动。
分数的动画
让我们点击重新开始，再看下这个动画吧.
我想要分数的动画有一种“Q弹”的感觉，于是我就写了几行代码来形成这个效果。
为了做出这种“触电”（或者说是“Q弹”）的效果，我们需要制作正确的缓动动画。如果你想要看看你可以使用什么样的缓动方程，看下 Greensock 缓动观察器:http://greensock.com/ease-visualizer 选择 Elastic 并调整配置参数，你就可以实时地看运动效果。
弹性盒子
这款游戏的第一个创新性就是使用了“弹性盒子”，如果要是不了解弹性盒子的话，你可以阅读下这篇优秀的文章： https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 或者看下 Laracasts上的相关系列。一旦你开始使用了弹性盒子，你就再也离不开它。下面我们看下我的的主菜单界面和游戏界面吧。
开始游戏的容器CSS样式如下：
“flex-direction: column”表示在容器内部弹性元素的排列方向。 设置为Column，则元素从上到下依次排列。而默认的（row）则将元素从左到右排列。弹性盒子可以这只空白区域，我们可以设定我们是在元素的前面、后面或者周围放置这些空白区域。动手试下，感受下弹性盒子是多么好玩吧！因为我们设置成了“space-between”，所以 Top 被放在了顶部， How to Play被放在了底部，而Logo Holder则放在了中间，空白区域被填充在了这些元素之间。 Align-items: center, 定于交叉轴（这个游戏中代表水平轴）上元素的对齐方式，center表示居中对齐。其中 How to Play也是一个弹性盒子，它的代码如下:
它也是一个flex元素，我们如果去设定他的flex-direction, 它将使用默认值（row），将其中的三个弹性元素水平的排列。第一个和第三个元素的“flex”参数为1，因此他们将占据所有的空白空间，flex是一个相当高端的特性。同样的，你也可以通过在How to Play上设置 justify-content: space-around来达到同样的目的.我使用flex: 1 的原因是，我想让中间的一列排在屏幕的最中央。
下面我们看下游戏界面。这个界面也是一个弹性布局。界面有一个柱子容器和一个球的容器。我不想让球是绝对定位的，因为我通过css让球刚好坐在柱子上，这样即使我改变柱子的高度，我也不需要改动其他代码就可以让球恰好落到柱子上。因此我将容器的flex-direction设置为 column,正如我所愿，球容器刚好紧挨着柱子的顶部。justify-content: space-between让球的容器永远靠着屏幕的顶部，而柱子容器永远靠着屏幕的底部。 现在我们给球的容器如下的样式:
球的容器也是弹性布局，我们将flex方向设为column（这样Y轴成为了主轴，元素从上到下排列）。之后我们通过 justify-content: flex-end将球推到了容器的底部，因此，我们便得到了两个紧密排列的容器，并且第一个容器的内部元素被推到了该容器的最下面，这样我们便做到了让球坐在了柱子上的效果。
试想下，如果我们不使用弹性布局会怎么做？我们也许会使用到floats, width: 33.33333% ，position: absolute 和 bottom: 0，我的天啊！ Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了.
让游戏界面可缩放
做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！如同我说的，我仅仅是使用了 CSS transform， 这样做具有它独特的挑战性。假如游戏的默认大小是 1200x800px.吗，如果你的屏幕大小和这个不一样的话，你需要通过调节系数让游戏的容器变得大一些或者小一些，也就是做个计算"screenHeight/800\".当然，如果设备的高度大于宽度的时候（当我们的平板或者手机处于垂直模式的时候）我们也需要相应地缩放我们的屏幕，下面是计算缩放比例的代码 :
显然仅仅是这样做不能让视觉体验变得完美，所以我们需要在缩小我们的游戏界面的同时让它垂直水平居中。
因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。如果我们将界面缩小到原始尺寸的一半的时候，我们需要让它的容器放大到原来的两倍大小，这样容器便可以充满整个屏幕。相反如果屏幕很大的时候，我们需要将界面变为原来的1.2倍，那么容器将相应的从原始尺寸缩小到 screenSize/1.2
后记
我希望你能喜欢这个游戏和我写的这篇文章，我也希望通过这篇文章，你可以收获一些新的东西并作出十分精彩的作品
我将持续不断地完善我的游戏，并相应地更新文章，增加新的玩法或者尝试些新的技术哦！
本文由众成翻译（zcfy.cc）的译者翻译完成，抢先阅读更多优质英文技术文章，欢迎访问众成翻译。
*请认真填写需求信息，我们会在24小时内与您取得联系。
