Question

我想我的棋盘游戏，我必须创建坐标，但我不知道该怎么做。我需要你的帮助！！感谢

var mapArray = [ 
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 1, 0]
];

function drawMap() {
var col = [];
var table = document.createElement("table");
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (parseInt(mapArray[i][j]) == 0) {
$('#canvas').append('<div class="grass"></div>');
}
if (parseInt(mapArray[i][j]) == 1) {
$('#canvas').append('<div class="wall"></div>'); 
}}}}
$('document').ready(function() {
drawMap();
});

Answer 1

听起来你需要阅读一些使用JavaScript的画布操作。关于如何绘制线条的示例以及不是什么。但是你走了。

我有以下绘制网格的功能

function drawGrid(w, h, canvas, ctx, spacing) {
  canvas.width  = w;
  canvas.height = h;

  ctx.beginPath();

  ctx.strokeStyle = 'rgb(0, 0, 0, 0.35)';
  ctx.lineWidth = 1;

  for (var x=0; x<=w; x+=spacing) {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
   }

    for (var y=0;y<=h;y+=spacing) {
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
    }
  ctx.stroke();
};

现在解释一下：我传递画布的宽度，画布的高度，画布元素，画布的上下文，然后是网格的间距（例如：16px）然后我做一个for循环创建线条和。我画它们。

问题的下一部分是返回鼠标所在的单元格。可以通过以下代码完成 - 为简单起见，这是两个函数

function getMousePos(canvas, evt){
  var rect = canvas.getBoundingClientRect();

  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function getGridLocation(posX, posY, gridsize)
{
  var cellRow = Math.floor(posY / gridsize);
  var cellColumn = Math.floor(posX / gridsize);

  return {
    row: cellRow,
    column: cellColumn
 };
}

所以上面首先得到鼠标坐标，然后我使用第二个函数，它通过鼠标坐标，然后将它们除以网格的每个单元格并将数字置于底层。

以下是如何获得每个细胞的鼠标位置。

gridCanvas.addEventListener('click', function(evt) {
    var mousePos = getMousePos(gridCanvas, evt);
    var gridLocation = getGridLocation(mousePos.x, mousePos.y, 64);
    //alert("Row: " + gridLocation.row + " Column: " + gridLocation.column);
  }, false);

Answer 2

您可以这样做：

 const board = [ 
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 1, 0],
];

const markup = board.map(row => row.map(col => `<span class="field ${col === 0 ? "grass" : "wall"}"></span>` ).join("")).join("<span class='clear'></span>");

document.getElementById("container").innerHTML = markup;

.field {
  float: left;
  height: 20px;
  width: 20px;
  border: 1px solid #000;
}

.clear {
  clear: both;
  float: left;
}

.grass {
  background: green;
}

.wall {
  background: black;
}

<div id="container">

网格游戏板

2 个答案: