时间戳

首页 > 解决方案 > Javascript Pacman 风格游戏随机地图生成器显示未定义的属性

javascript - Javascript Pacman 风格游戏随机地图生成器显示未定义的属性

问题描述

因此，我正在尝试构建一个随机地图生成器，并且在编写该函数时似乎可以正常工作，但是我想成为墙壁的第一列开始显示未定义和随机生成的正方形，这也会影响最后一列。有什么我想念的吗？

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

标签： javascript

解决方案

在玩了一下代码之后，这就是我想出的：

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，它为什么存在并没有多大意义，因为这导致你的矩阵是 a15x16而不是15x15因为你在开始时添加了行号（这可能是undefined你得到的原因）
  • 更改worldDict[world[row][col]]为worldDict[0]条件if，因为它始终是一堵墙，因此将其设置为 0 将使其更具可读性
  • 将变量更改x为，col以便更清楚地了解该变量的用途。虽然这不会影响代码的功能，但它使代码更具可读性

这是一个已实现的 jsfiddle（并稍作修改以清楚地显示输出）：https ://jsfiddle.net/rknzms3q/73/

推荐阅读