SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Game Board in Javascript

    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,
    Code HTML4Strict:
    <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.

    Thanks in advance. Any help will be greatly appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by IamJay View Post
    Thanks in advance. Any help will be greatly appreciated.
    What has worked well for me is this sort of structure:

    Code javascript:
    <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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What has worked well for me is this sort of structure:

    Code javascript:
    <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.
    Thanks for the idea, sir.

    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by IamJay View Post
    Thanks for the idea, sir.

    Anyways, I managed to finish the board.
    Is there any way to shorten the code for the hover state of the pieces? Here's the Fiddle link.
    Yes indeed - the following can definitely be improved:

    Code:
    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.

    Code javascript:
    $(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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •