По правилам игры Сапёр, игра идёт на квадратном игровом поле, расчерченном на клетки. Игрок открывает клетку на игровом поле, компьютер подсчитывает сколько мин окружает эту клетку.
Количество соседних мин выводится на клетку, котрую открыл игрок. Если игрок нажал на клетку под которой установлена мина, игрок проиграл. Можно пометить флажком клетку под которой, возможно, скрывается мина. Игра заканчивается победой игрока, если игрок пометил все мины или открыл все клетки без мин.
Клетка, вокруг которой нет мин во всех восьми клетках, в случае если игрок такую находит, просто закрашивается. То есть, в такую клетку 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> расположенного в контейнере <body> выполняется до создания html элементов на странице в браузере. Учитывая это, мы создаём в этом контейнере <script> только переменные и функции.
В верхнем контейнере <script> в программе листинг 1 созданы переменные numberOffButtons, letter, btn и функция play.
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 [-columns, 0, columns]){
for(j of [-1, 0, 1]){
m += playArea[n+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.
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 [-columns, 0, columns]){
for(j of [-1, 0, 1]){
m += playArea[n+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 [-columns, 0, columns]){
for(j of [-1, 0, 1]){
m += playArea[n+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
