JavaScripts -> Fun -> Arsenal Pipe (Spiel)

<script type="text/javascript">
<!--
// = = ================================================================= = =
// = = Arsenal Pipe v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ================================================================= = =

// -------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// -------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// -------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// -------------------------------------------------------------------------

// Sie dürfen dieses Script für nicht-kommerzielle Zwecke nutzen, wenn diese Urheber-Notiz erhalten bleibt.
// You may use this Script for non-commercial causes as long as you include this copyright notice.

// Benutzung / Usage:
// ==================
// Fügen Sie einfach ein Script mit dem Inhalt arsenalpipe(); in den Body-Bereich ein
// Simply include a script with the content arsenalpipe(); in the body area

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var picpath="/pics/examples/pipe/"; // Pfad zu den Bilddateien / path to the image files
var delay=50; // Geschwindigkeit des Wassers / water speed

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var field;
var water;
var pipe;
var waterx=new Array();
var watery=new Array();
var waters=0;
var progress=0;
var max=100;
var placed=0;

var step=0;
var max=100;


var next;
var running=0;



function arsenalpipe() {
  var i,j;
  field=new Array(8);
  water=new Array();

  for(i=0;i<8;i++) {
    field[i]=new Array(8);
    water[i]=new Array(8);
  }

  pipe=new Array(15);
  for(i=0;i<15;i++) {
    pipe[i]=new Image;
    pipe[i].src=picpath+'p'+i+'.gif';
  }

  next=Math.floor(Math.random()*15);

  waters=0;


  document.write('<table style="border-collapse:collapse; border:none">');
  for(i=-1;i<9;i++) {
    document.write('<tr>');
    for(j=-1;j<9;j++) {
      if((i>-1) && (i<8) && (j>-1) && (j<8)) {
        document.write('<td style="background-image:url('+picpath+'b.gif); padding:0px" id="td_'+j+'_'+i+'" onClick="clicked('+j+','+i+')">');
        document.write('<img id="img_'+j+'_'+i+'" src="'+picpath+'e.gif" />');
        document.write('</td>');
      } else {
        if((i==4)&&(j==-1)) {
          document.write('<td style="background-image:url('+picpath+'w.gif); padding:0px">');
          document.write('<img src="'+picpath+'bx.gif" />');
          document.write('</td>');
        } else {
          document.write('<td style="background-image:url('+picpath+'e.gif); padding:0px">');
          if((i==-1) || (i==8)) {
            if((j==-1) || (j==8)) {
              document.write('<img src="'+picpath+'b2.gif" />');
            } else {
              document.write('<img src="'+picpath+'b1.gif" />');
            }
          } else {
            document.write('<img src="'+picpath+'b0.gif" />');
          }
          document.write('</td>');
        }
      }
    }
    document.write('</tr>');
  }
  document.write('<tr>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif" /></td>');
  document.write('<td colspan="8" style="background-image:url('+picpath+'b.gif); padding:0px, text-align:left">');
  document.write('<div id="progress" style="height:14px; padding:0px; margin:0px; font-size:1px; width:0px; background-image:url('+picpath+'w.gif); background-position:left;"></div>');
  document.write('</td>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif"></td>');
  document.write('</tr>');
  document.write('<tr>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif"></td>');
  for(i=0;i<8;i++) document.write('<td style="padding:0px"><img src="'+picpath+'b1.gif"></td>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif"></td>');
  document.write('</tr>');
  document.write('<tr>');
  document.write('<td rowspan="3" style="padding:0px"><img src="'+picpath+'b0.gif"><br /><img src="'+picpath+'b0.gif" /><br><img src="'+picpath+'b0.gif" /></td>');
  document.write('<td colspan="8" style="text-align:center; padding-top:10px; font-size:12px; font-family:Verdana">');
  document.write('N&auml;chstes Bauteil:<br />');
  document.write('<img id="img_next" src="'+picpath+'p'+next+'.gif" />');
  document.write('</td>');
  document.write('<td rowspan="3" style="padding:0px"><img src="'+picpath+'b0.gif" /><br><img src="'+picpath+'b0.gif" /><br /><img src="'+picpath+'b0.gif" /></td>');
  document.write('</tr>');
  document.write('<tr>');
  document.write('<td id="points" colspan="8" style="text-align:center; padding-top:10px; font-family:Verdana; font-size:12px">');
  document.write('Punktestand: 0');
  document.write('</td>');
  document.write('</tr>');
  document.write('<tr>');
  document.write('<td colspan="4" style="font-family:Verdana; font-size:12px; text-align:left; cursor:pointer; font-weight:bold" id="start" onMouseOver="this.style.color=\'#ff0000\'" onMouseOut="this.style.color=\'#000000\'" onClick="start()">START</td>');
  document.write('<td colspan="4" style="font-family:Verdana; font-size:12px; text-align:right; cursor:pointer; font-weight:bold" id="start" onMouseOver="this.style.color=\'#ff0000\'" onMouseOut="this.style.color=\'#000000\'" onClick="help()">ANLEITUNG</td>');

  document.write('</tr>');
  document.write('<tr>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif"></td>');
  for(i=0;i<8;i++) document.write('<td style="padding:0px"><img src="'+picpath+'b1.gif"></td>');
  document.write('<td style="padding:0px"><img src="'+picpath+'b2.gif"></td>');
  document.write('</tr>');
  document.write('</table>');
}

