Game Board in Javascript


Alright, I’ve been pulling my hair off for a while now because of this. lol

I’m currently creating a Connect Four game in Javascript. Since I’m a bit of newbie on Javascript programming, I’ve been studying while doing this so if there are any great suggestions on this it would’ve been a really big help.

Should I just use divs on creating the board like this,

<div class="column column1">
	<div class="row row1"></div>
	<div class="row row2"></div>
	<div class="row row3"></div>
	<div class="row row4"></div>
	<div class="row row5"></div>
	<div class="row row6"></div>

or would it save me a lot of time if I use 2d arrays although I don’t have idea how can I create a game board using 2d arrays. :frowning:

Thanks in advance. Any help will be greatly appreciated.

What has worked well for me is this sort of structure:

<ul class="gameboard">

Because selecting any particular row is related to the list item in the list, and any particular column can relate to the nth-of-span pseudo selector.
And when using scripting, there are plenty of good DOM-selection techniques that can be used too.

Thanks for the idea, sir. :smiley:

Anyways, I managed to finish the board.
Is there any way to shorten or improve the code for the hover state of the pieces? Here’s the Fiddle link.

Yes indeed - the following can definitely be improved:

if ( player) {
} else {

You can use a ternary oeprator to decide what to toggle the class to.

$(this).children('.row6').toggleClass(player ? 'p1' : 'p2');

Other types of improvement will be easier to decide upon, after you’ve made further progress with things.