整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
覽器和 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小時內與您取得聯系。
