[4Gewinnt]

JavaScript- Variante des beliebten Spiels "4 Gewinnt".

[Code]

[zwischen <HEAD> und </HEAD>]

<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>

[zwischen <BODY> und </BODY>]

<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>

[Autor]

IRT.org

[Download]

Copyright © 1998- Nightfire Webworker Archiv Script No: 453