EP.21 Blackjack

noMerzy | 2016-09-15 10:16:20

blackjack

blackjack.html
<!DOCTYPE html> <html> <head> <title>Black Jack</title> <style> #game { background-color: #336600; color: #fff; padding: 5px; } #game div { margin: 15px; } </style> </head> <body> <div id="game"> <div>Status : <span id="gameStat">Welcome!!</span></div> <div>COMPUTER : <span id="computer">0</span></div> <div>YOU : <span id="player">0</span></div> <div><input type="button" value="draw" onclick="btnDraw()"> <input type="button" value="stand" onclick="btnStand()"></div> <div>WIN <span id="winStat">0</span> LOSE <span id="loseStat">0</span> </div> </div> <script> //แต้มของไพ่ทั้ง 52 ใบ var deck = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 11, 11, 11, 11]; //ตำแหน่งของไพ่ปัจจุบันในกอง var deckPointer = 0; //ไพ่ของผู้เล่น var playerCard = []; //ไพ่ของคอมพิวเตอร์ var computerCard = []; //แต้มของผู้เล่น var playerPoint = 0; //แต้มของคอมพิวเตอร์ var computerPoint = 0; /* * ฟังก์ชั่นสับไพ่ */ function deckShuffle() { //สับไพ่ var i = deck.length, j, temp; while (--i > 0) { j = Math.floor(Math.random() * (i + 1)); temp = deck[j]; deck[j] = deck[i]; deck[i] = temp; } } /* * ฟังก์ชั่นเริ่มเกมตาใหม่ / จั่วไพ่ */ function btnDraw() { //สถานะของเกม var gameStat = document.getElementById('gameStat').innerHTML; //ถ้า gameStat เป็น Welcome!! หรือ You Win!! หรือ You Lose!! //ให้ทำการเริ่มเกมตาใหม่ if (gameStat === 'Welcome!!' || gameStat === 'You Win!!' || gameStat === 'You Lose!!' || gameStat === 'Draw!!') { //รีเซ็ตไพ่ในมือ playerCard = []; computerCard = []; //สับไพ่ deckShuffle(); //เปลี่ยนสถาานะเป็นเริ่มเกมใหม่ document.getElementById('gameStat').innerHTML = 'New Game!!'; //เพิ่มไพ่ผู้เล่น playerCard.push(deck[0]); //เพิ่มไพ่คอม computerCard.push(deck[1]); //เพิ่มไพ่ผู้เล่น playerCard.push(deck[2]); //เพิ่มไพ่คอม computerCard.push(deck[3]); //แสดงแต้มของผู้เล่น displayPoint(); //แสดงแต้มของคอมเฉพาะใบแรก document.getElementById('computer').innerHTML = deck[1]; deckPointer = 3; } else { //จั่วไพ่ playerCard.push(deck[deckPointer]); //แสดงแต้มที่จั่วได้บนสถานะ document.getElementById('gameStat').innerHTML = "Draw " + deck[deckPointer] + " point"; //แสดงผลแต้ม displayPoint(player); //ถ้าแต้มมากกว่า 21 ผู้เล่นแพ้ if (playerPoint > 21) { //เปลี่ยนสถานะเป็นคุณแพ้ document.getElementById('gameStat').innerHTML = 'You Lose!!'; document.getElementById('loseStat').innerHTML = parseInt(document.getElementById('loseStat').innerHTML) + 1; } //เลื่อนตำแหน่งไพ่ deckPointer++; } } /* * แสดงแต้ม */ function displayPoint() { //เรียงไพ่จากน้อยไปหามาก playerCard.sort(function (a, b) { return a - b; }); //แต้มของผู้เล่น playerPoint = 0; for (i = 0; i < playerCard.length; i++) { //ถ้าไพ่เป็น11และแต้มทั้งหมดมากกว่า 10 ให้เพิ่มเป็น 1 แต้มแทน if (playerCard[i] === 11 && playerPoint > 10) { playerPoint += 1; } else { playerPoint += playerCard[i]; } } document.getElementById('player').innerHTML = playerPoint; } function btnStand() { //สถานะของเกม var gameStat = document.getElementById('gameStat').innerHTML; if (gameStat === 'Welcome!!' || gameStat === 'You Win!!' || gameStat === 'You Lose!!' || gameStat === 'Draw!!') { return false; } computerCard.sort(function (a, b) { return a - b; }); //แต้มของคอมพิวเตอร์ computerPoint = 0; for (i = 0; i < computerCard.length; i++) { //ถ้าไพ่เป็น11และแต้มทั้งหมดมากกว่า 10 ให้เพิ่มเป็น 1 แต้มแทน if (computerCard[i] === 11 && computerPoint > 10) { computerPoint += 1; } else { computerPoint += computerCard[i]; } } //ถ้าแต้มของคอมพิวเตอร์เกิน21 if (computerPoint > 21) { //เปลี่ยนสถานะเป็นคุณชนะ document.getElementById('gameStat').innerHTML = 'You Win!!'; document.getElementById('winStat').innerHTML = parseInt(document.getElementById('winStat').innerHTML) + 1; //แสดงแต้มของคอมพิวเตอร์ document.getElementById('computer').innerHTML = computerPoint; return false; } //ถ้าแต้มของคอมพิวเตอร์น้อยกว่าผู้เล่นให้ทำการจั่วไพ่ if (computerPoint < playerPoint) { //เพิ่มไพ่คอม computerCard.push(deck[deckPointer]); //คำนวนแต้มใหม่ btnStand(); return false; } //ถ้าแต้มของคอมพิวเตอร์เท่ากับผู้เล่น if (computerPoint === playerPoint) { //เปลี่ยนสถาานะเป็นเสมอ document.getElementById('gameStat').innerHTML = 'Draw!!'; //แสดงแต้มของคอมพิวเตอร์ document.getElementById('computer').innerHTML = computerPoint; return false; } //ถ้าแต้มของคอมพิวเตอร์มากกว่าผู้เล่น if (computerPoint > playerPoint && computerPoint < 22) { //แสดงแต้มของคอมพิวเตอร์ document.getElementById('computer').innerHTML = computerPoint; //เปลี่ยนสถานะเป็นคุณชนะ document.getElementById('gameStat').innerHTML = 'You Lose!!'; document.getElementById('loseStat').innerHTML = parseInt(document.getElementById('loseStat').innerHTML) + 1; return false; } } </script> </body> </html>