Wer kennt es nicht? Wenn der Schulunterricht zu langweilig war, hat man die Karo-Hefte rausgeholt und "Käsekästchen" gespielt. Mit folgendem Script können Sie das Spiel in Ihre Webseite einbauen. Achten Sie bitte darauf, dass sich die Grafiken im korrekten Verzeichnis "images" befinden. Ansonsten müssen Sie das Script an den entsprechenden Stellen abändern. Los gehts:
Zwischen <HEAD> und </HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // static globals var maxheight = 9; var maxwidth = maxheight; var winscore = Math.round((maxheight * maxwidth / 2) + 0.5); // dynamic globals var player = 1; var won = 0; function newGame() { // sets all graphics back to default and clears scores won = 0; eval('document.squares.score1.value = 0'); eval('document.squares.score2.value = 0'); for (var y = 1; y <= maxheight; y ++ ) { for (var x = 1; x <= maxwidth; x ++ ) { document.images["x" + x + "y" + y].src = sqr[0].src; document.images["vx" + x + "vy" + y].src = ver[0].src; document.images["hx" + x + "hy" + y].src = hor[0].src; } } for (var a = 1; a <= maxheight; a ++ ) { onemore = maxheight + 1; document.images["vx" + onemore + "vy" + a].src = ver[0].src; document.images["hx" + a + "hy" + onemore].src = hor[0].src; } } function preload() { if (document.images) { sqr = new makeArray(3); sqr[0].src = "images/p0.gif"; sqr[1].src = "images/p1.gif"; sqr[2].src = "images/p2.gif"; ver = new makeArray(3); ver[0].src = "images/v0.gif"; ver[1].src = "images/v1.gif"; ver[2].src = "images/v2.gif"; hor = new makeArray(3); hor[0].src = "images/h0.gif"; hor[1].src = "images/h1.gif"; hor[2].src = "images/h2.gif"; sel = new makeArray(2); sel[0].src = "images/notsel.gif"; sel[1].src = "images/sel.gif"; } else { alert("Sorry, this game needs a browser which supports the image object."); } } function makeArray(n) { this.length = n; for (i = 0; i < n; i ++) { this[i] = new Image(); } return this; } function go (type, a, b) { // processes clicks on square verticals and horizontals... hit = 0; if (type == 1) { if (document.images["hx" + a + "hy" + b].src == hor[1].src) { alert("Already taken - try again"); return; } document.images["hx" + a + "hy" + b].src = hor[1].src; // figure out if the square above is captured if (b != 1) { var an = a + 1; var bn = b - 1; if ((document.images["vx" + a + "vy" + bn].src == ver[1].src) && (document.images["vx" + an + "vy" + bn].src == ver[1].src) && (document.images["hx" + a + "hy" + bn].src == hor[1].src)) { document.images["x" + a + "y" + bn].src = sqr[player].src; scoresOnDoors(); hit = 1; } } //figure out if the square below is captured if (b != maxheight + 1) { var an = a + 1; var bn = b + 1; if ((document.images["vx" + a + "vy" + b].src == ver[1].src) && (document.images["vx" + an + "vy" + b].src == ver[1].src) && (document.images["hx" + a + "hy" + bn].src == hor[1].src)) { document.images["x" + a + "y" + b].src = sqr[player].src; scoresOnDoors(); hit = 1; } } } if (type == 2) { if (document.images["vx" + a + "vy" + b].src == ver[1].src) { alert("Already taken - try again"); return; } document.images["vx" + a + "vy" + b].src = ver[1].src; // figure out if the square right is captured if (a != maxwidth + 1) { var an = a + 1; var bn = b + 1; if ((document.images["hx" + a + "hy" + b].src == hor[1].src) && (document.images["hx" + a + "hy" + bn].src == hor[1].src) && (document.images["vx" + an + "vy" + b].src == ver[1].src)) { document.images["x" + a + "y" + b].src = sqr[player].src; scoresOnDoors(); hit = 1; } } //figure out if the left is captured if (a != 1) { var an = a - 1; var bn = b + 1; if ((document.images["hx" + an + "hy" + b].src == hor[1].src) && (document.images["hx" + an + "hy" + bn].src == hor[1].src) && (document.images["vx" + an + "vy" + b].src == ver[1].src)) { document.images["x" + an + "y" + b].src = sqr[player].src; scoresOnDoors(); hit = 1; } } } // change players if no hit if (hit == 0) { if (player != 1) {player = 1 } else { player = 2; } showPlayer(); } return; } function showPlayer() { // let the users jnow which player is "up" by switching on the appropriate graphic if (player == 1) { document.images["play2"].src = sqr[0].src; document.images["play1"].src = sqr[1].src; } if (player == 2) { document.images["play1"].src = sqr[0].src; document.images["play2"].src = sqr[2].src; } return; } function scoresOnDoors() { // simple score increment and check - note play can comtinue after a winner is declared eval('tmp = document.squares.score' + player + '.value'); tmp = tmp * 1; tmp += 1; eval('document.squares.score' + player + '.value = tmp'); if (won == 0 && tmp >= winscore) { alert("Player " + player + " wins"); won = 1; } return; } // End --> </script> zwischen <BODY> und </BODY> an die gewünschte Stelle <p align="center"><!--webbot bot="HTMLMarkup" startspan --><SCRIPT LANGUAGE="JavaScript"> <!-- Begin var output = ''; output += '<TABLE CELLPADDING = 0 CELLSPACING = 8 BORDER = 0><TR>'; // create the board output += '<TD><TABLE CELLPADDING = 0 CELLSPACING = 0 BORDER = 0>'; for (var y = 1; y <= maxheight; y ++ ) { output += '<TR>'; for (var x = 1; x <= maxwidth; x ++ ) { output += '<TD><IMG SRC = "http://www.freeandshare.de/javaspiel/d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD><TD><A HREF = "javascript:go(1,' + x + ',' + y + ');" onFocus = "blur();">'; output += '<IMG SRC = "http://www.freeandshare.de/javaspiel/h0.gif" NAME = "hx' + x + 'hy' + y + '" WIDTH = 38 HEIGHT = 4 ALT = "" BORDER = 0></A></TD>'; } output += '<TD><IMG SRC = "http://www.freeandshare.de/javaspiel/d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD></TR><TR>' for (var x = 1; x <= maxwidth; x ++ ) { output += '<TD><A HREF = "javascript:go(2,' + x + ',' + y + ');" onFocus = "blur();">'; output += '<IMG SRC = "http://www.freeandshare.de/javaspiel/v0.gif" NAME = "vx' + x + 'vy' + y + '" WIDTH = 4 HEIGHT = 38 ALT = "" BORDER = 0></A></TD>'; output += '<TD><IMG SRC = "http://www.freeandshare.de/javaspiel/p0.gif" NAME = "x' + x + 'y' + y + '" WIDTH = 38 HEIGHT = 38 ALT = "" BORDER = 0></TD>'; } var x = maxwidth + 1 output += '<TD><A HREF = "javascript:go(2,' + x + ',' + y + ');" onFocus = "blur();">'; output += '<IMG SRC = "http://www.freeandshare.de/javaspiel/v0.gif" NAME = "vx' + x + 'vy' + y + '" WIDTH = 4 HEIGHT = 38 ALT = "" BORDER = 0></A></TD>'; output += '</TR>'; } output += '<TR>' for (var x = 1; x <= maxwidth; x ++ ) { output += '<TD><IMG SRC = "http://www.freeandshare.de/javaspiel/d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD><TD><A HREF = "javascript:go(1,' + x + ',' + y + ');" onFocus = "blur();">'; output += '<IMG SRC = "http://www.freeandshare.de/javaspiel/h0.gif" NAME = "hx' + x + 'hy' + y + '" WIDTH = 38 HEIGHT = 4 ALT = "" BORDER = 0></A></TD>'; } output += '<TD><IMG SRC = "http://www.freeandshare.de/javaspiel/d.gif" WIDTH = 4 HEIGHT = 4 BORDER = 0></TD></TR><TR><TD COLSPAN = '; spanthis = (maxheight*2) + 1; output += spanthis; output += '> </TD></TR></TABLE></TD>'; // create the form for feedback to user and also a "new game" button output += '<TD VALIGN = top><FORM NAME = "squares"><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 = "http://www.freeandshare.de/javaspiel/p1.gif" WIDTH = 38 HEIGHT = 38 NAME = "play1" ALT = " Player 1 " VSPACE = 2" BORDER = 0><BR></TD>'; output += '<TD ALIGN = center><IMG SRC = "http://www.freeandshare.de/javaspiel/p0.gif" WIDTH = 38 HEIGHT = 38 NAME = "play2" ALT = " Player 2 " VSPACE = 2" BORDER = 0><BR></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 = " Neues Spiel" onClick = "newGame();">'; output += '<BR> </TD></TR><TR><TD COLSPAN = 2 BGCOLOR = "#0193ff" ALIGN = center>'; output += '<BR><BR><FONT FACE = "Arial, Helvetica, sans-serif" SIZE = 1>'; output += '<BR></FONT></TD></TR>'; output += '</TABLE></FORM></TD>'; output += '</TR></TABLE>'; document.write(output); preload(); // End --> </script><!--webbot bot="HTMLMarkup" endspan --> http://www.freeandshare.de/javaspiel/grafiken.rar - klicke hier, um die benötigten Grafiken downzuloaden.