其實很多常見的小游戲都是純前端開發出來的，比如曾經風靡的2048、別踩白塊啊等等，簡單有趣，對於初學者來說，這些小游戲是非常不錯的練手項目。
實驗樓上很多前端教程，這里整理7個前端開發的小游戲教程，希望對你學習前端有所幫助~
1.網頁版2048
項目通過搭建一個網頁版的 2048 ，讓大家學習 web 應用程序的開發流程、以及如何讓應用在移動端自適應處理以應對各種大小的屏幕，布局和初始化，編寫游戲的邏輯、實現讓它能移動，判定結果。
效果圖：
是不是和我們玩的2048一模一樣呀，O(∩_∩)O~
2.HTML5實現拼圖游戲
項目使用HTML5和css3實現的九宮格拼圖游戲。只要兩步既可以實現炫酷的效果和動畫。詳細的講解，讓你清楚地知道每一句代碼的作用。
效果圖：
自己開發完之后還可以玩玩，告訴你，你可以開發它，但是玩可不一定行哦~
3.網頁版掃雷
項目實現一個Web版本的掃雷游戲，通過該項目將學習並實踐 JavaScript 和 CSS 等基本的Web開發知識。
效果圖：
看着就有想玩的沖動啊，有木有~
4.網頁版-別踩白塊游戲
項目用最基礎的html，css，以及原生的JavaScript實現一個網頁版本的“別踩白塊”游戲。
效果圖：
做完后可以試着玩玩，看看速度如何，太快或者太慢都可以隨時調整。
5.HTML5實現抓怪物小游戲
項目利用 HTML5 的 Canvas 特性，結合 js 來開發一個抓小怪物的小游戲。從中我們可以學習到如何用 HTML5 來構建一個 WebApp。
效果圖：
6.JavaScript打地鼠游戲
項目為打地鼠，是大家耳熟能詳的一款經典的小游戲，用前端技術來實現這個游戲，簡單有趣。
效果圖：
7.JavaScript按鍵控制坦克移動
項目使用javascript按鍵控制坦克在網頁上移動，通過使用很簡單的，清晰明了的代碼使坦克在頁面上平滑的移動，通過學習，可以掌握javascript的按鍵操作，從而讓頁面更好的與用戶互動。
效果圖：
看效果圖很簡單，但是只要稍微發揮你的想象力，把坦克改成其他的物體，就可以變成其他的小游戲了，比如加一個迷宮，就是走出迷宮游戲了。