Kommenter en stump kode...
En af mine venner har bedt mig bede Jer om at kommentere (altså forklare funktionerne i koden - ligesom det allerede er gjort, bare grundigere) dette JavaScript-spil, som han har fundet på www.javascripts.com. Han er ved at lære JS, og kigger i den forbindelse på andres kode, men det gør det jo en del lettere, hvis koden er ordentligt kommenteret, så man kan se hvad hver funktion gør. Derfor ønskes en ordentlig kommentering af hele den følgende kode.- Parazite og ven.
<html>
<head>
<title>C O N N E C T 4 by Sparhawk</title>
<script language=\"JavaScript\">
/********************************************************************************
C O N N E C T 4
A game written in JavaScript and HTML by J.C.C. aka Sparhawk (elenium@hotmail.com).
Permission is given for general use of this game on any non-professional sites
if, and only if, this header and the displayed copyright information are left
unaltered.
A copy of the .zip file must be placed into the same directory as the rest of
the files so that the link to it works.
Any questions, or to report errors in the script, e-mail me at elenium@hotmail.com.
*********************************************************************************/
/* moving window to top corner and adjusting to full screen */
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
/* THE BOARD IS SET UP THIS WAY: */
/* slot[x][y] */
/* x = left to right */
/* y = bottom to top */
/* values of slot[x][y] = */
/* 0 = empty */
/* 1 = red */
/* 2 = black */
/* setting up the array board */
/* creating an array (each \'slot\' is the game board slot) */
var slot = new Array();
slot[0] = new Array();
slot[1] = new Array();
slot[2] = new Array();
slot[3] = new Array();
slot[4] = new Array();
slot[5] = new Array();
slot[6] = new Array();
/* setting up global variables */
/* 1 = red, 2 = black */
// currplayer = current player\'s turn
var currplayer = 1;
// haveWinner = 0 if no one has won, 1 if someone has won
var haveWinner = 0;
// player = player\'s names, set by the GetNames() function
var player = new Array();
/* variable array for display */
/* piece = filenames of player\'s pieces */
var piece = new Array();
piece[0] = \"emptyslot.gif\";
piece[1] = \"redslot.gif\";
piece[2] = \"blackslot.gif\";
/* creating and zeroing each slot\'s individual holes */
var x, y;
for (x=0; x<7; x++) {
for (y=0; y<7; y++) {
slot[x][y] = 0;
}
}
function DropPiece(position)
{
var placed = 0;
for (y=1; y<7; y++) {
if (placed == 0) {
if (slot[position][y] == 0) {
slot[position][y] = currplayer;
placed = 1;
}
}
}
if (placed == 1) {
SwitchPlayer();
DisplayBoard();
}
}
function SwitchPlayer()
{
currplayer = 3-currplayer;
}
function DisplayBoard()
{
var board =\"\";
/* displaying the board */
board = \"<div style=\'position:absolute; left:36px; top:190px\'><img src=\'connect4side.gif\'></div>\";
board = board + \"<div style=\'position:absolute; left:50px; top:150px\'><table cellspacing=\'0\' cellpadding=\'0\' border=\'0\'>\";
board = board + \"<tr><td><a href=\'java script:DropPiece(0);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(1);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(2);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(3);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(4);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(5);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(6);\'><img src=\'clickherearrow.gif\' border=\'0\'></a></td>\";
board = board + \"<tr><td><a href=\'java script:DropPiece(0);\'><img src=\'\"+piece[ slot[0][6] ]+\"\' border=\'0\'></td><td><a href=\'java script:DropPiece(1);\'><img src=\'\"+piece[ slot[1][6] ]+\"\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(2);\'><img src=\'\"+piece[ slot[2][6] ]+\"\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(3);\'><img src=\'\"+piece[ slot[3][6] ]+\"\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(4);\'><img src=\'\"+piece[ slot[4][6] ]+\"\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(5);\'><img src=\'\"+piece[ slot[5][6] ]+\"\' border=\'0\'></a></td><td><a href=\'java script:DropPiece(6);\'><img src=\'\"+piece[ slot[6][6] ]+\"\' border=\'0\'></a></td>\";
board = board + \"<tr><td><img src=\'\"+piece[ slot[0][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[1][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[2][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[3][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[4][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[5][5] ]+\"\'></td><td><img src=\'\"+piece[ slot[6][5] ]+\"\'></td>\";
board = board + \"<tr><td><img src=\'\"+piece[ slot[0][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[1][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[2][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[3][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[4][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[5][4] ]+\"\'></td><td><img src=\'\"+piece[ slot[6][4] ]+\"\'></td>\";
board = board + \"<tr><td><img src=\'\"+piece[ slot[0][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[1][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[2][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[3][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[4][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[5][3] ]+\"\'></td><td><img src=\'\"+piece[ slot[6][3] ]+\"\'></td>\";
board = board + \"<tr><td><img src=\'\"+piece[ slot[0][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[1][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[2][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[3][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[4][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[5][2] ]+\"\'></td><td><img src=\'\"+piece[ slot[6][2] ]+\"\'></td>\";
board = board + \"<tr><td><img src=\'\"+piece[ slot[0][1] ]+\"\' border=\'0\'></td><td><img src=\'\"+piece[ slot[1][1] ]+\"\'></td><td><img src=\'\"+piece[ slot[2][1] ]+\"\'></td><td><img src=\'\"+piece[ slot[3][1] ]+\"\'></td><td><img src=\'\"+piece[ slot[4][1] ]+\"\'></td><td><img src=\'\"+piece[ slot[5][1] ]+\"\'></td><td><img src=\'\"+piece[ slot[6][1] ]+\"\'></td>\";
board = board + \"</table></div><div style=\'position:absolute; left:400px; top:190px\'><img src=\'connect4side.gif\'></div>\";
/* displaying the current player info */
board = board + \"<div style=\'position:absolute; left:60; top:515\'><b>\"+player[currplayer] + \"\\\'s Turn</b></div>\";
showboard.innerHTML = board;
CheckForWinner();
}
function CheckForWinner()
{
var winslotsx, winslotsy, screen;
winslotsx= new Array();
winslotsy= new Array();
haveWinner = 0;
/* check for horizontal winner */
for (x=0; x<4; x++) {
for (y=1; y<6; y++) {
if (slot[x][y]>0) {
if (slot[x][y]==slot[x+1][y]) {
if (slot[x+1][y]==slot[x+2][y]) {
if (slot[x+2][y]==slot[x+3][y]) {
haveWinner = slot[x][y];
winslotsx[0] = x;
winslotsx[1] = x+1;
winslotsx[2] = x+2;
winslotsx[3] = x+3;
winslotsy[0] = y;
winslotsy[1] = y;
winslotsy[2] = y;
winslotsy[3] = y;
}
}
}
}
}
}
/* check for vertical winner */
for (x=0; x<7; x++) {
for (y=1; y<3; y++) {
if (slot[x][y]>0) {
if (slot[x][y]==slot[x][y+1]) {
if (slot[x][y+1]==slot[x][y+2]) {
if (slot[x][y+2]==slot[x][y+3]) {
haveWinner = slot[x][y];
winslotsx[0] = x;
winslotsx[1] = x;
winslotsx[2] = x;
winslotsx[3] = x;
winslotsy[0] = y;
winslotsy[1] = y+1;
winslotsy[2] = y+2;
winslotsy[3] = y+3;
}
}
}
}
}
}
/* check for diagonal left-bottom to right-top winner */
for (x=0; x<4; x++) {
for (y=1; y<4; y++) {
if (slot[x][y]>0) {
if (slot[x][y]==slot[x+1][y+1]) {
if (slot[x+1][y+1]==slot[x+2][y+2]) {
if (slot[x+2][y+2]==slot[x+3][y+3]) {
haveWinner = slot[x][y];
winslotsx[0] = x;
winslotsx[1] = x+1;
winslotsx[2] = x+2;
winslotsx[3] = x+3;
winslotsy[0] = y;
winslotsy[1] = y+1;
winslotsy[2] = y+2;
winslotsy[3] = y+3;
}
}
}
}
}
}
/* check for diagonal left-top to right-bottom winner */
for (x=3; x<7; x++) {
for (y=1; y<3; y++) {
if (slot[x][y]>0) {
if (slot[x][y]==slot[x-1][y+1]) {
if (slot[x-1][y+1]==slot[x-2][y+2]) {
if (slot[x-2][y+2]==slot[x-3][y+3]) {
haveWinner = slot[x][y];
winslotsx[0] = x;
winslotsx[1] = x-1;
winslotsx[2] = x-2;
winslotsx[3] = x-3;
winslotsy[0] = y;
winslotsy[1] = y+1;
winslotsy[2] = y+2;
winslotsy[3] = y+3;
}
}
}
}
}
}
/* checking for draw */
if (slot[0][6]>0) {
if (slot[1][6]>0) {
if (slot[2][6]>0) {
if (slot[3][6]>0) {
if (slot[4][6]>0) {
if (slot[5][6]>0) {
if (slot[6][6]>0) {
haveWinner=3;
winslotsx[0] = -1;
winslotsx[1] = -1;
winslotsx[2] = -1;
winslotsx[3] = -1;
winslotsy[0] = -1;
winslotsy[1] = -1;
winslotsy[2] = -1;
winslotsy[3] = -1;
}
}
}
}
}
}
}
/* if there is a winner, displays winner\'s name and offers new game */
if (haveWinner>0) {
if (haveWinner<3) {
screen = \"<div style=\'position:absolute; left:36px; top:110px\'>\";
screen = screen + player[haveWinner] + \": You won the game! \"+player[3-haveWinner]+\", you start the next round!\";
screen = screen + \"<center><a href=\'java script:ResetBoard()\'><img src=\'connect4startgame.gif\'></a></center></div>\";
showboard.innerHTML = screen;
}
}
if (haveWinner==3) {
screen = \"DRAW!\";
screen = screen + \"<center><a href=\'java script:ResetBoard()\'><img src=\'connect4startgame.gif\'></a></center></div>\";
showboard.innerHTML = screen;
}
}
function StartGame()
{
/* getting player\'s names */
var screen;
screen = \"<div style=\'position:absolute; left:36px; top:110px\'>\";
screen = screen + \"<a href=\'http://sparhawk.blinks.net\'><img src=\'sparhawkconnect4.gif\'></a><br>CONNECT 4: A JavaScript Game by J.C., aka Sparhawk<br>\";
screen = screen + \"Please enter your names. Red Player goes first.<br><form method=\'POST\' action=\'--WEBBOT-SELF--\' name=\'GrabNames\'>\";
screen = screen + \"Red Player: <input type=\'text\' name=\'player1\' size=\'35\' maxlength=\'35\'><br>\";
screen = screen + \"Black Player:<input type=\'text\' name=\'player2\' size=\'35\' maxlength=\'35\'><br>\";
screen = screen + \"</form></div>\";
screen = screen + \"<div style=\'position:absolute; left:36px; top:280px\'>Loading game graphics. Click on the \\\'Start Game\\\' button when it appears to begin the game.<br>\";
screen = screen + \"<img src=\'emptyslot.gif\' width=\'1\' height=\'1\'><img src=\'clickherearrow.gif\' width=\'1\' height=\'1\'><img src=\'blackslot.gif\' width=\'1\' height=\'1\'>\";
screen = screen + \"<img src=\'redslot.gif\' width=\'1\' height=\'1\'><img src=\'connect4side.gif\' width=\'1\' height=\'1\'>\";
screen = screen + \"<a href=\'java script:SaveNames()\'><img src=\'connect4startgame.gif\'></a><br>\";
screen = screen + \"Feel free to use this game on your web-site. <br>You must leave it unaltered as explained in the file.<br>\";
showboard.innerHTML = screen;
}
function SaveNames()
{
player[1] = document.GrabNames.player1.value;
player[2] = document.GrabNames.player2.value;
if (player[1]==\"\") player[1] = \"Mr. Redd\";
if (player[2]==\"\") player[2] = \"Mr. Black\";
DisplayBoard();
}
function ResetBoard()
{
/* zeroing each slot\'s individual holes */
var x, y;
for (x=0; x<7; x++) {
for (y=0; y<7; y++) {
slot[x][y] = 0;
}
}
/* restarting the game */
DisplayBoard();
}
</script>
</head>
<body onLoad=\"this.scroll(0,100)\">
<SPAN ID=\"showboard\" STYLE=\"position:absolute; left: 0px; top: 0px; width: 640px; height: 350px;\"></SPAN></div>
<br><BR><BR><BR><BR><BR><BR><BR><BR>
<script>StartGame();</script>
</body>
</html>
