英文 | https://javascript.plainenglish.io/17-exciting-games-on-codepen-you-can-learn-from-about-game-coding-5417d90f2490
翻譯 | web前端開發
對我來說，向他人學習編碼是提高我的程式設計技能的另一種方式。像CodePen和Github之類的網站上就有很多優秀的程式員在那裡與世界各國的程式員公開分享了他們的項目。
如果你打算使用CSS，JavaScript和HTML建立迷你小遊戲，那我今天的内容，應該可以給你一些幫助。你可以通過檢視CodePen上的源碼來進行程式設計技能的學習，同時還可以建立自己的小遊戲。
1、記憶遊戲
這個遊戲有點令人興奮。你必須配對程式設計語言（Java-Java），直到遊戲結束。沒有時間限制，但是，你需要敏銳的記憶才能完成整個遊戲。
這個遊戲由Nate Wiley建立，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/natewiley/pen/HBrbL
2、RGB彩色遊戲
在這個遊戲中，你将不得不猜測哪種顔色組合是正确的。你有五次嘗試完成每個回合。你不必着急，因為沒有時間限制，很可能會失敗幾次。
這個由Michelle Huang建立，如果你想檢視源碼，可以到在CodePen上檢視完整代碼，代碼位址：https://codepen.io/itsmhuang/pen/oxaReK
3、使用JavaScript的Pong遊戲
這是一個簡單的乒乓球遊戲，至少有五輪。你與機器人對戰并得分直到獲勝。該遊戲是由鍵盤控制的，是以你會感覺像在玩一個真實的遊戲。
這個遊戲由加百利·杜貝（GabrielDubé）建立，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/gdube/pen/JybxxZ
4、冠狀病毒入侵者
這是一個令人興奮的遊戲，但會累人。為了赢得遊戲，你必須多次單擊才能殺死冠狀病毒。現在，我建議你使用滑鼠進行硬式單擊。
這個遊戲由 Elad Shechter建立，如果你想檢視源碼，可以到在CodePen上檢視完整代碼，代碼位址：https://codepen.io/elad2412/pen/wvabjXy
5、冠狀病毒射擊遊戲
這與上面的以前的冠狀病毒遊戲有很大的不同。你需要射擊将看到的每一個病毒，直到清除遊戲為止。你玩遊戲的時間越長，獲得的能量就越多。将光标指向所有這些對象并完成遊戲。
這個遊戲的建立者是Faisal Jawed，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/faisal-jawed/pen/NWqeRNZ
6、迷宮遊戲
如果你有更多時間玩，這個遊戲适合您。遊戲分為幾個關卡。初級水準，很容易成功，但是，你需要花費很長時間才能完成極端和艱巨的任務。如果你無法完成艱難的關卡，那麼你始終可以玩簡單和中等的關卡。每當你重新啟動時，它們的迷宮總是會改變。
這個遊戲的建立者是馬丁，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/TheCodeDepository/pen/jKBaoN
7、射擊打靶遊戲
通過用弓箭擊中靶心目标來玩這個遊戲。你必須仔細瞄準才能達到目标。沒有時間限制。你的箭頭是無限的。你可以發射任意數量的箭。
這個遊戲的建立者是 Elliot Geno，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/pyrografix/pen/qrqpJN
8、火柴人大戰
需要兩名玩家才能玩這個遊戲。你需要有人與之抗衡才能享受這場比賽。遊戲是通過互相擊打來進行的，無論誰先耗盡生命，都将輸掉遊戲。
這個遊戲的建立者是Laïsa， 如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/LERUS/pen/rNaZPJv
9、蛇遊戲
我們都熟悉，我們的首批3210手機上的這款遊戲。該遊戲可能是受到該遊戲啟發的，并且你的蛇會一直向前推進，直到你擊中自己。
這個遊戲的建立者是 Jack Rugile， 如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/jackrugile/pen/IHbvh
10、僵屍混亂大戰
這場比賽是關于時間準确性。你必須通過逐個射擊僵屍來防止它們進入另一側。每個回合中有六個子彈，子彈用完時需要重新加載。
這個遊戲的建立者是 Elior Tabeka，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/eliortabeka/pen/RoNgzR
11、Lingo遊戲
我從來沒有清除過這個遊戲。我嘗試了幾次，但沒有成功。你必須猜出黃色方塊後面的單詞。我不知道這些詞是什麼，因為我回答正确了。
這個遊戲的建立者是KS，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/KSayrs/pen/KgObm。
12、箭防遊戲
這個遊戲很簡單。隻要射向你的箭頭，就不要讓自己受到打擊。
這個遊戲的建立者是Faisal Jawed，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/faisal-jawed/pen/xxKBgBo
13、傾斜迷宮遊戲
這款遊戲一開始就非常有創意，也很容易。這是一個迷宮遊戲，但與我上面提到的不同。在此遊戲中，你必須使所有圓點彼此碰撞，當下降到一個圓點時，将其置于迷宮中的虛線圓形狀。
這個遊戲的建立者是Hunor Marton Borbely，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/HunorMarton/pen/VwKwgxX
14、井字遊戲
這個遊戲是我的童年遊戲。我學會了用紙和筆玩，現在，我可以線上玩了。在此遊戲中，第一個成功将其三個标記成功放置在對角線，水準或垂直行中的玩家是獲勝者。
這個遊戲的建立者是freeCodeCamp，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/freeCodeCamp/pen/KzXQgy
15、避免小行星
在這個遊戲中，你需要不惜一切代價避免被小行星擊中。
這個遊戲的建立者是Sagee Conway，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/saconway/pen/VwvyVpx
16、國際象棋遊戲
所有人都知道這個遊戲。與另一位國際象棋棋手一起玩可以享受這個遊戲。
這個遊戲的建立者是Harold Bell，如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/hbellatcodepen/pen/GxqmaJ
17、HTML5賽車遊戲
這是一個簡單的賽車遊戲，這款遊戲可以讓你想起你的童年時代的舊式賽車遊戲。
這個遊戲的建立者是洛根（Logan），如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/HRLRies/pen/GpqGWr
18、遊戲邏輯
該遊戲類似于水果忍者遊戲。剪掉掉落在地上的氣球-錯過了三個氣球，比賽結束了。
這個遊戲的建立者是法比奧·奧塔維亞尼（Fabio Ottaviani），如果你想檢視源碼，可以到在CodePen上檢視完整代碼。
代碼位址：https://codepen.io/supah/pen/vYKYKGd
總結
我希望您喜歡這個清單，也希望您在無聊時會喜歡上面的遊戲。但是，不要隻是玩這些遊戲。您可以閱讀它們的代碼，對其進行研究，并建立自己的遊戲。
學習更多技能
請點選下方web前端開發