// Minesweeper Version (by HonFu) function setup() { body = document.getElementById('body'); canvas = document.getElementById('canvas'); message = document.getElementById( "message"); canvas.addEventListener('click', probe, false); canvas.height = '297'; canvas.width = '297'; draw = canvas.getContext('2d'); draw.fillStyle = "#000000"; draw.font = "normal 15px Arial"; message.innerHTML = 'Welcome to Minesweeper! :-)'; minefield = []; hidden = []; for (let i=0; i<9; ++i) { minefield.push(new Array(9).fill(0)); hidden.push(new Array(9).fill(true)); } first_move = true; level = 1; mines = 7; colors = [ '#654', '#765', '#876', '#987', '#a98', '#ba9', '#cba', '#dcb', '#edc', '#fed' ]; canvas.style.backgroundColor = colors[0]; body.style.backgroundColor = colors[9]; draw_board(); } function probe() { var i = Math.floor( (event.clientY - canvas.offsetLeft)/33 ); var j = Math.floor( (event.clientX - canvas.offsetTop)/33 ); if(first_move) prepare_board(i, j); hidden[i][j] = false; if(minefield[i][j]===0) uncover_zeros(i, j); if(minefield[i][j]=='#') { message.innerHTML = 'You lost ... :-('; if(level>1) { --level; --mines; } reset(); } else if(game_won()) { message.innerHTML = level===10? 'You beat level 10 - incredible! :-D': 'You won! :-)'; if(level<10) { ++level; ++mines; } reset(); } canvas.style.backgroundColor = colors[level-1]; body.style.backgroundColor = colors[10-level]; draw_board(); } function prepare_board(i, j) { message.innerHTML = 'Level '+level; var mi = mines; while(mi) { var k = Math.floor(Math.random()*1000)%9; var l = Math.floor(Math.random()*1000)%9; if(i!==k&&j!==l&&minefield[k][l]!='#') { minefield[k][l] = '#'; --mi; } } for(let k=0; k<9; ++k) for(let l=0; l<9; ++l) { if(minefield[k][l]=='#') continue; for(var [m, n] of adjacents(k, l)) { if (minefield[m][n]=='#') ++minefield[k][l]; } } first_move = false; } function uncover_zeros(i, j) { for(var [k, l] of adjacents(i, j)) { if(hidden[k][l]) { hidden[k][l] = false; if(minefield[k][l]===0) uncover_zeros(k, l); } } } function game_won() { for(let i=0; i<9; ++i) for(let j=0; j<9; ++j) if(minefield[i][j]!='#'&&hidden[i][j]) return false; return true; } function reset() { for(let i=0; i<9; ++i) for(let j=0; j<9; ++j) { minefield[i][j] = 0; hidden[i][j] = true; } first_move = true; } function * adjacents(i, j) { if(i>0) { if(j>0) yield [i-1, j-1]; if(j<8) yield [i-1, j+1]; yield [i-1, j]; } if(j>0) yield [i, j-1]; if(j<8) yield [i, j+1]; if(i<8) { if(j>0) yield [i+1, j-1]; if(j<8) yield [i+1, j+1]; yield[i+1, j]; } } function draw_board() { draw.clearRect( 0, 0, canvas.width, canvas.height ); for(let x=0; x<10; ++x) { draw.beginPath(); draw.moveTo(33*x, 0); draw.lineTo(33*x, 9*33); draw.stroke(); } for(let y=0; y<10; ++y) { draw.beginPath(); draw.moveTo(0.5, 33*y); draw.lineTo(33*9, 33*y); draw.stroke(); } for(let i=0; i<9; ++i) for(let j=0; j<9; ++j) { if(hidden[i][j]) continue; draw.fillText( minefield[i][j], (j)*33+12, (i)*33+22 ); } }

Minesweeper Version (10 Levels)