Words Game (เกมศัพท์ภาษาอังกฤษ)

ผู้เขียนบทความ : นายสิทธิกร สิทธิชัย 167404130044

คณะวิศวกรรม : สาขาวิศวกรรมไฟฟ้า

วิชา : 04-00-104 การโปรแกรมคอมพิวเตอร์ ภาคการศึกษาปี่ที่ 1/2567

1. ความเป็นมา

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

2. วัตถุประสงค์

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

3. ขอบเขต

โครงงาน Words Game มีขอบเขตในการศึกษาเกี่ยวกับการเรียนรู้คำศัพท์ภาษาอังกฤษในหมวดหมู่ต่าง ๆ ได้แก่ สัตว์, วัตถุ, สถานที่, อาชีพ และอาหาร โดยเกมจะใช้การเล่นที่ต้องเรียงตัวอักษรเพื่อสร้างคำศัพท์จากตัวอักษรที่ถูกสุ่มมาให้ โดยมีเวลาในการเล่น 20 วินาทีต่อรอบ ขอบเขตนี้จะช่วยให้ผู้เล่นได้สำรวจคำศัพท์ในแต่ละหมวดหมู่ และสามารถเลือกเล่นได้ตามความสนใจ

4. ประโยชน์ที่คาดว่าจะได้รับ

  • ผู้เล่นจะสามารถเรียนรู้คำศัพท์ภาษาอังกฤษได้มากขึ้นในบรรยากาศที่เป็นมิตรและสนุกสนาน
  • ผู้เล่นจะมีความมั่นใจในการใช้ภาษาอังกฤษในการสื่อสาร และสามารถนำไปใช้ในชีวิตประจำวัน
  • การพัฒนาเกมนี้จะช่วยให้ผู้พัฒนามีความเข้าใจในการเขียนโปรแกรม HTML, CSS, และ JavaScript ซึ่งเป็นทักษะที่มีความสำคัญในยุคดิจิทัล
  • สร้างแรงบันดาลใจให้กับผู้เล่นในการเรียนรู้ภาษาอังกฤษอย่างต่อเนื่อง โดยการทำให้ผู้เรียนเห็นคุณค่าของการเรียนรู้

5. ความรู้ที่คาดว่าจะได้รับ

  • ความรู้เกี่ยวกับวิธีการสร้างเกมออนไลน์ด้วย HTML, CSS, และ JavaScript รวมถึงการจัดการอีเวนต์และฟังก์ชันต่าง ๆ ใน JavaScript
  • ความเข้าใจในแนวทางการออกแบบเกมเพื่อการเรียนรู้ และการปรับแต่งประสบการณ์ผู้ใช้ให้เหมาะสม
  • ทักษะในการวิเคราะห์และแก้ไขปัญหาที่เกิดขึ้นในระหว่างการพัฒนาเกม รวมถึงการทำงานร่วมกับเพื่อนร่วมงาน
  • ความรู้เกี่ยวกับการทำงานร่วมกับฐานข้อมูลและการจัดการข้อมูลคำศัพท์ เช่น การเรียกข้อมูลจากฐานข้อมูลเพื่อสร้างคำศัพท์ในเกม

6. ผลการดำเนินการ

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

6.1 ตัวอย่าง Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WORDS GAME</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-image: url('https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105_1280.png');
            background-size: cover;
            background-position: center;
            color: white;
            overflow: hidden;
        }

        h1 {
            font-size: 60px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
        }

        #category-container {
            margin-bottom: 50px;
        }

        #letter-container, #drop-zone {
            display: flex;
            justify-content: center;
            margin: 40px;
            padding: 20px;
            width: 70%;
            min-height: 50px;
            border-radius: 10px;
            background-color: rgba(44, 62, 80, 0.9);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            transition: background-color 0.3s ease;
        }

        #letter-container:hover, #drop-zone:hover {
            background-color: rgba(44, 62, 80, 1);
        }

        .letter {
            padding: 10px 15px;
            margin: 0 10px;
            background-color: #3498db;
            color: white;
            font-size: 22px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s;
        }

        .letter:hover {
            background-color: #2980b9;
            transform: scale(1.1);
        }

        .letter.correct {
            background-color: #2ecc71;
        }

        #message {
            font-size: 30px;
            margin-top: 30px;
            color: white;
            display: none;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        #score {
            font-size: 30px;
            margin-top: 30px;
            color: white;
        }

        #timer {
            font-size: 30px;
            color: white;
            font-weight: bold;
        }

        button {
            margin-top: 30px;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease, transform 0.2s;
        }

        button:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        #next-button, #restart-button {
            display: none;
        }
    </style>
