COOL IT IDEAS AND STUFF

18 Games on CodePen That Will Teach You About Programming

30-Apr-21

คัมภีร์เทพ IT

See the original english version Click here!

 

มีวิธีมากมายในการพัฒนาทักษะ Programming ซึ่งมี Programmer จำนวนมาก ที่แชร์ Projects ของพวกเขากับคนทั่วโลกในที่ต่าง ๆ เช่น CodePen และ Github หากคุณวางแผนที่จะสร้าง Games ด้วย CSS, JavaScript และ HTML เชื่อว่า 18 Games บน CodePen ที่ช่วยสอนทักษะ Programming ในบทความนี้จะสามารถช่วยคุณได้ คุณสามารถอ่าน Source Code ของแต่ละ Game เพื่อเรียนรู้และสร้าง Game ของคุณเองได้

1. Memory game

เกมนี้ถือเป็นเกมที่น่าตื่นเต้น คุณต้องจับคู่ภาษา Programming (เช่น Java-Java) จนกว่าคุณจะจับคู่ได้ครบทุกคู่ ถึงจะถือว่าเล่นเกมเสร็จ เกมนี้ไม่จำกัดเวลาในการเล่น แต่คุณต้องมีความจำที่เฉียบคมเพื่อเล่นเกมให้จบ

2. RGB Color Game

ในเกมนี้คุณจะต้องเดาว่าเมื่อผสมสีกันแล้ว สีใดถูกต้อง และคุณไม่ต้องเร่งรีบเพราะไม่มีการกำหนดเวลา และคุณสามารถเลือก Level ได้ว่าจะเล่นในระดับ Easy หรือ Hard

3. Pong Game with JavaScript

นี่คือเกมปิงปองแบบง่าย ๆ โดยคุณจะเล่นกับ Bot และหากทำคะแนนได้มากกว่า คุณก็จะชนะ เกมนี้ควบคุมด้วย Keyboard ดังนั้น คุณจะรู้สึกเหมือนเล่นเกมจริง

4. Coronavirus Invaders

เกมนี้เป็นเกมที่น่าตื่นเต้น แต่อาจทำให้คุณเมื่อยมือสักหน่อย เพื่อที่จะชนะเกมนี้ คุณต้องฆ่า Coronaviruses ด้วยการคลิกหลาย ๆ ครั้ง ขอแนะนำให้คุณใช้ Mouse สำหรับการคลิกอย่างบ้าคลั่ง

5. Coronavirus Shooting game

เกมนี้มีความแตกต่างจากเกม Coronavirus ก่อนหน้านี้ คุณต้องยิง Corona ทุกตัวที่คุณเห็น จนกว่าจะจบเกม ยิ่งคุณเล่นเกมนานเท่าไร คุณก็จะได้เจอ Corona มากขึ้นเท่านั้น เพียงแค่ชี้ Cursor ไปที่พวกมันทั้งหมดแล้วเล่นเกมให้จบ

6. Pickle Rick Maze Game

หากคุณมีเวลาเล่นเกม เกมนี้เหมาะสำหรับคุณอย่างมาก เกมนี้จะแบ่งออกเป็นระดับความยากในหลายระดับ โดยในระดับ Easy นั้น แน่นอนว่ามันง่ายจริง ๆ แต่คุณอาจจะต้องใช้เวลานานขึ้นในการเล่นระดับ Hard และ Extreme หากคุณไม่สามารถผ่านด่านที่ยาก ๆ ได้ คุณสามารถเล่นระดับ Easy และระดับ Medium ได้ตลอดเวลา และรูปแบบเขาวงกตจะถูกเปลี่ยนไปเสมอเมื่อคุณ Restart เกม

7. Bullseye Game

คุณสามารถเล่นเกมนี้ได้โดยการยิงเป้าด้วยธนูของคุณ คุณต้องตั้งใจอย่างรอบคอบเพื่อให้ธนูเข้าเป้า เกมนี้ไม่จำกัดเวลาในการเล่น ลูกศรของคุณก็มีอย่างไม่จำกัด และคุณสามารถยิงได้มากเท่าที่คุณต้องการ

