30 個純 HTML5 實現的遊戲

做者：Danny Markov
來源：tutorialzin
譯者：前端小智

點贊再看，養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

瀏覽器和 JavaScript 的功能逐年不斷的變強變大。曾幾什麼時候，任何類型的遊戲都須要Flash。但隨着 HTML5 發展，HTML5 + WebGL 遊戲式就慢慢佔領着這個舞臺。如下是30款流行的遊戲，它們能夠在全部現代瀏覽器中運行，而且只使用web技術構建。

1. HexGL

地址：http://hexgl.bkcore.com/
類型：街機，賽車

HexGL 是一款基於HTML5，JavaScript和WebGL的快節奏的賽車遊戲。 玩家可使用鍵盤，觸摸屏設備或leap motion(體感控制器)來控制太空飛船。

2. CrossCode

地址：http://www.cross-code.com/en/home
類型：動做，角色扮演

一個復古靈感的2D遊戲設定在遙遠的將來。這是一個充滿偉大的遊戲機制，如組合，拼圖，技能樹，任務，物品等等。

3. Sketchout

地址：https://sketch-out.appspot.com/

類型：街機

Sketchout的任務保護你的行星，並經過改變流星的方向來消滅對手，經過使流星偏轉來保護您的星球並消滅對方，這款遊戲有很棒的視覺效果和音樂特效。

4. Treasure Arena

地址：http://www.treasurearena.com/
類型：多人，角色扮演，動做

Treasure Arena 是一款動態的競技場戰鬥遊戲，最多可容納4名玩家。它具備不一樣的遊戲模式，出色的幀率和配樂，是一個很是有趣的遊戲。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

5. Bejeweled

地址：http://bejeweled.popcap.com/html5/

類型：街機，解謎，娛樂

HTML5格式的經典「寶石迷陣」遊戲。 這是一個官方克隆，所以能夠正常運行且外觀完美。

6. Missile Game

地址：http://missile-game.bwhmather.com/
類型：街機

這是一款很是具備挑戰性的遊戲，遊戲中咱們扮演的是一枚被髮射進隧道的導彈。遊戲有很酷的黑白圖像，玩的時候會有很強的場景效果。

7. Gods Will Be Watching

地址：http://www.deconstructeam.com/games/gods-will-be-watching/
類型：拼圖

在這個使人不寒而慄（但又很棒）的遊戲中，我和本身團隊必須獨自生存40天。 團隊有六名成員，其中包括一隻狗，一名精神病醫生和一個機器人，您必須與他們互動，以使其保持溫暖，溫飽和理智的狀態。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

8. Sinuous

地址：http://www.sinuousgame.com/
類型：街機

一個簡單的遊戲，極簡的圖形和流暢的幀率。拾取電源時避免與紅點碰撞。此外，若是你想要那些額外的積分，就須要不停向前移動

9. Swooop

地址：http://swooop.playcanvas.com/
類型：街機

在一個美麗多彩的3D世界裏，處處飛翔，收集寶石和星星。

10. Free Rider HD

地址：http://www.freeriderhd.com/

Free Rider HD 是一款使人上癮的遊戲，你能夠在其餘玩家繪製的賽道上騎自行車。 能夠在成千上萬的播放器曲目中選擇一個播放，也能夠建立本身的曲目並分享。

11. Entanglement

地址：http://entanglement.gopherwoodstudios.com/zh-CN-index.html
類型:拼圖,娛樂

這個遊戲的目的是經過在網格上放置線段來建立一條儘量長的路徑。你能夠單獨玩，也能夠和朋友一塊兒玩。

12. Escape from XP

地址：https://www.modern.ie/en-us/ie6countdown#escape-from-xp

類型：動做，街機

用「Escape from XP」來慶祝 Windows XP 的終結。你的任務是拯救最後一個陷入Clippy暴政的開發人員。

13. Polycraft

地址：http://polycraftgame.com/
類型：角色扮演，塔防，動做

在這個很棒的3D遊戲中，你處處收集資源，建造東西，完成任務。 關於它的全部東西都通過拋光，而且運行也很是順暢。

14. 2048

