Advertisement
  1. Code
  2. HTML5
Code

20 HTML5 Game Template สุดฮิต

by
Length:LongLanguages:

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

เทคโนโลยี Flash ได้ครอบครองโลกบราวเซอร์ของวงการเกมมายาวนาน แต่ Flash ก็ได้ล้าสมัยลง เป็นที่ของ HTML5 ที่เข้ามาแทน ซึ่งเกมที่สร้างด้วย Flash ส่วนมากก็เริ่มย้ายมาเขียนบน HTML5 กันบ้างแล้ว

การเปลี่ยนแปลงอีกอย่างก็คือ บางทีคุณอาจเคยเล่นเกมเหล่านี้ บางทีเป็น app ที่ไม่ใช่บราวเซอร์ ซึ่งทั้งหมดนั้นใช้ HTML5

คุณมีแนวคิดหรือไอเดียการสร้างเกมบ้างไหม

มาดู 20 HTML5 Game Template สุดฮิตเหล่านี้บน Envato Market กัน เพื่อค้นหาจุดเริ่มต้นไอเดียการทำเกมของคุณหรือค้นหาโซลูชันที่ยอดเยี่ยมให้กับเว็บไซต์

1. Canvas Puzzle - เกมตัวต่อ

Canvas Puzzle เป็นเกม HTML5 อันแรกบน Envato Market ดังนั้นที่นี่จะเป็นจุดเริ่มต้นที่ดี

แนวคิดนั้นเรียบง่าย แต่ไม่ใช่สิ่งที่จะทำให้เกมนั้นเป็นเกมที่สุดยอดหรอกนะ

Canvas Puzzle

ตอนนี้มันเข้ากันได้กับบราวเซอร์รุ่นใหม่ๆ แล้ว แต่ HTML5 game template อันนี้นั้นใช้ Internet Explorer 9 หรือต่ำกว่า มันเกิด fallback น้อย ขณะที่มันสามารถทำงานได้ดีกับ iPad รุ่นล่าสุดทั่วๆ ไป

ผู้ใช้งานสามารถใช้รูปภาพอะไรก็ได้ แค่ drag and drop ด้วย Firefox หรือ Chrome และสั่งให้มันสร้างจำนวนตัวต่อที่ไม่จำกัดด้วยขนาดชิ้นส่วนที่ต่างกัน

Canvas Puzzle นั้นเบา เรียบง่าย clean และพร้อมสำหรับคุณที่สามารถจะ customize ได้ตามต้องการ

2. Word Search Game - เกมค้นหาคำศัพท์

เพียงแค่ upload สคริปต์ของคุณและเริ่มเล่น Word Search Game ได้เลย

จาก Internet Explorer 6 ถึง บราวเซอร์รุ่นใหม่ๆ หรือแม้แต่บน iPad -- เกมค้นหาคำศัพท์อันนี้มีขนาดเล็ก และพร้อมให้ความสนุกกับคุณ

Word Search Game

นี่น่าจะเป็นคือฟีเจอร์ที่สำคัญของเกมเลยทีเดียว

  • สนับสนุนการใช้งาน unicode
  • สามารถใช้อักษรใดๆ ก็ได้
  • มีตัวเลือกให้สามารถใช้ตัวเลขแทนได้

Word Search Game นั้นยังมีส่วนปรับแต่งสำหรับ admin ให้มาด้วย

3. Indiara and the Skull Gold - Indiara กับเจ้ากะโหลกทองคำ

เหมือนกับ HTML5 game template ส่วนมากอื่นๆ Indiara and the Skull Gold นั้นทำงานได้บนทุก platform

คุณพร้อมหรือยังที่จะเริ่มต้นผจญภัยค้นหาขุมทรัพย์โบราณในถ้ำที่เต็มไปด้วยกับดักมากมาย

Indiara and the Skull Gold

HTML game template ที่แสนแฟนตาซีนี้ประกอบไปด้วย

  • ระดับทั้ง 8 ระดับ
  • ไฟล์ Construct 2
  • ไฟล์ Photoshop และ Illustrator ที่แบ่งเป็น Layer ไว้ให้แล้ว
  • และอื่นๆ อีกมากมาย

Indiara and the Skull Gold นั้นสนับสนุนทั้งการ touch และใช้เม้าส์อย่างเต็มที่ มีปุ่มแชร์สำหรับ social media และ สามารถปรับแต่งแบบ visual ได้ง่ายด้วยการเปลี่ยนไฟล์รูปภาพ หรือ สามารถแก้ไขได้อย่างอิสระผ่าน Construct 2

4. Slot Machine The Fruits - HTML5 Casino Game - เกมคาสิโน Slot Machine ผลไม้

