[英]Create a 10x10 field of cells
I want to create a field of cells. 我想创建一个单元格字段。 The field has a size of 10x10.
该字段的大小为10x10。 When reaching a maximum count of cells in a row, it should start a new row.
当达到一行的最大单元数时,它应该开始新的一行。
Currently all my cell divs are placed below. 目前,我所有的单元格div都位于下面。
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
use display:inline-block;
使用
display:inline-block;
for .cells and to stop 10 each row add a <br>
tag after 10 divs in row. 对于.cell并要在每行停止10个位置,请在每行10个div后添加
<br>
标记。
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); } $(document.body).append("<br>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell { height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
Create wrapper for each 10 cell. 每10个单元格创建一个包装器。
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { $(document.body).append("<div>"); for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } $(document.body).append("</div>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
You can use absolute positioning and set for each of them css property. 您可以使用绝对定位并为每个css属性设置。 Here is the fiddle
这是小提琴
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css cellDiv.css({ left: Math.floor(x*50), top: Math.floor(y*50) }); $(document.body).append(cellDiv); // add the cell div to the parent } initGame()
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You can create a row div
that contains multiple cell div
你可以创建一个行
div
包含多个单元div
function initGame() { const rows = 10; const columns = 10; for(let r=0;r<rows;r++){ let row = createRow(r); for(let c=0;c<columns;c++){ createCell(row, r, c); } } } function createRow(rowNumber){ let row = document.createElement('DIV'); row.className += ' row' $(document.body).append(row); return row; } function createCell(domRow, rowNumber, columnNumber){ let column = document.createElement('DIV'); column.className += ' cell'; $(domRow).append(column); }
.cell{ height: 50px; width: 50px; border: 1px solid grey; background: tomato; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.