การฝึกเขียน Code จะง่ายกว่าเดิม รู้จัก ‘Flex Box Adventure’ เกมที่จะทำให้คุณเข้าใจหลักการทำงานของ ‘CSS’ ผ่าน Gamification

ก่อนอื่น ‘CSS’ คืออะไร? 

‘Cascading Style Sheet’ คนส่วนมากจะเรียกติดปากว่า ‘สไตล์ชีต’ เป็นภาษาที่ใช้ในด้านการเขียนโค้ด มีความสามารถในการจัดรูปแบบการแสดงผลของเอกสาร HTML ไม่ว่าจะเป็นรูปแบบของเนื้อหา เช่น ขนาดกล่องข้อความ การจัดวางกล่องข้อความ สีพื้นหลัง หรือ ฟอนต์ตัวอักษร

หากพูดให้เข้าใจง่ายๆ ก็คือภาษาสำหรับการเขียนโค้ดของโปรแกรมเมอร์ ที่มีความสามารถในการตกแต่งเว็บไซต์ให้มีความสวยงามมากยิ่งขึ้นได้

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

Future Trends ได้ไปเจอกับเว็บไซต์ที่น่าสนใจ มีชื่อว่า ‘Coding Fantasy’ เป็นเว็บไซต์ที่สอนเกี่ยวกับการเขียนโค้ดด้วยรูปแบบของ ‘เกม’ หรือก็คือการเรียนเขียนโค้ดผ่านเกมนั่นเอง 

ด้วยแนวคิดที่ว่าการเขียนโค้ด หากเรียนรู้ด้วยตัวเองผ่านวิดีโอในแพลตฟอร์มต่างๆ จะสร้างความน่าเบื่อและความไม่เข้าใจให้กับผู้เรียนอย่างมาก จึงนำไปสู่การหาทางออกให้กับปัญหานี้ด้วยการเล่นเกม เกมเป็นหนึ่งในทางเลือกของการสอนทักษะโดยที่ผู้เรียนไม่เบื่อ จึงเกิดมาเป็น Coding Fantasy ที่ต้องการจะมอบความรู้อย่างมีคุณภาพและสนุกไปพร้อมๆ กัน

[ ‘Flex Box Adventure’ ]

ภายในเว็บไซต์มีเกมให้เลือกมากมาย แบ่งแยกตามประเภทโค้ดที่ต้องการเรียน แต่ในวันนี้เราจะมานำเสนอเกมที่น่าสนใจชื่อว่า ‘Flex Box Adventure’ ที่จะช่วยให้คุณเข้าใจในหลักการทำงานของ ‘สไตล์ชีต’

เกมจะมาในธีมของ ‘ตำนานกษัตริย์อาร์เทอร์’ แต่เป็นกษัตริย์อาร์เทอร์ที่ลงทุนใน Bitcoin (😂) เนื้อเรื่องของเกมคือ 

“กาลครั้งหนึ่งนานมาแล้ว มีกษัตริย์องค์หนึ่งนามว่า ‘อาร์เทอร์’ พระองค์ทรงปกครองอาณาจักรอย่างยุติธรรม ซึ่งประชาชนต่างก็จงรักภักดีในตัวท่าน แต่ว่ามีข้อเสียอยู่หนึ่งอย่างที่น่ากังวลใจ ท่านเป็นกษัตริย์ที่ไร้เดียงสามาก”

“ในวันหนึ่งมีนักเล่นแร่แปรธาตุสามคนมาเสนอให้อาร์เทอร์แลกเปลี่ยนเหรียญทองทั้งหมดของเขา ให้กลายมาเป็นเหรียญที่มีค่าชนิดใหม่ชื่อว่า ‘Bitcoin’ ด้วยความไร้เดียงสาอาร์เทอร์เปลี่ยนเหรียญทองทั้งหมดให้กลายมาเป็น Bitcoin”

“นักเล่นแร่แปรธาตุทั้งสามสัญญาว่า Bitcoin จะสร้างมูลค่ามหาศาลภายในเจ็ดวัน แต่เมื่อผ่านไปครบเวลากลับไม่มีวี่แววว่า Bitcoin จะสร้างมูลค่าให้อาร์เทอร์ จึงเกิดมาเป็นการเดินทางเพื่อแก้แค้นนักเล่นแร่แปรธาตุทั้งสาม”

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

[ วิธีการเล่นเกม ‘Flex Box Adventure’ ]

เริ่มต้นเกมจะมีโหมดให้เลือก 3 ระดับ 

👶 Easy – ระดับง่าย เหมาะสำหรับผู้ที่ไม่มีพื้นฐานเลย

🧑 Medium – ระดับปานกลาง เหมาะสำหรับผู้ที่มีความเข้าใจพื้นฐานเกี่ยวกับสไตล์ชีตแล้ว

🧑‍🏫 Hard – ระดับยาก เหมาะสำหรับผู้เชี่ยวชาญในการเขียนโค้ด

(โหมดการเล่นจะแตกต่างกันในเรื่องของการอธิบายหลักการทำงานเป็นส่วนมาก)

แน่นอนสำหรับเรา Future Trends ต้องเลือกระดับ Easy อยู่แล้วเพราะเราต้องการจะเรียนรู้ไปพร้อมๆ กับผู้อ่านทุกคน โดยเกมจะมีทั้งหมด 24 เลเวล เทียบกับเนื้อเรื่องคือการเดินทางตั้งแต่ต้นของอาร์เทอร์ ในเลเวลที่ 1 เราจะได้เรียนรู้วิธีการเล่นเบื้องต้น 

ตัวอย่าง

เลเวล 1 – อาร์เทอร์อยากกินแอปเปิ้ล

เกมจะบอกโจทย์เรามา คือ “ออกคำสั่งด้วยการเขียนโค้ดให้อาร์เทอร์เดินไปกินแอปเปิ้ล” เกมก็จะสอนเราในโค้ดแรกที่มีชื่อว่า ‘justify-content’ โดยเป็นโค้ดที่ใช้สำหรับการเรียงและจัดวางองค์ประกอบ ให้อยู่ตำแหน่งไหนของกล่อง 

เช่น justify-content: center; เมื่อต้องการให้อยู่ตรงกลางของกล่อง เป็นต้น

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

หลังจากที่เราได้ลองเล่นจนจบระดับ Easy แล้ว เราได้เรียนรู้ทักษะการเขียนโค้ดอย่างน้อยๆ 4 ประเภทโค้ด ซึ่งในุมมองของคนที่เป็นมือใหม่พื้นฐานเท่ากับศูนย์ อยากจะบอกว่าเป็นการเรียนรู้ที่สนุกมาก และใครที่กำลังมองหาโอกาสใหม่ๆ ในการเปลี่ยนสายงานก็ดี เพิ่มทักษะที่จำเป็นก็ดี อยากให้ลองเปิดใจเล่นเกมนี้ดู มันจะช่วยให้คุณเข้าใจการเขียนโค้ดได้ดีขึ้นมาก ที่สำคัญสนุกอีกด้วย

เขียนโดย ธนพนธ์ หัสกรรัตน์

Source: ทดลองเล่นเกม ‘Flex Box Adventure’ ได้ที่ลิงก์: https://codingfantasy.com/games/flexboxadventure