Javascript Tile Map Generator

Question

i want to programm a tile map with just 1 picture. 我想用一张图片来编程一张瓷砖地图。 It shall be a 5x5 field of small pictures. 它应该是5x5的小图片字段。 I have wrote some Javascript Code with 2 nested Loops. 我写了一些带有2个嵌套循环的Javascript代码。 With this solution, only 1 pictures is printed. 使用此解决方案，仅打印1张图片。 When i remove the br Tag in the second loop, 5 pictures are printed, but only in a row, not among themselves. 当我在第二个循环中删除br Tag时，将打印5张图片，但仅连续打印5张，而不会在彼此之间打印。 Whats the problem? 有什么问题？ How can i realize that? 我怎么能意识到呢？

window.onload=function() {
    document.getElementById('button_generateField').addEventListener('click', function generateField (spacefields) {

for (var i = 0; i <= 4; i++) {

    var horizontal_field = new Image();
    horizontal_field.src = 'Grafiken/spacefields.jpg';
    document.body.appendChild(horizontal_field);


    for (var j = 0; j <= 4; j++){

        var vertical_field = new Image();
        vertical_field.src = '/Grafiken/spacefieldsd.jpg';
        document.body.appendChild( '<br>' + vertical_field);

};


};

});}

HTML 的HTML

<!DOCTYPE HTML>
<html lang="de">

<head>
<meta charset="utf-8">
<title>Test</title>

<style type="text/css">

</head>
<body>
<div id="header">
<img src="testbanner1.jpg" alt="banner" width="1500" height="150px" >
</div>

<div id="main">

<button id="button_generateField">Generate Field!</button>

</div>

</body>
</html>

Answer 1

/Grafiken/spacefieldsd.jpg looks like a typo. /Grafiken/spacefieldsd.jpg看起来像是一个错字。 use document.createElement("img") instead of new Image() . 使用document.createElement("img")代替new Image() 。 your <br> will not work, you need to document.createElement("br") 您的<br>无法正常工作，您需要document.createElement("br")

 var btn = document.getElementById("button_generateField"); var div = document.getElementById("main"); var rows = 4; var cols = 4; var x = 0; var y = 0; btn.addEventListener("click", function(){ for(y=0;y<rows;y++){ for(x=0;x<cols;x++){ var img = document.createElement("img"); img.src = "https://via.placeholder.com/100x100"; img.onload = function(){ } div.appendChild(img); } div.appendChild(document.createElement("br")); } });

 <button id="button_generateField">Generate Field!</button> <div id="main"> </div>

Javascript Tile Map Generator

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-09 21:22:36

Javascript Tile Map Generator

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-09 21:22:36

解决方案1
2 已采纳 2018-03-09 21:22:36