The Slot Machine The Fruits - HTML5 Casino Game นั้นถูกปรับแต่งให้ใช้ได้ทั้ง mobile และ desktop อีกทั้งยังใส่รูปภาพที่มีคุณภาพสูง มัน support ความละเอียดถึง 1500x640 เลยทีเดียว

Slot Machine The Fruits - HTML5 Casino Game

ชิ้นงานที่เต็มไปด้วยสีสันนี้สร้างด้วย

Slot Machine The Fruits - HTML5 Casino Game ยังสามารถติดตั้งโดยใช้ปลั้กอิน CTL Arcade ของ WordPress ได้อีกด้วย

5. Coloring Book - HTML5 Game - สมุดวาดภาพระบายสี

ติดตั้งสมุดระบายสีของคุณด้วย Coloring Book - HTML5 Game

ด้วยการสนับสนุนการใช้ touch และ เม้าส์อย่างเต็มที่ สมุดวาดภาพระบายสีที่ตอบสนองได้นี้มีทุกสิ่งทุกอย่างที่คุณต้องการและพร้อมที่จะเริ่มใช้งานมัน

Coloring Book - HTML5 Game

ซึ่ง HTML5 game template อันนี้ประกอบด้วย

  • ระบบปริ้นท์งานระบายสีได้
  • ระบบตั้งค่า
  • สามารถปรับแต่งหน้าตาการใช้งานได้
  • และอื่นๆ อีกมากมาย

ส่วนที่ดีที่สุดเลย Coloring Book - HTML5 Game นั้นมาพร้อมกับสีทั้ง 24 สีและรูปภาพ 16 รูปและตัวเลือกที่สามารถเพิ่มสีและรูปภาพเพิ่มเติมได้มากเท่าที่คุณต้องการ

6. The Sorcerer - HTML5 Game - นักเวทย์ยิงไข่

มาสนุกกับเวทย์มนต์และ HTML5 game template กันด้วย The Sorcerer - HTML5 Game

The Sorcerer - HTML5 Game

เกมนี้สร้างโดยได้แรงบันดาลใจมาจากเกม Zuma ประกอบไปด้วยระดับความยาก 3 แบบด้วยกัน

มันถูกสร้างด้วยเทคโนโลยีเหล่านี้

ความละเอียด 960x540 นั้นออกแบบมาให้เข้ากับหน้าจอพอดี และสามารถใช้กับ ปลั้กอิน CTL Arcade ของ Wordpress ด้วย

มาลองปรับปรุงแก้ไขเกม The Sorcerer - HTML5 Game กัน และ ทำให้เวทย์มนต์เกิดขึ้นจริงกันเถอะ

7. Game Christmas Furious - คริสต์มาสที่บ้าคลั่ง

เข้าสู่ฤดูกาลแห่งความบ้ากันแล้ว

เกม Chrismas Furious ที่ใช้ HTML5 template นั้นสนับสนุนการใช้ touch และ เม้าส์กับทุก platform

Game Christmas Furious

ภายในประกอบด้วย

  • ความยาก 6 ระดับ
  • ไฟล์ Construct 2
  • ไฟล์ Photoshop และ Illustrator ที่แบ่งเป็น Layer แล้ว
  • และอื่นๆ อีกมากมาย

กองทัพบอลลูนบุกขั้วโลกเหนือแล้ว Santa สามารถหาของขวัญและหลีกเลี่ยงบอลลูนเหล่านั้นได้ไหม

HTML5 game template ของเกม Christmas Furious นั้นพร้อมเล่นหรือแก้ไขได้ตามใจคุณ

8. HTML5 3D BlackJack - HTML5 Casino Game - เกมคาสิโน 3D BlackJack

The HTML5 3D BlackJack - HTML5 Casino Game นั้นประกอบไปด้วย

  • split hand
  • double bet
  • ฟีเจอร์วงเงินประกัน (insurance feature)

ส่วนที่ดีที่สุดของ template นี้คือกราฟิกแบบ Hi-Res 3D

3D Roulette - HTML5 Casino Game

เกมนี้สร้างมาจาก HTML5, JavaScript และ CreateJS มันทั้งเล่นได้และแก้ไขตัวเกมได้

มาเริ่มวางเดิมพันกันเลยกับ HTML5 3D BlackJack - HTML5 Casino Game สามารถติดตั้งผ่านปลั้กอิน CTL Arcade ของ Wordpress ได้อีกด้วยนะ

9. Game FlapCat Steampunk - แมวบินติดจรวด

เกม FlapCat Steampuck นั้นเหมือนกับเกมยอดฮิตที่รู้จักกัน ด้วยการออกแบบที่เรียบง่ายทำให้เล่นได้ทันที

มาสนุกกับการ touch และ ใช้เม้าส์กับความละเอียด 1280x720

Game FlapCat Steampunk

