JAVASCRIPT Board game: Object spawn on each other

Question

I'm writing a board game in JS and I'm stuck right now, I spawn 3 types of object on my grid/board:

• rocks
• players
• weapons

I succeeded on making them spawn randomly but sometimes ( a lot ) they spawn on each others. If someone can help me to solve that problem.

I tried to play with my cells state, by default all cells = 0, for each object spawn cells = numbers.

if cells = numbers find another cells.

Well that how i tried to code it, but all my test have failed.

Here is my code.

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;

    }
  }
}

Here im back ! I need some help, i want to move my two character with the arrows keys.

My 3 goal : 1- move the player with arrow keys --- 2- only to 3 cell on X and Y --- 3- one player after another ( turn by turn ) ---

EDIT : i suceeded on the first goal after a lot of try and the collision with my border ( canvas ) Feel good Y

Now going for my second and third goal.

Answer 1

You'll want to add a function that finds a free cell:

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

You can use that like this:

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

To find two cells that are a certain minimum distance apart, use this:

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];
}

Now use it like this:

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