Da es hier schon mehrfach gewünscht wurde habe ich mich gestern und heute mal hin gesetzt und mein 4 Gewinnt-Script auf Tic Tac Toe umgeschrieben.
Äußerliches / Funktionsweise
Um ein Spiel zu starten muss muss man den Befehl
Code: Alles auswählen
/ttt USERWer zuerst 3 Spielsteine in eine Reihe bekommt - egal ob waagerecht, senkrecht oder diagonal - hat das Spiel gewonnen.
Voraussetzungen
Voraussetzung ist mal wieder die Grundscriptsammlung.
Das Klapp-Menü für die Onlineliste ist hilfreich, aber nicht notwendig. Dort kann ein weiterer Menü-Eintrag angelegt werden, mit dem man ein Spiel startet.
Weiterhin benötigt ihr einen Webspace um einige Grafiken und eine js-Datei hochzuladen.
Einbau
Wenn die Voraussetzungen gegeben/erledigt sind könnt ihr dann also das Spiel in eueren Chat einbauen.
Zunächst erstellt ihr euch eine js-Datei. Dort kommt folgender Code
hinein:
Code: Alles auswählen
var tttBilderPfad = "http://www.beispiel.de/ttt/";
var tttAbsolutePosition = true;
var tttTdBorderStyle = "#aaaaaa dotted 1px";
var tttSpielfeldBorderStyle = "#888888 solid 1px";
var tttTableBorderStyle = "#830 outset 2px";
var tttPlayerNr = 10;
var tttPlayer = new Array(2);
var tttGame;
var tttVorbei = true;
var tttBild1="playera";
var tttZuege = 0;
var tttPlayerFrei = new Array(2);
tttPlayerFrei[1] = true;
tttPlayerFrei[10] = false;
var tttTmpPlayer = new Array(2);
tttTmpPlayer[1] = "";
tttTmpPlayer[10] = "";
var tttImPlayer;
var tttMyColor;
function tttBtnClick(zeile, spalte){
if(tttGame[zeile][spalte] != 0){
alert("Dieses Feld ist bereits besetzt.");
return;
}
if(tttVorbei){
alert("Das Spiel ist vorbei.");
return;
}
if(tttImPlayer == tttPlayerNr)
sendeText("/ttt setzen, "+tttPlayer[(tttImPlayer==1?10:1)]+", "+zeile+", "+spalte);
else
alert("Du bist nicht dran!");
}
function tttSwitchPlayer(){
tttBild = (tttPlayerNr==1)?"playerb":"playera";
tttBild1 = (tttPlayerNr==1)?"playera":"playerb";
tttPlayerNr = (tttPlayerNr==1)?10:1;
parent.rightFrame.document.getElementById("amZug").firstChild.nodeValue = tttPlayer[tttPlayerNr];
}
function tttBefehlsAuswertung(eingabe, sender){
if(strip_tags(eingabe)==strip_tags(sender)){
if(strip_tags(sender)==myNick)
document.write("Tic Tac Toe Fehler: sich selbst einladen ist nicht möglich");
else
document.getElementsByTagName("table")[document.getElementsByTagName("table").length-1].style.display = "none";
return;
}
a = strip_tags(eingabe).split(", ");
b = strip_tags(sender);
if(strip_tags(a[0]).toLowerCase()=="regeln"){
if(b.toLowerCase() == myNick.toLowerCase()){
document.write("<b><u>Regeln für Tic Tac Toe</u></b><br>Ziel des Spiels ist es, sein Symbol 3 mal in eine Reihe zu bekommen. Ob waagerecht, senkrecht oder diagonal ist egal. Wer zuerst 3 seiner Symbole in eine Reihe bekommt hat gewonnen. Daher ist es mindestens genauso wichtig zu verhindern, dass der Gegner eine solche Reihe erreicht.<br>Es wird immer abwechselnd gesetzt. Durch Klicken auf ein beliebiges freies Feld kann man dort sein Zeichen setzen.<br>Die beiden Spieler setzen immer abwechselnd. Wenn das Spielfeld voll ist und niemand eine 3er-Reihe erreicht hat endet das Spiel unentschieden.");
}
else{
document.getElementsByTagName("table")[document.getElementsByTagName("table").length-1].style.display = "none";
}
}
else if(a.length==1){
tttEinladung(sender, eingabe);
}
else if(a[0]=="imFree"){
tttImFree(sender, a[1], a[2])
}
else if(a[0]=="setzen"){
gegner=a[1];
setzer=b;
zeile=parseInt(a[2]);
spalte=parseInt(a[3]);
tttSetzen(gegner, setzer, zeile, spalte);
document.getElementsByTagName("table")[document.getElementsByTagName("table").length-1].style.display = "none";
}
}
function tttSetzen(gegner, setzer, zeile, spalte){
var rd=parent.rightFrame.document;
if((!(myNick == tttPlayer[1] || myNick == tttPlayer[10])) || (gegner != tttPlayer[1] && gegner != tttPlayer[10]) || (strip_tags(setzer) != tttPlayer[1] && strip_tags(setzer) != tttPlayer[10])){
return;
}
if(tttGame[zeile][spalte] != 0){
alert("Dieses Feld ist bereits belegt.");
return;
}
if(tttVorbei){
alert("Das Spiel ist vorbei.");
return;
}
if(strip_tags(setzer) != tttPlayer[tttPlayerNr]){
alert("so nicht!");
return;
}
tttSwitchPlayer();
tttGame[zeile][spalte] = tttPlayerNr;
parent.rightFrame.document.getElementsByName("tttSpalte"+spalte)[zeile].src = tttBilderPfad+tttBild1+".gif";
parent.rightFrame.document.getElementsByName("tttSpalte"+spalte)[zeile].setAttribute("alt", (tttBild1=="playera"?"X":"O"));
tttZuege++;
if(tttZuege == 9){
tttVorbei = true;
alert("Unentschieden");
rd.body.removeChild(rd.getElementById("TicTacToe"));
tttPlayer[1] = myNick;
tttPlayer[10] = myNick;
}
if(tttCheckIfWon()){
tmp = (tttPlayerNr==1)?10:1;
window.setTimeout('alert("'+tttPlayer[tmp]+' hat gewonnen.");rd=parent.rightFrame.document;if(rd.getElementById("TicTacToe")){rd.body.removeChild(rd.getElementById("TicTacToe"))}', 500);
tttVorbei = true;
tttPlayer[1] = myNick;
tttPlayer[10] = myNick;
}
}
function tttCheckIfWon(){
if(tttGame[0][0]+tttGame[1][1]+tttGame[2][2] == tttPlayerNr*3 || tttGame[0][2]+tttGame[1][1]+tttGame[2][0] == tttPlayerNr*3)
return true;
for(i=0;i<=2;i++){
if(tttGame[i][0]+tttGame[i][1]+tttGame[i][2] == tttPlayerNr*3 || tttGame[0][i]+tttGame[1][i]+tttGame[2][i] == tttPlayerNr*3){
return true;
}
}
}
function tttZeichneTabelle(){
ie=(document.all&&!window.innerWidth && navigator.userAgent.toLowerCase().indexOf("msie") != -1)?1:0;
r = parent.rightFrame;
tttTabelle = r.document.createElement("table");
tttTabelle.style.borderCollapse = "collapse";
tttTabelle.style.borderSpacing = "0px";
tttTabelle.style.border = tttTableBorderStyle;
tttTbody = r.document.createElement("tbody");
tttErsteZeile = r.document.createElement("tr");
for(i=0;i<3;i++){
tttTr = r.document.createElement("tr");
for(j=0;j<3;j++){
tttTd = r.document.createElement("td");
tttTd.style.border = tttTdBorderStyle;
tttTd.style.textAlign = "center";
tttTd.style.verticalAlign = "middle";
tttTd.style.width = "45px";
tttTd.style.height = "45px";
if(!ie){
tttTdImg = new Image();
tttTdImg.src=tttBilderPfad+"blank.gif";
tttTdImg.style.height = "30px";
tttTdImg.style.width = "30px";
tttTdImg.name = "tttSpalte"+j;
eval("tttTdImg.onclick = function(e){parent.mainframe.tttBtnClick("+i+", "+j+")}");
tttTd.appendChild(tttTdImg);
}
else{
tttTdImg = "<img src='"+tttBilderPfad+"blank.gif' style='hight:30px;width:30px' onclick='parent.mainframe.tttBtnClick("+i+", "+j+")' name='tttSpalte"+j+"' />";
tttTd.innerHTML += tttTdImg;
}
tttTr.appendChild(tttTd);
}
tttTbody.appendChild(tttTr);
}
tttTabelle.appendChild(tttTbody);
tttSpielfeld = r.document.createElement("p");
tttSpielfeld.style.border = tttSpielfeldBorderStyle;
tttSpielfeld.setAttribute("id", "TicTacToe");
tttClose = r.document.createElement("div");
tttClose.style.marginBottom="0px";
tttClose.style.textAlign="right";
tttCloseLink = r.document.createElement("a");
tttCloseLink.setAttribute("href", "javascript:void(document.body.removeChild(document.getElementById('TicTacToe')));void(pm=parent.mainframe);void(pm.sendeText('/f '+pm.tttPlayer[(pm.tttImPlayer==1?10:1)]+' ich habe das TicTacToe-Spiel verlassen.')); document.body.removeChild(document.getElementById('TicTacToe'))");
tttCloseLink.appendChild(r.document.createTextNode("X"));
tttClose.appendChild(tttCloseLink);
tttSpielfeld.appendChild(tttClose);
tttSpielfeld.appendChild(tttTabelle);
if(tttAbsolutePosition){
tttSpielfeld.style.position = "absolute";
tttSpielfeld.style.bottom = "10px";
tttSpielfeld.style.right = "15px";
}
tttNachTbl = r.document.createElement("span");
tttNachTbl.appendChild(r.document.createTextNode("Am Zug: "));
tttAmZug = r.document.createElement("span");
tttAmZug.setAttribute("id", "amZug");
tttAmZug.appendChild(r.document.createTextNode(tttPlayer[10]));
tttNachTbl.appendChild(tttAmZug);
tttSpielfeld.appendChild(tttNachTbl);
if(r.document.getElementById("TicTacToe"))
r.document.body.removeChild(r.document.getElementById("TicTacToe"));
r.document.body.insertBefore(tttSpielfeld, r.document.getElementsByTagName("p")[0]);
}
function tttEinladung(einlader, eingeladener){
einlader = strip_tags(einlader);
if(myNick == einlader || myNick.toLowerCase() == strip_tags(eingeladener).toLowerCase()){
tttTmpPlayer[1] = einlader;
tttTmpPlayer[10] = strip_tags(eingeladener);
tttPlayerFrei[10] = false;
if(myNick.toLowerCase()==strip_tags(eingeladener).toLowerCase()){
document.write("lädt dich auf eine Runde Tic Tac Toe ein. <a href='#' onclick='sendeText(\"/ttt Regeln\");return false;'>Regeln anzeigen</a><p style='text-align:right;'><button onclick='tttElBtnsDeakt(this); sendeText(\"/ttt imFree, "+tttTmpPlayer[1]+", true\")'>annehmen</button><button onclick='tttElBtnsDeakt(this); sendeText(\"/ttt imFree, "+tttTmpPlayer[1]+", false\")'>ablehnen</button></p>");
}
else
document.write("lädt "+eingeladener+" auf eine Runde Tic Tac Toe ein.");
}
else
document.write("lädt "+eingeladener+" auf eine Runde Tic Tac Toe ein.");
if((einlader==tttPlayer[1] || einlader == tttPlayer[10]) && !tttVorbei){
tttVorbei = true;
document.write(" Er/Sie beendet damit das derzeitige Spiel.");
rd=parent.rightFrame.document;
if(rd.getElementById("TicTacToe"))
rd.body.removeChild(rd.getElementById("TicTacToe"));
}
}
function tttElBtnsDeakt(objBtn){
for(i in objBtn.parentNode.getElementsByTagName('button')){
objBtn.parentNode.getElementsByTagName('button')[i].disabled=true;
}
}
function tttImFree(freeUser, einlader, isFree){
if(strip_tags(freeUser)==myNick)
tttVorbei = true;
if(!(myNick == einlader || myNick == tttTmpPlayer[10])){
document.write((isFree=="true")?"nimmt die Tic Tac Toe-Einladung an.":"lehnt die Tic Tac Toe-Einladung ab.");
return;
}
if(isFree=="false")
document.write("lehnt die Tic Tac Toe-Einladung ab.");
//Meldung für anderen Spieler des vorherigen Spieles falls dieses noch nicht beendet war
if(!tttVorbei && isFree=="true"){
document.write(" nimmt die Einladung an und verlässt damit das bisherige Spiel.");
rd=parent.rightFrame.document;
if(rd.getElementById("TicTacToe"))
rd.body.removeChild(rd.getElementById("TicTacToe"));
return;
}
if(strip_tags(freeUser) == tttTmpPlayer[10] && isFree=="true"){
tttPlayerFrei[10] = true;
document.write(" nimmt die Einladung an.");
}
if(tttPlayerFrei[1] && tttPlayerFrei[10])
starteTicTacToe();
}
function starteTicTacToe(){
tttPlayer = tttTmpPlayer;
tttTmpPlayer = new Array();
tttTmpPlayer[1]=tttTmpPlayer[10]="";
tttZuege = 0;
tttPlayerNr = 10;
tttVorbei = false;
tttImPlayer = (myNick==tttPlayer[1])?1:10;
tttGame = new Array(6);
for(i=0; i < tttGame.length; i++)
tttGame[i] = new Array(0,0,0,0,0,0,0);
tttMyColor = (tttImPlayer==10)?"playera":"playerb";
tttZeichneTabelle();
}Code: Alles auswählen
var tttBilderPfad = "http://www.beispiel.de/ttt/";Die folgenden 2 Einstellungen sind optional.
In der 2. Zeile steht folgendes:
Code: Alles auswählen
var tttAbsolutePosition = true;Code: Alles auswählen
var tttAbsolutePosition = false;Um den Code auch im Chat einzubinden müsst ihr den folgenden Code mit angepasster URL der js-Datei einfügen:
Code: Alles auswählen
<script type="text/javascript" src="http://www.deineDomain.de/ttt.js"></script>/ttt
Code: Alles auswählen
<script type=text/javascript>if(parent.info){tttBefehlsAuswertung('%user%','%me%');}else{document.write('spielt mit einem anderen Chatter Tic Tac Toe')}</script>
Hier die Spielsteine:
