เกม”เป่ายิ่งฉุบโชคดี”

ผู้เขียนบทความ : นายณัฐพงศ์ หวังโบรักษ์ 167404130058

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

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

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

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

  • ฝึกทักษะการเขียนโปรแกรม HTML, CSS, และ JavaScript
  • สร้างเกมที่สามารถใช้งานได้ง่ายและสนุกสนาน
  • สร้างบอดเกมกันเพื่อนได้

3. ขอบเขต

ขอบเขตของเกมนี้คือ

ให้เราเลือกว่าเราจะกดอะไรมีให้กด3อย่างคือ หิน กรรไกร กระดาษ เพื่อแข่งกับAi ที่ตั้งโค้ดใว้ ตั้งให้หินแพ้กระดาษกระดาษแพ้กรรไกร กรรไกรแพ้หิน เมื่อเรากด1ใน3อย่างนี้ แล้วAiจะสุ่มเลือกของตัวมันเองถ้าชนะมันจะแสดงผลว่าคุณชนะ

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

  • พัฒนาทักษะการเขียนโปรแกรมสำหรับผู้พัฒนา
  • สร้างความเพลิดเพลิน
  • สร้างโอกาสในการเรียนรู้การจัดการเวลาและการแก้ไขปัญหาที่เกิดขึ้นระหว่างการพัฒนา

5. ความรู้ที่เกี่ยวข้อง

  • HTML: สำหรับโครงสร้างของหน้าเว็บและการจัดวางองค์ประกอบต่างๆ
  • CSS: สำหรับการออกแบบและจัดแต่งหน้าเว็บให้ดูน่าสนใจ รวมถึงการทำภาพเคลื่อนไหว
  • JavaScript: สำหรับจัดการตรรกะของเกม เช่น การจับคู่การ์ด, การนับเวลา และการควบคุมการแสดงผล
  • codepen.io:สำหรับการลงโค้ดและรันโค้ด

6. การดำเนินงาน

  1. วางแผนโครงสร้างและออกแบบเกมเบื้องต้น
  2. เขียนโค้ด HTML สำหรับโครงสร้างหน้าเว็บ
  3. ใช้ CSS ในการออกแบบกล่องสีและเอฟเฟกต์
  4. เขียน JavaScript เพื่อจัดการตรรกะของเกม เช่น การสุ่มของAiผลลัพธื
  5. ทดสอบการทำงานของเกมในหลากหลายเบราว์เซอร์และอุปกรณ์

7. วิธีใช้งานโปรแกรม

  1. เปิดไฟล์ HTML ในเว็บเบราว์เซอร์
  2. หน้าต่างเกมจะแสดงขึ้นพร้อมตัวเลือกให้กด
  3. คลิกเลือก1ใน3 เพื่อดูผลลัพธ์
  4. หากชนะผลลัธ์จะขึ้นว่า:คุณชนะ หากเสมอ ผลลัธ์จะขึ้นว่า:เสมอ หากแพ้ ผลลัธ์จะขึ้นว่า:คุณแพ้
  5. สามารถเริ่มเกมใหม่ได้โดยการคลิกปุ่ม “เล่นใหม่”

8. การทดลอง

ตรวจสอบความเข้ากันได้กับเบราว์เซอร์หลักๆ เช่น Chrome, Firefox, Safari, และ Edge

9.สรุปผลและข้อเสนอแนะ

การประเมินผลและข้อเสนอแนะสำหรับเกมเป่ายิ่งฉุบเน้นการทดสอบการเขียนโค้ดให้ตอบสนองความต้องการ

ปรับปรุง การเพิ่มฟีเจอร์ใหม่ การพัฒนากราฟิก และการใช้งานอย่างมีประสิทธิภาพ เพื่อให้เกมมีความสนุกสนานและท้าทายมากยิ่งขึ้น

Code Game


HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>เกมเป่ายิ่งฉุบ</title>
</head>
<body>
    <div class="container">
        <h1>เกมเป่ายิ่งฉุบ</h1>
        <div class="options">
            <button class="option" onclick="play('rock')">✊ หิน</button>
            <button class="option" onclick="play('scissors')">✌️ กรรไกร</button>
            <button class="option" onclick="play('paper')">🖐️ กระดาษ</button>
        </div>
        <div class="result">
            <p id="resultText">เลือกหนึ่งตัวเลือกด้านบน</p>
        </div>
        <button onclick="resetGame()" class="reset">เล่นใหม่</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    color: #333;
    text-align: center;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background-color: white;
}

h1 {
    margin-bottom: 20px;
}

.options {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.option {
    font-size: 24px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4caf50;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.option:hover {
    background-color: #45a049;
}

.result {
    margin: 20px 0;
    font-size: 20px;
}

.reset {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #f44336;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

.reset:hover {
    background-color: #e53935;
}

Java

function play(userChoice) {
    const choices = ['rock', 'scissors', 'paper'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];
    
    let resultText = '';

    if (userChoice === computerChoice) {
        resultText = 'เสมอ!';
    } else if (
        (userChoice === 'rock' && computerChoice === 'scissors') ||
        (userChoice === 'scissors' && computerChoice === 'paper') ||
        (userChoice === 'paper' && computerChoice === 'rock')
    ) {
        resultText = 'คุณชนะ!';
    } else {
        resultText = 'คุณแพ้!';
    }

    document.getElementById('resultText').innerText = `คุณเลือก: ${userChoice} | คอมพิวเตอร์เลือก: ${computerChoice} | ผล: ${resultText}`;
}

function resetGame() {
    document.getElementById('resultText').innerText = 'เลือกหนึ่งตัวเลือกด้านบน';
}

วิดิโออธิบาย

Tags:

You may also like...

ใส่ความเห็น

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