Connect four winner verification HELP !!!

Eric Taylor · 02-27-2013, 10:35 PM

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();
};

}

rnd me · 02-28-2013, 05:42 PM

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

Eric Taylor · 03-01-2013, 12:16 AM

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];