ใช้เวลาเพียง 5 นาทีก็สามารถสร้างเกมส์งูได้

เราจะมาสร้างเกมส์งูจาก HTML และ JavaScript กันใน 5 นาทีกันนนน

ตัวอย่างเกมส์ที่จะได้ในตอนท้ายครับ

เริ่มจาก สร้างไฟล์ html ขึ้นมาก่อน ผมจะเเบ่งไฟล์นี้ออกเป็น 2 ส่วนคือ

• HTML
• JavaScript

ต่อมาเราจะมาสร้างตัว Context หรือสนามกันครับ โดยสร้าง body tag มาใน html เเล้วก็สร้าง canvas มากำหนด id, width และ height เท่านี้สำหรับ html ส่วน script จะใช้ window.onload มาเพื่อเวลาโหลดหน้าเว็บจะมาเรียกตรงนี้ก่อนนั้นเอง ซึ่ง getElementById ของ canvas ที่เราสร้าง id ไว้ตอนเเรก ต่อมาก็ getContext(‘2d”) และ setInterval ไว้ให้ไปเรียก function game เเละsetInterval ไว้ที่ 100

ต่อมาเราจะมาเซ็ต ตัวงูเเละลูกเชอรี่นะครับ จาก positionX = positionY คือตำแหน่งเริ่มต้นของตัวงู เเละ gs, tc คือ ขนาดของ กรอบสนาม cherryX, cherryY คือตำแหน่งเริ่มต้นของลูกเชอรี่ ทำการเซตสีของทั้งงูเเละเชอรี่

ต่อมาเราจะมาเขียน function ให้งูวิ่งได้นะครับโดยใช้ document.addEventListener(“keydown”, keyPush); คือการทำ event เวลากดลูกศรนั้นเอง ซึ่ง keyCode ของ ลูกศรซ้าย คือ 37, ลูกศรขึ้น คือ 38, ลูกศรขวา คือ 39 และลูกศรลง คือ 40

จะเห็นได้ว่างูสามารถวิ่งได้เเล้วเเต่เมื่อเราไปกินลูกเชออรี่ ลูกเชอรี่ก็ยังไม่หายไปและตัวงูก็ยังไม่ยาวขึ้นด้วย เราเลยต้องใส่ if ดักไว้เมื่อตำแหน่งของงูเเละเชอรี่เท่ากันให้เพิ่ม score, random ลูกเชอรรี่ใหม่ เเละ เพิ่มความยาวของงู

เพียงเท่านี้เราก็ได้เกมส์งูแบบง่ายมาเล่นเเก้เบื่อเเล้วนะครับ มาสรุปกันนิดนึงว่าเราทำอะไรไปบ้าง

1. สร้าง html file มาเเล้วเเบ่งเป็นสองส่วนคือ html เเละ script
2. สร้าง canvas เพื่อสร้าง context 2d
3. สร้าง window.onload มาเพื่อเซ็คค่าของสนาม, addEventListener, score และ setInterval
4. เพิ่ม function Game เพื่อเซตค่าของงู, ลูกเชอรี่ เเละสนาม
5. เพิ่ม function keyPush เพื่อรับ keyPush event ให้งูเครื่อนไหว

ผมจะแปะตัวอย่างโค๊ตทั้งหมดไว้ด้านล่างนะครับ

Cr. Chris DeLeon of Gamkedo