JavaScripts -> Fun -> Slot Machine

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

var picpath="../../../../pics/examples/"; //Pfad zu den Bildern / path to the images

var slotimg=new Array("slots1.gif","slots3.gif","slots2.gif","slots0.gif","slots4.gif","slots5.gif");

//Slot-Machine-Bilder / images

//Bitte ab hier nichts veraendern / Please do not change anything from here on

var si=new Array();
var bi=new Array(3);
var gi=new Array(2);
var walze=new Array(3);
var ww=new Array(3);
var wp=new Array(3);
var hold=new Array(3);
var running=0;
var credits=10;

function preload() {
  for(i=0;i<slotimg.length;i++) {
    si[i]=new Image();
    si[i].src=picpath+slotimg[i];
  }
  for(i=0;i<3;i++) {
    bi[i]=new Image();
    bi[i].src=picpath+"slotb"+i+".gif";
  }
  for(i=0;i<2;i++) {
    gi[i]=new Image();
    gi[i].src=picpath+"slotg"+i+".gif";
  }
}

function cred() {
  document.getElementById("cred").firstChild.nodeValue=credits;
}

function check() {
  if(hold[0]&&hold[1]&&hold[2]) {
    running=0;
    if((ww[0]==ww[1])&&(ww[0]==ww[2])) {
      w=slotimg.length-ww[0];
      alert("Sie haben "+w+" Credits gewonnen!");
      credits+=w;
      cred();
    }
    else alert("Sie haben verloren!");
    document.g.src=gi[1].src;
    for(i=0;i<3;i++) {
      im=eval("document.b"+i);
      im.src=bi[0].src;
    }
  }
}

function rotieren(wn,speed) {
  if((hold[wn])&&(wp[wn]==0)) {
    check();
    return;
  }
  wp[wn]-=4;
  if(wp[wn]<0) {
    if(ww[wn]>=slotimg.length)ww[wn]=0;
    im=eval("document.s"+wn+"0");
    im.src=si[ww[wn]].src;
    im=eval("document.s"+wn+"1");
    im.src=si[(ww[wn]+1)%slotimg.length].src;
    ww[wn]++;
    wp[wn]=28;
  }
  document.getElementById("s"+wn+"0").style.top=wp[wn]+"px";
  document.getElementById("s"+wn+"1").style.top=(32+wp[wn])+"px";
  window.setTimeout("rotieren("+wn+","+speed+")",speed);
}



function make() {
  walze[0]=new Array(slotimg.length);
  for(i=0;i<slotimg.length;i++)walze[0][i]=i;
  walze[1]=new Array(slotimg.length);
  for(i=0;i<slotimg.length;i++)walze[1][i]=i;
  walze[2]=new Array(slotimg.length);
  for(i=0;i<slotimg.length;i++)walze[2][i]=i;
  for(i=0;i<3;i++)wp[i]=0;
  for(i=0;i<3;i++)hold[i]=0;
  running=0;
}


function go() {
 if(!running) {
  if(credits>0) {
  make();
  running=1;
  document.g.src=gi[0].src;
  for(i=0;i<3;i++) {
    im=eval("document.b"+i);
    im.src=bi[2].src;
  }
  credits--;
  cred();
  for(i=0;i<3;i++)rotieren(i,20+Math.floor(Math.random()*20));
  } else alert("Sie haben keine Credits mehr!");
 }
}

function slotb(w) {
  if(running && !hold[w]) {
    hold[w]=1;
    im=eval("document.b"+w);
    im.src=bi[1].src;
  }
}

function init() {
  preload();
  for(i=0;i<3;i++) {
    ww[i]=Math.floor(Math.random()*slotimg.length);
    im=eval("document.s"+i+"0");
    im.src=si[ww[i]].src;
  }
  cred();
}


//-->
</script>
<style type="text/css">
<!--
.slot {
  padding:0px;
  position:absolute;
  border:none;
}
-->
</style>

========================

<div class="slot" style="left:10px; top:10px; width:106px; height:98px; border:1px solid #000000; background-color:#ffffff">
<div class="slot" style="top:1px; left:1px; width:104px">
<div class="slot" style="top:0px; left:0px; width:104px; text-align:center; font-family:Verdana,sans-serif; font-size:12px; color:#000000; z-index:4">SlotMachine!</div>

<div class="slot" style="top:32px; left:0px; width:104px; height:32px; z-index:1">
<img src="/pics/examples/slotbg.gif" alt="">
</div>
<div class="slot" style="top:14px; left:36px; z-index:3"><img name="g" id="g" src="/pics/examples/slotg1.gif" alt="" onClick="go()"></div>
<div class="slot" style="top:0px; left:0px; width:104px; height:96px; z-index:2">

<img name="s00" id="s00" class="slot" src="" style="top:32px; left:1px; z-index:1" alt="">
<img name="s01" id="s01" class="slot" src="" style="top:64px; left:1px; z-index:1" alt="">
<img name="s10" id="s10" class="slot" src="" style="top:32px; left:36px; z-index:1" alt="">
<img name="s11" id="s11" class="slot" src="" style="top:64px; left:36px; z-index:1" alt="">
<img name="s20" id="s20" class="slot" src="" style="top:32px; left:71px; z-index:1" alt="">
<img name="s21" id="s21" class="slot" src="" style="top:64px; left:71px; z-index:1" alt="">
<div class="slot" style="top:0px; left:0px; width:104px; height:32px; background-color:#ffffff; z-index:2">&nbsp;</div>
<div class="slot" style="top:64px; left:0px; width:104px; height:32px; background-color:#ffffff; z-index:2">&nbsp;</div>
</div>
<div class="slot" style="top:66px; left:0px; width:104px; z-index:3">
<img name="b0" id="b0" class="slot" src="/pics/examples/slotb0.gif" style="left:1px; top:0px" onClick="slotb(0)" alt="">

<img name="b1" id="b1" class="slot" src="/pics/examples/slotb0.gif" style="left:36px; top:0px" onClick="slotb(1)" alt="">
<img name="b2" id="b2" class="slot" src="/pics/examples/slotb0.gif" style="left:71px; top:0px" onClick="slotb(2)" alt="">
</div>
<div class="slot" style="top:84px; left:0px; width:104px; z-index:3; text-align:center; font-family:Verdana,sans-serif; font-size:12px; color:#000000; ">Credits: <b id="cred">0</b></div>
</div>
&nbsp;
</div>
<script type="text/javascript">init()</script></body>