</head>
<body>

    <h1>Words Game</h1>
    
    <div id="category-container">
        <label for="category-select">Category:</label>
        <select id="category-select">
            <option value="Food">Food</option>
            <option value="Objects">Objects</option>
            <option value="Places">Places</option>
            <option value="Jobs">Jobs</option>
            <option value="Animals">Animals</option>
        </select>
        <button id="start-button">Start</button>
    </div>
    
    <div id="letter-container"></div>
    <div id="drop-zone"></div>
    <div id="timer">Time: <span id="time">20</span> วินาที</div>
    <div id="score">Score: 0</div>
    <div id="message">คุณสร้างคำศัพท์สำเร็จ! 🎉</div>
    <button id="restart-button">Restart</button>
    <button id="next-button">Next</button>
    <button id="give-up-button">Surrender</button>

    <!-- เพิ่มเสียงเอฟเฟกต์ -->
    <audio id="click-sound" src="https://www.fesliyanstudios.com/play-mp3/387" preload="auto"></audio>
    <audio id="success-sound" src="https://www.fesliyanstudios.com/play-mp3/6675" preload="auto"></audio>
    <audio id="fail-sound" src="https://www.fesliyanstudios.com/play-mp3/355" preload="auto"></audio>

    <script>
        const words = {
            Animals: ["Dog", "Cat", "Elephant", "Tiger", "Lion", "Bear", "Zebra", "Giraffe", "Monkey", "Kangaroo", "Rabbit", "Wolf", "Fox", "Horse", "Panda", "Crocodile", "Shark", "Dolphin", "Whale", "Penguin", "Koala", "Bat", "Sparrow", "Eagle", "Ostrich", "Swan", "Peacock", "Butterfly", "Bee", "Ant"],
            Objects: ["table", "chair", "pen", "notebook", "lamp", "bottle", "phone", "computer", "wallet", "bag", "book", "scissors", "cup", "spoon", "fork", "knife", "watch", "glasses", "camera", "headphones"],
            Places: ["Park", "School", "Library", "Restaurant", "Beach", "Market", "City", "Museum", "Airport", "Hotel", "Hospital", "Gym", "Stadium", "Theater", "Bakery", "Cafe", "Zoo", "Station", "Mall", "Temple"],
            Jobs: ["Teacher", "Doctor", "Engineer", "Nurse", "Chef", "Artist", "Scientist", "Pilot", "Musician", "Writer", "Lawyer", "Dentist", "Pharmacist", "Architect", "Plumber", "Electrician", "Farmer", "Driver", "Mechanic", "Waiter"],
            Food: ["Pizza", "Burger", "Pasta", "Ice Cream", "Sandwich", "Salad", "Sushi", "Steak", "Fruit", "Bread", "Taco", "Burrito", "Noodles", "Soup", "Pancake", "Waffle", "Cereal", "Yogurt", "Cheese"]
        };

        let currentWord = "";
        let score = 0;
        let timeLeft = 20;
        let timer;

        const letterContainer = document.getElementById('letter-container');
        const dropZone = document.getElementById('drop-zone');
        const message = document.getElementById('message');
        const restartButton = document.getElementById('restart-button');
        const nextButton = document.getElementById('next-button');
        const giveUpButton = document.getElementById('give-up-button');
        const scoreDisplay = document.getElementById('score');
        const categorySelect = document.getElementById('category-select');
        const startButton = document.getElementById('start-button');
        const timeDisplay = document.getElementById('time');
        const clickSound = document.getElementById('click-sound');
        const successSound = document.getElementById('success-sound');
        const failSound = document.getElementById('fail-sound');

        function getRandomWord(category) {
            const categoryWords = words[category];
            return categoryWords[Math.floor(Math.random() * categoryWords.length)];
        }

        function shuffleWord(word) {
            const letters = word.split('');
            for (let i = letters.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [letters[i], letters[j]] = [letters[j], letters[i]];
            }
            return letters.join('');
        }

        function generateLetters(word) {
            letterContainer.innerHTML = '';
            dropZone.innerHTML = '';
            const shuffledWord = shuffleWord(word);
            for (let i = 0; i < shuffledWord.length; i++) {
                const letterDiv = document.createElement('div');
                letterDiv.className = 'letter';
                letterDiv.textContent = shuffledWord[i];
                letterDiv.addEventListener('click', () => addLetterToDropZone(letterDiv));
                letterContainer.appendChild(letterDiv);
            }
            currentWord = word;
            startTimer();
        }

        function addLetterToDropZone(letterDiv) {
            clickSound.play();  // เล่นเสียงตอนคลิก
            const newLetter = document.createElement('div');
            newLetter.className = 'letter';
            newLetter.textContent = letterDiv.textContent;
            newLetter.addEventListener('click', () => returnLetterToContainer(newLetter));
            dropZone.appendChild(newLetter);
            letterDiv.style.display = 'none';
            checkIfCorrect();
        }

        function returnLetterToContainer(newLetter) {
            clickSound.play();  // เล่นเสียงตอนคลิก
            const originalLetter = Array.from(letterContainer.children).find(
                letter => letter.textContent === newLetter.textContent && letter.style.display === 'none'
            );
            if (originalLetter) {
                originalLetter.style.display = 'block';
                newLetter.remove();
            }
        }

        function checkIfCorrect() {
            const formedWord = Array.from(dropZone.children).map(letter => letter.textContent).join('');
            if (formedWord === currentWord) {
                clearInterval(timer);
                message.style.display = 'block';
                message.textContent = 'คุณสร้างคำศัพท์สำเร็จ! 🎉';
                score += 10;
                scoreDisplay.textContent = `Score: ${score}`;
                successSound.play();  // เล่นเสียงสำเร็จ
                nextButton.style.display = 'inline-block';
                restartButton.style.display = 'inline-block';
                giveUpButton.style.display = 'none';
            }
        }

        function startTimer() {
            clearInterval(timer);
            timeLeft = 20;
            timeDisplay.textContent = timeLeft;
            timer = setInterval(() => {
                timeLeft--;
                timeDisplay.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    revealCorrectWord();  // เฉลยคำที่ถูกต้องเมื่อหมดเวลา
                    failSound.play();  // เล่นเสียงล้มเหลว
                    nextButton.style.display = 'inline-block';
                    restartButton.style.display = 'inline-block';
                    giveUpButton.style.display = 'none';
                }
            }, 1000);
        }

        function revealCorrectWord() {
            dropZone.innerHTML = '';  // ล้าง drop zone ก่อน
            for (let i = 0; i < currentWord.length; i++) {
                const letterDiv = document.createElement('div');
                letterDiv.className = 'letter correct';  // เปลี่ยนสีให้คำถูก
                letterDiv.textContent = currentWord[i];
                dropZone.appendChild(letterDiv);
            }
            message.style.display = 'block';
            message.textContent = `หมดเวลา! 😞 คำที่ถูกต้องคือ "${currentWord}"`;
        }

        startButton.addEventListener('click', () => {
            const selectedCategory = categorySelect.value;
            const word = getRandomWord(selectedCategory);
            generateLetters(word);
            message.style.display = 'none';
            nextButton.style.display = 'none';
            restartButton.style.display = 'none';
            giveUpButton.style.display = 'inline-block';
        });

        restartButton.addEventListener('click', () => {
            location.reload();
        });

        nextButton.addEventListener('click', () => {
            const selectedCategory = categorySelect.value;
            const word = getRandomWord(selectedCategory);
            generateLetters(word);
            message.style.display = 'none';
            nextButton.style.display = 'none';
            restartButton.style.display = 'none';
            giveUpButton.style.display = 'inline-block';
        });

        giveUpButton.addEventListener('click', () => {
            clearInterval(timer);
            revealCorrectWord();  // เฉลยคำที่ถูกต้องเมื่อกดปุ่มยอมแพ้
            failSound.play();  // เล่นเสียงล้มเหลว
            nextButton.style.display = 'inline-block';
            restartButton.style.display = 'inline-block';
            giveUpButton.style.display = 'none';
        });
    </script>

