<DOCTYPE HTML>
<html>
<head>
<style>
input[type="number"] {
width: 50px;
padding: 1px;
background-color: grey;
color: #fff;
font-weight: bold;
font-size: 16px;
font-family: monospace;
}
#Demineur {
width: 252px;
height: 252px;
background: #999;
padding: 0px;
border: 2px solid #000;
}
input[type="button"] {
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
}
input[type='button'].square {
margin: 0px;
padding: 0px;
width: 21px;
height: 21px;
font-weight: bold;
font-size: 14px;
background-color: #BFBFBF;
display: inline-block;
float: left;
border-top: 3px solid white;
border-left: 3px solid white;
border-right: 3px solid #707070;
border-bottom: 3px solid #707070;
}
input[type='button'].square:active, input[type='button'].square.active {
background-color: #BFBFBF;
border-top: 3px solid #BFBFBF;
border-left: 3px solid #BFBFBF;
border-right: 3px solid #BFBFBF;
border-bottom: 3px solid #BFBFBF;
}
#scoreboard {
padding: 10px;
width: auto;
height: 26px;
background-color: #BFBFBF;
text-align: left;
border-top: 3px solid #707070;
border-left: 3px solid #707070;
border-right: 3px solid white;
border-bottom: 3px solid white;
}
#scoreboard .panel {
display: inline-block;
padding: 1px;
background-color: black;
color: #DF0D14;
font-weight: bold;
font-size: 16px;
font-family: monospace;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
border-right: 1px solid #F0F0F0;
border-bottom: 1px solid #F0F0F0;
}
</style>
<script>
var nbFlags;
var toDiscover;
var arrayMines = new Array();
var timer = false;
var count = 0;
setInterval(function () {
if (timer) {
$('#score-time-count').html(("00" + count).slice(-3));
count++;
}
}, 1000);
function init() {
$(document).bind("contextmenu", function (e) { - This is the line that is giving me problems
return false;
});
$('#Mines').html('');
columns = $("[name='columns']").val();
lines = $("[name='lines']").val();
nbMines = $("[name='nbMines']").val();
nbFlags = nbMines;
toDiscover = columns * lines - nbMines;
//count = 0;
$('#Demineur').width(columns * 21);
$('#Demineur').height(lines * 21 + 52);
$('#score-bomb-count').html(("00" + nbFlags).slice(-3));
//init table
for (var i = 0; i < lines; i++) {
arrayMines[i] = new Array();
for (var j = 0; j < columns; j++) {
arrayMines[i][j] = 0;
$("#Mines").append("<input type='button' class='square' id=" + i + "_" + j + " value='' onclick='clickMine(" + i + "," + j + ")' oncontextmenu='switchFlag(" + i + "," + j + ")'/>");
}
$("#Mines").append('<br>');
}
//random put mines
var i = 0;
while (i < nbMines) {
var x = Math.floor(Math.random() * lines);
var y = Math.floor(Math.random() * columns);
if (arrayMines[x][y] === 0) {
arrayMines[x][y] = 1;
i++;
}
}
timer = true;
count = 0;
}
function clickMine(i, j) {
//alert ("Clicked: "+i+";"+j);
//remove flag
if (arrayMines[i][j] > 1) {
switchFlag(i, j);
} else if (arrayMines[i][j] == 1) {
$("#" + i + "_" + j).addClass("active");
timer = false;
showBombs();
alert("BOOM !");
//init();
} else {
$("#" + i + "_" + j).addClass("active");
$("#" + i + "_" + j).attr('onclick', '');
toDiscover--;
var number = countMines(i, j);
if (number !== 0) $("#" + i + "_" + j).prop('value', number);
else for (var x = Math.max(0, i - 1); x <= Math.min(lines - 1, i + 1); x++)
for (var y = Math.max(0, j - 1); y <= Math.min(columns - 1, j + 1); y++)
if (arrayMines[x][y] < 2 && !$("#" + x + "_" + y).hasClass('active')) clickMine(x, y);
// Test victory
checkVictory();
}
}
function countMines(i, j) {
var k = 0;
for (var x = Math.max(0, i - 1); x <= Math.min(lines - 1, i + 1); x++)
for (var y = Math.max(0, j - 1); y <= Math.min(columns - 1, j + 1); y++)
if (arrayMines[x][y] == 1 || arrayMines[x][y] == 3) k++;
return k;
}
function switchFlag(i, j) {
if (!$("#" + i + "_" + j).hasClass('active')) {
if (arrayMines[i][j] < 2) {
if (nbFlags > 0) {
arrayMines[i][j] += 2;
$("#" + i + "_" + j).prop('value', "F");
$("#" + i + "_" + j).css("color", "#FF0000");
nbFlags--;
}
} else {
arrayMines[i][j] -= 2;
$("#" + i + "_" + j).prop('value', "");
$("#" + i + "_" + j).css("color", "");
nbFlags++;
}
}
$('#score-bomb-count').html(("00" + nbFlags).slice(-3));
}
function showBombs() {
for (var i = 0; i < lines; i++)
for (var j = 0; j < columns; j++) {
if (arrayMines[i][j] == 1) {
$("#" + i + "_" + j).prop('value', "*");
$("#" + i + "_" + j).css("font-size", "20px");
$("#" + i + "_" + j).css("background-color", "#FF0000");
}
$("#" + i + "_" + j).attr('onclick', 'init()');
}
}
function checkVictory() {
//alert (toDiscover);
if (toDiscover === 0) {
timer = false;
for (var i = 0; i < lines; i++)
for (var j = 0; j < columns; j++) {
if (arrayMines[i][j] == 1) {
$("#" + i + "_" + j).prop('value', "F");
$("#" + i + "_" + j).css("color", "#FF0000");
}
$("#" + i + "_" + j).attr('onclick', 'init()');
}
alert("WELL DONE!");
toDiscover = -1;
}
}
</script>
</head>
<body>
<div id="Options">Number of mines:
<input type="number" name="nbMines" value="10">Columns:
<input type="number" name="columns" value="12"> Lines:
<input type="number" name="lines" value="12">
</div>
<div id="Demineur">
<div id="scoreboard">Mines:
<div id="score-bomb-count" class="panel left">010</div> Time:
<div id="score-time-count" class="panel right">000</div>
</div>
<div id='Mines'></div>
</div>
<br>
<button onclick="init()">Restart</button>
</body>
</html>
This is the part that is giving me problems:
function init() {
$(document).bind("contextmenu", function (e) {
return false;
});
Please help!
