สวัสดีค่ะ วันนี้ผู้เขียนจะมาสอนคุณเขียนเกมง่ายๆ บนเว็บไชต์ ซึ่งเกมที่ผู้เขียนจะมาสอนในวันนี้คือเกม Breakout
*ในการเรียกเกมนี้นั่นตัวบราวเซอร์ของคุณจะต้องรองรับ <canvas> ด้วยนะคะ*
งั้นก่อนอื่นเรามาดูตัวเกมที่ผู้เขียนได้เขียนไว้กันก่อนเลย…
รูปที่ 1
และนี่คือหน้าตาเว็บที่เราจะเขียนกันออกมา ใครที่อยากลองตัวเกมเข้าไปโหลด code จากในไดร์ฟ แล้วเล่นกันได้เลย คลิ๊ก!
เรามาดูที่ตัวโค้ดกันเลยดีกว่า
รูปที่ 2
เริ่มจากการบอกคอมพิวเตอร์ก่อนว่านี้เป็นภาษา HTML โดยการพิมพ์ <html> จากนั้นตามด้วย <head> และตามด้วย <title> เพราะเราจะเขียนส่วนหัวของเว็บ ในที่นี้ผู้เขียน พิมพ์ว่า “บอลกระเด้ง” ซึ่งมันจะไปโผล่ที่หัวบนสุดของเว็บ หรือก็คือ Tab หากผู้อ่านยังไม่เห็นภาพแนะนำให้ขึ้นไปดูรูปที่ 1 นะคะ ซึ่งหลังจากเราพิมพ์คำสั่งใดๆแล้วจะต้องสั่งจบหรือปิดคำสั่งนั้นโดยการใส่เครื่องหมาย / ด้านหน้าตามรูปเลยนะคะ </title> </head>
จากนั้นทำการพิมพ์คำสั่ง <style> เพื่อเป็นการบอกคอมพิวเตอร์ว่าโค้ดต่อไปนี้เป็นการเขียนด้วย CSS ในที่นี้ผู้เขียนใช้ CSS เพือตกแต่งเพิ่มสีสันให้เว็บ ต่อมาเราเขียน #Start หมายความว่าให้คอมพิวเตอร์รันโค้ดภายในเครื่องหมายปีกกานี้เมื่อเจอคำสั่ง Start ในโปรแกรม เรามาดูคำสั่งภายในปีกกากันทีละอย่างเลยนะคะ
Width หมายถึงความกว้างในการแสดงผลบนหน้าจอ มีหน่วยเป็น px หรือ pixel
Height หมายถึงความสูงในการแสดงผลบนหน้าจอ มีหน่วยเป็น px หรือ pixel
Font-size หมายถึงขนาดตัวอักษร
Font-family หมายถึงใช้ font ใดในการเขียน
Background หมายถึงสีพื้นหลัง
อย่าลืมนะคะ คำสั่งเหล่านี้นั้นใช้เฉพาะกับโค้ด Start ซึ่งผู้เขียนได้กำหนดว่าโค้ด Start คือตัวปุ่มที่เราจะเห็นอยู่ในรูปที่ 1 เมื่อเราเขียนคำสั่งทั้งหมดภายในปีกกาเป็นที่เรียบร้อย เราก็ทำการพิม </style> เพื่อบอกคอมพิวเตอร์ว่า คำสั่ง CSS จะจบเพียงเท่านี้
รูปที่ 3
ต่อมาเราทำการพิมพ์ <script> เพื่อบอกว่าต่อไปนี้จะเป็นการเขียนด้วยภาษา Javascript ซึ่งผู้เขียนใช้ในการเขียนตัวเกมทั้งหมด โดยเริ่มจากการกำหนดตัวแปลงต่างๆอย่างที่เห็นในรูปด้านบนนี้ คำสั่งในการกำหนดตัวแปลคือ var ตามด้วยชื่อตัวแปล เท่ากับ ค่าที่เราต้องการจะตั้ง
รูปที่ 4
ต่อมาเรามาทำการเขียนฟังก์ชั่นหรือคำสั่งที่ตัวเกมจะต้องใช้ เริ่มจากคำสั่งว่าเมื่อเริ่มทำงานจะให้แสดงผลอะไรบ้าง ในที่นี้ผู้เขียนใช้ฟังก์ชั่นนี้ในการเรียกใช้คำสั่งต่างๆ ที่มีในโค้ดขึ้นมาทำงาน คำสั่งที่ว่านี้เราจะเห็นได้ในรูปต่อๆไปค่ะ ในส่วนของฟังก์ชั่น runCode เป็นการเซตว่าจะให้คอมพิวเตอร์ตอบสนองด้วยความเร็วเท่าใด นที่นี้คือให้เรียกคำสั่ง draw โดยตอบสนองทุกๆ 8 miliseconds
รูปที่ 5
ต่อมาเป็นฟังก์ชั่นการวาดวงกลม โดยมีการเรียกใช้ตัวแปลง 3 ตัวแปลที่เราใส่ไว้ในวงเล็บ คำสั่งที่เราใช้อันแรก ctx.beginPath คือสั่งสั่งเริ่มวาด ต่อมา ctx.arc คือการกำหนดว่าจะวาดจากไหนไปไหน ซึ่ง x และ y คือตำแหน่งที่เริ่มวาด (ค่าเราได้กำหนดไว้ด้านบนแล้ว, รูปที่ 3) และ r คือรัศมี จากนั้น 0 กับ Math.PI*2 คือเริ่มวาดจาก 0 องศาเรเดียนถึง 2π เรเดียน หรือก็คือ 1 รอบวงกลมพอดี จากนั้น ctx.closePath คือการจบคำสั่งการวาด ctx.fill คือการบอกว่าเป็นวงกลมทึบ
ในลักษณะเดียวกันฟังก์ชั่น rect คือการวาดสีเหลี่ยม หรือบล็อกที่เราจะทำลายนั่นเอง ฟังก์ชั่นต่อมา clear คือการลบสี่เหลี่ยมที่เราวาดไปออก (เราจะใช้ในตอนที่ลูกบอลโดนบล๊อค)
รูปที่ 6
ต่อมาเป็นฟังก์ชั่นในการรับข้อมูลผ่านทางเมาส์และคียบอร์ด โดยกำหนดเป็นฟังก์ชั่น if-else และใส่ตัวเลข Key Code ที่คอมพิวเตอร์จะเข้าใจนั่นคือปุ่มลูกศรขวาหมายเลข 39 และลูกศรซ้ายหมายเลข 37 แน่นอนเราต้องเขียนสองฟังก์ชั่นสำหรับการกดปุ่มและการปล่อยปุ่ม addEvent เป็นการกำหนดฟังก์ชั่นเพื่อรองรับพฤติกรรมการใช้งานของผู้ใช้ได้แก่การกดเมาส์และคียบอร์ด และ onMouseMove คือการกำหนดว่าให้คอมพิวเตอร์ตรวจสอบว่าเมาส์อยู่ต้องไหน ให้แป้นรับลูกบอลเคลื่อนที่ตามเมาส์โดยจะต้องไม่พ้นขอบของตัวเกม
รูปที่ 7
ต่อมาฟังก์ชั่น initbricks เป็นการวาดบล๊อคซ้ำๆกัน ทั้งในแนวแกน x และแกน y โดยใช้การคำนวนแบบเวกเตอร์ i และ j จากนั้นในฟังก์ชั่น drawbricks เป็นการสั่งวาดกำหนดขนาด
รูปที่ 8
เมื่อเราทำการวาดสิ่งต่างๆ แล้วก็มาถึงขั้นตอนของการใส่สี ในที่นี้ผู้เขียนใช้ Arrays มาช่วยในการให้สีของบล๊อคในแต่ละแถว และในฟังก์ชั่น draw หรือการสั่งวาด เราได้ทำการเรียกฟังก์ชั่นที่เรากำหนดขนาดและสีของลูกบอล บล๊อคมาวาดโดยคำนวนอัตโนมัติจากความกว้างของส่วนแสดงผลว่าควรจะมีกี่บล๊อค ในส่วนของ if-else นั้นใช้กำหนดว่าเมื่อเราทำการกดคียบอร์ดลูกศรขวาหรือซ้ายแล้วจะให้แสดงผลเลื่อนจากตำแหน่งเดิมตามแนวแกน x ไปเท่าใด นอกจากนี้ฟังก์ชั่น draw ยังกำหนดขนาด สี และทำการวาดแป้นรับบอลด้านล่างด้วย
รูปที่ 9
และนี้คือส่วนสุดท้ายของตัวเกมที่ใช้ภาษา Javascript โดยยังคงกำหนดอยู่ในฟังก์ชั่น draw แต่ใส่ if-else สำหรับการคำนวนว่าเมื่อบอลชนบล๊อค บล๊อคต้องหายไป และเมื่อบอลเคลื่อนที่ชนขอบจะต้องเด้งกลับ ยกเว้นกรณีที่บอลเคลื่อนที่เลยขอบด้านล่างโดยไม่มีแป้นมารับให้ถือว่าเกมจบ หยุดการวาดภาพ และขึ้นแจ้งเตือนว่า “YOU LOSE”
รูปที่ 10
และในส่วนสุดท้ายหลังจากเราทำการเขียนตัวเกมด้วย Javascript เรียบร้อยแล้วก็มาถึงส่วน body ของหน้าเว็บ ถ้าขาดส่วนที่หน้าเว็บจะไม่แสดงผลใดๆเลย เพราะยังไม่มีการเรียกโค้ด Javascript มาที่หน้าจอ ดังนั้นในส่วนนี้ ได้เขียนคำสั่ง onload และเรียกฟังก์ชั่น init ที่เป็นฟังก์ชั่นในการเรียก javascript ทุกอย่างขึ้นมาทำงาน และการกำหนดว่า onload คือเมื่อเราทำการเปิดหน้าเว็บให้รันฟังก์ชั่น init ทันที
คำสั่ง div ตามด้วย align=”center” นั้นใส่มาเพื่อให้ทุกสิ่งที่เราจะเขียนต่อไปนี้ปรากฎอยู่ตรงกลางของหน้าเว็บ คำสั่ง <h1> และ <h2> เป็นการเขียนข้อความบนหน้าเว็บโดย h1 จะมีขนาดใหญ่กว่า h2 จากนั้นทำการเรียก canvas ด้วยคำสั่ง canvas ซึ่งมันคือการเรียกหน้าจอตัวเกมของเราขึ้นมานั้นเอง จากนั้น <p> คือการใส่ข้อความเป็น paragraph แต่ในที่นี้ผู้เขียนใช้ในการเว้นบรรทัด และตามด้วยคำสั่งสร้างปุ่ม Start ซึ่งเมื่อทำการกดแล้วจะรันฟังก์ชั่น runCode ที่เราได้เขียนไปก่อนหน้านี้ให้ทำงาน และตัวเกมก็จะเริ่ม
เพียงเท่านี้เราก็สามารถเล่นเกมได้แล้วง่ายๆที่เราเป็นคนสร้างเองผ่านทางหน้าเว็บได้แล้ว ซึ่งไม่จำเป็นต้องใช้อินเตอร์เน็ตในการเล่น เราสามารถไปเล่นที่ไหนก็ได้ขอเพียงเรามีไฟล์ตัวโค้ดนี้ติดไปด้วย ขอบคุณค่ะ 🙂