</body>
</html>

7. การทดลอง สรุปผล ข้อเสนอแนะ

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

7.1 หน้าเริ่มเกม สามารถเลือกหมวดหมู่ที่ต้องการได้

7.2 กรณีที่เล่นชนะ

7.3 กรณีที่แพ้หรือหมดเวลา เกมจะทำการเฉลยคำตอบที่ถูกต้องให้

8. อ้างอิง

  • ศึกษาเอกสารการพัฒนาเว็บไซต์จาก W3Schools ซึ่งเป็นแหล่งข้อมูลที่เชื่อถือได้ในการเรียนรู้การเขียนโปรแกรมเว็บไซต์
  • หนังสือ “JavaScript and JQuery: Interactive Front-End Web Development” โดย Jon Duckett ซึ่งมีรายละเอียดเกี่ยวกับการพัฒนาเกมด้วย JavaScript
  • บทความเกี่ยวกับการศึกษาและการเรียนรู้ภาษาอังกฤษในรูปแบบเกม ซึ่งแสดงถึงแนวทางและวิธีการที่สามารถนำมาใช้ในการพัฒนาเกมเพื่อการศึกษา
  • การศึกษาจากงานวิจัยเกี่ยวกับเกมเพื่อการศึกษาในระดับสากล ซึ่งให้ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพของการเรียนรู้ผ่านเกม

You may also like...

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *