Lucas Kent e39465ad2f Changes to be committed:
new file:   Files/flashplayer_32_sa.exe
	new file:   favicon.ico
	new file:   globe.gif
	new file:   imgs/download.png
	new file:   imgs/zuck.jpg
	new file:   index.html
	new file:   other.ico
	new file:   script.js
	new file:   site.webmanifest
	new file:   sitemap.html
	new file:   styles/backround.css
	new file:   styles/border.css
	new file:   styles/fonts/Titillium_Web/OFL.txt
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf
	new file:   styles/fonts/webfontkit-20221027-163353/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-demo.html
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff2
	new file:   styles/fonts/webfontkit-20221027-165950/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-demo.html
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff2
	new file:   styles/style.css
	new file:   tools/2048/.gitignore
	new file:   tools/2048/.jshintrc
	new file:   tools/2048/CONTRIBUTING.md
	new file:   tools/2048/LICENSE.txt
	new file:   tools/2048/README.md
	new file:   tools/2048/Rakefile
	new file:   tools/2048/favicon.ico
	new file:   tools/2048/index.html
	new file:   tools/2048/js/animframe_polyfill.js
	new file:   tools/2048/js/application.js
	new file:   tools/2048/js/bind_polyfill.js
	new file:   tools/2048/js/classlist_polyfill.js
	new file:   tools/2048/js/game_manager.js
	new file:   tools/2048/js/grid.js
	new file:   tools/2048/js/html_actuator.js
	new file:   tools/2048/js/keyboard_input_manager.js
	new file:   tools/2048/js/local_storage_manager.js
	new file:   tools/2048/js/tile.js
    new file:   tools/2048/meta/apple-touch-icon.png
	new file:   tools/webretro/cores/neocd_libretro.js
	new file:   tools/webretro/cores/neocd_libretro.wasm
	new file:   tools/webretro/cores/nestopia_libretro.js
	new file:   tools/webretro/cores/nestopia_libretro.wasm
	new file:   tools/webretro/cores/o2em_libretro.js
	new file:   tools/webretro/cores/o2em_libretro.wasm
	new file:   tools/webretro/cores/opera_libretro.js
	new file:   tools/webretro/cores/opera_libretro.wasm
2022-11-02 08:40:01 -04:00

958 lines
34 KiB
HTML

