Windows саппер в 49 строк
by Vladimir
HTML
<div id="saper_game" class="gaming">
<div class="row">
<div id="p_0_0"></div>
<div id="p_1_0"></div>
<div id="p_2_0"></div>
<div id="p_3_0"></div>
<div id="p_4_0"></div>
<div id="p_5_0"></div>
<div id="p_6_0"></div>
<div id="p_7_0"></div>
<div id="p_8_0"></div>
<div id="p_9_0"></div>
</div>
<div class="row">
<div id="p_0_1"></div>
<div id="p_1_1"></div>
<div id="p_2_1"></div>
<div id="p_3_1"></div>
<div id="p_4_1"></div>
<div id="p_5_1"></div>
<div id="p_6_1"></div>
<div id="p_7_1"></div>
<div id="p_8_1"></div>
<div id="p_9_1"></div>
</div>
<div class="row">
<div id="p_0_2"></div>
<div id="p_1_2"></div>
<div id="p_2_2"></div>
<div id="p_3_2"></div>
<div id="p_4_2"></div>
<div id="p_5_2"></div>
<div id="p_6_2"></div>
<div id="p_7_2"></div>
<div id="p_8_2"></div>
<div id="p_9_2"></div>
</div>
<div class="row">
<div id="p_0_3"></div>
<div id="p_1_3"></div>
<div id="p_2_3"></div>
<div id="p_3_3"></div>
<div id="p_4_3"></div>
<div id="p_5_3"></div>
<div id="p_6_3"></div>
<div id="p_7_3"></div>
<div id="p_8_3"></div>
<div id="p_9_3"></div>
</div>
<div class="row">
<div id="p_0_4"></div>
<div id="p_1_4"></div>
<div id="p_2_4"></div>
<div id="p_3_4"></div>
<div id="p_4_4"></div>
<div id="p_5_4"></div>
<div id="p_6_4"></div>
<div id="p_7_4"></div>
<div id="p_8_4"></div>
<div id="p_9_4"></div>
</div>
<div class="row">
<div id="p_0_5"></div>
<div id="p_1_5"></div>
<div id="p_2_5"></div>
<div id="p_3_5"></div>
<div id="p_4_5"></div>
<div id="p_5_5"></div>
<div id="p_6_5"></div>
<div id="p_7_5"></div>
<div id="p_8_5"></div>
<div id="p_9_5"></div>
</div>
<div class="row">
<div id="p_0_6"></div>
<div id="p_1_6"></div>
<div id="p_2_6"></div>
<div id="p_3_6"></div>
<div id="p_4_6"></div>
<div id="p_5_6"></div>
<div id="p_6_6"></div>
<div...CSS
body
{
background: #252525;
}
#saper_game
{
margin: 0 auto;
width: 430px;
}
div.row div
{
border: 3px solid black;
margin: 3px;
width: 30px;
height: 28px;
display: inline-block;
border-radius: 4px;
background: #242424;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(36, 36, 36, 1) 0%, rgba(15, 15, 15, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36, 36, 36, 1)), color-stop(100%,rgba(15, 15, 15, 1)));
background: -webkit-linear-gradient(top, rgba(36, 36, 36, 1) 0%,rgba(15, 15, 15, 1) 100%);
background: -o-linear-gradient(top, rgba(36, 36, 36, 1) 0%,rgba(15, 15, 15, 1) 100%);
background: -ms-linear-gradient(top, rgba(36, 36, 36, 1) 0%,rgba(15, 15, 15, 1) 100%);
background: linear-gradient(to bottom, rgba(36, 36, 36, 1) 0%,rgba(15, 15, 15, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#0f0f0f',GradientType=0 );
box-shadow: inset 0px 1px 0px 0px #494949;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
text-align: center;
padding-top: 1px;
color: #ADABAB;
float: left;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
z-index: 1;
font-weight: bold;
font-size: 24px;
}
div.row div.is_open, div.row div.is_open:hover
{
background: #f5f0f0;
background:...JavaScript
(function(width, height, count_mins, ar, is_generate) {
function $(el) { return document.getElementById(el); }
function get_key(e) { $d = (e.which == null) ? ((e.button == 2) ? 3 : 1) : e.which; console.warn($d); return $d; }
function generate(nx,ny) {
for(var i = 0,x=0,y=0; i < count_mins; x=Math.round(Math.random()*width),y=Math.round(Math.random()*height)) {
if(('p' + x.toString() + '_' + y.toString()) in ar || (nx == x && ny == y)) continue;
else ar['p' + x.toString() + '_' + y.toString()] = 'X', i = i+1;
}
for(var x = 0; x < width; x++)
for(var y = 0,c=0; y < height; y++,c=0) {
if(ar['p'+x.toString()+'_'+y.toString()]=='X') continue;
for(var ix = -1; ix < 2; ix++) for(var iy = -1; iy < 2; iy++)
c += ar['p'+(x+ix).toString() + '_' + (y+iy).toString()] == 'X' ? 1 : 0;
ar['p'+x.toString()+'_'+y.toString()]=c.toString();
}
}
function game_over() {
for(var x = 0; x < width; x++)
for(var y = 0, z=0,g=0; y < height; y++) {
z=ar['p'+x.toString()+'_'+y.toString()];
if(z != '#') {
$('p_'+x.toString()+'_'+y.toString()).innerHTML = z;
$('p_'+x.toString()+'_'+y.toString()).className = 'dig'+z;
}
}
$('saper_game').className = 'game_over';
}
function flag(x,y) {
var i = 'p_'+x.toString()+'_'+y.toString(), c = $(i), cn=c.className, d = cn=='flag' ? (c.className = 'quest') : (cn == 'quest' ? c.className = '' : (cn == '' ? c.className = 'flag' : ''));
}
function open(x,y) {
var tmp = ar['p' + x.toString() + '_' + y.toString()],$el=$('p_' + x.toString() + '_' + y.toString());
if(tmp == []._ || tmp == '#' || (tmp == 'X' && alert('Game Over') == []._ && game_over() == []._ && ($el.className += ' open_lose') )) return;
$el.className = 'is_open dg'+(dg=ar['p'+x.toString()+'_'+y.toString()]);
$el.innerHTML = dg, ar['p' + x.toString() + '_' + y.toString()] = '#';
for(var i = 0; i <= 7 && tmp == '0'; i++) {
var p = Math.PI/4*i, c = Math.cos(p).toFixed(2), xx = (c < 0 ? Math.floor(c) :...