แมวน้อยสุดเจ๋งนี้ประกอบไปด้วย

  • ด่านไม่จำกัด
  • ไฟล์ Construct 2
  • ไฟล์ Photoshop และ Illustrator ที่ตัดเป็น Layer แล้ว
  • และอื่นๆ อีกมากมาย

เกม FlapCat Steampunk นั้นมีภาพวาดที่ยอดเยี่ยมและพร้อมให้คุณเล่นหรือดัดแปลงมันได้

10. 3D Roulette - HTML5 Casino Game - เกมคาสิโน 3D รูเล็ตต์

ก็เหมือนกับ HTML5 3D BlackJack - HTML5 Casino Game เกม 3D รูเล็ตต์นี้มาพร้อมกับ 3D hi-res

3D Roulette - HTML5 Casino Game

มันพัฒนาโดยใช้

เราสามารถแก้ไข 3D Roulett - HTML5 Casino Game ได้ง่ายๆ โดยดาวน์โหลดและแก้ไขไฟล์ Photoshop และ Illustrator มันยังสามารถติดตั้งโดยใช้ Wordpress CTL Arcade Plugin ได้อีกด้วย

11. Bubble Shooter - HTML5 Games - ยิงฟองน้ำ

Bubble Shooter - HTML5 Games นั้นทำให้เรานึกถึงเกมที่คล้ายๆ กันที่คุณน่าจะเคยเล่นนะ

เกมที่เรียบง่ายและติดใจคนทั้งหลายนี้สามารถติดตั้งหรือแก้ไขได้ตามที่คุณชอบเลย

Bubble Shooter - HTML5 Games

HTML5 game template อันนี้มาพร้อมกับความละเอียด 870x1504 และสนับสนุน responsive อย่างเต็มที่ ทั้งนี้สามารถแก้ไขไฟล์ Photoshop และ Illustrator ได้ด้วย

มันถูกพัฒนาด้วยเทคโนโลยี HTML5, JavaScript และ CreateJS และมันพร้อมที่จะเล่นและติดตั้งโดยตรงเข้าไปใน WordPress โดยใช้ CTL Arcade WordPress plugin

12. Woblox - เกมเลื่อนไม้

Woblox นั้นเป็นเกมที่เพิ่มทำให้ผู้คนติดเยอะที่สุดใน HTML5 game template

แค่ใส่โลโก้ของคุณ จากนั้นเกมปริศนาก็พร้อมเล่นแล้ว

Woblox

เกมนี้สามารถเล่นได้กับทุก platform แต่มันก็รู้สึกดีที่สุดเมื่อใช้ touch screen เหมือนกับว่าคุณได้เลื่อนแม้จริงๆ เพื่อปลดปล่อยให้แท่งไม้สีเขียวนั้นเป็นอิสระ

ในเกมประกอบด้วย

  • ความละเอียด 384x600
  • ด่านตั้ง 45 ด่านเลยทีเดียว
  • ใช้ event ใน Construct 2 น้อยกว่า 100 Event
  • อื่นๆ

การปรับแต่งนั้นง่ายๆ และค่อนข้างเสพติด Woblox นั้นเรียกได้ว่าเป็นหนึ่ง HTML5 game template ที่ยอดเยี่ยมเลยทีเดียว

13. Sliding Puzzle - เลื่อนประกอบภาพ

Sliding Puzzle HTML game template ประกอบไปด้วยโหมดเกม 3 โหมด

  • classic
  • challenge
  • fun

ในแต่ละโหมดจะมีแนวทางการเล่นต่างกันออกไปกับการเล่นพื้นฐาน คือการเปลี่ยนเปลี่ยนภาพบล็อคที่ติดกันจนได้รูปภาพที่สมบูรณ์

Sliding Puzzle

เพียงแค่โหลดชุดรูปภาพของคุณเอง ปรับแต่งให้เข้ากับการออกแบบและตั้งค่าเพียงเล็กน้อย มาเริ่มงานกับ Sliding Puzzle HTML5 game template กันได้เลย

14. Don't Crash - อย่าชนกันนะโว้ย

ย้ำอีกครั้ง อย่าชนกัน

นั่นแหละ

ดูเหมือนง่าย แต่สิ่งนี้แหละที่ทำให้ HTML5 game template นี้เป็นที่น่าจดจำ และให้เราเดาว่ามันเล่นอะไรกันแน่

Dont Crash

ฟีเจอร์ที่มี

  • สนับสนุนการ touch
  • สนับสนุน responsive เต็มที่
  • ความละเอียด 1280x720
  • แถมด้วยไฟล์ Construct 2
  • และอื่นๆ อีกมาก

อย่าลืมมาเล่น Don't Crash กัน!

15. HTML5 Slot Machine: Jackpot 777 - สล็อตแมชชีน

