Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Connect four winner verification HELP !!!

    Hi Everyone, I have a project for Javascript school. I had to make a CONNECT FOUR (four in line) game. I have the game working, but now I cant make it verify when someone (the player or the computer) wins (vertically, diagonally, horizontally) I have implemented the game in different external files (index.html, board.class.js, dealer.class.js, fouronline.class.js, game.class.js, player.class.js, saviour.class.js) The script that checks for wins is in the Dealer.class.jas and the WIN alerts are on the FourOnLine.class.js. Please help, this project is due on Friday march 1st at 7pm. I appreciate it guys,

    HERES THE CODE:

    INDEX.HTML

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>4 en Linea</title>
    <script type="text/javascript" language="JavaScript" src="classes/Player.class.js"></script>
    <script type="text/javascript" language="JavaScript" src="classes/Dealer.class.js"></script>
    <script type="text/javascript" language="JavaScript" src="classes/Board.class.js"></script>
    <script type="text/javascript" language="JavaScript" src="classes/FourOnLine.class.js"></script>
    <link href="templates/master.css" rel="stylesheet" type="text/css" />
    </head>
    <body onload="FourOnLine.init(this, event);" onkeyup="FourOnLine.onKeyUp(this, event)">
    <form id="fIndex" name="fIndex" action="saviour.php" target="_self" method="post">
    <table id="board" border="1" cellpadding="0" cellspacing="0" align="center">
    <thead>
    <tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
    </thead>
    <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </tbody>
    <tfoot>
    <tr>
    <td colspan="7">
    <input type="hidden" id="boardhandler" name="boardhandler" value="" />
    <input type="button" id="bSave" name="bSave" value="Congelar" onclick="FourOnLine.onSaveClick(this, event);" />
    </td>
    </tr>
    </tfoot>
    </table>
    </form>
    </body>
    </html>

    ---------------------------------------------------------------

    SAVIOUR.PHP

    <?php
    Session::init();

    $game = new Game(Session::getId());
    $game->pause();
    $game->save($_POST['boardhandler']);

    header("location: main.php");
    ?>

    ----------------------------------------------------------------

    BOARD.CLASS.JS

    function Board(id) {

    var table = document.getElementById(id);
    var thead = table.tHead.rows[0];
    var tbody = table.tBodies[0];
    var piece;
    var xpos;
    var ypos

    this.add = function (symbol) {
    piece = document.createElement("span");
    piece.innerHTML = symbol;

    xpos = 0;
    thead.cells[xpos].appendChild(piece);
    };

    this.toLeft = function () {
    thead.cells[--xpos].appendChild(piece);
    };

    this.toRight = function () {
    xpos = arguments[0] != undefined ? arguments[0] : ++xpos;
    thead.cells[xpos].appendChild(piece);
    };

    this.toDown = function () {
    for (ypos=0; ypos<tbody.rows.length; ypos++) {
    if (!tbody.rows[ypos].cells[xpos].hasChildNodes()) {
    tbody.rows[ypos].cells[xpos].appendChild(piece);
    break;
    }
    }
    };

    this.getXPosition = function () {
    return xpos;
    };

    this.getYPosition = function () {
    return ypos;
    };

    this.getPiece = function (x, y) {
    return tbody.rows[y].cells[x].firstChild;
    };

    this.getSaviourCommand = function () {
    var row;
    var command = new Array();
    for (var _y=0; _y<tbody.rows.length; _y++) {
    row = tbody.rows[_y].cells;
    for (var _x=0; _x<row.length; _x++) {
    if (row[_x].hasChildNodes()) {
    command.push("($game, " + _x.toString() + ", " + _y.toString() + ", '" + row[_x].firstChild.innerHTML + "')");
    }
    }
    }
    return command.join(", ");
    };

    }

    --------------------------------------------------------

    DEALER.CLASS.JS

    function Dealer(board) {

    var DOWN = [0, 1];
    var LEFT_TOP = [-1, -1];
    var RIGHT_DOWN = [1, 1];
    var LEFT = [1, 0];
    var RIGHT = [-1, 0];
    var LEFT_DOWN = [-1, 1];
    var RIGHT_TOP = [1, -1];

    this.check = function () {
    var x = board.getXPosition();
    var y = board.getYPosition();
    return
    getLastIndexOf(x, y, DOWN) >= 3 ||
    getLastIndexOf(x, y, LEFT_TOP) + getLastIndexOf(x, y, RIGHT_DOWN) >= 3 ||
    getLastIndexOf(x, y, LEFT) + getLastIndexOf(x, y, RIGHT) >= 3 ||
    getLastIndexOf(x, y, LEFT_DOWN) + getLastIndexOf(x, y, RIGHT_TOP) >= 3;
    };

    function getLastIndexOf(x, y, dir) {
    var piece = board.getPiece(x, y);
    x += dir[0];
    y += dir[1];
    if (piece.innerHTML == board.getPiece(x, y).innerHTML) {
    return 1 + getLastIndexOf(x, y, dir);
    } else {
    return 0;
    }
    }

    }

    --------------------------------------------------------------------

    FOURONLINE.CLASS.JS

    var FourOnLine = {

    LEFT: 37, // 100,
    UP: 38, // 104,
    RIGHT: 39, // 102,
    DOWN: 40, // 98,

    PIECE_ONE: "x",
    PIECE_TWO: "o",

    board: null,
    boardhandler: null,

    dealer: null,
    machine: null,

    init: function (sender, e) {
    FourOnLine.board = new Board("board");
    FourOnLine.board.add(FourOnLine.PIECE_ONE);
    FourOnLine.boardhandler = document.fIndex.boardhandler;

    FourOnLine.dealer = new Dealer(
    FourOnLine.board
    );

    FourOnLine.machine = new Player(
    FourOnLine.board,
    FourOnLine.PIECE_TWO
    );
    },

    onKeyUp: function (sender, e) {
    switch (e.keyCode) {
    case FourOnLine.LEFT:
    FourOnLine.board.toLeft();
    break;
    case FourOnLine.RIGHT:
    FourOnLine.board.toRight();
    break;
    case FourOnLine.DOWN:
    FourOnLine.board.toDown();
    if (FourOnLine.dealer.check()) {
    window.alert("You Win!");
    }

    FourOnLine.machine.move();
    if (FourOnLine.dealer.check()) {
    window.alert("You Lose!");
    break;
    }

    FourOnLine.board.add(FourOnLine.PIECE_ONE);
    }
    },

    onSaveClick: function (sender, e) {
    FourOnLine.boardhandler.value = FourOnLine.board.getSaviourCommand();
    document.fIndex.submit();
    return false;
    }

    };

    --------------------------------------------------

    GAME.CLASS.PHP

    <?php
    include_once("DataSource.class.php");

    define("GAMESTATUS_START", 0);
    define("GAMESTATUS_PAUSE", 4);

    class Game {

    private var $ownerid;
    private var $status;

    public function Game($ownerid) {
    $this->ownerid = $ownerid;
    $this->status = GAMESTATUS_START;
    }

    public function pause() {
    $this->status = GAMESTATUS_PAUSE;
    }

    public function save($boardsettings) {
    $connection = DataSource::getConnection();
    $id = $connection->getObject("call savegame(".$this->ownerid.", now(), ".$this->status.")");
    $boardsettings = str_replace($id, "\$game", $boardsettings);
    $connection->query("insert into cyberu_tb_board (_game, _x, _y, _value) values ".$boardsettings);
    }

    }
    ?>

    ----------------------------------------------------------

    PLAYER.CLASS.JS

    function Player(board, symbol) {

    this.move = function () {
    board.add(symbol);
    var _x = Math.floor(Math.random()*10)%7;
    board.toRight(_x);
    board.toDown();
    };

    }

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    i won't do your homework for you, but i can point you to http://danml.com/pub/connect4.html, where i have a working copy of the same game for you to inspect. it's not the best code ever, i wrote it in an afternoon, but it seems to work ok.


    a row win is easy: cast the board into a string, each char meaning red or black or empty.
    then you can simply String.match() that string to find a row winner.

    a col winner is almost as easy; just transpose the board and again look for row winners.


    the diag win was one that gave me some pause. one easy way is to hard-code all the diags, but that's cheap. I came up with a way to transpose the board in diagonals (both NW and NE), and once again used the string match() row-winner finder to examine the result for a winner.

    all the win detection code spans from line 222-300 (ignore the comments).
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks rnd me,

    Im not asking for you to do my homework. As you can see in the code, everything is ready and setup. The game works fine (not great), the code with the coordinates to check for winners is in the DEALER.CLASS.JS part of the code. I changed the original coordinates so it can verify winners and it worked fine. I changed the coordinates because I noticed that the "x" and "0" are not falling to the bottom of the board, instead they are staying on top.

    Now my problem is that I cant figure out where the conflict is, in other words why is it not letting the "x" and "0" fall to the bottom of the board.

    Can anyone Help ??

    code

    function Dealer(board) {

    var DOWN = [0, -1];
    var LEFT_TOP = [1, 1];
    var RIGHT_DOWN = [-1, -1];
    var LEFT = [-1, 0];
    var RIGHT = [1, 0];
    var LEFT_DOWN = [1, -1];
    var RIGHT_TOP = [-1, 1];


  •  

    Posting Permissions

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