สร้างเกมทดสอบสุขภาพสมองง่ายๆ ด้วย Javascript และ Free Deploy on Netlify

เกมส์นี้สามารถใช้เป็นแบบฝึกหัดการเขียน javascript ได้เป็นอย่างดี เป็นเกมส์ทดสอบสมองโดยการคลิ๊กนับเลขจาก 1–50 และจับเวลา

นอกจากฝึกเขียนแล้ว ในส่วนหลัง ผมจะแนะนำการ deploy โดย netlify ด้วย

เกมส์นี้ผมจะทำเป็น web app ง่ายๆ ด้วย HTML, CSS และ Javascript

ในโฟลเดอร์ชื่อ brain-game ให้สร้างไฟล์ขึ้น 3 ไฟล์ — index.html, styles.css และ index.js เสร็จแล้วอย่าลืมลิงค์ index.html กับ styles.css และ index.js ด้วย

ใน index.html สร้าง div ด้วย class ชื่อ game และภายใน div นี้ สร้าง div ขึ้นมา 2 div คือ class control และ class table

ใน div แรก (control) สร้าง button ให้ id ชื่อ restart และ div id ชื่อ timer

ใน div ที่สอง (table) สร้าง div จำนวน 25 div ด้วย class เหมือนกันชื่อ number และให้ id เป็นตัวเลขเรียงจาก 1–25

ใน styles.css ตกแต่ง html ด้วยโค้ดนี้

เมื่อมี css แล้ว ให้เปิดไฟล์ index.html ด้วยบราวเซอร์อะไรก็ได้ (แนะนำให้เปิดด้วย chrome) จะได้หน้าตาเพจดังนี้

ทีนี้มาถึงส่วนสำคัญ คือ index.js ซึ่งเป็น javascript code ที่จะเป็น logic ให้เกมส์ทำงาน ผมจะแบ่งออกเป็นส่วนย่อยๆ ดังนี้

ส่วนที่ 1: นำตัวเลข 1–25 มาแสดงในช่อง ต่างๆ แบบสุ่ม

สร้าง function สำหรับ display ตัวเลข ตั้งชื่อฟังค์ชั่นว่า firstDisplay

เริ่มจาก declare ตัวแปรชื่อ firstNumbersList ด้วย let ตัวแปรนี้จะเป็น array สำหรับเก็บตัวเลขที่เราจะสุ่มเลือกมา เราจะต้องทำการสุ่มเลือก 25 ครั้งเพื่อให้ได้ตัวเลขที่ไม่ซ้ำกันจำนวน 25 ตัว (คือตัวเลข 1–25)

ใน function firstDisplay ก็ assign [ ] หรือ empty array ให้ firstNumbersList หลังจากนี้ก็ใช้ for loop เพื่อรันทั้งหมด 25 รอบเพื่อหาค่าตัวเลข โดยให้ function getNumber เป็นฟังค์ชั่นสำหรับหาค่าตัวเลข เราสุ่มตัวเลขโดย Math.random และทำให้ไม่มีทศนิยมด้วย Math.floor และต้องบวก 1 ด้วยเพื่อให้ตัวเลขเริ่มจาก 1 จนถึง 25 (Math.random ใช้หาค่าตัวเลขแบบสุ่มระหว่าง 0–1 จึงต้องคูณด้วย 25 เพื่อให้ได้ค่าระหว่าง 0–25)

ในฟังค์ชั่น จะมีการเช็คเพื่อไม่ให้ได้ตัวเลขซ้ำกัน โดยใช้ find ซึ่งเป็น array method สำหรับเช็ค ถ้าเจอว่าตัวเลขที่สุ่มมาซ้ำกับตัวเลขก่อนหน้า ฟังค์ชั่น getNumber ก็จะเริ่มรันใหม่ด้วย return getNumber() เพื่อหาตัวเลขใหม่จนกว่าจะได้ตัวเลขที่ไม่ซ้ำกัน