HTML5 Slot Machine: Jackpot 777 template อันนี้ประกอบด้วยทุกอย่างที่คุณสามารถสร้างมันขึ้นมาได้เอง

HTML5 Slot Machine Jackpot 777

ฟีเจอร์นั้นประกอบไปด้วย

  • ไฟล์ Illustrator
  • ไฟล์ Construct 2
  • ควบคุมโดยใช้เม้าส์และ touch
  • อื่นๆ

มาเล่นให้ได้ Jackpot กับ HTML5 Slot Machine: Jackpot 777 HTML5 game template กัน

16. Katana Fruits - HTML5 Game - สับผลไม้

มาเป็นเจ้าของ Fruit Ninja ถัดไปกับชุด Katana Fruits - HTML5 Game template ทื่สามารถแก้ไขได้เองได้อย่างเต็มที่

Katana Fruits - HTML5 Game

ซึ่ง HTML5 game template นี้สร้างขึ้นพร้อมกับโค้ดสำหรับสับผลไม้พวกนี้

คุณสามารถแก้ไขหน้าตาเกมได้ด้วยไฟล์ Photoshop และ Illustrator ที่ใส่มาให้ ทั้งยังสามารถติดตั้งโดยตรงที่ Wordpress โดยใช้ CTL Arcade WordPress plugin อีกด้วย

17. Panda Love - การผจญภัยค้นหารักของแพนด้าน้อย

พร้อมแล้ว ติดตั้ง และลุยเลย

เกมวิ่งแพนด้าน้อยนี้ ต้องการคนเล่นเพื่อให้มันผ่าฟันอุปสรรค เก็บของรางวัล มีทั้งหมด 20 ด่าน

Panda Love

Template นี้ประกอบด้วยไฟล์ Construct 2 พร้อมกับฟีเจอร์เหล่านี้

  • autosave
  • สนับสนุนการโฆษณา
  • one touch control
  • และอื่นๆ อีกมากมาย

แสดงความรักในรูปแบบ pixel กับ Panda Love กันเถอะ

18. HTML5 Tetris - เกมตัวต่อเวอร์ชัน HTML5

Template ของ HTML5 game ทั้งหมด HTML5 Tetris นั้นคืออันที่ผู้รวบรวมชอบที่สุดเลย

มันยากนะที่จะหนีห่างจากความคลาสสิก

HTML5 Tetris

ด้วยการสนับสนุนการ touch และความละเอียด 800x600 คุณสามารถที่จะ

  • เปลี่ยนเสียงและเพลงของเกม
  • ปรับแต่งรูปแบบเกมให้เป็นของคุณเอง
  • ใช้ไฟล์ Photoshop ที่เป็น Layer เพื่อออกแบบมันใหม่

เกมนี้สร้างโดย GameMaker Studio สำหรับ HTML5 Tetris game template นั้นเหมาะสำหรับทุกๆ คน

19. Let's Park! - เกมจอดรถคุณภาพสูง

Let's Park! นั้นมีภาพประกอบสวยงามและลื่นไหลต่อการเล่น

Lets Park-High Quality Parking Game

ไฟล์นั้นประกอบด้วย

  • ไฟล์ HTML5
  • ไฟล์ Photoshop ที่หั่นเป็น Layer ไว้แล้ว
  • ไฟล์โปรเจค Construct 2

Let's Park! เหมือนกับ HTML5 Game template อื่นๆ ที่สนับสนุนการใช้คีย์บอร์ดและควบคุมด้วยการ touch แต่แนะนำให้เล่นกับ touch screen มากกว่า

20. Angry Finches - Funny HTML5 Game - ถึงตานกกระจิบออกโรงบ้างหล่ะ

มันเห็นได้ชัดว่า  Angry Finches - Funny HTML5 Game ถูกสร้างขึ้นมาจากแนวคิดเกมอะไร

Angry Finches - Funny HTML5 Game

มันถูกสร้างโดย GameMaker Studio และประกอบไปด้วย

  • ด่านทั้ง 20 ด่าน
  • ไฟล์ Photoshop ที่หั่น Layer แล้ว
  • สามารถแก้ไขเสียงและเพลงของเกม
  • และอื่นๆ อีกมากมาย

ใช้ Angry Finches - Funny HTML5 Game template เพื่อสร้างแนวเกม Angry Bird ของคุณเอง

โดยสรุป

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

คุณสามารถเข้าไปที่ Envato Tuts+ code tutorial หัวข้อ game design หรือ game mechanics มันมีประโยชน์มาก หรือแม้แต่ HTML5 tutorial เอง เพื่อเป็นจุดเริ่มต้นในการสร้างเกมของคุณ

เริ่มเล่นเกมแล้วลุยเลย!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.