www.webdeveloper.com
Results 1 to 6 of 6

Thread: noob needs help with chessboard

  1. #1
    Join Date
    Feb 2012
    Posts
    3

    noob needs help with chessboard

    Hi, i am a newb trying to learn how to make websites and i'm having troubles with a chess board i'm trying to make.
    The point is that i want to be able to create lessons with it for children, as in make a specific setup and have one (or more, if possible)
    specific move(s) give a different result (like a popup-box or something) then a wrong move. I copied a drag and drop chessboard from the inet
    which i got figured out. But don't know how to create a "good move" and a "bad move". Here is some of the code:

    <head>
    <style type="text/css">
    #chess_board { border:5px solid #333; }
    #chess_board td {
    background:#fff;

    height:50px;
    text-align:center;
    vertical-align:middle;
    width:50px;

    }
    #chess_board tr:nth-child(odd) td:nth-child(even),
    #chess_board tr:nth-child(even) td:nth-child(odd) {
    background:#ccc;
    }
    </style>


    <script type="text/javascript">


    function allowDrop(ev)
    {
    ev.preventDefault();
    }

    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    }


    </script>

    </head>

    <body>

    table id="chess_board" cellpadding="0" cellspacing="0">

    <tr>

    <td ondrop="drop(event)"ondragover="allowDrop(event)" id="A8"><div class="piece" draggable="true" ondragstart="drag(event)" id="dragA8">♜</div ></td>

    this is only the first field this goes on with b8 c8 etc... </tr> <tr> a7 b7 etc...


    as u can see i am using html5 drag and drop for the piece-moving and a table to create the field, is it possible to create a if...else statement inside the drop functon
    to make only a specific piece able to accually be dropped (but maintain the ability to drag the other pieces)

  2. #2
    Join Date
    Feb 2012
    Location
    youTUBE
    Posts
    234
    You will need data to back you up. Jumping will take some calculation, bit for most pieces line-of-sight is enough.

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    See this old pages chess.htm or ChesNew.htm which work only with IE but who allow to copy to paste parties and to try to resolve problems.... They are to translate and redo completly... Good Look !

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    I modified the page chess.htm which work now with Mozillia FireFox and other modern browsers and allow (with a little of patience for loading) to play many games...
    Thank you for indicating me the possible bugs !

  5. #5
    Join Date
    Feb 2012
    Posts
    3
    very nice, thank you for the trouble. Im gonna get a javascript course soon so I hope that after that I understand how u did it. :P

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,252
    There is not a very good script. It gathers not homogeneous pieces and probably redundant variables...

    One remarks : It is useless to use a two dimensional array or a table to represent the game, an unidimensional array (and calculations with the quotients and the rest of the division of integers if necessary) with margins an border case (theBord[i]='OO' in the script) allow to avoid multiple tests.

    The use of well chosen objects should allow to build a better script...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles