По правилам игры Сапёр, игра идёт на квадратном игровом поле, расчерченном на клетки. Игрок открывает клетку на игровом поле, компьютер подсчитывает сколько мин окружает эту клетку.

Количество соседних мин выводится на клетку, котрую открыл игрок. Если игрок нажал на клетку под которой установлена мина, игрок проиграл. Можно пометить флажком клетку под которой, возможно, скрывается мина. Игра заканчивается победой игрока, если игрок пометил все мины или открыл все клетки без мин. 

Клетка, вокруг которой нет мин во всех восьми клетках, в случае если игрок такую находит, просто закрашивается. То есть, в такую клетку 0 не ставится. Кроме того, соседние с этой клеткой клетки компьютер открывает сам. Так же компьютер поступит и с теми соседними клетками, вокруг которых окажется 0 мин.

Напишем программу для игры Сапёр, используя ранее созданный шаблон.

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(3, 1fr);
				padding: 30vw;
				padding-top: 10px;
			}
			input {
				width: 10vw;
				height: 10vw;
				margin: 1px;
				text-align: center;
				font-size: 5vw;
			}
		</style>
		<script>
			numberOfButtons = 9;
			letter = Array.from("012345678");
			letter.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 1. Шаблон игрового поля. 

В шаблоне, см. листинг 1, в контейнере <html> содержится два контейнера <head> и <body>. В <head> содержится контейнер <style> и контейнер <script>. В контейнере <style> содержится описание стилей элементов, созданных на html странице. Здесь есть стиль для html элемента с идентификатором puzzle и для элементов <input>.

В контейнере <script> содержится код программы написанной на языке программирования JavaScript. Код из контейнера <script> расположенного в контейнере <head> выполняется до создания html элементов на странице в браузере. Учитывая это, мы создаём в этом контейнере <script> только переменные и функции.

В верхнем контейнере <script> в программе листинг 1 созданы переменные numberOffButtons, letter, btn и функция play.

В контейнере <script>, расположенном в контейнере <body> JavaScript программа может взаимодействовать с html элементами, уже созданными на html странице.

Создание функции, ключевое слово function

fghj

Цикл for

