js掃雷
阿新 • • 發佈：2019-05-16
one dex ado creat doctype display UNC pos map
HTML部分:
<!doctype html>
<html>
<head> <meta charset="utf-8"> <title>JS掃雷</title> <link rel="stylesheet" href="Mine.css">
</head>
<body>
<div class="wrapper"> <div class="btn" id="btn"></div> <div class="box" id="box"></div> <div class="flagBox" id="flagBox">當前剩余雷數： <span id="score">10</span> </div> <div class="alertBox" id="alertBox"> <div class="alertImg" id="alertImg"> <div class="close" id="close"></div> </div> </div> </div> <script type="text/javascript" src="Mine.js"></script> </body> </html> CSS部分： @charset "utf-8";
* { margin: 0; padding: 0; }
.wrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-image: url("bg.jpg"); background-size: 100% 100%; }
.btn { height: 140px; width: 170px; position: absolute; left: 50px; background-image: url("startGame.png"); background-size: 100% 100%; cursor: pointer; }
.flagBox { position: absolute; top: 50px; left: 50%; width: 200px; height: 50px; margin-left: -100px; color: #333; font-size: 20px; font-weight: bolder; }
.alertImg { height: 400px; width: 600px; background-image: url("success.png"); background-size: 100% 100%; position: absolute; left: -9px; top: 3px; right: 0; bottom: 0; margin: auto; border-radius: 20px; }
.close { position: absolute; right: 0; top: 0; height: 40px; width: 40px; background-image: url("closeBtn.png"); background-size: 100% 100%; cursor: pointer; }
.block { width: 49px; height: 49px; border-right: 1px solid #b25f27; border-bottom: 1px solid #b25f27; box-shadow: 0 0 4px #333 inset; background-image: url("cao.jpg"); float: left; }
.show { background-imag: url("dilei.jpg"); background-size: 100% 100%; }
.num { background: #ecd0a1; font-size: 18px; font-weight: bold; line-height: 49px; text-align: center; }
.flag { background-image: url("hongqi.jpg"); background-size: 100% 100%; javascript部分: //// JavaScript Document var startBtn = document.getElementById(‘btn‘); var box = document.getElementById(‘box‘); var flagBox = document.getElementById(‘flagBox‘); var alertBox = document.getElementById(‘alertBox‘); var alertImg = document.getElementById(‘alertImg‘); var closeBtn = document.getElementById(‘close‘); var score = document.getElementById(‘score‘); var minesNum; var mineOver; var block; var mineMap = []; var startGameBool = true; bindEvent();
function bindEvent() { startBtn.onclick = function() { if (startGameBool) { box.style.display = ‘block‘; flagBox.style.display = ‘block‘; init(); startGameBool = false; }
} box.onmousedown = function() { return false; } box.onmousedown = function(e) { var event = e.target; if (e.which == 1) { leftClick(event); } else if (e.which == 3) { rightClick(event); } }
closeBtn.onclick = function() { alertBox.style.display = ‘none‘; flagBox.style.display = ‘none‘; box.style.display = ‘none‘; box.innerHTML = ‘‘; startGameBool = true; } }
function init() { minesNum = 10; mineOver = 10; score.innerHTML = mineOver; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { var con = document.createElement(‘div‘); con.classList.add(‘block‘); con.setAttribute(‘id‘, i + ‘-‘ + j); box.appendChild(con); mineMap.push({ mine: 0 }); } } block = document.getElementsByClassName(‘block‘); while (minesNum) { var mineIndex = Math.floor(Math.random() * 100); if (mineMap[mineIndex].mine === 0) { block[mineIndex].classList.add(‘islei‘); mineMap[mineIndex].mine === 1;
minesNum--; }
} }
function leftClick(dom) { var islei = document.getElementsByClassName(‘islei‘); if (dom && dom.classList.contains(‘islei‘)) {
for (var i = 0; i < islei.length; i++) { islei[i].classList.add(‘show‘); } setTimeout(function() { alertBox.style.display = ‘block‘; alertImg.style.backgroundImage = ‘url("over.jpg")‘; }, 800) } else { var n = 0; var posArr = dom && dom.getAttribute(‘id‘).split(‘-‘); var posX = posArr && +posArr[0]; var posY = posArr && +posArr[1]; dom && dom.classList.add(‘num‘); for (i = posX - 1; i <= posX + 1; i++) { for (var j = posY - 1; j <= posY + 1; j++) { var aroundBox = document.getElementById(i + ‘-‘ + j); if (aroundBox && aroundBox.classList.contains(‘islei‘)) { n++; } } } dom && (dom.innerHTML = n); if (n == 0) { for (i = posX - 1; i <= posX + 1; i++) { for (j = posY - 1; j <= posY + 1; j++) { var nearBox = document.getElementById(i + ‘-‘ + j); if (nearBox && nearBox.length != 0) { if (!nearBox.classList.contains(‘check‘)) nearBox.classList.add(‘check‘); leftClick(nearBox); } } } } } }
function rightClick(dom) { if (dom.classList.contains(‘num‘)) { return; } dom.classList.toggle(‘flag‘); if (dom.classList.contains(‘islei‘) && dom.classList.contains(‘flag‘)) { mineOver--; } if (dom.classList.contains(‘islei‘) && !dom.classList.contains(‘flag‘)) { mineOver++; } score.innerHTML = mineOver; if (mineOver == 0) { alertBox.style.display = ‘block‘; alertImg.style.backgroundImage = ‘url("success.png")‘; } }
<head> <meta charset="utf-8"> <title>JS掃雷</title> <link rel="stylesheet" href="Mine.css">
</head>
<body>
<div class="wrapper"> <div class="btn" id="btn"></div> <div class="box" id="box"></div> <div class="flagBox" id="flagBox">當前剩余雷數： <span id="score">10</span> </div> <div class="alertBox" id="alertBox"> <div class="alertImg" id="alertImg"> <div class="close" id="close"></div> </div> </div> </div> <script type="text/javascript" src="Mine.js"></script> </body> </html> CSS部分： @charset "utf-8";
* { margin: 0; padding: 0; }
.wrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-image: url("bg.jpg"); background-size: 100% 100%; }
.btn { height: 140px; width: 170px; position: absolute; left: 50px; background-image: url("startGame.png"); background-size: 100% 100%; cursor: pointer; }
.flagBox { position: absolute; top: 50px; left: 50%; width: 200px; height: 50px; margin-left: -100px; color: #333; font-size: 20px; font-weight: bolder; }
.alertImg { height: 400px; width: 600px; background-image: url("success.png"); background-size: 100% 100%; position: absolute; left: -9px; top: 3px; right: 0; bottom: 0; margin: auto; border-radius: 20px; }
.close { position: absolute; right: 0; top: 0; height: 40px; width: 40px; background-image: url("closeBtn.png"); background-size: 100% 100%; cursor: pointer; }
.block { width: 49px; height: 49px; border-right: 1px solid #b25f27; border-bottom: 1px solid #b25f27; box-shadow: 0 0 4px #333 inset; background-image: url("cao.jpg"); float: left; }
.show { background-imag: url("dilei.jpg"); background-size: 100% 100%; }
.num { background: #ecd0a1; font-size: 18px; font-weight: bold; line-height: 49px; text-align: center; }
.flag { background-image: url("hongqi.jpg"); background-size: 100% 100%; javascript部分: //// JavaScript Document var startBtn = document.getElementById(‘btn‘); var box = document.getElementById(‘box‘); var flagBox = document.getElementById(‘flagBox‘); var alertBox = document.getElementById(‘alertBox‘); var alertImg = document.getElementById(‘alertImg‘); var closeBtn = document.getElementById(‘close‘); var score = document.getElementById(‘score‘); var minesNum; var mineOver; var block; var mineMap = []; var startGameBool = true; bindEvent();
function bindEvent() { startBtn.onclick = function() { if (startGameBool) { box.style.display = ‘block‘; flagBox.style.display = ‘block‘; init(); startGameBool = false; }
} box.onmousedown = function() { return false; } box.onmousedown = function(e) { var event = e.target; if (e.which == 1) { leftClick(event); } else if (e.which == 3) { rightClick(event); } }
closeBtn.onclick = function() { alertBox.style.display = ‘none‘; flagBox.style.display = ‘none‘; box.style.display = ‘none‘; box.innerHTML = ‘‘; startGameBool = true; } }
function init() { minesNum = 10; mineOver = 10; score.innerHTML = mineOver; for (var i = 0; i < 10; i++) { for (var j = 0; j < 10; j++) { var con = document.createElement(‘div‘); con.classList.add(‘block‘); con.setAttribute(‘id‘, i + ‘-‘ + j); box.appendChild(con); mineMap.push({ mine: 0 }); } } block = document.getElementsByClassName(‘block‘); while (minesNum) { var mineIndex = Math.floor(Math.random() * 100); if (mineMap[mineIndex].mine === 0) { block[mineIndex].classList.add(‘islei‘); mineMap[mineIndex].mine === 1;
minesNum--; }
} }
function leftClick(dom) { var islei = document.getElementsByClassName(‘islei‘); if (dom && dom.classList.contains(‘islei‘)) {
for (var i = 0; i < islei.length; i++) { islei[i].classList.add(‘show‘); } setTimeout(function() { alertBox.style.display = ‘block‘; alertImg.style.backgroundImage = ‘url("over.jpg")‘; }, 800) } else { var n = 0; var posArr = dom && dom.getAttribute(‘id‘).split(‘-‘); var posX = posArr && +posArr[0]; var posY = posArr && +posArr[1]; dom && dom.classList.add(‘num‘); for (i = posX - 1; i <= posX + 1; i++) { for (var j = posY - 1; j <= posY + 1; j++) { var aroundBox = document.getElementById(i + ‘-‘ + j); if (aroundBox && aroundBox.classList.contains(‘islei‘)) { n++; } } } dom && (dom.innerHTML = n); if (n == 0) { for (i = posX - 1; i <= posX + 1; i++) { for (j = posY - 1; j <= posY + 1; j++) { var nearBox = document.getElementById(i + ‘-‘ + j); if (nearBox && nearBox.length != 0) { if (!nearBox.classList.contains(‘check‘)) nearBox.classList.add(‘check‘); leftClick(nearBox); } } } } } }
function rightClick(dom) { if (dom.classList.contains(‘num‘)) { return; } dom.classList.toggle(‘flag‘); if (dom.classList.contains(‘islei‘) && dom.classList.contains(‘flag‘)) { mineOver--; } if (dom.classList.contains(‘islei‘) && !dom.classList.contains(‘flag‘)) { mineOver++; } score.innerHTML = mineOver; if (mineOver == 0) { alertBox.style.display = ‘block‘; alertImg.style.backgroundImage = ‘url("success.png")‘; } }
js掃雷