如何创建特定的 X*X 尺寸表？ （战舰游戏）（HTML、CSS、JS）

Question

I have an assignment to create a battleship game, with 3x3 - 10x10 grid. My current idea would be to create a grid with a click of a button, or at least change the current size with a click of a button. However I'm a beginner and its really difficult to find any simple or understandable advice. So I thought I'd ask here explaining my personal situation.

(I pasted the following code pieces into pastebin since some indentation and formatting seems to disappear here. http://pastebin.com/ZL3cWt8U )

I'm trying to recreate this with a JavaScript function.

css:

.cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; float: left; width: 30px; height: 30px;}
.row {clear: both; overflow: hidden;}
.table {border-left: 1px solid #000000; border-top: 1px solid #000000;}

HTML:

<div class="table">
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>
<div class="row">
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
    <div class="cell">&nbsp;</div>
</div>

Here is the function I'm trying to work with. I'm using a dropdown menu which has 3x3 - 10x10 values in it. Pressing a button executes the function.

function genTable(gridsize) {

var e = '<div class="table"><div class="row"><div class="cell">&nbsp;</div></div></div>'

var value = $("#option").val(); //gets value from button press (between 3-10)
gridsize = value; // this isn't really necessary, oops
for (i = 0; i <= gridsize-1; i++) { //for loop to create the table
    $("#tabel_here").append(e);

}
}   

Now, this far it just creates a vertical X x 1 table, just a column. As far as I know, the solution would be to loop this:

<div class="cell">&nbsp;</div>

As much as needed(*gridsize) in between the row div. This is where I'm stuck because I can't seem make it work without breaking the code.

Also, if there are simpler ways to make this happen let me know, this might be a dumb way to solve the problem, but I just started learning html, css and js.

Now I would like to stress, that this will be used to make a battleship game, so it needs to have as much functionality as possible, this is why I considered using divs as they seem to be the most universal and flexible.

Answer 1

Try this:

 var createGrid=function(x,y){ var arrY = new Array(), arrX, container = $(".table"); for(var iy=0; iy<y; iy++){ arrX = new Array(); for(var ix=0; ix<x; ix++){ arrX[ix]='<div class="cell">&nbsp;</div>'; } arrY[iy]='<div class="row">'+arrX.join("\\r\\n")+'</div>'; } container.append(arrY.join("\\r\\n")); }; // call function createGrid(10,10);

 .cell {display:table-cell; border-right: 1px solid #000000; border-bottom: 1px solid #000000; width: 30px; height: 30px; } .row { display:table-row; clear: both; overflow: hidden; } .table { display:table; border-left: 1px solid #000000; border-top: 1px solid #000000; display:table; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="table"></div>

This is easy and flexibile function. With this, you can easy setup grid just changing values.

DEMO

Answer 2

Here is a Demo

function drawGrid(cells)
{
    $(".grid").empty();
    for(var i=0 ; i<cells ; i++)
    {
        var row = $("<div class='rowa'></div>");
        for(var j=0 ; j<cells ; j++)
        {
            row.append("<div class='cella'>&nbsp;</div>");
        }
        $(".grid").append(row);
    }
}

Answer 3

You can create functions to repeat the column creation and row creation and update your HTML. something like below.

 var TableUtil = { repeatString: function(str, times) { return (new Array(times + 1)).join(str); }, createTableString: function(rows, cols){ var tableString='<div class="table">', rowString ='<div class="row">', colString ='<div class="cell">&nbsp</div>'; //create single row rowString += this.repeatString(colString, cols); rowString +='<div>'; //repeat n times the rows tableString += this.repeatString(rowString, rows); return tableString; } }; var el = document.getElementById('TableBox'); el.innerHTML=TableUtil.createTableString(10,5);

 .cell {border-right: 1px solid #000000; border-bottom: 1px solid #000000; float: left; width: 30px; height: 30px;} .row {clear: both; overflow: hidden;} .table {border-left: 1px solid #000000; border-top: 1px solid #000000;}

 <div id="TableBox"></div>

Answer 4

This response is written in pure JavaScript, so there are no dependencies and libraries. The table that is generated is a DOM object, rather than a string value. This makes this code more extensible for future modifications.

The TableUtil namespace provides functions for generating a table given row and column counts.

The ElementUtils namespace provides functions for looking up style information for a selector.

Note: I added styles to the cells to make them look like Battleship cells. If you need the original code, without the extra style, check out the previous revision .

The example below, generates a 11 row by 11 column table and calculates the width of the table in the process based on the style rules of a .cell .

 var ElementUtils = { computeElementWidth: function(selector) { var styleText = this.getStyleText('.cell'); var ml = this.grabStyle(styleText, 'margin-left'); var mr = this.grabStyle(styleText, 'margin-right'); var pl = this.grabStyle(styleText, 'padding-left'); var pr = this.grabStyle(styleText, 'padding-right'); if (ml === 0 && mr === 0) { var m = this.grabStyle(styleText, 'margin'); ml = m; mr = m; } if (pl === 0 && pr === 0) { var p = this.grabStyle(styleText, 'padding'); pl = p; pr = p; } var w = this.grabStyle(styleText, 'width'); return ml + pl + w + pr + mr; }, findCssRule: function(styleText, rule) { var searchIndex = styleText.indexOf(rule); var endIndex = styleText.indexOf(';', searchIndex); var startIndex = searchIndex + rule.length + 1; if (startIndex < endIndex && startIndex > -1) { return styleText.substring(startIndex, endIndex).trim(); } return undefined; }, grabStyle: function(styleText, rule) { var cssRule = this.findCssRule(styleText, rule); if (rule) { var values = cssRule.split(' '); if (values.length > 1) { var isMargin = rule === 'margin'; var isPadding = rule === 'padding'; if (isMargin || isPadding) { if (values[0].indexOf('px') > -1) { return this.parseNumber(values[1]); } } } else { if (values[0].indexOf('px') > -1) { return this.parseNumber(values[0]); } } } if (rule.match('width|height|margin|padding|border')) { return 0; } return undefined; }, getStyleText: function(selector) { var styleSheets = document.styleSheets[0]; var classes = styleSheets.rules || styleSheets.cssRules; for (var x = 0; x < classes.length; x++) { var curr = classes[x]; if (curr.selectorText === selector) { return curr.cssText ? curr.cssText : curr.style.cssText; } } return ''; }, parseNumber: function(value) { var match = value.match(/\\d+/); return match.length > 0 ? parseInt(match[0], 10) : 0; } }; var TableUtil = { createTable: function(rows, cols) { var tableEl = this.createEl('DIV', 'table'); for (var row = 0; row < rows + 1; row++) { this.createRow(tableEl, row, cols + 1); } tableEl.style.width = this.calculateTableWidth(cols + 1); return tableEl; }, createRow: function(tableEl, row, cols) { var rowEl = this.createEl('DIV', 'row'); for (var col = 0; col < cols; col++) { this.createCol(rowEl, row, col); } tableEl.appendChild(rowEl); }, createCol: function(rowEl, row, col) { var isX = col === 0; var isY = row === 0; var cls = isX || isY ? 'cell-outer' : 'cell-inner'; var txt = (isX && row > 0 ? String.fromCharCode(64 + row) : isY && col > 0 ? col : '').toString(); rowEl.appendChild(this.createEl('DIV', 'cell ' + cls, txt)); }, createEl: function(tagName, className, innerHTML) { var el = document.createElement(tagName); el.className = className; el.innerHTML = innerHTML || ''; return el; }, calculateTableWidth: function(cols) { var elWidth = ElementUtils.computeElementWidth('.cell'); return ((elWidth + 1) * cols) + 'px'; } }; var el = document.getElementById('TableBox'); el.appendChild(TableUtil.createTable(10, 10));

 .cell { float: left; width: 30px; padding: 2px; height: 30px; border-right: 1px solid #5C9DC2; border-bottom: 1px solid #5C9DC2; } .row { clear: left; overflow: hidden; } .table { border-left: 1px solid #5C9DC2; border-top: 1px solid #5C9DC2; } /** Cell text and background styles. */ .cell-outer { background: #3a7ca8; text-align: center; line-height: 30px; color: #071E7A; text-shadow: #FFFFFF 0.05em 0.05em 0.1em; } .cell-inner { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#071e7a+0,3eabcd+9,3eabcd+15,3a7ca8+29,6598c0+100 */ background: #071e7a; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #071e7a 0%, #3eabcd 9%, #3eabcd 15%, #3a7ca8 29%, #6598c0 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #071e7a), color-stop(9%, #3eabcd), color-stop(15%, #3eabcd), color-stop(29%, #3a7ca8), color-stop(100%, #6598c0)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #071e7a 0%, #3eabcd 9%, #3eabcd 15%, #3a7ca8 29%, #6598c0 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #071e7a 0%, #3eabcd 9%, #3eabcd 15%, #3a7ca8 29%, #6598c0 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #071e7a 0%, #3eabcd 9%, #3eabcd 15%, #3a7ca8 29%, #6598c0 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #071e7a 0%, #3eabcd 9%, #3eabcd 15%, #3a7ca8 29%, #6598c0 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#071e7a', endColorstr='#6598c0', GradientType=1); /* IE6-9 fallback on horizontal gradient */ } .cell-inner:hover { cursor: pointer; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0f13+0,9b3032+14,3eabcd+24,3eabcd+24,3a7ca8+29,3eabcd+55,6598c0+100 */ background: #ff0f13; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #ff0f13 0%, #9b3032 14%, #3eabcd 24%, #3eabcd 24%, #3a7ca8 29%, #3eabcd 55%, #6598c0 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #ff0f13), color-stop(14%, #9b3032), color-stop(24%, #3eabcd), color-stop(24%, #3eabcd), color-stop(29%, #3a7ca8), color-stop(55%, #3eabcd), color-stop(100%, #6598c0)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ff0f13 0%, #9b3032 14%, #3eabcd 24%, #3eabcd 24%, #3a7ca8 29%, #3eabcd 55%, #6598c0 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ff0f13 0%, #9b3032 14%, #3eabcd 24%, #3eabcd 24%, #3a7ca8 29%, #3eabcd 55%, #6598c0 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ff0f13 0%, #9b3032 14%, #3eabcd 24%, #3eabcd 24%, #3a7ca8 29%, #3eabcd 55%, #6598c0 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #ff0f13 0%, #9b3032 14%, #3eabcd 24%, #3eabcd 24%, #3a7ca8 29%, #3eabcd 55%, #6598c0 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0f13', endColorstr='#6598c0', GradientType=1); /* IE6-9 fallback on horizontal gradient */ }

 <div id="TableBox"></div>