xxd

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10
			letter = Array.from("012345678");
			letter.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = letter[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 2.

dhdfh

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				console.log(n)
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = playArea[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 3.

fdgdfg

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						m += playArea[i+j]
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = playArea[i];
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 4.

Цикл for of

dfhdfh

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						m += playArea[i+j]
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 5.

dfhgdf

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							m += playArea[i+j]
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 6.

gsdf

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 7.

Окно confirm

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					if(window.confirm("Вы проиграли.\nСыграем ещё?")){
					}
					else{
					}
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 8.

Функция setTimeout()

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					setTimeout(() => {
						if(window.confirm("Вы проиграли.\nСыграем ещё?")){
						}
						else{
						}
					}, 100);
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 9.

Создание функции без имени

Функция window.close()

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					setTimeout(() => {
						if(window.confirm("Вы проиграли.\nСыграем ещё?")){
							for(i in btn){
								btn[i].value = " ";
							}
							playArea.sort(()=>Math.random()-0.5)
						}
						else{
							window.close();
						}
					}, 100);
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<script>
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 10.

Цикл for in

Элемент Form

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
			form{
				padding-left: 20vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(playArea[n]){
					btn[n].value = "M";
					setTimeout(() => {
						if(window.confirm("Вы проиграли.\nСыграем ещё?")){
							for(i in btn){
								btn[i].value = " ";
							}
							playArea.sort(()=>Math.random()-0.5)
						}
						else{
							window.close();
						}
					}, 100);
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<form>
			Ход
			<input type=radio name=group1 checked>
			<input type=radio name=group1 id="flag">
			Флаг
		</form>
		<script>
			btnFlag = document.getElementById('flag');
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 11.

gsdf

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
			form{
				padding-left: 20vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(btnFlag.checked){
					if(btn[n].value == "🚩"){
						btn[n].value = " ";
					}
					else if(btn[n].value == " "){
						btn[n].value = "🚩";
					}
					return
				}
				if(playArea[n]){
					btn[n].value = "M";
					setTimeout(() => {
						if(window.confirm("Вы проиграли.\nСыграем ещё?")){
							for(i in btn){
								btn[i].value = " ";
							}
							playArea.sort(()=>Math.random()-0.5)
						}
						else{
							window.close();
						}
					}, 100);
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							console.log(i-i%columns, i+j-(i+j)%columns)
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
			btn[n].value = m;
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<form>
			Ход
			<input type=radio name=group1 checked>
			<input type=radio name=group1 id="flag">
			Флаг
		</form>
		<script>
			btnFlag = document.getElementById('flag');
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 12.

gsdf

<html>
	<head>
		<style>
    			#puzzle {
				display: inline-grid;
				grid-template-columns: repeat(10, 1fr);
				padding: 10vw;
				padding-top: 10px;
			}
			input {
				width: 5vw;
				height: 5vw;
				margin: 1px;
				text-align: center;
				font-size: 4vw;
			}
			#free {
				color: cyan;
				background-color: beige;
			}
			form{
				padding-left: 20vw;
			}
		</style>
		<script>
			numberOfButtons = 100;
			columns = 10;
			mines = 20;
			playArea = Array(numberOfButtons);
			for(i=0; i<numberOfButtons; i++){
				playArea[i] = i<mines? 1 : 0;
			}		
			playArea.sort(()=>Math.random()-0.5)
			btn = new Array(numberOfButtons);
			function play(B){
				n = btn.indexOf(B);
				if(btnFlag.checked){
					if(btn[n].value == "🚩"){
						btn[n].value = " ";
					}
					else if(btn[n].value == " "){
						btn[n].value = "🚩";
					}
					return
				}
				if(playArea[n]){
					btn[n].value = "M";
					setTimeout(() => {
						if(window.confirm("Вы проиграли.\nСыграем ещё?")){
							for(i in btn){
								btn[i].value = " ";
								btn[i].id = "";
							}
							playArea.sort(()=>Math.random()-0.5)
						}
						else{
							window.close();
						}
					}, 100);
					return
				}
				m = 0;
				for(i of [n-columns, n, n+columns]){
					for(j of [-1, 0, 1]){
						if(i+j>=0 & i+j<numberOfButtons){
							if(i-i%columns == i+j-(i+j)%columns){
								m += playArea[i+j]
							}
						}
					}
				}
				btn[n].value = m;
				if(m==0){
					btn[n].id = "free";
				}
			}
		</script>
	</head>
	<body>
		<div id=puzzle>
		</div>
		<form>
			Ход
			<input type=radio name=group1 checked>
			<input type=radio name=group1 id="flag">
			Флаг
		</form>
		<script>
			btnFlag = document.getElementById('flag');
			for(i=0; i<numberOfButtons; i++){
				btn[i] = document.createElement("input");
				btn[i].type = "button";
				btn[i].value = " ";
				btn[i].onclick = function() {play(this)};
				document.getElementById('puzzle').appendChild(btn[i]);
			}
		</script>
	</body>
</html>

Лист. 14.

<html>
    <head>
        <style>
                #puzzle {
                display: inline-grid;
                grid-template-columns: repeat(10, 1fr);
                padding: 5vw;
                padding-top: 10px;
            }
            input {
                width: 4vw;
                height: 4vw;
                margin: 1px;
                text-align: center;
                font-size: 3.6vw;
            }
            #free {
                color: cyan;
                background-color: beige;
            }
            form{
                padding-left: 20vw;
            }
        </style>
        <script>
            numberOfButtons = 100;
            columns = 10;
            btn = new Array(numberOfButtons);
            playArea = Array(numberOfButtons);
            mines = 20;
            for(i=0; i<numberOfButtons; i++){
                playArea[i] = i<mines? 1 : 0;
            }
            playArea.sort(()=>Math.random()-0.5);
            function play(B){
                n = btn.indexOf(B);
                if(btnFlag.checked){
                    if(btn[n].value == "🚩"){
                        btn[n].value = " ";
                    }
                    else if(btn[n].value == " "){
                        btn[n].value = "🚩";
                    }
                    return
                }
                if(playArea[n]){
                    btn[n].value = "M";
                    setTimeout(() => {
                        if(window.confirm("Вы проиграли.\nСыграем ещё?")){
                            btn.forEach((b) => {
                                b.value = " ";
                                b.id = "";
                            });
                            playArea.sort(()=>Math.random()-0.5);
                        }
                    }, 200);
                    return
                }
                m = 0;
                for(i of [n-columns, n, n+columns]){
                    for(j of [-1, 0, 1]){
                        if(i+j>=0 & i+j<numberOfButtons){
                            if(i-i%columns == i+j-(i+j)%columns){
                                m += playArea[i+j];
                            }
                        }
                    }
                }
                btn[n].value = m;
                if(m == 0){
                    btn[n].id = "free";
                }
            }
        </script>
    </head>
    <body>
        <div id=puzzle>
        </div>
        <form>
            Ход
            <input type=radio name=group1 checked>
            <input type=radio name=group1 id="flag">
            Флаг
        </form>
        <script>
            btnFlag = document.getElementById('flag');
            for(i=0; i<numberOfButtons; i++){
                btn[i] = document.createElement("input");
                btn[i].type = "button";
                btn[i].value = " ";
                btn[i].onclick = function() {play(this)};
                document.getElementById('puzzle').appendChild(btn[i]);
            }
        </script>
    </body>
</html>

Лист. 15.

Игра Сапёр 2 на Github