โค้ดเกมเป่ายิงฉุบ javascript bootstrap

โค้ดเกมเป่ายิงฉุบ javascript bootstrap
เกมเป่ายิงฉุบเป็นเกมที่น่าสนุกและเป็นที่นิยมอย่างมาก การสร้างเกมเป่ายิงฉุบโดยใช้ JavaScript และ Bootstrap สามารถทำได้โดยใช้ HTML, CSS, และ JavaScript ร่วมกันเพื่อสร้างหน้าเว็บและโลจิกสำหรับเกมนี้ได้ง่ายๆ ต่อไปนี้คือตัวอย่างโค้ดเบื้องต้นของเกมเป่ายิงฉุบที่ใช้ JavaScript และ Bootstrap
ในตัวอย่างนี้เป็นเกมเป่ายิงฉุบที่ใช้ Bootstrap 4 เพื่อเรียงลำดับปุ่มและการจัดรูปแบบเว็บไซต์ และ JavaScript ถูกใช้เพื่อการทำงานของเกม เมื่อคุณคลิกที่ปุ่ม “หิน”, “กระดาษ”, หรือ “กรรไกร” เกมจะทำการสุ่มเลือกตัวเลือกของคอมพิวเตอร์และแสดงผลลัพธ์ว่าใครชนะในรอบนั้นๆ ลองนำโค้ดนี้ไปลองใช้ดูนะคะ!
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เกมเป่ายิงฉุบ</title>
  <!-- นำเข้า Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* สไตล์เพิ่มเติม */
  </style>
</head>
<body>
  <div class="container">
    <h1 class="text-center mt-5">เกมเป่ายิงฉุบ</h1>
    <div class="row justify-content-center mt-3">
      <div class="col-6 text-center">
        <button id="rock" class="btn btn-primary btn-lg">หิน</button>
        <button id="paper" class="btn btn-primary btn-lg">กระดาษ</button>
        <button id="scissors" class="btn btn-primary btn-lg">กรรไกร</button>
      </div>
    </div>
    <div class="row justify-content-center mt-5">
      <div class="col-6 text-center">
        <h2 id="result">ผลลัพธ์</h2>
      </div>
    </div>
  </div>

  <!-- นำเข้า Bootstrap และ jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <script>
    // โค้ด JavaScript
    const buttons = document.querySelectorAll('button');
    const result = document.getElementById('result');

    buttons.forEach(button => {
      button.addEventListener('click', () => {
        const playerSelection = button.id;
        const computerSelection = computerPlay();
        const roundResult = playRound(playerSelection, computerSelection);
        result.textContent = roundResult;
      });
    });

    function computerPlay() {
      const choices = ['หิน', 'กระดาษ', 'กรรไกร'];
      return choices[Math.floor(Math.random() * choices.length)];
    }

    function playRound(playerSelection, computerSelection) {
      if (playerSelection === computerSelection) {
        return 'เสมอ!';
      } else if ((playerSelection === 'หิน' && computerSelection === 'กรรไกร') ||
                 (playerSelection === 'กระดาษ' && computerSelection === 'หิน') ||
                 (playerSelection === 'กรรไกร' && computerSelection === 'กระดาษ')) {
        return 'คุณชนะ!';
      } else {
        return 'คอมพิวเตอร์ชนะ!';
      }
    }
  </script>
</body>
</html>
 

รับเขียนเว็บไซต์ รับเขียนโปรแกรม ระบบต่างๆ SEO

Line : rayongall / โทร. 085-281-7096

http://line.me/ti/p/~rayongall

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

ตั้งค่าความเป็นส่วนตัว

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

ยอมรับทั้งหมด
จัดการความเป็นส่วนตัว
  • เปิดใช้งานตลอด

บันทึกการตั้งค่า