8. Stickman Fight

เกมนี้จะต้องใช้ผู้เล่น 2 คน คุณต้องการเพื่อนสักคนที่จะต่อสู้กันในเกมนี้ ซึ่งจะใช้การตีกันและใครก็ตาม ที่บริมาณชีวิตใน Bar หมดก่อน ก็จะเป็นฝ่ายแพ้

9. Snake Game

เชื่อว่าคงมีบางคนที่คุ้นเคยกับเกมนี้ ซึ่งเคยอยู่ในโทรศัพท์มือถือยี่ห้อหนึ่งรุ่น 3210 เกมนี้อาจได้รับแรงบันดาลใจจากเกมนั้น และงูของคุณจะพุ่งไปข้างหน้าจนกว่าคุณจะชนกับลำตัวของงูเอง

10. Zombie Mayhem

เกมนี้จะเกี่ยวกับการกะจังหวะเวลาที่เหมาะสม คุณต้องป้องกันไม่ให้ Zombie เดินไปถึงอีกด้านหนึ่ง ด้วยการยิงพวกมันทีละตัว คุณมีกระสุนแค่ 6 นัดในแต่ละรอบ และคุณต้อง Load ซ้ำเมื่อกระสุนหมด

11. Lingo Game

เกมนี้ค่อนข้างยาก เพราะคุณจะต้องเดาคำที่อยู่ใน Block สีเหลือง โดยคุณมีโอกาสเดาคำศัพท์ได้ 5 ครั้ง

  • สร้างโดย KS
  • ดู Code บน CodePen

12. Arrow Defense Game

เกมนี้ค่อนข้างง่าย คุณเพียงแค่ยิงธนูที่กำลังพุ่งเข้าหาคุณ และอย่าปล่อยให้ธนูเข้ามาโดนคุณ

13. Tilting Maze Game

เกมนี้ค่อนข้างมีความสร้างสรรค์และดูเหมือนจะเล่นง่ายในตอนต้น มันเป็นเกมเขาวงกต แต่มีความแตกต่างจากเกมก่อนหน้านี้ ในเกมนี้คุณจะต้องทำให้จุดต่าง ๆ มาชนกันทีละจุดจนหมด และเมื่อคุณเหลือจุดเดียว ให้นำมันไปวางไว้ในรูปวงกลมเส้นประที่อยู่ตรงกลางของเขาวงกต

14. Tic Tac Toe Game

เกมนี้เป็นเกมในวัยเด็กของใครหลายคน คุณอาจเคยเล่นด้วยกระดาษและปากกา แต่ตอนนี้คุณสามารถเล่นผ่าน Online ได้แล้ว ในเกมนี้ผู้เล่นคนแรกที่วางเครื่องหมายเรียงในตาราง 3 ช่อง ไม่ว่าจะในแนวทแยง แนวนอน หรือแนวตั้ง ได้สำเร็จ จะถือเป็นผู้ชนะ

15. Avoid Asteroids

ในเกมนี้ คุณจะต้องหลีกเลี่ยงไม่ให้ยานของคุณชนกับดาวเคราะห์น้อย

16. Chess Game

เชื่อว่าทุกคนรู้จักเกมนี้อยู่แล้ว คุณสามารถเล่นกับผู้เล่นคนอื่นเพื่อสนุกกับเกมนี้

17. HTML5 Racing Game

เกมนี้เป็นเกมแข่งรถง่าย ๆ ที่จะทำให้คุณย้อนกลับไปนึกถึงเกมแข่งรถในโรงเรียน ในช่วงวัยเด็กของคุณ

  • สร้างโดย Logan
  • ดู Code บน CodePen

18. Game Logic

เกมนี้ก็คล้ายกับเกม Fruit Ninja โดยในเกมนี้คุณเพียงแค่ตัดลูกโป่งที่กำลังจะตกลงพื้น

BONUS (จะมีใครที่สามารถเอาชนะผู้ชายด้านล่างนี้ได้บ้าง)

ที่มา:  https://javascript.plainenglish.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

Categories