function clicked(x,y) {
  if(running && field[x][y]==-1) {
    placed++;
    field[x][y]=next;
    document.getElementById("img_"+x+"_"+y).src=pipe[next].src;
    if(placed<64) {
      next=Math.floor(Math.random()*15);
      document.getElementById("img_next").src=pipe[next].src;
    } else {
      document.getElementById("img_next").src=picpath+"e.gif";
    }
  }
}

function help() {
  helpwin=window.open("about:blank","help","dependent=yes, height=480, width=640, left="+(screen.availWidth/2-320)+", top="+(screen.availHeight/2-240)+", location=no, menubar=no, resizable=no, scrollbars=yes, status=no, toolbar=no");
  helpwin.document.open();
  helpwin.document.write('<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">');
  helpwin.document.write('<html>');
  helpwin.document.write('<head>');
  helpwin.document.write('<title>Arsenal Pipe</title>');
  helpwin.document.write('<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">');
  helpwin.document.write('<style type="text/css">');
  helpwin.document.write('<!-'+'-');
  helpwin.document.write('body { font-family:Verdana; font-size:12px; padding:0px; margin:0px; }');
  helpwin.document.write('h1 { font-size:20px; text-align:center; border:3px double #000000; padding:2px; margin:5px; }');
  helpwin.document.write('h2 { font-size:18px; margin-bottom:5px; margin-top:0px; background-color:#c0c0c0; padding-left:5px; }');
  helpwin.document.write('p { margin-bottom:10px; margin-top:0px; margin-left:10px; }');
  helpwin.document.write('ul { margin-top:0px; }');
  helpwin.document.write('div { position:absolute; right:5px; left:5px; bottom:5px; background-color:#c0c0c0; border:2px outset #c0c0c0; text-align:center; font-size:12px; font-family:Verdana; padding:2px; color:#000000; cursor:pointer; font-weight:bold }');
  helpwin.document.write('-'+'->');
  helpwin.document.write('</style>');
  helpwin.document.write('</head>');
  helpwin.document.write('<body >');
  helpwin.document.write('<h1>Arsenal Pipe</h1>');
  helpwin.document.write('<h2>Ziel des Spiels</h2>');
  helpwin.document.write('<p>Das Ziel des Spiels ist es, eine m&ouml;glichst lange, ununterbrochene Rohrleitung zu bauen, durch die Wasser flie&szlig;t. Dazu legen Sie mit der Maus die angebotenen Bauteile in den Spielbereich. Das Wasser beginnt auf der linken Spielfeldseite zu flie&szlig;en. Sie m&uuml;ssen die Bauteile stets so legen, dass zwei St&uuml;cke zusammenpassen.</p>');
  helpwin.document.write('<h2>Starten des Spiels</h2>');
  helpwin.document.write('<p>Klicken Sie auf "Start", um das Spiel zu starten. Das Wasser beginnt dann zu flie&szlig;en (Erkennbar an der Verlaufsanzeige unter dem Spielfeld). Wenn das Wasser das aktuelle Rohrst&uuml;ck aufgef&uuml;llt hat (d.h. der Verlaufsbalken ist voll) wird es in die anliegenden Rohrst&uuml;cke flie&szlig;en. Wenn dort passende Rohrst&uuml;cke liegen, f&uuml;llt sich der Verlaufsbalken erneut.</p>');
  helpwin.document.write('<h2>Gewinnen</h2>');
  helpwin.document.write('<p>Sie gewinnen das Spiel, indem Sie ein komplett abgeschlossenes Rohrsystem bauen, also ein Netz welches keine weitere &ouml;ffnung nach au&szlig;en mehr hat. Die Herausforderung dabei ist nat&uuml;rlich nicht, m&ouml;glichst schnell zu diesem Ziel zu kommen, sondern m&ouml;glichst viele Punkte zu machen.</p>');
  helpwin.document.write('<h2>Verlieren</h2>');
  helpwin.document.write('<p>Sie verlieren, wenn Ihr Netz ein Leck hat. Ein Leck entsteht, wenn');
  helpwin.document.write('<ul><li>kein Rohrst&uuml;ck an einer offenen Leitung liegt.</li>');
  helpwin.document.write('<li>ein unpassendes Rohrst&uuml;ck an einer offenen Leitung liegt.</li>');
  helpwin.document.write('<li>eine offene Leitung gegen eine Wand verl&auml;uft.</li></ul></p>');
  helpwin.document.write('<div onClick="window.close()">Fenster schlie&szlig;en</div>');
  helpwin.document.write('</body>');
  helpwin.document.write('</html>');
  helpwin.document.close();
}


