时间戳

首页 > 解决方案 > 网格游戏板

javascript - 网格游戏板

问题描述

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

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();
});

标签： javascriptarraysjson

解决方案

听起来您需要阅读一些使用 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);

推荐阅读