mirror of
https://github.com/jakejarvis/my-first-website.git
synced 2025-04-26 06:35:22 -04:00
355 lines
17 KiB
HTML
355 lines
17 KiB
HTML
<html>
|
|
<head>
|
|
<title>Connect 4</title>
|
|
</head>
|
|
<body bgcolor="Cornsilk">
|
|
<center><h1>Connect-4</h1><br><hr><br>
|
|
<!-- SIX STEPS TO INSTALL CONNECT 4:
|
|
|
|
1. Copy the coding into your Connect 4 Opener page
|
|
2. Create a new document, save it as connect-4.html
|
|
3. Paste the next code into HEAD of your HTML document
|
|
4. Add the onLoad event handler into the BODY tag
|
|
5. Put the last coding into the BODY of your HTML document
|
|
6. Be sure to upload all the game images to your site -->
|
|
|
|
<!-- STEP ONE: Paste this code into your opener page -->
|
|
|
|
|
|
<!-- STEP TWO: Create a new document, save it as connect-4.html -->
|
|
|
|
<!-- STEP THREE: Put this in the HEAD of the connect-4.html page -->
|
|
|
|
<HEAD>
|
|
|
|
<STYLE TYPE="text/css">
|
|
BODY{background-color: Cornsilk}
|
|
IMG {border: 0}
|
|
A:visited {color: blue}
|
|
FONT.score {color: blue; font-size: large}
|
|
FONT.redscore {color: red}
|
|
FONT.blackscore {color: black}
|
|
</STYLE>
|
|
|
|
<!-- This script and many more are available free online at -->
|
|
<!-- The JavaScript Source!! http://javascript.internet.com -->
|
|
|
|
<SCRIPT LANGUAGE="JavaScript">
|
|
|
|
<!-- Begin
|
|
var vals = new Array()
|
|
var gameActive = 0
|
|
function rePlay() {
|
|
if (gameActive == 1) {
|
|
document.formo.redScoreBoard.value = redScore + ""
|
|
document.formo.blackScoreBoard.value = blackScore + ""
|
|
clearBoard()
|
|
}
|
|
for (var c1 = 0; c1 <= 6; c1++) {
|
|
vals[c1] = 0
|
|
}
|
|
}
|
|
|
|
var redSpot = new Image()
|
|
var blackSpot = new Image()
|
|
var emptySpot = new Image()
|
|
var emptyChecker = new Image()
|
|
var redChecker = new Image()
|
|
var blackChecker = new Image()
|
|
|
|
redSpot.src = "fillred.gif"
|
|
blackSpot.src = "fillblack.gif"
|
|
emptySpot.src = "fillempty.gif"
|
|
emptyChecker.src = "clearness.gif"
|
|
redChecker.src = "redchecker.gif"
|
|
blackChecker.src = "blackchecker.gif"
|
|
|
|
var whosTurn = "red"
|
|
var whosTurnSpot = new Image()
|
|
var whosTurnChecker = new Image()
|
|
whosTurnSpot.src = redSpot.src
|
|
whosTurnChecker.src = redChecker.src
|
|
|
|
function clearBoard() {
|
|
for (var a = 7; a <= 48; a++) {
|
|
document.images[a].src = emptySpot.src
|
|
}
|
|
}
|
|
function placeTop(picToPlace) {
|
|
if (gameActive == 1) {
|
|
document.images[picToPlace].src = whosTurnChecker.src
|
|
}
|
|
}
|
|
function unPlaceTop(picToUnplace) {
|
|
if (gameActive == 1) {
|
|
document.images[picToUnplace].src = emptyChecker.src
|
|
}
|
|
}
|
|
var placeLoc
|
|
function dropIt(whichRow) {
|
|
if (gameActive == 1) {
|
|
//alert("func dropIt")
|
|
placeLoc = (7 - vals[whichRow]) * 7 -7 + whichRow
|
|
if (vals[whichRow] < 6) {
|
|
document.images[placeLoc].src = whosTurnSpot.src
|
|
vals[whichRow] = vals[whichRow] + 1
|
|
checkForWinner(whosTurn)
|
|
switchTurns()
|
|
placeTop(whichRow)
|
|
}
|
|
}
|
|
}
|
|
function whoGoesFirst() {
|
|
whosTurn = whosFirst
|
|
switchTurns()
|
|
if (whosFirst == "red") {
|
|
whosFirst = "black"
|
|
} else {
|
|
whosFirst = "red"
|
|
}
|
|
}
|
|
function switchTurns() {
|
|
if (gameActive == 1) {
|
|
//alert("func switchTurns")
|
|
if (whosTurn == "red") {
|
|
whosTurn = "black"
|
|
whosTurnSpot.src = blackSpot.src
|
|
whosTurnChecker.src = blackChecker.src
|
|
document.formo.texter.value = blackPlayer + "'s turn."
|
|
} else {
|
|
whosTurn = "red"
|
|
whosTurnSpot.src = redSpot.src
|
|
whosTurnChecker.src = redChecker.src
|
|
document.formo.texter.value = redPlayer + "'s turn."
|
|
}
|
|
}
|
|
}
|
|
var redPlayer
|
|
var blackPlayer
|
|
var whosFirst
|
|
function askForNames() {
|
|
if (gameActive == 1) {
|
|
//alert("func askForNames")
|
|
redScore = 0
|
|
blackScore = 0
|
|
document.formo.redScoreBoard.value = redScore + ""
|
|
document.formo.blackScoreBoard.value = blackScore + ""
|
|
matchMade = 1
|
|
redPlayer = prompt("What is the name of the red player?", "")
|
|
blackPlayer = prompt("What is the name of the black player?", "")
|
|
whosFirst = prompt("Which player is going first?", "")
|
|
if (redPlayer == null || redPlayer == "") {
|
|
redPlayer = "Red Player"
|
|
}
|
|
if (blackPlayer == null || blackPlayer == "") {
|
|
blackPlayer = "Black Player"
|
|
}
|
|
if (whosFirst == "r" || whosFirst == "red" || whosFirst == redPlayer) {
|
|
document.formo.texter.value = redPlayer + "'s turn."
|
|
whosTurn = "black"
|
|
switchTurns()
|
|
whosFirst = "red"
|
|
} else {
|
|
document.formo.texter.value = blackPlayer + "'s turn."
|
|
whosTurn = "red"
|
|
switchTurns()
|
|
whosFirst = "black"
|
|
}
|
|
}
|
|
}
|
|
var lookForSrc
|
|
var redScore = 0
|
|
var blackScore = 0
|
|
var someOneWon
|
|
var rowsFull = 0
|
|
function checkForWinner(colorToCheck) {
|
|
if (gameActive == 1) {
|
|
//alert("func checkForWinner")
|
|
someOneWon = 0
|
|
if (colorToCheck == "red") {
|
|
lookForSrc = redSpot.src
|
|
}
|
|
if (colorToCheck == "black") {
|
|
lookForSrc = blackSpot.src
|
|
}
|
|
rowsFull = 0
|
|
//alert("LookForSrc = " + lookForSrc + ". And document.images[7].src = " + document.images[7].src)
|
|
for (var counter = 7; counter <= 48; counter++) {
|
|
if (document.images[counter].src == lookForSrc) {
|
|
if ((counter + 3 <= 48
|
|
&& counter != 11 && counter != 12 && counter != 13
|
|
&& counter != 18 && counter != 19 && counter != 20
|
|
&& counter != 25 && counter != 26 && counter != 27
|
|
&& counter != 32 && counter != 33 && counter != 34
|
|
&& counter != 39 && counter != 40 && counter != 41
|
|
&& document.images[counter + 1].src == lookForSrc
|
|
&& document.images[counter + 2].src == lookForSrc
|
|
&& document.images[counter + 3].src == lookForSrc)
|
|
|| (counter + 3 * 7 <= 48
|
|
&& document.images[counter + 7].src == lookForSrc
|
|
&& document.images[counter + 7*2].src == lookForSrc
|
|
&& document.images[counter + 7*3].src == lookForSrc)
|
|
|| (counter + 3 * 7 <= 48
|
|
&& counter != 11 && counter != 12 && counter != 13
|
|
&& counter != 18 && counter != 19 && counter != 20
|
|
&& counter != 25 && counter != 26 && counter != 27
|
|
&& document.images[counter + 7 + 1].src == lookForSrc
|
|
&& document.images[counter + 7*2 + 2].src == lookForSrc
|
|
&& document.images[counter + 7*3 + 3].src == lookForSrc)
|
|
|| (counter - 3 * 7 >= 7
|
|
&& counter != 32 && counter != 33 && counter != 34
|
|
&& counter != 39 && counter != 40 && counter != 41
|
|
&& counter != 46 && counter != 47 && counter != 48
|
|
&& document.images[counter - 7 + 1].src == lookForSrc
|
|
&& document.images[counter - 7*2 + 2].src == lookForSrc
|
|
&& document.images[counter - 7*3 + 3].src == lookForSrc)) {
|
|
for (var c2 = 0; c2<= 6; c2++) {
|
|
unPlaceTop(c2)
|
|
}
|
|
if (colorToCheck == "red") {
|
|
alert(redPlayer + " wins.")
|
|
redScore += 1
|
|
} else if (colorToCheck == "black") {
|
|
alert(blackPlayer + " wins.")
|
|
blackScore += 1
|
|
}
|
|
gameActive = 0
|
|
someOneWon = 1
|
|
counter = 49
|
|
document.formo.redScoreBoard.value = redScore + ""
|
|
document.formo.blackScoreBoard.value = blackScore + ""
|
|
}
|
|
}
|
|
}
|
|
if (someOneWon != 1) {
|
|
for (var poo = 0; poo <= 6; poo++) {
|
|
if (vals[poo] == 6) {
|
|
rowsFull += 1
|
|
}
|
|
}
|
|
if (rowsFull == 7) {
|
|
for (var c3 = 0; c3<= 6; c3++) {
|
|
unPlaceTop(c3)
|
|
}
|
|
gameActive = 0
|
|
alert("This game has reached a draw.")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var matchMade = 0
|
|
function newGame() {
|
|
if (matchMade == 1) {
|
|
gameActive = 1
|
|
rePlay()
|
|
whoGoesFirst()
|
|
}
|
|
}
|
|
function newMatchUp() {
|
|
if (confirm("Are you sure you want to Start a new match?")) {
|
|
gameActive = 1
|
|
rePlay()
|
|
askForNames()
|
|
}
|
|
}
|
|
function setMsg(whatToSay) {
|
|
window.status = whatToSay
|
|
return true
|
|
}
|
|
// End -->
|
|
</script>
|
|
</HEAD>
|
|
|
|
<!-- STEP FOUR: Put this onLoad event handler into the BODY tag -->
|
|
|
|
<BODY OnLoad="rePlay()">
|
|
|
|
<!-- STEP FIVE: Copy this code into the BODY of connect-4.html -->
|
|
|
|
<center>
|
|
<form name="formo">
|
|
<table cellspacing="0" cellpadding="0" border="0">
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="clearness.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="clearness.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="clearness.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="clearness.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="clearness.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="clearness.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="clearness.gif" height="50" width="50"></a></td>
|
|
<td align=right>Click to start --> <input type="button" name="startButton" value="New Match" onClick="newMatchUp()"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.gif" height="50" width="50"></A></td>
|
|
<td align=right><input type="button" name="reStartButton" value="New Game" onClick="newGame()"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.gif" height="50" width="50"></A></td>
|
|
<td align=right><input type="text" name="texter" size="20"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.gif" height="50" width="50"></A></td>
|
|
<td valign="bottom" align=right><font class="score">SCORE:</font><br><font class="redscore">Red</font> <font class="blackscore">Black</font></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.gif" height="50" width="50"></A></td>
|
|
<td valign="top" align=right><input type="text" name="redScoreBoard" size="3"><input type ="text" name="blackScoreBoard" size="3"></td>
|
|
</tr>
|
|
<tr>
|
|
<td><a href="javascript:void dropIt(0)" onMouseOver="placeTop(0); setMsg(''); return true" onMouseOut="unPlaceTop(0)"><img border="0" src="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.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="fillempty.gif" height="50" width="50"></A></td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</center>
|
|
|
|
<!-- STEP FOUR: Be sure to upload all the game images to your site -->
|
|
|
|
<!-- http://javascript.internet.com/img/connect-4/connect-4.zip -->
|
|
|
|
<p><center>
|
|
<font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br>
|
|
by <a href="#">The JavaScript Source</a></font>
|
|
</center><p>
|
|
|
|
<!-- Script Size: 17.21 KB -->
|
|
</body>
|
|
</html> |