（點擊上方公眾號，可快速關注）
作者：伯樂在線專欄作者 - 陸熠十四
連結：http://web.jobbole.com/87642/
新人們找個好玩的來練練手如何？雖然我不是專職搞web的，但做過幾個代碼簡陋，只有幾十行，然而做出來的感覺甚是開心，也希望各位新入門的開發者，可以拿去做個小遊戲玩玩看。
三個遊戲：翻轉拼圖，2048網頁版，視力大作戰。
一：翻轉拼圖
其中翻轉拼圖個人認為是最好玩的一個以前做過詳細的邏輯和代碼分析，連結在下可以學習一下。代碼在試玩網頁可以查看：http://luyishisi.github.io/game1/
在準備寫這個之前至少要有html，css和JavaScript的知識，如果會jQuery最好。
首先貼上一開始想的開發規劃：
逐步實現：
1：點擊按鈕實現變色，
2：點擊按鈕實現旁邊按鈕的變色
3：實現變色的重複性，
4：設置邊界，
5：設置成功條件。
試玩頁面如下：
http://luyishisi.github.io/game1/
所以，一開始是先畫一個按鈕，加入JavaScript函數，觸發點擊事件修改按鈕的背景顏色。再次點擊則再次修改。當實現這兩個的時候，時間已經過去一個多小時，在午飯前一直鬱悶於如何讓旁邊的按鈕也變色。一開始的思路是每一個按鈕設置id，分別處理，可以想像這是一個很糟糕的思路，於是開始考慮別的方案。開始吃午飯了，一路上我就如何把按鈕旁邊的顏色變化這個問題，求教大師兄。他提供的解決方案，是運用jQuery的遍歷，剛好昨天學了jQuery，這個思路是不錯的。後來超哥也提供一個思路，就是用二維數組表示數值，點擊按鈕修改數租參數，再調用一個函數，刷新所有按鈕的值。好就決定是他了，（最終成品版用了avalon.min.js ），上吧，皮卡丘
二：2048網頁版
2048這個遊戲很知名，手機端網頁版pc端都有，今天我們可以稍微自己做一個簡易版的玩一下。
編寫思路：
16個按鈕構成界面
通過js修改value值
js捕捉鍵盤事件抓住方向鍵觸發
觸發事件修改按鈕的value值
寫運行算法，根據按鈕value對應的數值得出新值
修改與測試
運行界面：
請不要嘲諷我難看的設計，希望有妹子可以修正給個美麗的色調。
試玩地址：
http://luyishisi.github.io/game2048/
js代碼就不貼了有試玩地址f12你們懂得：
三：視力大作戰
前段時間看空間流行一個小遊戲,類似與一個表格每點擊一次所有的顏色都會變化,找出其中某一個與別的顏色不同的,感覺思路比較清晰就順手寫一個玩一玩.
試玩網址:https://www.urlteam.org/shiligame.html 有地址f12就可以看源碼，我不多解析了。
好吧,我承認這份代碼比較low.沒有用什麼框架,也沒有什麼很好拓展性,不像是之前用avalon做的那個:
這個代碼主要還是想拿來複習一下,,楞是寫了兩節課,如果換在去年,估計半個小時就基本搞定了..唉.代碼還是得經常練,不然又得重新學..
代碼的整體思路是:
用div劃分出16個塊.css處理一下樣式,在js中,捕捉每一次點擊事件,每次產生一個4096以內的隨機數,處理成色彩編碼,然後把每一個div的背景色進行修改,然後再產生一個隨機數,對16去餘數,轉換為id編號,將其色彩編碼做一個隨機小範圍的增減,然後刷新背景色..
已經發現的bug有:
1:產生的隨機數如果是0則因為沒有bu0這個id會導致遊戲無法進行,已經修復,出現0則++;
2:產生的隨機數如果與上次的相等會導致色彩刷新失敗,已經修復,與name_temp比對,相同則++;
3:手機上顯示不是很切合,還未解決..
4:不同瀏覽器可能看到的排版效果不同,未測試.
運行截圖:
後記：
朋友們，所有人的技術都是一步步積累而來，而製作小遊戲，小項目就是讓積累的過程更快樂。
本文是將我自己博客中的幾篇文章總結匯總而來，各位可以回鏈參觀一下，也有不少自製小項目玩玩。
專欄作者簡介 （ 點擊 → 加入專欄作者 ）
陸熠十四：少年程序猿，從事數據採集挖掘方面：個人博客，www.urlteam.org。主要技能樹：python，爬蟲，linux，web前端，ACM，騎行。
--- 推薦 ---
範品社推出了十幾款程式設計師、電影、美劇和物理題材的極客T恤。單件 ￥59.9、兩件減￥12、四件減￥28，詳見網店商品頁介紹。
網店地址：https://fanpinshe.taobao.com/
淘口令：複製以下紅色內容，然後打開手淘即可購買
範品社，使用￥極客T恤￥搶先預覽（長按複製整段文案，打開手機淘寶即可進入活動內容）