เกมส์เเบล็คแจ็ค

ผู้เขียนบทความ นายธนกร รูปต่ำ รหัส167404130061

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

รายวิชา 04000104 การโปรเเกรมคอมพิวเตอร์ 1/2567

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

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

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

  • เพื่อใช้ฝึกทักษะในการเขียนโปรแกรม
  • เพื่อพัฒนาทักษะความสนุกเพลิดเพลิน
  • เพื่อฝึกทักษะการคิด

3.ขอบเขต

  • การพัฒนาเกมส์ไพ่ให้เล่นได้ในเบราเซอร์
  • การใช้ภาษา HTML, CSS และ JAVASCRIPT ในการพัฒนาโปรแกรม

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

  • ได้ความรู้เกี่ยวกับภาษาHTML
  • ฝึกทักษะในการใช้โปรแกรมเพื่อให้เกิดความชำนาญ
  • เพื่อการความผ่อนคลาย

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

  • HTML (HyperText Markup Language) กำหนดโครงสร้างของเนื้อหา
  • CSS (Cascading Style Sheets) ควบคุมการแสดงผลของ HTML
  • JAVASCRIPT สร้างฟังก์ชันการทำงานสามารถทำงานร่วมกับ HTML และ CSS เพื่อสร้างประสบการณ์ผู้ใช้ที่ดีขึ้น

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

  • HTML ออกแบบโครงสร้างโดยใช้
  • CSS ออกแบบการแสดงผลดดยใช้
  • JAVASCRIPT การเขียนสคริปด์โดยใช้

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

  • เมื่อเปิดเข้าในเว็บขึ้นมาเกมส์จะถุกสร้างไพ่ขึ้นมาบนหน้าจอ
  • ผู้เล่นจะมีสิทธิจั่วไพ่มาเพิ่มเมื่อแต้มไม่ถึง21 โดยการกดปุ่มHIT
  • เมื่อผู้เล่นกด STAY ไพ่จะเปิดของฝ่ายตรงข้ามเมื่อเปิดแล้วแต้มของฝ่ายใดเยอะกว่าจะเป้นฝ่ายชนะแต่ต้องไม่เกิน21แต้มหากเกินอยู่ฝ่ายเดียวอีกฝ่ายจะเป็นผู้ชนะและหากแต้มเกินทั้ง2ฝ่ายจะพิจารณาจากแต้มฝ่ายใดมีคะแนนเยอะก้จะเป็นฝ่ายชนะไป

8.การทดลอง

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

9.เทคนิคการประยุกต์เพื่อเพิ่มประสิทธิภาพ

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

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

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

11.ข้อมูลอ้างอิง

  • แหล่งข้อมูลออนไลน์
  • เอกสารในชั้นเรียน

โค้ดสำหรับในการทดลองใช้งาน

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Black Jack</title>
        <link rel="stylesheet" href="blackjack.css">
        <script src="blackjack.js"></script>
    </head>

    <body>
        <h2>Dealer: <span id="dealer-sum"></span></h2>
        <div id="dealer-cards">
            <img id="hidden" src="./cards/BACK.png">
        </div>

        <h2>You: <span id="your-sum"></span></h2>
        <div id="your-cards"></div>

        <br>
        <button id="hit">Hit</button>
        <button id="stay">Stay</button>
        <p id="results"></p>
    </body>
</html>
body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

#dealer-cards img {
    height: 175px;
    width: 125px;
    margin: 1px;
}

#your-cards img {
    height: 175px;
    width: 125px;
    margin: 1px;
}

#hit {
    width: 100px;
    height: 50px;
    font-size: 20px;
}

#stay {
    width: 100px;
    height: 50px;
    font-size: 20px;
}
let dealerSum = 0;
let yourSum = 0;

let dealerAceCount = 0;
let yourAceCount = 0; 

let hidden;
let deck;

let canHit = true; //allows the player (you) to draw while yourSum <= 21

window.onload = function() {
    buildDeck();
    shuffleDeck();
    startGame();
}

function buildDeck() {
    let values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
    let types = ["C", "D", "H", "S"];
    deck = [];

    for (let i = 0; i < types.length; i++) {
        for (let j = 0; j < values.length; j++) {
            deck.push(values[j] + "-" + types[i]); //A-C -> K-C, A-D -> K-D
        }
    }
    // console.log(deck);
}

function shuffleDeck() {
    for (let i = 0; i < deck.length; i++) {
        let j = Math.floor(Math.random() * deck.length); // (0-1) * 52 => (0-51.9999)
        let temp = deck[i];
        deck[i] = deck[j];
        deck[j] = temp;
    }
    console.log(deck);
}

function startGame() {
    hidden = deck.pop();
    dealerSum += getValue(hidden);
    dealerAceCount += checkAce(hidden);
    // console.log(hidden);
    // console.log(dealerSum);
    while (dealerSum < 17) {
        //<img src="./cards/4-C.png">
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "./cards/" + card + ".png";
        dealerSum += getValue(card);
        dealerAceCount += checkAce(card);
        document.getElementById("dealer-cards").append(cardImg);
    }
    console.log(dealerSum);

    for (let i = 0; i < 2; i++) {
        let cardImg = document.createElement("img");
        let card = deck.pop();
        cardImg.src = "./cards/" + card + ".png";
        yourSum += getValue(card);
        yourAceCount += checkAce(card);
        document.getElementById("your-cards").append(cardImg);
    }

    console.log(yourSum);
    document.getElementById("hit").addEventListener("click", hit);
    document.getElementById("stay").addEventListener("click", stay);

}

function hit() {
    if (!canHit) {
        return;
    }

    let cardImg = document.createElement("img");
    let card = deck.pop();
    cardImg.src = "./cards/" + card + ".png";
    yourSum += getValue(card);
    yourAceCount += checkAce(card);
    document.getElementById("your-cards").append(cardImg);

    if (reduceAce(yourSum, yourAceCount) > 21) { //A, J, 8 -> 1 + 10 + 8
        canHit = false;
    }

}

function stay() {
    dealerSum = reduceAce(dealerSum, dealerAceCount);
    yourSum = reduceAce(yourSum, yourAceCount);

    canHit = false;
    document.getElementById("hidden").src = "./cards/" + hidden + ".png";

    let message = "";
    if (yourSum > 21) {
        message = "You Lose!";
    }
    else if (dealerSum > 21) {
        message = "You win!";
    }
    //both you and dealer <= 21
    else if (yourSum == dealerSum) {
        message = "Tie!";
    }
    else if (yourSum > dealerSum) {
        message = "You Win!";
    }
    else if (yourSum < dealerSum) {
        message = "You Lose!";
    }

    document.getElementById("dealer-sum").innerText = dealerSum;
    document.getElementById("your-sum").innerText = yourSum;
    document.getElementById("results").innerText = message;
}

function getValue(card) {
    let data = card.split("-"); // "4-C" -> ["4", "C"]
    let value = data[0];

    if (isNaN(value)) { //A J Q K
        if (value == "A") {
            return 11;
        }
        return 10;
    }
    return parseInt(value);
}

function checkAce(card) {
    if (card[0] == "A") {
        return 1;
    }
    return 0;
}

function reduceAce(playerSum, playerAceCount) {
    while (playerSum > 21 && playerAceCount > 0) {
        playerSum -= 10;
        playerAceCount -= 1;
    }
    return playerSum;
}

ฟังก์ชันหลักที่น่าสนใจ

สรุป

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

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

Tags:

You may also like...

ใส่ความเห็น

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