EP.14 ใบเรียกอัศวินพิเศษ[เซเว่นไนท์]

noMerzy | 2016-06-23 10:03:36

ใบเรียกอัศวินพิเศษ

ใบเรียกอัศวินพิเศษ สำหรับคนที่เล่นเกมเซเว่นไนท์คงจะคุ้นเคยกันเป็นอย่างดี สำหรับคนที่ไม่ได้เล่น อธิบายง่ายๆก็คือการสุ่มเปิดตารางเพื่อหาอัศวินระดับแรร์(90ช่องมีแค่ 1 ตัว) โดยจะเปิดได้ฟรีวันละครั้ง เปิดเพิ่มต้องมีค่าใช้จ่าย โดยมีระยะเวลาจำกัด 30 วันต่อหนึ่งกระดาน

และเนื่องจากผมเล่นเกมนี้มาระยะเวลานึงแล้ว(ประมาณ 4 กระดาน) ผมไม่เคยจะเปิดได้อัศวินระดับแรร์เลย เนื่องจากผมเป็นคนไม่ค่อยมีดวง เลยคิดว่าน่าจะลองเขียนโปรแกรมใบเรียกอัศวินพิเศษดู เพื่อทดสอบดูว่าจะเปิดได้อัศวินระดับแรร์ในครั้งที่เท่าไร จึงเป็นที่มาของบทความนี้

board.html
<html> <head> <title>ใบเรียกอัศวินพิเศษ</title> <meta charset="UTF-8"> <style> #board { width:520px; height: 468px; border: 5px solid #f4daa7; } .slot-odd, .slot-even, .slot-opened{ position: relative; width: 50px; height: 50px; float: left; border: 1px solid #9f7b4e; } .slot-odd { background-color: #524131; } .slot-even { background-color: #c4b9ac; } .opened { background-color: transparent; } </style> </head> <body onload="createBoard()"> <div id="board"></div> <br> <span>จำนวนเรียกทั้งหมด </span><span id="number">0 / 90</span> <p id="result"></p> <script> //อิลิเมนต์บอร์ด var board = document.getElementById('board'); //อิลิเมนต์จำนวนเรียกทั้งหมด var number = document.getElementById('number'); //สตริง html var html = ''; //toggle สลับสีตาราง var colorToggle = true; //จำนวนเรียกทั้งหมด var totalSummon = 0; //ตัวแปรตรวจสอบว่าได้เอซหรือยัง var ace = false; /* * ฟังก์ชั่นสร้างตาราง */ function createBoard() { //ลูป 90 ตาราง for (i = 1; i < 91; i++) { if (colorToggle) { //ตารางสีขาว html += '<div class="slot-odd" id="' + i + '" onclick="openSlot(this.id)"></div>'; } else { //ตารางสีดำ html += '<div class="slot-even" id="' + i + '" onclick="openSlot(this.id)"></div>'; } //ถ้าเป็นสล็อตสุดท้ายของแถวไม่ต้องเปลี่ยนสี if (i % 10 !== 0) { colorToggle = !colorToggle; } } board.innerHTML = html; } /* * ฟังก์ชั่นเปิดสล็อต * @param int id หมายเลขสล็อตที่เปิด */ function openSlot(id) { //ถ้าสล็อตนั้นเปิดไปแล้วไม่ต้องทำงาน if (document.getElementById(id).className === "slot-opened") { return false; } //โอกาสในการได้ chance = 90 - totalSummon; //เพิ่มจำนวนเรียกทั้งหมด totalSummon++; //แสดงจำนวนเรียกทั้งหมด number.innerHTML = totalSummon + ' / 90'; //สุ่มเอซ rand = Math.floor((Math.random() * chance) + 1); //ถ้าสุ่มได้ 1 ได้เอซ if (rand === 1 && ace === false) { //โชว์รูปเอซ document.getElementById(id).innerHTML = '<img src="ace.jpg">'; //แสดงข้อความเปิดไปกี่ครั้งถึงได้เอซ document.getElementById('result').innerHTML = 'คุณได้รับเอซในการเปิดครั้งที่ ' + totalSummon; ace = true; } else { //เซ็ตว่าสล็อตเปิดไปแล้ว document.getElementById(id).className = "slot-opened"; } } </script> </body> </html>