[英]javascript how can I add additional properties to an array's coordinates inside of a loop, without erasing the existing properties of the array
I have narrowed down a bug in my program to the following.我已将程序中的错误缩小到以下内容。
The following loop works so long as maxlayout equals 1 but if it equals two thus making the loop run twice then the original values erase.只要 maxlayout 等于 1,以下循环就可以工作,但如果它等于 2,从而使循环运行两次,则原始值将被擦除。
so if the loop is run once then mainArray.tilef0 will equal tile.empty but if tan twice then mainArray.tilef0 will be undefined and mainArray.tilef1 will equal tile.empty因此,如果循环运行一次,则 mainArray.tilef0 将等于 tile.empty 但如果 tan 两次,则 mainArray.tilef0 将是未定义的, mainArray.tilef1 将等于 tile.empty
The same is true for the rest of the properties such as terrain and solid.对于其他属性(例如地形和固体)也是如此。
for (var k = 0; k < maxlayout; k++){
mainArray[i][j] = {
['tilef' + k]: tile.empty,
['terrainf' + k]: "empty",
['solidf' + k]: "false",
};
Barmar and Henery Answered my question but I thought I would add the whole code below. Barmar 和 Henery回答了我的问题,但我想我会在下面添加整个代码。 So that they or others could see how it helped and/or help me or others to see if there is a better way such as maybe initializing the array before the point I needed help in.
以便他们或其他人可以看到它如何帮助和/或帮助我或其他人查看是否有更好的方法,例如在我需要帮助之前初始化数组。
So below is the functioning version with the code they assisted me with.所以下面是他们帮助我使用的代码的功能版本。
I apologize if it is messy, I struggle to keep code clean and don't know all the standard ways of doing things.如果它很乱,我很抱歉,我努力保持代码干净并且不知道做事的所有标准方法。 But I added lots of comments.
但我添加了很多评论。
function gameloop() { // Entire Game contained withing function var mainArray = []; // most game data will be held withing the array var mapSizeX = 32; // sets the height of the rendered map and corresponding array coordinates var mapSizeY = 128; // sets the width var idPos = {x: 16, y: 64}; // currently used to set player location and check for collisions var rendFlr = 0; // sets which floor to render var maxlayout = 3; var tile = { // lists charcters used for rendered tiles and objects player: "☺", empty: ".", wall: "#", oak: "♠", maple: "♣", grass: "‚", tallgrass: "„" }; function initMap(mapSizeX, mapSizeY) { // expands and populates the array for (var i = 0; i < mapSizeX; i++) { mainArray.push([]) // I belive this is only expaning it 2 dimesionaly and matching the height for (var j = 0; j < mapSizeY; j++) { for (var k = 0; k < maxlayout; k++){ const obj = mainArray[i][j] || {}; // creates on object to alter and add back into the main array obj['tilef' + k] = tile.empty; obj['terrainf' + k] = "empty"; obj['solidf' + k] = "false"; mainArray[i][j] = obj; if(k > 0){ if (j == 0 || // wraps the underground floor 1 in walls j == mapSizeY - 1 || i == 0 || i == mapSizeX - 1) { mainArray[i][j]['tilef' + k] = tile.wall; mainArray[i][j]['terrainf' + k] = "wall"; mainArray[i][j]['solidf' + k] = "Wall"; } } } //else{ // un need as the above for j is already creating empties //mainArray[i][j].terrain = "empty"; //mainArray[i][j].solid = "false"; //} } } } function getRndInteger(min, max) { // returns random number from min to max number appears to not function predictably if min and max are the same number return Math.floor(Math.random() * (max - min + 1) ) + min; } function randAdd(odds,feature,solid) { // A chance to add named feature and solid type or message if the "odds" or max number provided is rolled. for (var i = 0; i < mapSizeX; i++) { for (var j = 0; j < mapSizeY; j++) { if (mainArray[i][j].terrainf0 === "empty") { roll = getRndInteger(1,odds); if(roll === odds){ mainArray[i][j].terrainf0 = feature; mainArray[i][j].tilef0 = tile[feature]; mainArray[i][j].solidf0 = solid; } } } } } function randAdd1(odds,feature,solid) { // Same as above function but for floor 1 and should eventually be merged into a single function for (var i = 0; i < mapSizeX; i++) { for (var j = 0; j < mapSizeY; j++) { if (mainArray[i][j].terrainf0 === "empty") { roll = getRndInteger(1,odds); if(roll === odds){ mainArray[i][j].terrainf1 = feature; mainArray[i][j].tilef1 = tile[feature]; mainArray[i][j].solidf1 = solid; } } } } } function genMaps(){ randAdd(200,"wall","solid rock"); randAdd(100,"oak","a tree"); randAdd(100,"maple","a tree"); randAdd(2,"grass","False"); randAdd(2,"tallgrass","False"); randAdd1(1,"wall","solid rock"); } function nl() { // Creates a new line in the rendered text GameScreen.innerText += "\\n"; } function render(flr) { // displays the array tiles to the browser GameScreen.innerText = mainArray.map(arr => arr.map(cell => cell['tilef' + flr]).join("")).join("\\n"); nl(); nl(); } function reposition(xChange, yChange, strA) { // checks if target position is not blocked and if not moves the player if (mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "false" || mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "False" || mainArray[idPos.x + xChange][idPos.y + yChange].solidf0 === "") { mainArray[idPos.x][idPos.y].tilef0 = tile[mainArray[idPos.x][idPos.y].terrainf0]; idPos.x = idPos.x + xChange; idPos.y = idPos.y + yChange; mainArray[idPos.x][idPos.y].tilef0 = tile.player; GameLog.innerText = "You take a step to the " + strA } else { GameLog.innerText = "You can not enter " + mainArray[idPos.x + xChange][idPos.y + yChange].solidf0; } mainArray[idPos.x][idPos.y].terrainf0 != "empty" ? GameLog.innerText += "\\n There is " + mainArray[idPos.x][idPos.y].terrainf0 + " in this spot" : GameLog.innerText += "\\n There is nothing in this spot"; render(rendFlr); } //Startup initMap(32, 128); genMaps(); mainArray[idPos.x][idPos.y].tilef0 = tile.player; //First Render render(rendFlr); document.addEventListener('keydown', function(event) { if (event.keyCode === 38) { reposition(-1, 0, "North"); } if (event.keyCode === 40) { reposition(1, 0, "South"); } if (event.keyCode === 37) { reposition(0, -1, "West"); } if (event.keyCode === 39) { reposition(0, 1, "East"); } if (event.keyCode === 190) { if(rendFlr < maxlayout) {rendFlr++} render(rendFlr); } if (event.keyCode === 188) { if(rendFlr > 0) {rendFlr--} render(rendFlr); } //alert(event.keyCode); }); } gameloop();
.info { color: #7d7d7d; font-family: Lucida Console; } .info span { color: #ABABAB; font-family: Lucida Console; font-size: 0.5em; } #GameScreen{ color: #000000; font-family: Lucida Console; font-weight: italic; margin-left: auto; margin-right: auto; } #GameLog { color: #000000; font-family: Lucida Console; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> <meta charset="utf-8"> <title>Dungeon Valley</title> </head> <body> <br> <p class="info">Dungeon Valley.<br> <span class=""> Taming the Borderlands.<br> v0.008 By heromedel. </span> </p> <section id="GameScreen"></section> <section id="GameLog">Arrow Keys to move.<br></section> <script src="main.js"></script> </body> </html>
If you want to test it I recommend running the snippet then clicking fullscreen Arrow keys to move , and .如果您想测试它,我建议您运行该代码段,然后单击全屏箭头键移动 , 和 。 will change which floor is rendering.
将改变正在渲染的楼层。
Barmar's answer identifies the issue, but will very likely run into undefined
error, if mainArray[i][j] is not initialized. Barmar 的回答确定了问题,但很可能会遇到
undefined
错误,如果 mainArray[i][j] 未初始化。 So something like this:所以像这样:
for (var k = 0; k < maxlayout; k++){
const obj = mainArray[i][j] || {};
obj['tilef' + k] = tile.empty;
obj['terrainf' + k] = "empty";
obj['solidf' + k] = "false";
mainArray[i][j] = obj;
}
You're replacing the array element instead of adding new properties to it.您正在替换数组元素而不是向其添加新属性。
for (var k = 0; k < maxlayout; k++){
mainArray[i][j]['tilef' + k] = tile.empty;
mainArray[i][j]['terrainf' + k] = "empty";
mainArray[i][j]['solidf' + k] = "false";
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.