EP.16 minesweeper

noMerzy | 2016-08-11 10:46:03

minesweeper.html
<html> <head> <title>minesweeper</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* สไตล์ของตาราง */ #board { border-collapse: collapse; } #board tr td { width: 30px; height: 30px; border: 1px solid #333; background-color: #f1f1f1; text-align: center; } #board tr  td:hover { background-color: #fcfcfc; } </style> </head> <body> <table id="board"></table> <h3>เวลา <span id="statusTime"></span> วินาที</h3> <h3>มีระเบิดทั้งหมด <span id="statusBomb"></span> ลูก</h3> <script> var html = ""; var board = document.getElementById('board'); //จำนวนระเบิดทั้งหมด var totalBomb = 0; //จำนวนที่เปิดไป var opened = 0; //เวลา var playtime = 0; //จับเวลา var timeInterval = setInterval(timeCount, 1000); //สร้างตาราง 20*20 ช่อง var area = []; for (row = 1; row <= 20; row++) { html += "<tr>"; for (col = 1; col <= 20; col++) { //โอกาสเจอระเบิด 10% number = Math.floor((Math.random() * 100) + 1); //ถ้าเป็นระเบิด if (number < 11) { bomb = 1; totalBomb++; } else { bomb = 0; } id = (row - 1) * 20 + col; html += "<td id='" + id + "' data-bomb='" + bomb + "' data-opened='0' data-mark='0' onclick='opens(this.id)' oncontextmenu='flagbomb(this.id);return false;'></td>"; } html += "</tr>"; } board.innerHTML = html; /* * จำนวนที่ต้องเปิดทั้งหมด * 400 - จำนวนระเบิดทั้งหมด */ var totalOpen = 400 - totalBomb; /* * แสดงสถานะเวลาและจำนวนระเบิด */ document.getElementById('statusTime').innerHTML = 0; document.getElementById('statusBomb').innerHTML = totalBomb; /* * ฟังก์ชั่นการเปิดช่อง */ function opens(id) { //จำนวนระเบิดรอบๆ nearBomb = 0; //อิลิเมนต์ที่เปิด var elem = document.getElementById(id); //ถ้าช่องนี้เปิดไปแล้ว if (elem.getAttribute("data-opened") === "1") { return false; } //เพิ่มจำนวนช่องที่เปิดไปแล้ว opened++; //ค่า bomb ของช่องที่เปิด var bomb = elem.getAttribute("data-bomb"); //ถ้าช่องที่เปิดเป็นระเบิด if (bomb === "1") { elem.style.backgroundColor = "#ff5555"; alert('BOMB!!'); clearInterval(timeInterval); return false; } else { //ถ้าไม่ใช่ะเบิด //เซ็ตค่าว่าเปิดไปแล้ว elem.setAttribute("data-opened", 1); } //จำนวนระเบิดรอบๆ var nearBomb = checkBomb(id); //แสดงจำนวนระเบิดรอบๆ //ถ้ามีระเบิดรอบๆ elem.style.backgroundColor = '#ffffff'; if (nearBomb > 0) { //แสงดจำนวนระเบิดรอบๆ elem.innerHTML = nearBomb; } //ถ้าเปิดครบแล้ว if (opened === totalOpen) { clearInterval(timeInterval); alert('you win!!'); } } //จับเวลา function timeCount() { //ถ้ามีการเปิดแล้วให้นับเวลา if (opened > 0) { playtime++; document.getElementById('statusTime').innerHTML = playtime; } } //ตรวจสอบระเบิดรอบๆช่องที่เปิด function checkBomb(id) { //จำนวนระเบิดรอบๆ var nearBomb = 0; //อาเรย์ช่องรอบๆ area = []; /* * ซ้าย-บน * ต้องไม่เป็นแถวแรก (id > 10) * และต้องไม่เป็นคอลัมน์แรก (id % 10 !== 1) */ if ((id > 20) && (id % 20 !== 1)) { area.push((parseInt(id) - 20) - 1); } /* * กลาง-บน * ต้องไม่เป็นแถวแรก (id > 10) */ if (id > 20) { area.push(parseInt(id) - 20); } /* * ขวา-บน * ต้องไม่เป็นแถวแรก (id > 10) * และต้องไม่เป็นคอลัมน์สุดท้าย (id % 10 !== 0) */ if ((id > 20) && (id % 20 !== 0)) { area.push((parseInt(id) - 20) + 1); } /* * ซ้าย-กลาง * ต้องไม่เป็นคอลัมน์แรก (id % 10 !== 1) */ if (id % 20 !== 1) { area.push(parseInt(id) - 1); } /* * ขวา-กลาง * ต้องไม่เป็นคอลัมน์แรก (id % 10 !== 1) */ if (id % 20 !== 0) { area.push(parseInt(id) + 1); } /* * ซ้าย-ล่าง * ต้องไม่เป็นแถวสุดท้าย (id < 91) * และต้องไม่เป็นคอลัมน์แรก (id % 10 !== 1) */ if ((id < 381) && (id % 20 !== 1)) { area.push((parseInt(id) + 20) - 1); } /* * กลาง-ล่าง * ต้องไม่เป็นแถวสุดท้าย (id < 91) */ if (id < 381) { area.push(parseInt(id) + 20); } /* * ขวา-ล่าง * ต้องไม่เป็นแถวสุดท้าย (id < 91) * และต้องไม่เป็นคอลัมน์สุดท้าย (id % 10 !== 0) */ if ((id < 381) && (id % 20 !== 0)) { area.push((parseInt(id) + 20) + 1); } //ตรวจสอบจำนวนระเบิดจากอาเรย์ for (i = 0; i < area.length; i++) { if (document.getElementById(area[i]).getAttribute("data-bomb") === "1") { //เพิ่มจำนวนระเบิดรอบๆ nearBomb++; } } //คืนค่าจำนวนระเบิดรอบๆ return nearBomb; } //มาร์คระเบิด function flagbomb(id) { //ถ้าเปิดไปแล้วให้ยกเลิกการทำงาน if (document.getElementById(id).getAttribute("data-opened") === "1") { return false; } //ถ้าช่องนี้ยังไม่ได้มาร์คระเบิด if (document.getElementById(id).getAttribute("data-mark") === "0") { //ทำการมาร์ค document.getElementById(id).setAttribute("data-mark", "1"); //เปลี่ยนสีพื้นเป็นสีน้ำเงิน document.getElementById(id).style.backgroundColor = "#7777ff"; //ลดจำนวนระเบิดทั้งหมด totalBomb--; } else { //ถ้าช่องนี้มาร์คแล้วให้ยกเลิกการมาร์คระเบิด document.getElementById(id).setAttribute("data-mark", "0"); //เปลี่ยนเป็นสีเทาเหมือนเดิม document.getElementById(id).style.backgroundColor = "#f1f1f1"; //เพิ่มจำนวนระเบิดคืน totalBomb++; } //แสดงจำนวนระเบิด document.getElementById('statusBomb').innerHTML = totalBomb; } </script> </body> </html>