Game Board in Javascript

JavaScript
1

Hello,

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>
</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.

2

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


<ul class="gameboard">
    <li><span></span><span></span><span></span>...</li>
    <li><span></span><span></span><span></span>...</li>
    ...
</ul>

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.

3

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.

4

Yes indeed - the following can definitely be improved:


if ( player) {
    $(this).children('.row6').toggleClass('p1');
} else {
    $(this).children('.row6').toggleClass('p2');
}

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.