Матрица в js , проблема с написанием кода

Ребят такой вопрос: Нужно составить код игры с 0 - стены 1 - свободное пространство 2 - герой. надо чтобы выход случайно генерировался (то есть 0 меняется на 1, но только одно значение не более) ( сейчас имеем ошибку, что меняется большое количество 0, а нужно одно ) в углах значение 0, не должно изменяться чтобы стены спавнились 10% карты случайно стены должны блочить героя (function() { var table = document.createDocumentFragment();

var arr = [];
for (var i = 0; i < 20; i++) {
  var tr = document.createElement('tr');
  arr[i] = [];
  for (var j = 0; j < 20; j++) {
    var td = document.createElement('td');
    if (i==0 || i==19 || j==19 || j==0){
        //var rand = Math.floor(Math.random()  * arr.length);
        var rand = Math.floor(Math.random()  * 2);
        td.innerHTML = arr[i][j] = rand;

    }
          else{
    td.innerHTML = arr[i][j] = 1;
          }
    tr.appendChild(td);
  }
  table.appendChild(tr);
}
document.getElementById('matrix').appendChild(table);

})();

https://jsfiddle.net/3axap4ek/fek4wyLs/6/

На данный момент есть код, где составлены стены и пространство.


Ответы (1 шт):

Автор решения: Трипольский Пётр

Держи, братиш

Посмотреть демо можно по ссылке

<div>
    <button id="top">top</button>
    <button id="left">left</button>
    <button id="right">right</button>
    <button id="bottom">bottom</button>
</div>

<pre id="output"></pre>

<style>
    #output {
        display: inline-block;
        border: 1px solid black;
    }
</style>

<script>
(function() {

const output = document.querySelector('#output');

const AREA_HEIGHT = 8;
const AREA_WIDTH = 8;

const area = Array(AREA_HEIGHT)
  .fill()
  .map(() => Array(AREA_WIDTH).fill(false));

area.forEach((row) => {
  for (let i = 0; i !== row.length; i++) {
    row[i] = Math.random()  * 10 > 9;
  }
});

const inRange = (x, y) => {
  if (x < 0 || x >= AREA_HEIGHT) {
    return false;
  } else if (y < 0 || y >= AREA_WIDTH) {
    return false;
  } else {
    return true;
  }
};

let x = Math.floor(AREA_HEIGHT / 2);
let y = Math.floor(AREA_WIDTH / 2);

const getSteps = () => [
  [x - 1, y],
  [x - 1, y - 1],
  [x - 1, y + 1],
  [x, y - 1],
  [x, y + 1],
  [x + 1, y],
  [x + 1, y - 1],
  [x + 1, y + 1],
].filter(([x, y]) => inRange(x,y) && !area[x][y]);

const printArea = () => {
  const rows = area.map((row, rowX) => row
    .map((cell, rowY) => cell ? '*'
      : rowX === x && rowY === y ? 'O'
      : ' ')
    .join('')
  );
  output.innerHTML = rows.join('\n');
};

const tryStep = (newX, newY) => {
  const steps = getSteps(newX, newY);
  const hasStep = steps.some(([x, y]) => x === newX && y === newY);
  if (hasStep) {
    x = newX;
    y = newY;
    printArea();
  }
};

document.querySelector('#top').onclick = () => tryStep(x - 1, y);
document.querySelector('#left').onclick = () => tryStep(x, y - 1);
document.querySelector('#right').onclick = () =>  tryStep(x, y + 1);
document.querySelector('#bottom').onclick = () =>  tryStep(x + 1, y);

printArea();

})();
</script>

введите сюда описание изображения

→ Ссылка