Начало
Игры
Соединитесь 4
Это - версия JavaScript 2 игроков, Соединяются 4. Игроки сменяются, бросая части в колонны правления. Компьютерные следы выигрывают и тянут автоматически индивидуально набор матча или игра.
JavaScript Games: Соединитесь 4
<!-- 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"> <! > <! > <!-- 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 --> <!-- ../img/connect-4/connect-4.zip --> <p><center> <font face="arial, helvetica" SIZE="-2">Free JavaScripts provided<br> by <a href="http://">JavaScript </a></font> </center><p> <!-- Script Size: 17.21 KB -->