Question

我是一名菜鸟，正在尝试完成我的1年级项目“ 6x6黑白棋”，并且仍在使用2D数组atm构建棋盘。我不知道如何使用图像作为数组中的内容来显示游戏板，也没有线索使用鼠标单击功能让用户玩游戏。

我试图创建一个二维数组，但我必须知道下一步该怎么做尝试使用“ 0”作为空白，“ W”作为白色象棋，“ B”作为空白。黑色

       var kboard = new Array (5)
        for ( var i = 0 ;i < 6 ;i++ ){
            kboard[i] = new Array(5)
        }
    kboard[0][0] = "0"; kboard[1][3] = "0"; kboard[3][0] = "0";  kboard[4][3] = "W";
    kboard[0][1] = "0"; kboard[1][4] = "B"; kboard[3][1] = "W";  kboard[4][4] = "B";
    kboard[0][2] = "0"; kboard[1][5] = "0"; kboard[3][2] = "W";  kboard[4][5] = "0";
    kboard[0][3] = "0"; kboard[2][0] = "0"; kboard[3][3] = "W";  kboard[5][0] = "0";
    kboard[0][4] = "0"; kboard[2][1] = "0"; kboard[3][4] = "B";  kboard[5][1] = "0";
    kboard[0][5] = "0"; kboard[2][2] = "0"; kboard[3][5] = "0";  kboard[5][2] = "0";
    kboard[1][0] = "0"; kboard[2][3] = "0"; kboard[4][0] = "0";  kboard[5][3] = "0";
    kboard[1][1] = "0"; kboard[2][4] = "B"; kboard[4][1] = "0";  kboard[5][4] = "W";
    kboard[1][2] = "0"; kboard[2][5] = "0"; kboard[4][2] = "0";  kboard[5][5] = "B";
    for (var i = 0; i < 6; i++){
        for (var j = 0; j < 6; j++){
            document.write(kboard[i][j] + "&emsp;")
        }
        document.write("<br/>");
    }

输出仅为“ 0”“ B”“ W”并打印出整个数组，但是我不能使用任何图像代替该元素。

Answer 1

不幸的是，您的问题有点太宽泛了，但我会尽力为您指明正确的方向。

您是对的。二维数组是存储此类数据的最佳选择。仅创建它的方式有点麻烦。您可以这样做，而不是无数个array [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;
    }
  }
}

Answer 2

尽可能地使用原始代码，我怀疑您可能想显示图像：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

要使用此功能，您将需要三个预先存在的图像文件，每种颜色一个。叫他们

W.png
B.png
0.png

现在，而不是编写数组文本

document.write(kboard[i][j] + "&emsp;")

您可以改写一些可以显示图像的HTML：

document.write("<img src='" + kboard[i][j] + ".png' /> &emsp;");

一旦可以使用，我建议您查找html tables和document.querySelector，以了解如何使用它们来使程序变得更好。

尝试草拟带有2D阵列的6x6游戏板

2 个答案:

进一步阅读