ผู้เขียนบทความ:นายณฐกร จุ้ยบุตร วฟ 0007
คณะวิศวกรรมไฟฟ้า
วิชา:04000104 การโปรแกรมคอมพิวเตอร์1/2567
1.ความเป็นมา
การบวก คือหนึ่งในการดำเนินการทางคณิตศาสตร์ของเลขคณิตมูลฐาน มักแทนด้วยเครื่องหมายบวก “+” การบวกเลขจำนวนน้อย ๆ สามารถเรียนรู้ได้ตั้งแต่วัยเด็กหัดเดิน เด็กทารกอายุห้าเดือน และแม้กระทั่งสัตว์บางชนิดก็สามารถคำนวณงานพื้นฐานที่สุดอย่าง 1 + 1 ได้ ในระดับประถมศึกษา นักเรียนจะได้เรียนรู้การบวกจำนวนในระบบเลขฐานสิบ
จากความเป็นมาดังกล่าวผู้จัดทำจึงเห็นความสําคัญของการบวกเลข จึงได้นำมาประยุกต์ใช้กับวิชาการเขียนโปรแกรมเบื้องต้น เพื่อสร้างเป็นเกมบวกเลข เพื่อฝึกทักษะของผู้ที่สนใจที่จะเรียนรู้การบวกเลขและเพื่อสร้างความสนุกเพลิดเพลินในการบวกเลข
2.วัตถุประสงค์
2.1 เสริมทักษะคณิตศาสตร์: เพื่อพัฒนาทักษะการบวกเลขและคำนวณทางคณิตศาสตร์ให้กับผู้เล่น โดยเฉพาะสำหรับเด็กหรือผู้ที่กำลังฝึกฝนพื้นฐานทางคณิตศาสตร์
2.2 เพิ่มความสนุกสนานและแรงจูงใจ: เกมสามารถทำให้การเรียนรู้เรื่องคณิตศาสตร์สนุกขึ้น และช่วยดึงดูดความสนใจจากผู้เล่นที่อาจไม่ชอบวิชาคณิตศาสตร์
2.3 พัฒนาทักษะการคิดวิเคราะห์: เกมบวกเลขอาจช่วยเสริมสร้างทักษะการคิดวิเคราะห์และการแก้ปัญหา ผ่านการจัดการเวลาและทรัพยากรในขณะที่เล่นเกม
2.4 เพิ่มความเร็วในการคำนวณ: ช่วยฝึกฝนให้ผู้เล่นบวกเลขได้อย่างรวดเร็วและแม่นยำผ่านการเล่นซ้ำๆ
2.5 ใช้เป็นเครื่องมือการสอน: ครูหรือนักการศึกษาอาจใช้เกมบวกเลขเป็นส่วนหนึ่งของกระบวนการเรียนการสอน เพื่อช่วยเสริมการเรียนรู้ของนักเรียนในรูปแบบที่แตกต่างออกไป
2.6 ฝึกสมาธิและความจำ: เกมสามารถฝึกฝนสมาธิและความจำของผู้เล่นในการคิดเลขให้ได้ถูกต้องภายในระยะเวลาที่กำหนด
3.ขอบเขต
3.1 กลุ่มเป้าหมาย:
• เด็ก, นักเรียนระดับประถมที่ต้องการฝึกทักษะการบวกเลขพื้นฐาน
• ผู้ใหญ่ที่ต้องการฝึกสมองหรือพัฒนาทักษะคณิตศาสตร์เบื้องต้น
3.2 ระดับความยาก:
• มีหลายระดับ เช่น ง่าย (บวกเลขหลักเดียว), ปานกลาง (บวกเลขสองหลัก), ยาก (บวกเลขหลายหลัก)
• อาจเพิ่มความซับซ้อนด้วยการจำกัดเวลา หรือให้โจทย์ที่ยากขึ้นตามระดับของผู้เล่น
3.3 รูปแบบการเล่น:
• เกมเดี่ยว (Single Player): ผู้เล่นต้องบวกเลขให้ได้จำนวนตามที่กำหนด
• เกมแข่งขัน (Multiplayer): ผู้เล่นสามารถแข่งกันในการบวกเลขเร็วที่สุด
• ระบบสะสมคะแนน: ผู้เล่นจะได้รับคะแนนตามความเร็วและความถูกต้องในการบวกเลข
3.4 อินเตอร์เฟสผู้ใช้ (User Interface):
• หน้าจอที่ใช้งานง่าย อ่านง่าย และดึงดูดสายตา
• อาจมีการแสดงภาพกราฟิก ตัวการ์ตูน หรือสีสันเพื่อสร้างความสนุกสนาน
3.5 เทคโนโลยีที่ใช้:
• สามารถพัฒนาเป็นแอปพลิเคชันมือถือ (iOS/Android) หรือเว็บแอปพลิเคชัน (Web-based)
• ใช้เครื่องมือการพัฒนาเกมเช่น Unity, Godot, หรือเครื่องมือสร้างแอปพลิเคชันอื่น ๆ
3.6 ข้อจำกัดของระบบ:
• รองรับอุปกรณ์หลากหลาย เช่น มือถือ แท็บเล็ต หรือคอมพิวเตอร์
• ระบบไม่ควรซับซ้อนเกินไป เพื่อให้เหมาะกับกลุ่มเป้าหมายที่หลากหลาย
4.ประโยชน์ที่คิดว่าจะได้รับ
4.1 พัฒนาทักษะทางคณิตศาสตร์:
• ผู้เล่นจะมีโอกาสฝึกฝนทักษะการคำนวณและการบวกเลขอย่างต่อเนื่อง ทำให้มีความแม่นยำและรวดเร็วมากขึ้น
• ช่วยให้เด็กเข้าใจหลักการบวกเลขพื้นฐานในรูปแบบที่สนุกสนาน ไม่รู้สึกว่าเป็นภาระ
4.2 กระตุ้นการเรียนรู้ด้วยความสนุก:
• การเรียนคณิตศาสตร์ในรูปแบบเกมช่วยสร้างแรงจูงใจและทำให้ผู้เล่นรู้สึกสนุกในการเรียนรู้มากขึ้น แทนที่จะรู้สึกกดดัน
• เพิ่มความสนใจในคณิตศาสตร์ให้กับเด็กหรือผู้ที่ไม่ค่อยสนใจวิชานี้
4.3 พัฒนาทักษะการคิดวิเคราะห์:
• เกมที่ใช้การบวกเลขช่วยให้ผู้เล่นฝึกฝนการคิดวิเคราะห์ การจัดการเวลา และการตัดสินใจที่รวดเร็ว ซึ่งเป็นทักษะที่สามารถนำไปใช้ในชีวิตประจำวัน
4.4 ฝึกสมาธิและความจำ:
• ผู้เล่นจะต้องใช้สมาธิในการคำนวณตัวเลขและจดจำข้อมูลที่เกี่ยวข้อง ซึ่งช่วยพัฒนาความจำและความสามารถในการโฟกัส
4.5 เสริมสร้างความมั่นใจ:
• การเล่นเกมแล้วประสบความสำเร็จ (เช่น ได้คะแนนสูงหรือผ่านด่านยาก) จะช่วยเสริมสร้างความมั่นใจในความสามารถของตนเอง โดยเฉพาะในกลุ่มเด็ก
4.6 สร้างการเรียนรู้แบบเชิงปฏิสัมพันธ์:
• สำหรับเกมที่เล่นแบบหลายคน (Multiplayer) อาจช่วยพัฒนาทักษะการทำงานเป็นทีม การแข่งขันที่สร้างสรรค์ และการสื่อสารกับผู้อื่น
4.7 ใช้เป็นเครื่องมือการสอน:
• ครูและผู้ปกครองสามารถใช้เกมบวกเลขเป็นส่วนหนึ่งของการสอนคณิตศาสตร์ เพื่อทำให้การเรียนเป็นเรื่องสนุกและน่าสนใจมากขึ้น
4.8 ปรับปรุงสุขภาพสมอง:
• การฝึกฝนคำนวณอย่างสม่ำเสมอ ช่วยกระตุ้นการทำงานของสมอง ทำให้สมองแข็งแรงขึ้น และป้องกันการเสื่อมถอยของทักษะการคิด โดยเฉพาะในผู้สูงอายุ
4.9 ความยืดหยุ่นในการใช้งาน:
• เกมบวกเลขสามารถปรับแต่งให้เหมาะสมกับผู้เล่นได้หลากหลาย ตั้งแต่เด็กจนถึงผู้ใหญ่ สามารถใช้งานได้ทั้งในห้องเรียน หรือเล่นเพื่อความสนุกสนานในเวลาว่าง
5.ความรู้ที่เกี่ยวข้อง
5.1 Visual Studio Code
เป็นโปรแกรมแก้ไขซอร์สโค้ดที่พัฒนาโดยไมโครซอฟท์สำหรับ Windows, Linux และ macOS มีการสนับสนุนสำหรับการดีบัก การควบคุม Git ในตัวและ GitHub การเน้นไวยากรณ์ การเติมโค้ดอัจฉริยะ ตัวอย่าง และ code refactoring มันสามารถปรับแต่งได้หลายอย่าง ให้ผู้ใช้สามารถเปลี่ยนธีม แป้นพิมพ์ลัด การตั้งค่า และติดตั้งส่วนขยายที่เพิ่มฟังก์ชันการทำงานเพิ่มเติม ซอร์สโค้ดนั้นฟรีและโอเพนซอร์สและเผยแพร่ภายใต้สิทธิ์การใช้งาน MIT[ไบนารีที่คอมไพล์แล้วเป็นฟรีแวร์และฟรีสำหรับการใช้ส่วนตัวหรือเพื่อการค้า
5.2 HTML
เป็นภาษาคอมพิวเตอร์ที่ใช้ในการแสดงผลของเอกสารบน website หรือที่เราเรียกกันว่าเว็บเพจ ถูกพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C) และจากการพัฒนาทางด้าน Software ของ Microsoft ทำให้ภาษา HTML เป็นอีกภาษาหนึ่งที่ใช้เขียนโปรแกรมได้ หรือที่เรียกว่า HTML Application HTML เป็นภาษาประเภท Markup สำหรับการการสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, Editplus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ
5.3 CSS
เป็นภาษาโปรแกรมที่ใช้สำหรับการตกแต่งและจัดรูปแบบเอกสาร HTML โดย CSS ช่วยให้คุณสามารถกำหนดลักษณะต่างๆ ขององค์ประกอบในเว็บ เช่น สี ฟอนต์ ขนาด ขอบ เส้นขอบ ระยะห่าง และการจัดตำแหน่ง
5.4 JavaScript
เป็นภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ที่กำลังได้รับความนิยมอย่างสูง Java JavaScript เป็น ภาษาสคริปต์เชิงวัตถุ (ที่เรียกกันว่า “สคริปต์” (script) ซึ่งในการสร้างและพัฒนาเว็บไซต์ (ใช่ร่วมกับ HTML) เพื่อให้เว็บไซต์ของเราดูมีการเคลื่อนไหว สามารถตอบสนองผู้ใช้งานได้มากขึ้น
6.ผลการดำเนินงาน
HTML
<head>:กำหนด charset เป็น UTF-8 เพื่อรองรับการแสดงผลตัวอักษรหลากหลายภาษากำหนด viewport ให้รองรับการแสดงผลในอุปกรณ์มือถือตั้งชื่อหน้าเว็บเป็น “2048”นำเข้าไฟล์ CSS (2048.css) และ JavaScript (2048.js) เพื่อจัดการการออกแบบและฟังก์ชันการทำงานของเกม
CSS
body:กำหนดฟอนต์เป็น Arial, Helvetica, sans-serifจัดตำแหน่งข้อความให้อยู่กลาง (text-align:center)hr:กำหนดความกว้างของเส้นแบ่งให้เป็น 500px#board:กำหนดขนาดกระดานเกมเป็น 400px x 400pxใช้สีพื้นหลังเป็น #cdc1b5 และเส้นขอบเป็น #bbada0จัดตำแหน่งกลางหน้าจอ (ใช้ margin: 0 auto)ใช้ flex-wrap: wrap เพื่อให้ตัวเลข tile แต่ละตัววางในกระดานเป็นตาราง.tile:กำหนดขนาดของแต่ละ tile เป็น 90px x 90pxขอบ tile เป็น 5px solid #bbada0สีของ tile (ตามค่าของตัวเลข):ใช้สีพื้นหลังและสีตัวอักษรที่แตกต่างกันตามตัวเลขใน tile เช่น:.x2: สีพื้นหลัง ,ตัวอักษรสี .x8: สีพื้นหลัง #f4b17a, ตัวอักษรสีขาว.x2048: สีพื้นหลัง #ecc230, ตัวอักษรสีขาวและอื่นๆ ตามลำดับของตัวเลขที่ใหญ่ขึ้น
JavaScript
สร้างกระดาน 4×4 (เริ่มต้นเป็น 0) และแสดง tiles บน HTML โดยใช้ updateTile() เพื่อแสดงค่าของแต่ละ tileเริ่มต้นเกมด้วยการเพิ่มตัวเลข 2 สองตัวในตำแหน่งสุ่ม (setTwo())updateTile(tile, num):
อัปเดตการแสดงผลของ tile แต่ละตัวตามค่า num และเพิ่มคลาส CSS ที่ตรงกับค่าของ tileเคลื่อนไหว (slide functions):slideLeft(), slideRight(), slideUp(), slideDown(): ฟังก์ชันเหล่านี้จัดการการเลื่อนและรวมค่าของ tile ตามทิศทางที่ผู้ใช้กด (ใช้ slide(row) เพื่อจัดการกับแถวหรือคอลัมน์ที่เลือก)slide(row): กรองค่าศูนย์และรวม tile ที่มีค่าเหมือนกัน, แล้วเติม 0 ถ้าแถวยังไม่เต็มsetTwo(): เลือกตำแหน่งสุ่มบนกระดานที่ว่างและเพิ่มตัวเลข 2 (หากยังมีตำแหน่งว่างอยู่)score: รวมคะแนนเมื่อมีการรวม tile (เช่น 2+2 = 4, เพิ่มคะแนน 4)คะแนนจะแสดงใน HTML ผ่าน document.getElementById("score")
โดยสรุป, โค้ดนี้สร้างเกม 2048 ที่ผู้เล่นสามารถเลื่อน tile โดยใช้ปุ่มลูกศรเพื่อรวมตัวเลขและเพิ่มคะแนน.
7.ผลการทดลอง
7.1
7.2
7.3
8.สรุปผลการทดลอง
8.1 พัฒนาทักษะการคำนวณ: ผู้เล่นทุกกลุ่ม โดยเฉพาะเด็ก ได้พัฒนาความแม่นยำและความเร็วในการบวกเลขขึ้นอย่างเห็นได้ชัดหลังจากเล่นเกม ทำให้เกมมีประโยชน์ในการฝึกทักษะคณิตศาสตร์พื้นฐาน
8.2เพิ่มความสนใจในคณิตศาสตร์: เกมทำให้นักเรียนที่ไม่ค่อยสนใจวิชาคณิตศาสตร์มีความสนุกและสนใจในการเรียนรู้มากขึ้น โดยเฉพาะเมื่อนำเกมไปใช้ในห้องเรียนควบคู่กับการสอน
8.3.สร้างแรงจูงใจ: ระบบเกมที่มีการให้รางวัลหรือการปลดล็อกระดับใหม่ ช่วยสร้างแรงจูงใจให้ผู้เล่นกลับมาเล่นซ้ำและพัฒนาทักษะต่อเนื่อง ทำให้การเรียนรู้คณิตศาสตร์เป็นเรื่องที่สนุกและท้าทาย
8 .4 ฝึกสมาธิและการคิดวิเคราะห์: ผู้เล่นได้พัฒนาทักษะสมาธิและการคิดวิเคราะห์จากการต้องแก้โจทย์ที่ท้าทายในเวลาจำกัด เกมยังช่วยกระตุ้นสมองและเพิ่มทักษะการจดจำอีกด้วย
8.5 การใช้งานง่ายและฟังก์ชันเสถียร: เกมได้รับคำชมเรื่องการใช้งานที่ง่ายและการออกแบบอินเตอร์เฟซที่เป็นมิตรกับผู้ใช้ทุกกลุ่มอายุ อีกทั้งเกมทำงานได้อย่างราบรื่น ไม่มีปัญหาทางเทคนิคสำคัญหลังการทดสอบ
8.6 ข้อเสนอแนะและปรับปรุง: ผู้เล่นเสนอแนะให้มีการเพิ่มฟีเจอร์ใหม่ ๆ เช่น โหมดการแข่งขันออนไลน์ หรือการปรับปรุงกราฟิกเพิ่มเติมเพื่อเพิ่มความสนุกและความท้าทายให้มากขึ้น
สรุปโดยรวม: เกมบวกเลขสามารถตอบโจทย์ด้านการพัฒนาทักษะคณิตศาสตร์ การฝึกสมาธิ และการสร้างแรงจูงใจได้ดี นอกจากนี้ยังช่วยเสริมสร้างความสนุกในการเรียนรู้คณิตศาสตร์ในรูปแบบที่ไม่เครียด เหมาะสำหรับการใช้งานทั้งในห้องเรียนและเล่นเพื่อฝึกฝนทักษะในชีวิตประจำวัน
9.เอกสารอ้างอิง
9.1 W3Schools. (n.d.). HTML Tutorial. Retrieved from w3schools.com.
9.2 การใช้งานโปรแกรม Visual Studio Code from https://www.youtube.com/watch?v=RhSOtdQsu70
10.สรุปกสรทดลองทั้งหมด
ส่วนของโค้ด
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048</title>
<link rel="stylesheet" href="2048.css">
<script src="2048.js"></script>
</head>
<body>
<h1>2048</h1>
<hr>
<h2>Score: <span id="score">0</span></h2>
<div id="board">
</div>
</body>
</html>CSS
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
hr {
width: 500px;
}
#board {
width: 400px;
height: 400px;
background-color: #cdc1b5;
border: 6px solid #bbada0;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.tile {
width: 90px;
height: 90px;
border: 5px solid #bbada0;
font-size: 40px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
/* colored tiles */
.x2 {
background-color: #eee4da;
color: #727371;
}
.x4 {
background-color: #ece0ca;
color: #727371;
}
.x8 {
background-color: #f4b17a;
color: white;
}
.x16{
background-color: #f59575;
color: white;
}
.x32{
background-color: #f57c5f;
color: white;
}
.x64{
background-color: #f65d3b;
color: white;
}
.x128{
background-color: #edce71;
color: white;
}
.x256{
background-color: #edcc63;
color: white;
}
.x512{
background-color: #edc651;
color: white;
}
.x1024{
background-color: #eec744;
color: white;
}
.x2048{
background-color: #ecc230;
color: white;
}
.x4096 {
background-color: #fe3d3d;
color: white;
}
.x8192 {
background-color: #ff2020;
color: white;
}
JavaScript
var board;
var score = 0;
var rows = 4;
var columns = 4;
window.onload = function() {
setGame();
}
function setGame() {
// board = [
// [2, 2, 2, 2],
// [2, 2, 2, 2],
// [4, 4, 8, 8],
// [4, 4, 8, 8]
// ];
board = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
]
for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) {
let tile = document.createElement("div");
tile.id = r.toString() + "-" + c.toString();
let num = board[r][c];
updateTile(tile, num);
document.getElementById("board").append(tile);
}
}
//create 2 to begin the game
setTwo();
setTwo();
}
function updateTile(tile, num) {
tile.innerText = "";
tile.classList.value = ""; //clear the classList
tile.classList.add("tile");
if (num > 0) {
tile.innerText = num.toString();
if (num <= 4096) {
tile.classList.add("x"+num.toString());
} else {
tile.classList.add("x8192");
}
}
}
document.addEventListener('keyup', (e) => {
if (e.code == "ArrowLeft") {
slideLeft();
setTwo();
}
else if (e.code == "ArrowRight") {
slideRight();
setTwo();
}
else if (e.code == "ArrowUp") {
slideUp();
setTwo();
}
else if (e.code == "ArrowDown") {
slideDown();
setTwo();
}
document.getElementById("score").innerText = score;
})
function filterZero(row){
return row.filter(num => num != 0); //create new array of all nums != 0
}
function slide(row) {
//[0, 2, 2, 2]
row = filterZero(row); //[2, 2, 2]
for (let i = 0; i < row.length-1; i++){
if (row[i] == row[i+1]) {
row[i] *= 2;
row[i+1] = 0;
score += row[i];
}
} //[4, 0, 2]
row = filterZero(row); //[4, 2]
//add zeroes
while (row.length < columns) {
row.push(0);
} //[4, 2, 0, 0]
return row;
}
function slideLeft() {
for (let r = 0; r < rows; r++) {
let row = board[r];
row = slide(row);
board[r] = row;
for (let c = 0; c < columns; c++){
let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c];
updateTile(tile, num);
}
}
}
function slideRight() {
for (let r = 0; r < rows; r++) {
let row = board[r]; //[0, 2, 2, 2]
row.reverse(); //[2, 2, 2, 0]
row = slide(row) //[4, 2, 0, 0]
board[r] = row.reverse(); //[0, 0, 2, 4];
for (let c = 0; c < columns; c++){
let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c];
updateTile(tile, num);
}
}
}
function slideUp() {
for (let c = 0; c < columns; c++) {
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
row = slide(row);
// board[0][c] = row[0];
// board[1][c] = row[1];
// board[2][c] = row[2];
// board[3][c] = row[3];
for (let r = 0; r < rows; r++){
board[r][c] = row[r];
let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c];
updateTile(tile, num);
}
}
}
function slideDown() {
for (let c = 0; c < columns; c++) {
let row = [board[0][c], board[1][c], board[2][c], board[3][c]];
row.reverse();
row = slide(row);
row.reverse();
// board[0][c] = row[0];
// board[1][c] = row[1];
// board[2][c] = row[2];
// board[3][c] = row[3];
for (let r = 0; r < rows; r++){
board[r][c] = row[r];
let tile = document.getElementById(r.toString() + "-" + c.toString());
let num = board[r][c];
updateTile(tile, num);
}
}
}
function setTwo() {
if (!hasEmptyTile()) {
return;
}
let found = false;
while (!found) {
//find random row and column to place a 2 in
let r = Math.floor(Math.random() * rows);
let c = Math.floor(Math.random() * columns);
if (board[r][c] == 0) {
board[r][c] = 2;
let tile = document.getElementById(r.toString() + "-" + c.toString());
tile.innerText = "2";
tile.classList.add("x2");
found = true;
}
}
}
function hasEmptyTile() {
let count = 0;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) {
if (board[r][c] == 0) { //at least one zero in the board
return true;
}
}
}
return false;
}