<!doctype html>
<html><!-- #BeginTemplate "/Templates/Main.dwt" --><!-- DW6 -->
<!-- Mirrored from www.mathsisfun.com/games/connect4-javascript.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 01:01:26 GMT -->
<head>
<!-- #BeginEditable "doctitle" -->
<title>Four In A Line</title>
<style type="text/css">
img {border: 0}
.bluetext {font-size: 14px; font-family: "Comic Sans MS", Verdana; color: blue; font-weight: bold}
.redtext {font-size: 14px; font-family: "Comic Sans MS", Verdana; color: red; font-weight: bold}
.blacktext { font-size: 14px; font-family: "Comic Sans MS", Verdana; color: #000000; font-weight: bold }
</style>
<script language="JavaScript" type="text/javascript">
<!-- Begin
// Note when upgrading template, remember to add onload="AutoStart();" to BODY statement
var FIRSTIMAGE = 0;
var ROWS = 6;
var COLS = 7;
var WINVAL = 100000;
var theAnim = new Animation();
var moves = 0;
var gameActive = 0;
var isdropping = 0;
var RedNum=1;
var BlkNum=2;
var debugstr;
var whosFirst;
var matchMade = 0;
var lookForSrc;
var redScore = 0;
var bluScore = 0;
var colcount = new Array(COLS);
var board = new Array(ROWS);
for (var row = 0; row < ROWS; row++) {
board[row] = new Array(COLS);
for (var col=0; col < COLS; col++) {
board[row][col] = 0;
}
}
var linecount = 0;
var linecoords = new Array(70);
fill_lines();
function fill_lines() {
for(row = 0; row<ROWS; row++) {
for(col = 0; col<COLS; col++) {
for(rowchg = -1; rowchg <= 1; rowchg++) {
for(colchg = -1; colchg <= 1; colchg++) {
if(
(
((rowchg == 1) && (colchg == 0)) ||
((rowchg == 1) && (colchg == 1)) ||
((rowchg == 0) && (colchg == 1)) ||
((rowchg == -1) && (colchg == 1))
) &&
(inbounds( row + (1*rowchg), col + (1*colchg) )) &&
(inbounds( row + (2*rowchg), col + (2*colchg) )) &&
(inbounds( row + (3*rowchg), col + (3*colchg) ))
) {
linecoords[linecount] = new Array(5);
linecoords[linecount][0] = row;
linecoords[linecount][1] = col;
linecoords[linecount][2] = rowchg;
linecoords[linecount][3] = colchg;
// line weight
if (row==0 && rowchg==0 && colchg==1) {
linecoords[linecount][4]=2;
} else {
linecoords[linecount][4]=1;
}
linecount += 1;
}
}
}
}
}
}
function inbounds(row, col) {
return ((row >= 0) && (col >= 0) && (row < ROWS) && (col < COLS));
}
function rePlay() {
if (gameActive == 1) {
document.formo.redScoreBoard.value = redScore + "";
document.formo.bluScoreBoard.value = bluScore + "";
clearBoard();
}
for (var col=0; col < COLS; col++) {
colcount[col] = 0;
}
for (var row=0; row < ROWS; row++) {
for (var col=0; col < COLS; col++) {
board[row][col] = 0;
}
}
moves = 0;
isdropping = 0;
}
var redSpot = new Image();
var bluSpot = new Image();
var emptySpot = new Image();
var emptyPiece = new Image();
var redPiece = new Image();
var bluPiece = new Image();
redSpot.src = "images/c4fillred.gif";
bluSpot.src = "images/c4fillblu.gif";
emptySpot.src = "images/c4fillempty.gif";
emptyPiece.src = "images/c4clearness.gif";
redPiece.src = "images/c4redpiece.gif";
bluPiece.src = "images/c4blupiece.gif";
var whosTurn = RedNum;
var whosTurnSpot = new Image();
var whosTurnPiece = new Image();
whosTurnSpot.src = redSpot.src;
whosTurnPiece.src = redPiece.src ;
function clearBoard() {
for (var a = 7; a <= 48; a++) {
document.images[FIRSTIMAGE+a].src = emptySpot.src;
}
}
function placeTop(picToPlace) {
if (gameActive == 1) {
document.images[FIRSTIMAGE + picToPlace].src = whosTurnPiece.src;
}
}
function unPlaceTop(picToUnplace) {
if (gameActive == 1) {
document.images[FIRSTIMAGE + picToUnplace].src = emptyPiece.src;
}
}
function dropIt(whichCol) {
if (gameActive == 1) {
if (isdropping == 0) {
isdropping = 1;
var placeLoc = FIRSTIMAGE + (ROWS - colcount[whichCol]) * COLS + whichCol;
if (colcount[whichCol] < 6) {
theAnim.addFrame( FIRSTIMAGE + whichCol, emptyPiece.src);
for (var i=(ROWS-1); i>colcount[whichCol]; i--) {
tempLoc = FIRSTIMAGE + (ROWS - i) * COLS + whichCol
theAnim.addFrame( tempLoc, whosTurnSpot.src);
theAnim.addFrame( tempLoc, emptySpot.src);
}
theAnim.finalcall = "checkForWinner(" + whosTurn + ")";
theAnim.addFrame( placeLoc, whosTurnSpot.src);
//document.images[placeLoc].src = whosTurnSpot.src;
colcount[whichCol] += 1;
if (whosTurn==RedNum) {
board[colcount[whichCol]-1][whichCol] = RedNum;
} else {
board[colcount[whichCol]-1][whichCol] = BlkNum;
}
//checkForWinner(whosTurn);
//placeTop(whichRow);
}
}
}
}
function boarddump() {
s = "";
for(var col = 0; col<COLS; col++) {
s += "Col " + col + "=" + colcount[col] + " -> ";
for(var row = 0; row<ROWS; row++) {
s += board[row][col] + ",";
}
s += ";\n";
}
return s;
}
function whoGoesFirst() {
whosTurn = whosFirst;
switchTurns();
if (whosFirst == RedNum) {
whosFirst = BlkNum;
} else {
whosFirst = RedNum;
}
}
function switchTurns() {
if (gameActive == 1) {
if (whosTurn == RedNum) {
whosTurn = BlkNum;
whosTurnSpot.src = bluSpot.src;
whosTurnPiece.src = bluPiece.src;
document.formo.texter.value = document.formo.blkplayer.value + "'s turn.";
} else {
whosTurn = RedNum;
whosTurnSpot.src = redSpot.src;
whosTurnPiece.src = redPiece.src;
document.formo.texter.value = document.formo.redplayer.value + "'s turn.";
}
if (whosTurn==RedNum && document.formo.redtype.value=="Computer") ComputersTurn(RedNum);
if (whosTurn==BlkNum && document.formo.blktype.value=="Computer") ComputersTurn(BlkNum);
isdropping = 0;
}
}
function ComputersTurn(player) {
setTimeout("AComputersTurn("+player+")", 1);
}
function AComputersTurn(player) {
Difficulty = document.formo.difficulty.value;
switch (Difficulty) {
case "Too Easy":
Levels = 2;
StartStupid = 2;
StupidProb = 0.9;
break;
case "Easy":
Levels = 2;
StartStupid = 4;
StupidProb = 0.7;
break;
case "Medium":
Levels = 2;
StartStupid = 10;
StupidProb = 0.2;
break;
case "Hard":
Levels = 2;
StartStupid = 1000;
StupidProb = 0.0;
break;
case "Impossible":
Levels = 4;
StartStupid = 1000;
StupidProb = 0.0;
break;
default :
Levels = 2;
StartStupid = 6;
StupidProb = 0.7;
}
//debug("Levels=" + Levels + "," + StupidProb + "," + Difficulty );
BestCol = MaxMove(player, Levels, Number.MAX_VALUE, "Col");
// make it easier by randomly being stupid
moves += 1;
if (moves > StartStupid ) {
if ( Math.random() < StupidProb ) {
TryCol = Math.floor(Math.random()*COLS);
//debug("TryCol=" + TryCol + ",");
if (colcount[TryCol]<ROWS) {
BestCol = TryCol;
}
}
}
dropIt(BestCol);
}
function freerow(col) {
var x=-1;
for(var row=0; row<ROWS; row++) {
if (board[row][col]==0) { // found where to put the Piece
x=row;
break;
}
}
return(x);
}
function MaxMove (player, level, ParentMin, want) {
if (level <=0) { // NB or game ended
return GetBoardVal(player);
} else {
var MaxCol = 0;
var MaxVal = -WINVAL*10;
for(var col = 0; col<COLS; col++) {
var row = freerow(col);
if (row>=0) {
board[row][col] = player;
var TheVal = MinMove(player, level-1, MaxVal, "Val");
board[row][col]=0; // undo move
if (TheVal == WINVAL) return WINVAL; // game won
if(TheVal > ParentMin) {// no need to go further, because the max will be greater than the min already found
return TheVal;
} else {
if (TheVal > MaxVal ) {
MaxVal = TheVal ;
MaxCol = col;
}
}
}
}
//debug( "Max -> MaxVal=" + MaxVal + ", MaxCol=" + MaxCol + "\n" );
if (want=="Val") {
return MaxVal;
} else {
return MaxCol;
}
}
}
function MinMove (player, level, ParentMax, want) {
if (level <=0) { // NB or game ended
return GetBoardVal(player);
} else {
var MinCol = 0;
var MinVal = WINVAL*10;
for(var col = 0; col<COLS; col++) {
var row = freerow(col);
if (row>=0) {
if (player==RedNum) { // do move with OPPOSITE player
board[row][col] = BlkNum;
} else {
board[row][col] = RedNum;
}
var TheVal = MaxMove(player, level-1, MinVal, "Val");
board[row][col]=0; // undo move
if (TheVal == -WINVAL) return -WINVAL; // game won by opponent
if(TheVal < ParentMax) {// no need to go further, because the min will be less than the max already found
return TheVal;
} else {
if (TheVal < MinVal ) { // less than
MinVal = TheVal;
MinCol = col;
}
}
}
}
//debug( "Min -> MinVal=" + MinVal + ", MinCol=" + MinCol + "\n" );
return MinVal;
}
}
function GetBoardVal(player) {
thesum = 0;
for(var rowno=0; rowno<linecount; rowno++) {
var theline = linecoords[rowno];
thesum += Strength(player,theline[0],theline[1],theline[2],theline[3]) * theline[4];
}
return thesum;
}
function Strength(player, row, col, rowchg, colchg) {
if (player==BlkNum) {
player2 = RedNum;
} else {
player2 = BlkNum;
}
MeInARow = 0;
MeMaxInARow = 0;
YouInARow = 0;
YouMaxInARow = 0;
for(pos=0; pos<4; pos++) {
posplayer = board[row+pos*rowchg][col+pos*colchg];
if (posplayer==player) {
MeInARow += 1;
if (MeInARow>MeMaxInARow) MeMaxInARow=MeInARow;
} else {
MeInARow = 0;
}
if (posplayer==player2) {
YouInARow += 1;
if (YouInARow>YouMaxInARow) YouMaxInARow=YouInARow;
} else {
YouInARow = 0;
}
}
x = 0;
if (MeMaxInARow==1) x += 1;
if (MeMaxInARow==2) {
x += 4;
}
if (MeMaxInARow==3) {
x += 64 - YouMaxInARow*16;
}
if (MeMaxInARow==4) x = WINVAL;
if (YouMaxInARow==1) x -= 1;
if (YouMaxInARow==2) {
x -= 4;
}
if (YouMaxInARow==3) {
x -= (64 - MeMaxInARow*16);
}
if (YouMaxInARow==4) x = -WINVAL;
return x;
}
function AutoStart() {
gameActive = 1;
rePlay();
redScore = 0;
bluScore = 0;
document.formo.redScoreBoard.value = redScore + "";
document.formo.bluScoreBoard.value = bluScore + "";
matchMade = 1;
bluIsComputer = 1;
whosFirst = RedNum;
if (whosFirst == RedNum) {
document.formo.texter.value = document.formo.redplayer.value + "'s turn.";
whosTurn = BlkNum;
switchTurns();
whosFirst = RedNum;
} else {
document.formo.texter.value = document.formo.blkplayer.value + "'s turn.";
whosTurn = RedNum;
switchTurns();
whosFirst = BlkNum;
}
}
function checkForWinner(player) {
if (gameActive == 1) {
var someOneWon;
someOneWon = 0;
if (player == RedNum) {
lookForSrc = redSpot.src;
}
if (player == BlkNum) {
lookForSrc = bluSpot.src;
}
for (var ic = 7; ic <= 48; ic++) {
if (document.images[FIRSTIMAGE + ic].src == lookForSrc) {
if ((ic + 3 <= 48
&& ic != 11 && ic != 12 && ic != 13
&& ic != 18 && ic != 19 && ic != 20
&& ic != 25 && ic != 26 && ic != 27
&& ic != 32 && ic != 33 && ic != 34
&& ic != 39 && ic != 40 && ic != 41
&& document.images[FIRSTIMAGE + ic + 1].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 2].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 3].src == lookForSrc)
|| (ic + 3 * 7 <= 48
&& document.images[FIRSTIMAGE + ic + 7].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 7*2].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 7*3].src == lookForSrc)
|| (ic + 3 * 7 <= 48
&& ic != 11 && ic != 12 && ic != 13
&& ic != 18 && ic != 19 && ic != 20
&& ic != 25 && ic != 26 && ic != 27
&& document.images[FIRSTIMAGE + ic + 7 + 1].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 7*2 + 2].src == lookForSrc
&& document.images[FIRSTIMAGE + ic + 7*3 + 3].src == lookForSrc)
|| (ic - 3 * 7 >= 7
&& ic != 32 && ic != 33 && ic != 34
&& ic != 39 && ic != 40 && ic != 41
&& ic != 46 && ic != 47 && ic != 48
&& document.images[FIRSTIMAGE + ic - 7 + 1].src == lookForSrc
&& document.images[FIRSTIMAGE + ic - 7*2 + 2].src == lookForSrc
&& document.images[FIRSTIMAGE + ic - 7*3 + 3].src == lookForSrc)) {
for (var col=0; col<COLS; col++) {
unPlaceTop(col);
}
if (player == RedNum) {
alert(document.formo.redplayer.value + " wins.");
redScore += 1;
} else if (player == BlkNum) {
alert(document.formo.blkplayer.value + " wins.");
bluScore += 1;
}
gameActive = 0;
someOneWon = 1;
ic = 49;
document.formo.redScoreBoard.value = redScore + "";
document.formo.bluScoreBoard.value = bluScore + "";
}
}
}
if (someOneWon != 1) {
colsFull = 0;
for (var col=0; col<COLS; col++) {
if (colcount[col]==ROWS) {
colsFull += 1;
}
}
if (colsFull==COLS) {
for (var col = 0; col<COLS; col++) {
unPlaceTop(col);
}
gameActive = 0;
alert("This game has reached a draw.");
debug("end");
}
}
// NB these go here, coz the last animation frame calls "CheckForWinner" and then has to do these:
switchTurns();
isdropping = 0;
//placeTop(1); // NB
//for (var col=0; col<COLS; col++) {
// unPlaceTop(col);
//}
}
}
function newGame() {
if (matchMade == 1) {
debug("stt");
gameActive = 1;
isdropping = 0;
moves=0;
rePlay();
whoGoesFirst();
}
}
function newMatchUp() {
if (confirm("Are you sure you want to Start a new match?")) {
gameActive = 1;
isdropping = 0;
rePlay();
redScore = 0;
bluScore = 0;
document.formo.redScoreBoard.value = redScore + "";
document.formo.bluScoreBoard.value = bluScore + "";
matchMade = 1;
whoGoesFirst();
}
}
function setMsg(whatToSay) {
window.status = whatToSay;
return true;
}
function debugend() {
debug("end");
}
function debug(thestr) {
if (thestr=="stt") {
debugstr ="";
timestt = new Date();
} else {
if (thestr=="end") {
timeend = new Date();
//debugstr += "\n[" + (timeend.getTime() - timestt.getTime()) + "ms]";
document.formo.comments.value = debugstr;
} else {
debugstr += thestr;
}
}
}
//
// Animation functions
//
// The Animation Object constructor
function Animation() {
this.imageNum = new Array(); // Array of indicies document.images to be changed
this.imageSrc = new Array(); // Array of new srcs for imageNum array
this.frameIndex = 0; // the frame to play next
this.alreadyPlaying = false; // semaphore to ensure we play smoothly
this.finalcall = ""; // what to call when animation finished
// Methods
this.getFrameCount = getframecount; // the total number of frames so far
this.moreFrames = moreframes; // tells us if there are more frames to play
this.addFrame = addframe; // add a frame to the animation
this.drawNextFrame = drawnextframe; // draws the next frame
this.startAnimation = startanimation; // start the animation if necessary
}
function finalcall(FuncToCall) {
this.finalcall = FuncToCall;
}
function getframecount() { return this.imageNum.length; }
function moreframes() { return this.frameIndex < this.getFrameCount(); }
function startanimation() {
if (!this.alreadyPlaying) {
theAnim.alreadyPlaying = true;
setTimeout('theAnim.drawNextFrame()',5);
}
}
function addframe(num, src) {
var theIndex = theAnim.imageNum.length;
theAnim.imageSrc[theIndex] = src;
theAnim.imageNum[theIndex] = num;
theAnim.startAnimation();
}
function drawnextframe() {
if (theAnim.moreFrames()) {
document.images[ theAnim.imageNum[theAnim.frameIndex] ].src = theAnim.imageSrc[theAnim.frameIndex];
theAnim.frameIndex++;
setTimeout('theAnim.drawNextFrame()', 20);
} else {
theAnim.alreadyPlaying = false;
if (this.finalcall.length>0) {
setTimeout(this.finalcall,5);
}
}
}
// End -->
</script>
<!-- #EndEditable -->
<meta name="keywords" content="math, maths, mathematics, school, homework, education" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pics-label" content='(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://www.mathsisfun.com" r (SS~~000 1))' />
<link rel="stylesheet" type="text/css" href="../style2.css" />
<script src="../main.js" type="text/javascript"></script>
</head>
<body>
<div class="centerfull">
<div id="midfull">
<div id="header" role="banner">
<div id="searchBox" role="search">
<form action="https://www.mathsisfun.com/sphider/search.php" method="get">
<input type="text" name="query" value="" id="searchFld" />
<input type="submit" value="Search" name="submit" id="searchBtn" />
<input type="hidden" name="search" value="1" />
</form>
</div>
<div id="linkto">
<script type="text/javascript">getAdRight2();</script>
</div>
</div>
<div id="menu" class="centerfull" role="navigation">
<script type="text/javascript">getMenuTop();</script>
</div>
<div id="adhid2">
<div id="showads1"><a href="javascript:showads()">Show Ads</a></div>
<div id="hideads1"><a href="javascript:hideads()">Hide Ads</a><br /><a href="../about-ads.html">About Ads</a></div>
</div>
<div id="topads" class="centerfull noprint">
<script type="text/javascript">getAdTop();</script>
</div>
<div id="content" role="main"> <!-- #BeginEditable "Body" -->
<h1 align="center">Four In A Line</h1>
<center>
<p><span class="large"><font color="blue">To win: connect 4 pieces in a row, column
or diagonally</font></span><br />
(We have gone <a href="connect-crazy.html">Connect Crazy!</a> see all the new versions)</p>
<form name="formo" id="formo">
<table border="0">
<tr>
<td valign="top" bgcolor="#FFFFCC">
<table border="0">
<tr>
<td width="128">&nbsp;</td>
<td width="144">&nbsp;</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="reStartButton" value="New Game" onClick="newGame()" class="blacktext" />
</td>
</tr>
<tr>
<td width="128">&nbsp; </td>
<td width="144">&nbsp; </td>
</tr>
<tr>
<td align="right" width="128">
<div class="blacktext">Difficulty</div>
</td>
<td width="144">
<select name="difficulty">
<option value="Too Easy">Too Easy</option>
<option value="Easy" selected="selected">Easy</option>
<option value="Medium">Medium</option>
<option value="Hard">Hard</option>
</select>
</td>
</tr>
<tr>
<td width="128"></td>
<td width="144">&nbsp;</td>
</tr>
<tr>
<td align="right" width="128">
<div class="redtext">Red Player is a</div>
</td>
<td width="144">
<select name="redtype">
<option value="Human" selected="selected">Human</option>
<option value="Computer">Computer</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="128">
<div class="redtext">called</div>
</td>
<td width="144">
<input type="text" name="redplayer" value="User" />
</td>
</tr>
<tr>
<td width="128">&nbsp;</td>
<td width="144">&nbsp;</td>
</tr>
<tr>
<td align="right" width="128">
<div class="bluetext">Blue Player is a</div>
</td>
<td width="144">
<select name="blktype">
<option value="Human">Human</option>
<option value="Computer" selected="selected">Computer</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="128">
<div class="bluetext">called</div>
</td>
<td width="144">
<input type="text" name="blkplayer" value="Computer" />
</td>
</tr>
<tr>
<td width="128">&nbsp;</td>
<td width="144">&nbsp;</td>
</tr>
<tr>
<td width="128">
<div class="blacktext" align="right">Score</div>
</td>
<td width="144">
<table border="0" width="107">
<tr align="center">
<td>
<div class="redtext">Red</div>
</td>
<td>&nbsp;</td>
<td>
<div class="bluetext">Blue</div>
</td>
</tr>
<tr align="center">
<td>
<input type="text" name="redScoreBoard" style="font-size: 16px; font-family: Comic Sans MS, Verdana;" size="3" />
</td>
<td><b>:</b></td>
<td>
<input type="text" name="bluScoreBoard" style="font-size: 16px; font-family: Comic Sans MS, Verdana;" size="3" />
</td>
</tr>
</table>
<input type="button" name="startButton" value="New Match" onClick="newMatchUp()" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" width="271">
<tr>
<td>
<div align="center">
<input type="text" name="texter" style="font-size: 18px; font-family: Comic Sans MS, Verdana;" size="25" />
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFF99">
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4clearness.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
<tr>
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(1)" onMouseOver="placeTop(1); setMsg(''); return true" onMouseOut="unPlaceTop(1)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(2)" onMouseOver="placeTop(2); setMsg(''); return true" onMouseOut="unPlaceTop(2)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(3)" onMouseOver="placeTop(3); setMsg(''); return true" onMouseOut="unPlaceTop(3)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(4)" onMouseOver="placeTop(4); setMsg(''); return true" onMouseOut="unPlaceTop(4)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(5)" onMouseOver="placeTop(5); setMsg(''); return true" onMouseOut="unPlaceTop(5)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
<td><a href="javascript:void dropIt(6)" onMouseOver="placeTop(6); setMsg(''); return true" onMouseOut="unPlaceTop(6)"><img border="0" src="images/c4fillempty.gif" height="50" width="50" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</center>
<div align="center"><br />
</div>
<h2>Four In A Line Rules</h2>
<ul>
<li class="Larger">Point the cursor over the row you wish to drop your piece in.
</li><li class="Larger">Left click to drop your piece
</li><li class="Larger">When you can connect four pieces vertically, horizontally or diagonally you win
</li></ul>
<h2>History</h2>
<p>This game is centuries old, Captain James Cook used to play it with his fellow officers on his long voyages, and so it has also been called &quot;Captain's Mistress&quot;. Milton Bradley (now owned by Hasbro) published a version of this game called &quot;Connect Four&quot; in 1974.</p>
<p>Other names for this this game are &quot;Four-in-a-Row&quot; and &quot;Plot Four&quot;. </p>
<div class="related">
<a href="index.html">Games Index</a>
<a href="games-1.html">Games 1</a>
<a href="games-2.html">Games 2</a>
<a href="games-3.html">Games 3</a>
<a href="games-4.html">Games 4</a>
</div>
<script language="JavaScript" type="text/javascript">AutoStart();</script>
<!-- #EndEditable -->
<div id="adend" class="centerfull noprint">
<script type="text/javascript">getAdEnd();</script>
</div>
</div>
<div id="footer" class="centerfull noprint">
<div class="footFriend"><a href="javascript:tellAFriend();"></a></div>
<div class="footFave"><a href="javascript:addFavorites();"></a></div>
<div class="footLink"><a href="javascript:linkToUs();"></a></div>
</div>
<div id="foot-menu" class="centerfull"><a href="../search/search.html">Search</a> :: <a href="../links/index.html">Index</a> :: <a href="../aboutmathsisfun.html">About</a> :: <a href="../contact.html">Contact</a> :: <a href="javascript:Contribute()">Contribute</a> :: <a href="javascript:Citation()">Cite This Page</a> :: <a href="../Privacy.html">Privacy</a> <br />
<br />
<span class="tiny">Copyright &copy; 2014 MathsIsFun.com</span> <br />
</div>
</div>
</div>
<div class="left column zneg">
<div id="leftcol"></div>
</div>
<div class="right column zneg">
<div id="rightcol"></div>
</div>
<script type="text/javascript">getBodyEnd();</script>
</body>
<!-- #EndTemplate -->
<!-- Mirrored from www.mathsisfun.com/games/connect4-javascript.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 01:01:27 GMT -->
</html>