How to create a specific X*X size table? (Battleship game) (HTML, CSS, JS)


Tags: javascript,jquery,html,css

Problem :

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 atlest change the current size with a click of a button. However Im 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 formating seems to dissapear 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 im trying to work with. Im using a dropdown menu wich 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 neccesary, 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) inbetween the row div. This is where I'm stuck because I cant seem make it work whitout 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.



Solution :

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


    CSS Howto..

    How to shrink wrap floating content?

    How to use image tag in body of html instead of loading image from css?

    How to get a reference to id=“xxx.yyy” in CSS?

    How to pinch the middle of a line in css

    How to apply advanced styling for all portlets of one kind

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to align TH Header with TD in TBody

    Given an url, how could a script find what resources are loaded?

    How can i get height form window top to my click point(a tag) on window using css or jquery or php?

    How to match the last n children with CSS?

    How to make maintaince document for a website?

    How can I create this button in CSS3?

    How to have the nav and footer more than 1000px?

    how to display background color in outlook 2010 html email?

    how to stop this irritating css behaviour

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    CSS, Javascipt, HTML, how can i align a text inside a div to middle beside an image? and animate the text

    How to reset css (a:visited{color:green}) when refresh browser address bar

    How to add text with css without pseudo-element

    How to vertically align in the middle a clickable image (between ) inside a div in a responsive manner?

    Use like this <div class="accounts"> <a href="LinkA" target="_blank"><img src="Vendors/Images/GithubLogo.png" alt="Github"></a> </div> <div class="accounts"> <a href="LinkB" target="_blank"><img src="Vendors/Images/SOLogo.png" alt="Stack Overflow"></a> </div> ...
    Read more

    How to get content of a specific css column

    How to stretch text in CSS like microsoft word?

    How do I make images fit the entire screen fully, regardless of screen size?

    DotNetNuke Skinning: How do I use\add skin.css?

    how to make moving spinner's edges rounded css

    How to center this rotating image (CSS animation)

    How to make a button go down when scrolling? (CSS)

    how to zoom in an image and center it

    How to create square image thumbnails using only CSS

    How to silently hide “Image not found” icon when src source image is not found