Question

我正在用JS编写棋盘游戏，而且我现在卡住了，我在网格/棋盘上产生了3种类型的对象：

岩石
球员
武器

我成功地使它们随机产生，但有时（很多）它们彼此产卵。如果有人可以帮我解决这个问题。

我尝试使用我的单元格状态，默认情况下所有单元格= 0，每个对象生成单元格=数字。

如果cells = number找到另一个单元格。

好吧，我试图编码它，但我的所有测试都失败了。

这是我的代码。

window.onload = function() {

  init();

  function init() {
    canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 800;
    canvas.style.border = "1px solid";
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");
    drawGrid();
    randomRock();
    playerSpawn();
    weaponSpawn();
  }

  function drawGrid() {
    cols = canvas.width / w;
    rows = canvas.height / w;

    for (var i = 0; i < cols; i++) {
      cells[i] = [];
      for (var j = 0; j < rows; j++) {
        cells[i][j] = 0;

        var x = i * w;
        var y = j * w;

        ctx.rect(x, y, w, w);
        ctx.stroke();
      }
    }
  }

  function randomRock() {

    var rock = [];

    for (var r = 0; r < 15; r++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);

      ctx.fillStyle = "rgb(56,56,56)";
      ctx.strokeStyle = "#142d0a";
      rock[r] = ctx.fillRect(x * w, y * w, rockW, rockW);
      cells[y][x] = 1;
    }
  }

  function playerSpawn() {

    var imgPlayers = [];

    for (var p = 0; p < 1; p++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);

      imgPlayers[p] = ctx.drawImage(player1, x * w, y * w, playerW, playerW);
      cells[y][x] = 2;

    }

    for (var p = 0; p < 1; p++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);

      imgPlayers[p] = ctx.drawImage(player2, x * w, y * w, playerW, playerW);
      cells[y][x] = 2;

    }

  }

  function weaponSpawn() {

    var imgWeapons = [];

    for (var a = 0; a < 1; a++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);
      imgWeapons[a] = ctx.drawImage(weapon1, x * w, y * w, weapW, weapW);
      cells[y][x] = 3;

    }

    for (var a = 0; a < 1; a++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);
      imgWeapons[a] = ctx.drawImage(weapon2, x * w, y * w, weapW, weapW);
      cells[y][x] = 3;

    }

    for (var a = 0; a < 1; a++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);
      imgWeapons[a] = ctx.drawImage(weapon3, x * w, y * w, weapW, weapW);
      cells[y][x] = 3;

    }

    for (var a = 0; a < 1; a++) {
      x = Math.floor(Math.random() * cols);
      y = Math.floor(Math.random() * rows);
      imgWeapons[a] = ctx.drawImage(weapon4, x * w, y * w, weapW, weapW);
      cells[y][x] = 3;

    }
  }
}

我回来了！我需要一些帮助，我想用箭头键移动我的两个角色。

我的3个目标：1-用箭头键移动玩家--- 在X和Y上只有2到3个单元--- 3-一个接一个的球员（轮流转身）---

编辑：经过大量的尝试和我的边界（画布）碰撞后，我在第一个目标上取得了成功感觉很好 Y

现在我的第二个和第三个目标。

Answer 1

您需要添加一个找到空闲单元格的函数：

function rndFreeCell() {
  var x, y;
  while (true) {
    x = Math.floor(Math.random() * cols);
    y = Math.floor(Math.random() * rows);
    if (cells[x][y] === 0) break;
  }
  return { x: x, y: y };
}

你可以这样使用：

var cell = rndFreeCell();
ctx.drawImage(weapon4, cell.x * w, cell.y * w, weapW, weapW);
cells[cell.x][cell.y] = 3;

要查找相距最小距离的两个单元格，请使用：

function findTwoApart(dist) {
  var cell1, cell2;
  while (true) {
    c1 = rndFreeCell();
    c2 = rndFreeCell();
    var dx = c1.x - c2.x;
    var dy = c1.y - c2.y;
    if (Math.sqrt(dx*dx + dy*dy) >= dist) break;
  }
  return [c1, c2];
}

现在使用它：

var two = findTwoApart(5);
cells[two[0].x][two[0].y] = 1; // playerOne
cells[two[1].x][two[1].y] = 2; // playerTwo

JAVASCRIPT棋盘游戏：对象相互产生

1 个答案: