topical media & game development

talk show tell print

game-javascript-casual-connect-4-game.htm / htm



  
  <!-- 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  -->
  
  <center>
  <form name="open-connect4">
  <input type=button value="Play Connect 4" onClick="window.open('connect-4.html','connect4','top=100,left=100,width=575,height=400');">
  </form>
  </center>
  
  <!-- 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: white}
  IMG {border: 0}
  A:visited {color: blue}
  FONT.score {color: blue; font-size: large}
  FONT.redscore {color: red}
  FONT.blackscore {color: black}
  </STYLE>
  
  <SCRIPT LANGUAGE="JavaScript">
  
  <!-- This script and many more are available free online at -->
  <!-- The JavaScript Source!! http://javascript.internet.com -->
  
  <!-- 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="http://javascriptsource.com">The JavaScript Source</a></font>
  </center><p>
  
  <!-- Script Size:  17.21 KB -->
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.