地址：https://gabrielecirulli.github.io/2048/
類型：拼圖

一個很是上癮的遊戲，你可能已經玩過了。在 2048 ，你移動編號的圖塊併合並它們。當界面中最大數字是`2048 時，遊戲勝利。

15. Onslaught Arena

地址：http://arcade.lostdecadegames.com/onslaught_arena/

類型:動做

一種快節奏的復古生存遊戲，您可使用不一樣的武器與成羣的敵人做戰。

16. Angry Birds

地址：http://chrome.angrybirds.com/
類型:遊戲

《憤怒的小鳥》遊戲，這就不用介紹了。

17. Cube Slam

地址:https://www.cubeslam.com/mcycrs

類型：街機，多人

具備豐富的色彩和炫酷的3D圖形乒乓球遊戲。 咱們能夠經過向朋友發送一個URL來挑戰他們，還能夠經過網絡攝像頭看到對方。

18. The Wizard

地址：http://hypnoticowl.com/games/the-wizard/
類型：動做，角色扮演，策略

Wizard 是基於回合的地牢爬行者，在裏面會遇到神話般的怪物並找到奇妙的咒語。 該遊戲具備酷炫的戰鬥機制，有時可能會帶來很大挑戰。

19. X-Type

地址：http://phoboslab.org/xtype/
類型：動做，街機

在這款酷炫的太空射擊遊戲中，你目的就是要起打敗 Boss。

20. Cookie Clicker

地址：http://orteil.dashnet.org/cookieclicker/
類型：休閒，搞笑

Cookie clicker 是一款可能爲了開玩笑而建立的遊戲，但仍然提供了大量的樂趣。 你能夠從0個cookie開始，而後單擊一些有效率的cookie，最後你可能會發現本身擁有數十億個cookie。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

21. Elevator Saga

地址：http://play.elevatorsaga.com/
類型：拼圖，編碼

這類屬於程序員類型遊戲 。 在電梯中的任務是經過對電梯的運動進行編程，以最有效的方式運送人員，這些都是用 JavaScript 來完成的。

22. Game of Bombs

地址：http://gameofbombs.com/landing
類型：動做，角色扮演，多人

Game of Bombs是一個轟炸機類型的遊戲，在廣闊地圖上，都有着敵方玩家。 收集力量，皮膚和成就，以成爲最佳轟炸機玩家的方式。

23. Olympia Rising

地址：http://or.paleozoic.com/
類型：平臺遊戲，動做

Olympia Rising具備漂亮復古外觀圖形的遊戲。 它坐落在古希臘，在那裏咱們扮演的女人被賦予了從新的機會，因此咱們的任務就是逃離死者的世界。

24. Pixel Race

地址: https://ned.im/pixel-race-game/
類型：街機，賽車

Pixel Race是一款簡單概念概念，你能夠在收集硬幣的同時控制汽車以避開障礙物。 若是有足夠的耐心和空閒時間，那麼你可能會打破記錄（記錄爲36309個硬幣）。

25. Little Alchemy

地址：https://littlealchemy.com/
類型：拼圖

從這四個基本元素開始，將它們組合起來，建立510種可能的組合。

26. Arena5

地址：http://www.kevs3d.co.uk/dev/arena5/
類型：街機

在數字領域中飛行並射擊幾何敵人以得到高分。

27.Vector Runner Remix

地址:https://vector-runner-remix.tresensa.com/
類型：街機

在這個充滿色彩和幾何形狀的平臺遊戲中，盡你所能奔跑吧。

28. Biolab Disaster

地址：http://playbiolab.com/
類型:動做

一款出色的像素藝術平臺遊戲，你必須在這裏逃脫充滿突變生物和其餘不良生物的實驗室。

29. World's Biggest PAC-MAN

地址:http://worldsbiggestpacman.com/#
類型：街機

30. New Super Resident Raver

地址：http://games.jessefreeman.com/new-super-resident-raver/

從即將到來的殭屍入侵中拯救惶恐不安的人們。收集錢，升級你的武器和戰鬥殭屍。

---

原文：https://tutorialzine.com/2015...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

---

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。