เมื่อ for loop รันเสร็จเราก็จะได้ firstNumbersList เป็นตัวเลขจำนวน 25 ตัวที่มีค่าตั้งแต่ 1–25 แต่จะไม่เรียงลำดับ ตัวอย่างข้างล่างคือ firstNumbersList ที่ได้มาหลังจากฟังค์ชั่น firstDisplay run 1 ครั้ง

ตัวเลขสีน้ำเงินทางขวาคือค่าที่ได้ ส่วนตัวเลขสีแดงทางซ้ายคือ index ใน array (array index เป็น zero base)

เมื่อ for loop รันเสร็จและได้ตัวเลข 25 ตัวมาแล้ว ก็จะใช้ array map method เพื่อ get element by ID โดยใช้ array index เป็นตัวอ้างอิง(นั่นเป็นเหตุผลว่าทำไมจึงตั้งชื่อ ID เป็นตัวเลขเรียงจาก 1–25) แล้วก็ assign ค่านั้นๆ ให้ element แต่ละตัว

ยกตัวอย่างเช่น element ที่มี id=1 ตามตัวอย่าง array ด้านบน element นี้ จะถูก assign ค่าให้เท่ากับ 7 และจะแสดง 7 ในหน้า html

ส่วนที่ 2: สร้างฟังค์ชั่นสำหรับเล่นเกมส์เมื่อคลิ๊กเลือกหมายเลข

ผมตั้งชื่อฟังค์ชั่นว่า playGame แล้วทำ reference มาที่ฟังค์ชั่นนี้ในทุกๆ element ด้วย event “click” (line 28) และเนื่องด้วยเราต้อง pass argument ด้วย (pass “html” ใน playGame) ดังนั้นในตัวฟังค์ชั่น playGame ผมจึงต้องมี => () เพิ่มขึ้นมา (อีกทางเลือกหนึ่งคือเปลี่ยนจาก playGame(html) เป็น () => playGame(html) ใน line 28)

ก่อนที่จะเขียน logic สำหรับ playGame ฟังค์ชั่น เราต้อง declare ตัวแปรสองตัวคือ secondNumbersList และ countedNumbers ซึ่งจะเป็นตัวแปรสำหรับเก็บ array ที่มีหมายเลข 26–50 และ หมายเลขที่จะนับตอนเล่น 1–50 ตามลำดับ และ assign [ ] หรือ empty array ให้ทั้งสองตัวแปรนี้ใน firstDisplay function (line 7–8)

สำหรับโค้ดของ playGame เริ่มแรกก็จะดึงค่าของ element ที่ถูกคลิ๊กขึ้นมาก่อนด้วย element.innerHTML ค่าที่ได้จะเป็น string แล้วเราจะเช็คว่า element ที่ถูกคลิ๊กเริ่มจาก 1 และเพิ่มขึ้นทีละ 1 หรือปล่าวด้วย if check โดยแปลงค่าที่ได้ที่เป็น string ให้เป็น number ก่อนด้วย + แล้วเช็คกับ length ของ countedNumbers array + 1 ถ้าไม่เท่า (คือ +value !== countedNumbers.length + 1 เป็น true) ก็จะ return โดย code ในฟังค์ชั่นนี้ที่อยู่หลังจากบรรทัดนี้จะไม่ถูกรัน

ถ้าผ่าน if check ไป ก็จะ push +value เข้าไปใน countedNumbers array และจะต้องเช็คต่อว่าค่า +value ของ element ที่คลิ๊กมีค่าน้อยกว่า 26 หรือไม่ ถ้าน้อยกว่า (คือคลิ๊กหมายเลข 1–25) ก็จะต้องหา random number ที่มีค่าตั้งแต่ 26 ถึง 50 มา display แทน (line 41–52) แต่ถ้าคลิ๊ก element ที่ค่าเกิน 25 ก็จะให้ display empty string แทน (line 54 คือไม่ display อะไร คลิ๊กแล้วตัวเลขก็หายไป)

ส่วนที่ 3: สร้างฟังค์ชั่นสำหรับ timer และใส่ onClick ในปุ่ม Restart

