К сожалению, ваш вопрос слишком широк, но я постараюсь направить вас в правильном направлении.
Вы правы.Двумерный массив - лучший выбор для хранения данных такого типа.Только то, как ты это создаешь, немного громоздко.Вместо бесчисленного массива [position] = value вы можете сделать это следующим образом:
var kBoard = [
["0", "0", "0", "0", "0", "0"],
["0", "0", "0", "0", "B", "0"],
["0", "0", "0", "0", "B", "0"],
["0", "W", "W", "W", "B", "0"],
["0", "0", "0", "W", "B", "0"],
["0", "0", "0", "0", "W", "B"]
];
Чтобы наконец отобразить свою игру на экране, вы можете использовать простые элементы html вместе с таблицей.Я бы порекомендовал использовать этот элемент.Как видно из названия, это своего рода артборд, на который можно рисовать с помощью javascript.Для простоты я буду использовать простые формы вместо картинок.
Это создаст пустой холст.Его размер определяется tileWidth & tileHeight, умноженным на количество элементов внутри массива по горизонтали и вертикали.
var tileWidth = 64;
var tileHeight = 64;
var canvas = document.createElement("canvas");
canvas.width = kBoard[0].length * tileWidth;
canvas.height = kBoard.length * tileHeight;
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
Теперь мы просто зациклим массив kBoard и используем положение элемента внутри массива в качестве нашегокоординаты на экране, умноженные на tileWidth & tileHeight.Кроме того, мы используем значение элемента, чтобы нарисовать черный или белый круг.
for (var a = 0; a < kBoard.length; a++) {
for (var b = 0; b < kBoard[0].length; b++) {
if (a % 2 == 0) {
if (b % 2 == 0) {
context.fillStyle = "#aaaaaa";
} else {
context.fillStyle = "#888888";
}
} else {
if (b % 2 == 1) {
context.fillStyle = "#aaaaaa";
} else {
context.fillStyle = "#888888";
}
}
context.fillRect(b * tileWidth, a * tileHeight, tileWidth, tileHeight);
switch (kBoard[a][b]) {
case "W":
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(b * tileWidth + tileWidth / 2, a * tileHeight + tileHeight / 2, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
break;
case "B":
context.fillStyle = "#000000";
context.beginPath();
context.arc(b * tileWidth + tileWidth / 2, a * tileHeight + tileHeight / 2, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
break;
}
}
}
Вот полный пример:
var kBoard = [
["1", "2", "3", "4", "5", "6"],
["7", "0", "0", "0", "B", "0"],
["0", "0", "0", "0", "B", "0"],
["0", "W", "W", "W", "B", "0"],
["0", "0", "0", "W", "B", "0"],
["0", "0", "0", "0", "W", "B"]
];
var tileWidth = 64;
var tileHeight = 64;
var canvas = document.createElement("canvas");
canvas.width = kBoard[0].length * tileWidth;
canvas.height = kBoard.length * tileHeight;
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
for (var a = 0; a < kBoard.length; a++) {
for (var b = 0; b < kBoard[0].length; b++) {
if (a % 2 == 0) {
if (b % 2 == 0) {
context.fillStyle = "#aaaaaa";
} else {
context.fillStyle = "#888888";
}
} else {
if (b % 2 == 1) {
context.fillStyle = "#aaaaaa";
} else {
context.fillStyle = "#888888";
}
}
context.fillRect(b * tileWidth, a * tileHeight, tileWidth, tileHeight);
switch (kBoard[a][b]) {
case "W":
context.fillStyle = "#ffffff";
context.beginPath();
context.arc(b * tileWidth + tileWidth / 2, a * tileHeight + tileHeight / 2, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
break;
case "B":
context.fillStyle = "#000000";
context.beginPath();
context.arc(b * tileWidth + tileWidth / 2, a * tileHeight + tileHeight / 2, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
break;
}
}
}