js小游戏-扫雷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.box{
border: 1px solid #666;
position: fixed;
width: 300px;
height: 350px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.btn-group{
display: flex;
height: 50px;
line-height: 50px;
text-align: center;
justify-content: space-evenly;
font-size: 12px;
}
.row{
height: 30px;
line-height: 30px;
text-align: center;
display: flex;
}
.col{
flex-shrink: 0;
flex-grow: 0;
width: 30px;
height: 30px;
border: 1px solid #666;
background-color: #ccc;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<div class="qipan">
</div>
<div class="btn-group">
<div class="btn-item">
<span class="item-name">时间</span>
<span class="item-value passTime">000</span>
</div>
<div class="btn-item">
<span class="item-name">剩余雷数</span>
<span class="item-value leftLei">10</span>
</div>
<div class="btn-item">
<select class="level">
<option value="1">初级</option>
<option value="2">中级</option>
<option value="3">高级</option>
</select>
</div>
<div class="btn-item">
<span class="start">开始</span>
<span class="restart">重开</span>
</div>
</div>
</div>
<script>
function $(s,t){
if(t == 'l'){
return document.querySelectorAll(s)
}else{
return document.querySelector(s)
}
}
var qipan = $('.qipan'),
box = $('.box'),
level = $('.level'),
leftLei = $('.leftLei'),
start = $('.start'),
restart = $('.restart'),
passTime = $('.passTime')
;
var row = 10,
col = 10,
leiNum = 10,
restNum = 10,
flag = false,
time,
count = 0,
leiList = [],
sum = col*row,
openGz = 0,
over = false,
color = ['rgba(0,0,255,.6)','rgba(0,255,0,.6)','red','blue','yellow','pink','auqa','black']
;
window.oncontextmenu = function(e){
e.preventDefault();
if(!flag){
alert('请先点开始!');
return;
}
if(e.target.isOpen){
alert('这个格子已经翻过了,换个格子标记');
return
}
if(e.target.localName == 'li'){
if(e.target.isMark){
e.target.isMark = false;
e.target.innerHTML = '';
restNum++;
}else{
e.target.isMark = true;
e.target.innerHTML = '▲';
e.target.style.color = 'red';
restNum--;
}
leftLei.innerHTML = restNum
}
}
start.onclick = function(){
if(over){
alert('游戏已经结束,请重新选择难度或者重开');
return
}
flag = true;
if(time>0){
alert('游戏已经开始了,不要再点开始了')
return
}
countTime()
}
restart.onclick = function(){
flag = false;
createQp();
}
box.onclick = function(e){
var t = e.target;
if(t.localName == 'li'){
if(!flag){
alert('请先点开始!')
return
}
var x = t.dataset.x - 0 ,y = t.dataset.y - 0;
if(t.isOpen){
alert('这个格子已经翻过了,换个格子翻');
return
}
if(t.isMark){
alert('这个格子已经标记了,换个格子翻');
return
}
if(isInArray(x,y,leiList) != -1 ){
flag = false;
clearInterval(time);
count = 0;
passTime.innerHTML = count;
over = true;
boom();
alert('你输了')
}else{
testLei(x,y);
if(leiNum == sum - openGz){
flag = false;
boom();
clearInterval(time);
alert('你赢了');
over = true;
}
}
}
}
level.onchange = function(){
var v = this.value;
if(v == 1){
row = 10;
col = 10;
leiNum = 10;
}else if(v == 2){
row = 16;
col = 16;
leiNum = 40;
}else if(v == 3){
row = 16;
col = 30;
leiNum = 99;
}
createQp();
};
function createQp(){
var str = '';
for(var i = 0;i<row;i++){
str += '<ul class="row">'
for(var j = 0;j<col;j++){
str+='<li class="col" data-x="'+i+'" data-y="'+j+'"></li>'
}
str += '</ul>'
}
box.style.width = col * 30 +'px';
box.style.height = row * 30 + 50 +'px';
leftLei.innerHTML = leiNum;
qipan.innerHTML = str;
count = 0;
sum = row*col;
openGz = 0;
passTime.innerHTML = count;
restNum = leiNum;
leftLei.innerHTML = restNum;
clearInterval(time);
time = 0;
createLei();
over = false;
}
function countTime(){
time = setInterval(function(){
count++;
passTime.innerHTML = count;
},1000)
}
function createLei(){
leiList = [];
for(var i = 0;i<leiNum;i++){
var x = parseInt(Math.random()*row),
y = parseInt(Math.random()*col);
if(isInArray(x,y,leiList) == -1){
leiList.push([x,y])
}else{
i--
}
}
}
function isInArray(x,y,arr){
for(var i = 0;i<arr.length;i++){
if(x == arr[i][0] && y == arr[i][1]){
return i;
}
}
if(i == arr.length){
return -1;
}
}
function boom(){
var ul = $('.row','l');
for(var i = 0;i<leiList.length;i++){
var li = ul[leiList[i][0]].querySelectorAll('li')[leiList[i][1]];
li.style.background = 'red'
}
}
function testLei(x,y){
var num = 0;
for(var i = 0;i<leiList.length;i++){
if(Math.abs(x - leiList[i][0]) <2 && Math.abs(y - leiList[i][1])<2){
num++;
}
}
var ul = $('.row','l');
var li = ul[x].querySelectorAll('li')[y];
li.innerHTML = num;
li.isOpen = true;
openGz++;
li.style.background = '#fff';
if(num>0){
li.style.color = color[num-1];
}
if(num == 0){
li.innerHTML = '';
for(var a = x-1;a<=x+1;a++){
for(var b = y-1;b<=y+1;b++){
var ul = $('ul','l');
if(a>= 0 && a<row && b>=0 && b<col){
var dom = ul[a].querySelectorAll('li')[b];
if(!dom.isOpen && !dom.isMark){
testLei(a,b)
}
}
}
}
}
}
createQp();
</script>
</body>
</html>