[Beschreibung]
JavaScript- Variante des beliebten Spiels "4 Gewinnt".
[Kompatibilität]
[Code]
<SCRIPT language=JavaScript> <!-- // <!-- Copyright (C) 1999, Keith Drakard - kif@irt.org This program is distributed under the terms of the WebGames License at http://www.irt.org/games/license.txt --> // static global variables var maxheight= 6; // dynamic globals var selected= -1; var player= 1; var running= 1; var height= maxheight+1; var gone= 0; function go(x) { // this "trap" function exists to stop people clicking // quickly on another column while a disc is already // falling and screwing the game up... :) if (running && !gone) { fall(x); } } function fall(x) { // drop the current player's disc down column x // until it reaches the bottom or another disc if (gravity(x, height)) { // the space below is either off the board or another disc if (gone) { // then check for 4-in-a-row from this position if (check(x, height)) { eval('tmp= document.connect.score'+player+'.value'); tmp= tmp*1; eval('document.connect.score'+player+'.value= tmp+1'); alert("Congratulations, player "+player); running= 0; // it would be nice to highlight the winning line(s) - // you'll need to use CSS or some more graphics and // fiddle with the line-checking functions below... } else { height= maxheight+1; swap_player(); gone= 0; } } } else { // nothing encountered if (height<= maxheight) document.images["x"+x+"y"+height].src= disc[0].src; height--; gone= 1; document.images["x"+x+"y"+height].src= disc[player].src; setTimeout('fall('+x+')', 100); } } function check(x, y) { // this isn't the most elegant solution, but it beats checking _every_ square... four= 0; for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y, four); } // check left && right if (four> 3) return(1); four= 0; for (sq= -3; sq<= 0; sq++) { four= chk(x, y+ sq, four); } // check down if (four> 3) return(1); four= 0; for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y+ sq, four); } // check left-down && right-up if (four> 3) return(1); four= 0; for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y- sq, four); } // check left-up && right-down if (four> 3) return(1); return(0); } function gravity(x, y) { y--; if (y< 1 || (document.images["x"+x+"y"+y].src!= disc[0].src)) return(1); else return(0); } function chk(x, y, f) { if (x>0 && x<8 && y>0 && y<maxheight+1) { // square within board limits, so see if it matches the player if (document.images["x"+x+"y"+y].src== disc[player].src) return(f+1); else { if (f>= 4) return(f); else return(0); } } else return(f); } function select(x) { if (running) { if (x== -1) { if (selected!= -1) document.images["drop"+selected].src= drop[0].src; selected= -1; } else { if (selected!= -1) document.images["drop"+selected].src= drop[0].src; selected= x; document.images["drop"+selected].src= drop[1].src; } } } function preload() { if (document.images) { drop= new makeArray(2); drop[0].src= "images/dropper.gif"; drop[1].src= "images/dropper2.gif"; disc= new makeArray(3); disc[0].src= "images/disc0.gif"; disc[1].src= "images/disc1.gif"; disc[2].src= "images/disc2.gif"; sel= new makeArray(2); sel[0].src= "images/blank.gif"; sel[1].src= "images/notblank.gif"; } else { alert("Sorry, this game needs to run on a browser\nwhich supports the image object."); } } function newgame() { // this just blanks the tiles: // // for (x=1; x<=7; x++) { // for (y=maxheight; y>0; y--) { // document.images["x"+x+"y"+y].src= disc[0].src; // } // } // but this makes them "drop" out the bottom: // fall_end(6); if (selected!= -1) document.images["drop"+selected].src= drop[0].src; height= maxheight+1; swap_player(); gone= 0; running= 1; } function fall_end(loop) { for (y=1; y<=loop; y++) { for (x=1; x<=7; x++) { if (y== maxheight) { document.images["x"+x+"y"+y].src= disc[0].src; } else { document.images["x"+x+"y"+y].src= document.images["x"+x+"y"+(y+1)].src; } } } loop--; if (loop) setTimeout('fall_end('+loop+')', 50); } function swap_player() { // just a "decorative" function really... document.images["pa"+player].src= sel[0].src; document.images["pb"+player].src= sel[0].src; player= (3- player); document.images["pa"+player].src= sel[1].src; document.images["pb"+player].src= sel[1].src; } // The following functions were written by Martin Webb at http://www.irt.org/ function makeArray(n) { this.length= n; for (i=0; i<n; i++) { this[i] = new Image(); } return this; } //--></SCRIPT>
<SCRIPT language=JavaScript><!-- // // I'll use CSS one day and stop all this table malarky... :) var output= ''; output+= '<TABLE CELLPADDING=0 CELLSPACING=8 BORDER=0><TR>'; output+= '<TR><TD ALIGN=center><H1>Connect Four</H1></TD><TD> </TD></TR>'; // create the board output+= '<TD><TABLE CELLPADDING=2 CELLSPACING=0 BORDER=0 BGCOLOR="#0193ff">'; output+= '<TR>'; for (var x=1; x<=7; x++) { output+= '<TD><A HREF="javascript:go('+x+');" onMouseOver="select('+x+');" onMouseOut="select(-1);" onFocus="blur();">'; output+= '<IMG SRC="images/dropper.gif" NAME="drop'+x+'" WIDTH=60 HEIGHT=40 ALT="" BORDER=0></A></TD>'; } output+= '</TR><TR>'; for (var x=1; x<=7; x++) { output+= '<TD ALIGN=center BGCOLOR="#0193ff"><FONT FACE="Arial, Helvetica, sans-serif" SIZE=4><B>'+x+'</B></FONT><BR> </TD>'; } output+= '</TR>'; for (var y=maxheight; y>0; y--) { output+= '<TR>'; for (var x=1; x<=7; x++) { output+= '<TD><A HREF="javascript:go('+x+');" onMouseOver="select('+x+');" onMouseOut="select(-1);" onFocus="blur();">'; output+= '<IMG SRC="images/disc0.gif" NAME="x'+x+'y'+y+'" WIDTH=60 HEIGHT=60 ALT="" BORDER=0></A></TD>'; } output+= '</TR>'; } output+= '<TR><TD COLSPAN=7 BGCOLOR="#0193ff"> </TD></TR>'; output+= '</TABLE></TD>'; // create the form for feedback to user (whose go, new game, score) output+= '<TD VALIGN=top><br><br><br><FORM NAME="connect"><TABLE CELLPADDING=2 CELLSPACING=0 BORDER=0 BGCOLOR="#0193ff">'; output+= '<TR><TD ALIGN=center><FONT FACE="Arial, Helvetica, sans-serif" SIZE=2>Player 1</FONT></TD>'; output+= '<TD ALIGN=center><FONT FACE="Arial, Helvetica, sans-serif" SIZE=2>Player 2</FONT></TD></TR>'; output+= '<TR><TD ALIGN=center><IMG SRC="../common/notblank.gif" NAME="pa1" WIDTH=60 HEIGHT=5 ALT="" BORDER=0><BR>'; output+= '<IMG SRC="images/disc1.gif" WIDTH=60 HEIGHT=60 ALT=" Player 1 " BORDER=0><BR>'; output+= '<IMG SRC="../common/notblank.gif" NAME="pb1" WIDTH=60 HEIGHT=5 ALT="" BORDER=0></TD>'; output+= '<TD ALIGN=center><IMG SRC="../common/blank.gif" NAME="pa2" WIDTH=60 HEIGHT=5 ALT="" BORDER=0><BR>'; output+= '<IMG SRC="images/disc2.gif" WIDTH=60 HEIGHT=60 ALT=" Player 2 " BORDER=0><BR>'; output+= '<IMG SRC="../common/blank.gif" NAME="pb2" WIDTH=60 HEIGHT=5 ALT="" BORDER=0></TD></TR>'; output+= '<TR><TD ALIGN=center><INPUT TYPE="text" NAME="score1" SIZE="3" VALUE=0 onFocus="blur();"></TD>'; output+= '<TD ALIGN=center><INPUT TYPE="text" NAME="score2" SIZE="3" VALUE=0 onFocus="blur();"></TD></TR>'; output+= '<TR><TD COLSPAN=2 ALIGN=center><BR><INPUT TYPE="button" VALUE=" New Game " onClick="newgame();">'; output+= '<BR> </TD></TR><TR><TD COLSPAN=2 BGCOLOR="#000000" ALIGN=center>'; output+= '<BR><BR><FONT FACE="Arial, Helvetica, sans-serif" SIZE=1>'; output+= '<A HREF="mailto:kif\@irt.org">Keith Drakard</A><br>v0.25 on 16-Sept-98'; output+= '<br><br><A HREF="../../all.htm">Back to WebGames</A></FONT></TD></TR>'; output+= '</TABLE></FORM></TD>'; output+= '</TR></TABLE>'; document.write(output); preload(); //--></SCRIPT> </FONT></CENTER>
IRT.org