Javascript Pacman Style Game Генератор случайных карт, показывающий неопределенные свойства

Итак, я пытаюсь создать генератор случайных карт, и при написании функция кажется работающей, но первый столбец, где я хочу быть стенами, начинает показывать неопределенные и случайно сгенерированные квадраты, и это также влияет на последний столбец. Есть что-то, что мне не хватает?

var world = [];
var worldDict = {
    0: 'wall',
    1: 'blank',
    2: 'sushi',
    3: 'onigiri'
}

function drawWorld(){
    output = "";
    var worldheight = 15;
    var worldwidth = 15;
    for(var row = 0; row < worldheight; row++){
        world.push([row])
        output += "<div class = 'row'>"
            for (var x = 0; x < worldwidth; x++){
                //first row is all walls
                if (row == 0 || row == 14 || x==0 || x==14){
                    output += "<div class = '" + worldDict[world[row][x]] +"'></div>";
                    world[row].push(0);
                }else{
                output += "<div class = '" + worldDict[world[row][x]] +"'></div>";
                world[row].push(Math.floor(Math.random()*4));
                }
            }

            output += "</div>"
    }
    document.getElementById('world').innerHTML = output;
}
drawWorld();

Вместо этого я бы использовал холст для создания видеоигр... и использовал const someVar = document.createElement(tagnameHere) вместо .innerHTML, чтобы вы могли назначать события прямо на переменную, прежде чем она будет добавлена в DOM. Просто совет.

— 22.12.2020 01:10

отличный совет, но это для моего задания, поэтому я не могу выбрать свой двигатель :)

— 22.12.2020 01:12

Похоже, ваш код идентичен для 4 веток if/else if — почему бы не объединить их в один оператор if, разделенный ||?

— 22.12.2020 01:21

Готово, я отредактирую это и при переполнении стека, Сал, спасибо за подсказку!

— 22.12.2020 01:26

javascript

22.12.2020 01:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

457

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я попытался исправить код. Я не уверен, что это тот результат, который вы ищете.

var world = [];
var worldDict = {
    0: 'wall',
    1: 'blank',
    2: 'sushi',
    3: 'onigiri'
}

function drawWorld(){
  output = "";
  var worldheight = 15;
  var worldwidth = 15;
  for(var row = 0; row < worldheight; row++){
    world.push([row])
    output += "<div class = 'row'>"
    
    for (var column = 0; column < worldwidth; column++) {          
      if (row == 0 || column == 0 || row == 14 || column == 14) {
        world[row].push(0);
        output += "<div class = '" + worldDict[0] +"'></div>";
      }
      else {
        world[row].push(Math.floor(Math.random()*4));
        output += "<div class = '" + worldDict[world[row][column]] +"'></div>";
      }
   }

   output += "</div>"
  }
  
  document.getElementById('world').innerHTML = output;
}


drawWorld();

.wrapper {
  width: 300px;
  border: 3px solid purple;
}

.row {
  height: 20px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
}

.wall, .blank, .sushi, .onigiri {
  width: 20px;
  height: 20px;
  background-color: red;
}

.blank {
  background-color: black;
}

.sushi, .onigiri {
  background-color: green;
}

<div class = "wrapper">
  <div id = "world"> </div>
</div>

22.12.2020 01:41

Ответ принят как подходящий

Немного поигравшись с кодом, вот что у меня получилось:

var world = [];
var worldDict = {
    0: 'wall',
    1: 'blank',
    2: 'sushi',
    3: 'onigiri'
}

function drawWorld(){
    output = "";
    var worldheight = 15;
    var worldwidth = 15;
    for(var row = 0; row < worldheight; row++){
        world.push([])
        output += "<div class = 'row'>"

            for (var col = 0; col < worldwidth; col++){
                //first row is all walls
                if (row == 0 || row == 14 || col==0 || col==14){
                    output += "<div class = '" + worldDict[0] +"'> </div>";
                    world[row].push(0);
                }else{
                  world[row].push(Math.floor(Math.random()*4));
                  output += "<div class = '" + worldDict[world[row][col]] +"'></div>";
                }
            }


        output += "</div>"
    }
    document.getElementById('world').innerHTML = output;
}
drawWorld();

Внесены изменения:

переместил строку world[row].push(Math.floor(Math.random()*4)); перед добавлением div в переменную output
удалили row из world.push([]) внутри первого цикла for, не имело особого смысла, почему это было там, так как это привело к тому, что ваша матрица была 15x16 вместо 15x15, потому что вы добавили номер строки в начале (что могло учитываться undefined вы получали)
изменено worldDict[world[row][col]] на worldDict[0] для условия if, так как это всегда стена, поэтому установка значения 0 сделает его более читаемым
изменил переменную x на col, чтобы было более очевидно, для чего эта переменная используется. Хотя это не влияет на функциональность вашего кода, это делает его более читабельным.