SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    simplified HTML/JAVASCRIPT Othello game...

    I am only changing blocks of color. (I can convert to images later after testing is completed.)
    Can't seem to get the flips to work with each other.
    INTENTION: If the cell is empty, valid action = TakeTurn().
    If the cell is occupied, valid action=FlipChips().


    Here are all three functions I have so far

    function FlipChips(p) { {
    if (turn==Black) document.getElementById(p).style.background='white'
    if (turn==White) document.getElementById(p).style.background='black' } }

    function TakeTurn(p) {
    if (document.getElementById(p).occupied=='y') {alert('occupied');return}
    occupied=document.getElementById(p).occupied='y';

    if(turn==Black)
    {document.getElementById(p).style.background='black';
    turn = "White";
    return; }
    if(turn==White)
    {document.getElementById(p).style.background='white';
    turn = "Black";} }

    function initBoard() {
    document.getElementById(45).style.background='white'
    document.getElementById(54).style.background='white'
    document.getElementById(44).style.background='black'
    document.getElementById(55).style.background='black' }


    Here is a sample of the data elements (8x8 table)
    <body bgcolor="#FFFF99" onload=initBoard()>
    <div align="center">
    <input type="button" value="Play New Game"
    style="font-color:'green' font-size:28" onclick="initBoard()" />
    <br><br>
    <table border="3" width="53%" height="75%"
    cellspacing="3" cellpadding="3"
    bgcolor="#006600" bordercolor="#808080">
    <tr>
    ...

    <tr>
    <td id=11 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=12 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=13 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=14 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=15 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=16 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=17 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    <td id=18 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>
    </tr>
    <tr>
    <td id=21 occupied='n' ondblclick="FlipChips(id)" onclick="TakeTurn(id)" > &nbsp;</td>


    ...

    </tr></table></div></body>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,497
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE will return a color as HEX Moz will return as rgb

    ids must start with an alpha charactor

    use '.style.backgroundColor' not just 'style.background' which could be an image

    custom attributs can only be set in IE but NOT for Moz
    custom properties can be set in JS functions.

    onclick="javascript:TakeTurn(this.id);" is correct.
    you can use onclick="javascript:TakeTurn(this);"
    in which case a object is recieved and you can use
    p.style.backgroundColor='white';

    use 'else' in conditionals
    else if (turn==White) {
    but White would be a string 'White' or '#ffffff' for IE 'rgb(255,255,255)' for others

    Hope this helps

    Vic

    I may make an example that works later


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
  •