Создание ячеек для игры “Сапер” на javascript

58
11 июня 2018, 08:50

Не знаю как создать ячейки для сапера в html/css/javascript. С помощью div'ов или как? Мне не хватает знаний для этого.

Answer 1

Зачем их нумеровать? У них есть координаты: вертикальный и горизoнтальный индексы.

$("#field").append("<tr/><tr/><tr/><tr/><tr/>") 
.find("tr").append("<td/><td/><td/><td/><td/>");
td { 
width:20px; 
height:20px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table border=1 id="field"></table>

Answer 2

Вот вам почти половина игры «Сапёр» на чистом JS без использования каких-либо библиотек:

//Заполнение минами. Такое заполнение для игры не подойдёт, его надо усовершенствовать: 
var mineField = []; 
for(var i = 0; i < 5; i++) 
	 mineField[i] = Math.round(Math.random() * 50 + 30).toString(2).slice(0,5).split(''); 
 
/* ДЛЯ ПРИМЕРА mineField будет примерно таким: 
1 - мина, 0 - пустая клетка 
var mineField = 
[ 
	['0', '0', '0', '1', '0'], 
	['0', '1', '0', '0', '0'], 
	['0', '0', '1', '0', '1'], 
	['1', '0', '0', '1', '0'], 
	['0', '0', '1', '0', '0'] 
]; 
*/ 
 
for(var y = 0; y < 5; y++) 
{ 
	var tr = document.createElement('tr'); 
	document.getElementById('mine-field').appendChild(tr); 
	for(var x = 0; x < 5; x++) 
	{ 
		var td = document.createElement('td'); 
		td.align = 'center'; 
		td.valign = 'middle'; 
		td.x = x; td.y = y; 
		td.innerHTML = '<a>&#x2715;</a>'; 
		td.onclick = function() 
		{ 
			//плюс стоит для преобразования в integer: 
			if(+mineField[this.y][this.x]) 
			{ 
				this.innerHTML = '<a>&#x1f4a3;</a>'; 
				// Ваш код: если нажато на мину 
			} 
			else 
			{ 
				this.innerHTML = '<a></a>'; 
				//Ваш код: если нажато на пустую клетку и клетку возле мины 
			} 
		}; 
		tr.appendChild(td); 
	} 
}
#mine-field td{width: 24px; height: 24px; cursor: pointer} 
#mine-field td a{color: blue}
<table border="1" id="mine-field"></table>

Answer 3

Можно попробовать через тег TABLE, а там можно через тег A в каждой ячейке. Если ты имеешь ввиду самому вписывать кол-во ячеек, то это можно через php

READ ALSO
Дубликат в другое поле с транслитом

Дубликат в другое поле с транслитом

Можно чуточку переделать скрипт, и сделать, чтоб при вводе в поле <input type="text" id="input"> текста, дубликал шел в <input type="text" id="input1">, но с транслитомА...

53
Не работает scroll() страницы

Не работает scroll() страницы

Подскажите, решение, пожалуйста

50
Контролируемый прыжок в 2D платформере

Контролируемый прыжок в 2D платформере

Как сделать контролируемый прыжок пробелом в Unity? Нужно, чтобы чем дольше держишь пробел, тем выше прыгал персонажЯ вроде так сделал, но высота...

56
Подвинуть image относительно родительской image в сторону (healthBar) Unity 2d c#

Подвинуть image относительно родительской image в сторону (healthBar) Unity 2d c#

Нужно реализовать healthBar двигая дочерний зеленый прямоугольник по отношению к красному родительскому

38