สร้างฟังค์ชั่น timeStart, autoReset ด้วย setInterval และฟังค์ชั่น timeStop ด้วย clearInterval

โดย call function timeStart เมื่อมีการคลิ๊กหมายเลข 1 โดยให้ if เป็นตัวเช็ค (line 83–86) และ call timeStop เมื่อ countedNumbers ครบ 50 จำนวน (line 104–107) และต้อง call timeStop และ assign ค่า 0 ให้ totalTime ตอนเริ่มฟังค์ชั่น firstDisplay ด้วย (line 40–41)

สำหรับ autoReset ก็ใช้ if check เพื่อเช็คว่า countedNumbers.length เป็นศูนย์ (คือหมายเลข 1 ไม่ถูกคลิ๊ก) เป็นเวลาเกิน 8000 milliseconds หรือ 8 วินาทีนั่นเอง และต้องไม่ลืมเคลียร์ autoReset ด้วย clearInterval ตอนเริ่มฟังค์ชั่น firstDisplay และ playGame ด้วย

ส่วน Restart ก็แค่ลิงค์ firstDisplay function เข้ากับปุ่ม Restart ด้วย click event (line 111)

ก็เป็นอันจบส่วนเขียนโค้ดครับ

ส่วน Deploy ด้วย Netlify

เพื่อให้เป็น auto deploy เราจะ deploy ด้วยการลิงค์ netlify เข้ากับ github repository

เริ่มจากเราต้องมี git installed ในเครื่องของเราก่อน ถ้าไม่มีให้ไป intall ได้ที่ https://git-scm.com/ แล้วก็ต้องมี github account ด้วย ถ้ายังไม่มีก็ไป sign up ได้ที่ https://github.com/ (ถ้าเป็นการใช้ git, github ครั้งแรก หรือใช้ด้วย new machine ก็จะต้องทำการ Connecting to GitHub with SSH ดูรายละเอียดได้จากลิงค์นี้ https://help.github.com/en/articles/connecting-to-github-with-ssh)

เมื่อมี git, github พร้อมแล้วและ connect github กับ local machine แล้ว ก็ให้สร้าง new repository ใน github

ตั้งชื่อ แล้วคลิ๊ก Create repository

ตามรูปข้างล่างจะมี 5 คำสั่งที่ต้องรันใน terminal

เปิด command prompt หรือ terminal (ต้องอยู่ใน root folder ในที่นี้คือ brain-game) แล้วรันคำสั่งดังกล่าวทีละคำสั่ง

เมื่อ refresh github page ก็จะพบว่าไฟล์ทั้ง 3 ที่เราได้เขียนขึ้นถูกอัพโหลดขึ้น github เป็นที่เรียบร้อย

ไปที่ https://www.netlify.com/ ถ้ายังไม่มี account ก็ให้ Sign up เพื่อสร้าง account แล้ว Log in เข้าไป

คลิ๊กที่ New site from Git

ภายใต้ Continuous Deployment คลิ๊กที่ GitHub หลังจากนั้นให้คลิ๊ก Configure Netlify on GitHub

ใส่ password เพื่อ authorize ให้ Netlify สามารถ connect ไปยัง GitHub ได้

กด Select repositories แล้วเลือก brain-game แล้วคลิ๊ก save

คลิ๊กตรง > ด้านขวามือ

คลิ๊ก Deploy site

รอประมาณ 2–3 วินาที app ที่เราเขียนขึ้นก็จะถูก Deploy พร้อมกับได้ url ที่ auto generated มาให้

เป็นอันเสร็จ deployment เราก็สามารถเปิด url ดังกล่าวได้ และตอนนี้ app เราก็ up and running on intenet เป็นที่เรียบร้อย

ถ้าเรามีการแก้ไขโค้ดในไฟล์ของเรา เราก็เพียงแค่ push ไฟล์ที่มีการแก้ไข ขึ้น github โดยไม่ต้องไปทำอะไรที่ netlify เลย ทาง netlify จะ auto pull updates เอง

ครบถ้วนเรียบร้อยครับ