新人們找個好玩的來練練手如何？雖然我不是專職搞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:不同瀏覽器可能看到的排版效果不同,未測試.
執行截圖:
後記：
朋友們，所有人的技術都是一步步積累而來，而製作小遊戲，小專案就是讓積累的過程更快樂。
本文是將我自己部落格中的幾篇文章總結匯總而來，各位可以回鏈參觀一下，也有不少自制小專案玩玩。
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