function fromleft(f) {
  if( (f==0) || (f==2) || (f==3) || (f==4) || (f==5) || (f==7) || (f==8) || (f==11) ) return true;
  else return false;
}

function fromright(f) {
  if( (f==0) || (f==2) || (f==3) || (f==4) || (f==6) || (f==9) || (f==10) || (f==12) ) return true;
  else return false;
}

function fromtop(f) {
  if( (f==1) || (f==2) || (f==4) || (f==5) || (f==6) || (f==7) || (f==9) || (f==13) ) return true;
  else return false;
}

function frombottom(f) {
  if( (f==1) || (f==2) || (f==3) || (f==5) || (f==6) || (f==8) || (f==10) || (f==14) ) return true;
  else return false;
}

function lost(x,y) {
  document.getElementById("td_"+x+"_"+y).style.backgroundImage="url("+picpath+"w.gif)";
  document.getElementById("img_"+x+"_"+y).src=picpath+"e.gif";
  document.getElementById("points").firstChild.nodeValue="VERLOREN! Punktestand: "+waters;
  document.getElementById("start").firstChild.nodeValue="NEUSTART";
  running=0;
}

function start() {
  if(running) {
    running=0;
    window.clearTimeout(to);
    document.getElementById("start").firstChild.nodeValue="NEUSTART";
  }
  else {
    step=0;
    waters=0;
    document.getElementById("points").firstChild.nodeValue="Punktestand: 0";
    for(i=0;i<8;i++) {
      for(j=0;j<8;j++) {
        field[i][j]=-1;
        water[i][j]=0;
        document.getElementById("td_"+i+"_"+j).style.backgroundImage="url("+picpath+"b.gif)";
        document.getElementById("img_"+i+"_"+j).src=picpath+"e.gif";
      }
    }
    running=1;
    document.getElementById("start").firstChild.nodeValue="STOP";
    to=window.setTimeout("nextstep()",delay);
  }
}

function nextstep() {
  step++;
  var i,x,y,wo;
  if(step==max) {
    if(waters==0) {
      waters=1;
      waterx[0]=0;
      watery[0]=4;
      if(fromleft(field[0][4])) {
        water[0][4]=1;
        document.getElementById("td_0_4").style.backgroundImage="url("+picpath+"w.gif)";
      } else {
        lost(0,4);
      }
    } else {
      wo=waters;
      for(i=waters-1;i>=0;i--) {
        x=waterx[i];
        y=watery[i];
        window.status="x: "+x+" / y: "+y;
        if(running && fromleft(field[x][y])) {
          if(x==0) { if(y!=4) lost(x,y); }
          else if(fromright(field[x-1][y])) {
            if(!( water[x-1][y] ) ) {
              water[x-1][y]=1;
              document.getElementById("td_"+(x-1)+"_"+y).style.backgroundImage="url("+picpath+"w.gif)";
              waterx[waters]=x-1;
              watery[waters]=y;
              waters++;
            }
          } else {
            lost(x-1,y);
          }
        }
        if(running && fromright(field[x][y])) {
          if(x==7) lost(x,y);
          else if(fromleft(field[x+1][y])) {
            if(!( water[x+1][y] )) {
              water[x+1][y]=1;
              document.getElementById("td_"+(x+1)+"_"+y).style.backgroundImage="url("+picpath+"w.gif)";
              waterx[waters]=x+1;
              watery[waters]=y;
              waters++;
            }
          } else {
            lost(x+1,y);
          }
        }
        if(running && fromtop(field[x][y])) {
          if(y==0)lost(x,y);
          else if(frombottom(field[x][y-1])) {
            if(!( water[x][y-1] )) {
              water[x][y-1]=1;
              document.getElementById("td_"+x+"_"+(y-1)).style.backgroundImage="url("+picpath+"w.gif)";
              waterx[waters]=x;
              watery[waters]=y-1;
              waters++;
            }
          } else {
            lost(x,y-1);
          }
        }
        if(running && frombottom(field[x][y])) {
          if(y==7)lost(x,y);
          else if(fromtop(field[x][y+1])) {
            if(!( water[x][y+1] )) {
              water[x][y+1]=1;
              document.getElementById("td_"+x+"_"+(y+1)).style.backgroundImage="url("+picpath+"w.gif)";
              waterx[waters]=x;
              watery[waters]=y+1;
              waters++;
            }
          } else {
            lost(x,y+1);
          }
        }
      }
      if(running) {
        document.getElementById("points").firstChild.nodeValue="Punktestand: "+waters;
        if(wo==waters && (wo!=1)) {
          alert("Gewonnen! Sie haben "+waters+" Punkte erreicht!");
          running=0;
          document.getElementById("start").firstChild.nodeValue="NEUSTART";
        }
      }
    }
    step=0;
  }
  document.getElementById("progress").style.width=Math.floor(256*step/max)+"px";
  if(running)to=window.setTimeout("nextstep()",delay);
}


// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Arsenal Pipe --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 18.Jun.2004 --
// ----------------------------

//-->
</script>