标签：false 框架 color width state 扫雷 var id
随机生成数据，每个单元格只需要存是不是雷就行。
第一次点的时候保证不能死，如果踩雷就随机找个安全的格子互换。
状态：0-8代表翻开的，数字表示周围的雷数，9代表初始，10是问号，11是插旗；后面是结束才用得上的：12是揭晓雷，13是误插旗。
左键翻开，右键插旗或标问号，插好旗后左右键一起点数字，翻开周围每一个。
没有框架，就一个文件，打开就能玩。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
#top{
height: 100px;
font-size: 48px;
display: grid;
text-align: center;
margin: 0 auto;
}
#top .fa-smile-o{
color: goldenrod;
}
#top .fa-frown-o{
color: red;
}
#result{
margin-top: 8px;
}
#bottom{
display: grid;
margin: 0 auto;
font-size: 18px;
}
.cell{
background-color: lightgrey;
display: table-cell;
border-width: 0.5px;
border-style: solid;
border-color: gray;
vertical-align: middle;
user-select: none;
}
.cell .fa{
margin-top: 5px;;
}
.state1{
color: blue;
}
.state2{
color: green;
}
.state3{
color: red;
}
.state4{
color: darkblue;
}
.state5{
color: darkred;
}
.state6{
color: darkturquoise;
}
.state7{
color: black;
}
.state8{
color: gray;
}
.state9{
background-color: darkgray;
border-style: outset;
border-width: 5px;
border-top-color: white;
border-left-color: white;
}
.state10{
color: black;
}
.state11,.state13{
color: red;
}
</style>
</head>
<body>
<div style="text-align: center;">
<div id="top">
<span id="count">0</span>
<i id="result" class="fa fa-smile-o"></i>
<span id="time">0</span>
</div>
<div id="bottom"></div>
</div>
</body>
<script>
var state_to_text=['','1','2','3','4','5','6','7','8','','?'];
var playing=false;
var mimeCount=99;
var width=30;
var height=16;
var cellSize=30;
var realData=Array.from(new Array(width*height));
var state=realData.slice();
$('#bottom').css('width',width*cellSize+'px');
$('#top').css('width',width*cellSize+'px');
$('#top').css('grid-template-columns','repeat(3,'+cellSize*width/3+'px');
$('#bottom').css('grid-template-columns','repeat('+width+','+cellSize+'px');
$('#bottom').css('grid-template-rows','repeat('+height+','+cellSize+'px');
realData.forEach((v,i)=>$('#bottom').append('<div data-id="'+i+'" class="cell"></div>'));
'CLICK EMOJI TO START'.split('').forEach((s,i)=>$('.cell[data-id='+(parseInt(height/2)*width+i)+']').html(s));
function set_emoji(s){
$('#result').removeClass().addClass('fa fa-'+s);
}
function set_state(i,v){
state[i]=v;
let dom=$('.cell[data-id='+i+']');
dom.removeClass().addClass('cell state'+v);
if(v<state_to_text.length)
dom.html('<span>'+state_to_text[v]+'</span>');
else{
if(v==11)//flag
dom.html('<i class="fa fa-flag"/>');
if(v==12)//mime
dom.html('<i class="fa fa-bomb"/>');
if(v==13)//flag but it isn't mime
dom.html('<i class="fa fa-times"/>');
}
}
setInterval(() => {
if(playing==false)
return;
$('#time').html(parseInt($('#time').html())+1);
}, 1000);
$('#result').click(()=>{
let mime_pos=new Set();
while(mime_pos.size<mimeCount)
mime_pos.add(parseInt(Math.random()*realData.length));
for(let i=0;i<realData.length;i++)
realData[i]=mime_pos.has(i);
state.forEach((v,i)=>set_state(i,9));
playing=true;
$('#time').html('0');
$('#count').html(mimeCount);
set_emoji('meh-o');
});
var leftDown=false;
var rightDown=false;
var doubleMouse=false;
function getAll(center){
function hasTop(){return center>=width;}
function hasBottom(){return center<(height-1)*width;}
function hasLeft(){return center%width!=0;}
function hasRight(){return center%width!=width-1;}
let result=[];
if(hasLeft()){
result.push(center-1);
if(hasTop())
result.push(center-1-width);
if(hasBottom())
result.push(center-1+width);
}
if(hasRight()){
result.push(center+1);
if(hasTop())
result.push(center+1-width);
if(hasBottom())
result.push(center+1+width);
}
if(hasTop())
result.push(center-width);
if(hasBottom())
result.push(center+width);
return result;
}
function doubleMouseUp(i){
doubleMouse=false;
if(state[i]<1||state[i]>8)
return;
let all=getAll(i);
if(state[i]!=all.filter(u=>state[u]==11).length)
return;
all.forEach(open);
}
function open(i){
if(state[i]!=9&&state[i]!=10)
return;
if(realData[i]){
if(state.every(u=>u>8)){//open first time
let random=parseInt(Math.random()*(state.length-mimeCount));
realData.map((u,i)=>!u?i:undefined).filter(u=>u!=undefined)[random]=true;
realData[i]=false;
open(i);
return;
}
playing=false;
set_emoji('frown-o');
realData.forEach((u,index)=>{
if(u&&state[index]!=11)
set_state(index,12);
else if(!u&&state[index]==11)
set_state(index,13);
});
}
else{
let all=getAll(i);
let mime_count=all.filter(u=>realData[u]).length;
set_state(i,mime_count);
if(mime_count==0)
all.forEach(u=>open(u));
if(state.filter(u=>u<9).length==width*height-mimeCount){
playing=false;
set_emoji('smile-o');
}
}
}
$('.cell').mousedown(e=>{
if(e.which==1){
leftDown=true;
if(rightDown)
doubleMouse=true;
}
else if(e.which==3){
rightDown=true;
if(leftDown)
doubleMouse=true;
}
});
$('.cell').mouseup(e=>{
let id=parseInt($(e.currentTarget).data('id'));
if(id==undefined||!playing)
return;
if(e.which==1){
leftDown=false;
if(rightDown==false){
if(doubleMouse)
doubleMouseUp(id);
else
open(id);
}
}
else if(e.which==3){
rightDown=false;
if(leftDown==false){
if(doubleMouse)
doubleMouseUp(id);
else if(state[id]>=9&&state[id]<=11){
set_state(id,(state[id]-1)%3+9);
$('#count').html(mimeCount-state.filter(u=>u==11).length);
}
}
}
});
document.getElementById('bottom').oncontextmenu=e=>e.preventDefault();
</script>
</html>
标签：false,框架,color,width,state,扫雷,var,id 来源： https://www.cnblogs.com/nsyglpc/p/15681837.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。