The X-Lab - Experimental Development Repository

DragonStone
Category: games
Language: HTML/Javascript
Description:
Many beasts run amok, you must collect powerful stones that will help you slay them.
Source Code:
<!--### Written by Micah Atwell - www.micahatwell.com/xlab ###-->
<!--Copyright (C) 2007, Micah Atwell. All Rights Reserved. http://www.micahatwell.com-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>DragonStone v1.1</title>
   <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
   <style type="text/css">
      body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;background-color:#484848;color:#fff;}
      td{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;padding:2px 4px 2px 4px;color:#fff;}
      a{font-size:12px;color:#fec;background-color:transparent;}
      #ELdisp{position:absolute;left:50px;top:10px;height:45px;}
         #ELtitle{font:225% Times New Roman;}
      #ELgrid{position:absolute;border:solid #000 1px;background-color:#000;color:#fff;}
      #ELmsgOverlay{position:absolute;border:solid #000 1px;background-color:#000;color:#c00;
         text-align:center;vertical-align:middle;font:bold 14px Times New Roman,sans;
         background-image:url(imgs/bg.gif);background-repeat:no-repeat;}
      #ELpointsReg{position:absolute;left:330px;top:70px;line-height:16px;}
      #ELhelp{position:absolute;left:30px;top:320px;width:320px;margin:20px;background-color:#666;color:#fff;
         border:solid #999 1px;padding:5px;z-index:10;}
      #copr{font-size:10px;color:#787878;}
         #copr a{font-size:10px;color:#787878;text-decoration:none;}
         #copr a:hover{text-decoration:underline;}
      .powerUp{color:gold;}
      .powerDn{color:#fff;}
   </style>
   <script language="JavaScript" type="text/javascript">
      <!--
         var
            unique_pieces=new Array(// src, name
               new Array("imgs/pc_glassDragon.gif","Dragon"),
               new Array("imgs/pc_glassDragonPwr.gif",""),
               new Array("imgs/pc_glassTiger.gif","Tiger"),
               new Array("imgs/pc_glassTigerPwr.gif",""),
               new Array("imgs/pc_glassCobra.gif","Cobra"),
               new Array("imgs/pc_glassCobraPwr.gif",""),
               new Array("imgs/pc_glassWolf.gif","Wolf"),
               new Array("imgs/pc_glassWolfPwr.gif",""),
               new Array("imgs/pc_glassMonkey.gif","Monkey"),
               new Array("imgs/pc_glassMonkeyPwr.gif",""),
               new Array("imgs/pc_glassRooster.gif","Rooster"),
               new Array("imgs/pc_glassRoosterPwr.gif",""),
               new Array("imgs/pc_glassRabbit.gif","Rabbit"),
               new Array("imgs/pc_glassRabbitPwr.gif",""),
               new Array("imgs/pc_glassRat.gif","Rat"),
               new Array("imgs/pc_glassRatPwr.gif","")
            ),
            congrats=new Array("Very impressive","Well done","Yes","Your kung fu is strong",
               "You are a fearsome warrior","You blossom like lotus flower"),
            pc_null="imgs/clear.gif",
            gleft=50,
            gtop=65,
            gcols=8,
            grows=8,
            cellWidth=32,
            cellHeight=32,
            selectedElID=null,
            piecesCleared=0,
            total_pieces=0,
            selColorOff="#000",
            selColorOn="#f30";
         // general functions
         function rand(seed){return Math.round(Math.random()*seed);}
         function in_array(n,h){for(var i=0;i<h.length;i++)if(n==h[i])return true;return false;}
         function array_rand(arr){
            var tmp=new Array();
            for(var i=0;i<arr.length;i++){
               var r=rand(arr.length-1);if(r<0)r=0;
               while(in_array(arr[r],tmp)){r=rand(arr.length-1);if(r<0)r=0;}
               tmp.push(arr[r]);
            }
            return tmp;
         }
         // game functions
         function mkGrid(){
            // pcNull element created for IE 6 (which uses full http uri for src attr)
            pcNull=document.createElement("IMG");
            pcNull.setAttribute("src",pc_null);
            pcNull.setAttribute("id","ELpcNull");
            pcNull.setAttribute("style","position:absolute;left:0px;top:0px;display:none;");
            grid=document.createElement("DIV");
            grid.setAttribute("id","ELgrid");
            grid.style.left=gleft;
            grid.style.top=gtop;
            grid.style.width=cellWidth*gcols;
            grid.style.height=cellHeight*grows;
            msgOverlay=document.createElement("DIV");
            msgOverlay.setAttribute("id","ELmsgOverlay");
            msgOverlay.style.display="none";
            msgOverlay.style.left=gleft;
            msgOverlay.style.top=gtop;
            msgOverlay.style.width=cellWidth*gcols;
            msgOverlay.style.height=cellHeight*grows;
            var
               curCol=0,
               curRow=0,
               cellCount=gcols*grows,
               pieces=new Array();
            for(var i=0;i<4;i++){
               var tmp=array_rand(unique_pieces);
               pieces=pieces.concat(tmp);
            }
            total_pieces=pieces.length;
            for(var i=0;i<cellCount;i++){
               var cx=curCol*cellWidth,cy=curRow*cellHeight;
               var cell=document.createElement("IMG");
               cell.setAttribute("id","cell_"+cx+"_"+cy);
               cell.setAttribute("class","cell");
               cell.setAttribute("src",pieces[i][0]);
               cell.setAttribute("width",cellWidth);
               cell.setAttribute("height",cellHeight);
               cell.style.position="absolute";
               cell.style.left=cx;
               cell.style.top=cy;
               cell.style.border="solid "+selColorOff+" 1px";
               cell.style.cursor="pointer";
               cell.onclick=function(){chkValue(this);}
               grid.appendChild(cell);
               curCol++;
               if(curCol==gcols){curCol=0;curRow++;}
            }
            document.body.appendChild(pcNull);
            document.body.appendChild(grid);
            document.body.appendChild(msgOverlay);
         }
         function doMsgOverlay(msg){
            if(msgOverlay.style.display=="none"){
               msgOverlay.innerHTML=msg;
               msgOverlay.style.display="block";
            }else{
               msgOverlay.style.display="none";
               msgOverlay.innerHTML="";
            }
         }
         function freeSide(el){// check element for a free side and return true if at least one or false if none
            var
               brk=el.id.split("_"),// [0]cell [1]xx [2]yy
               onLeft=0,
               onRight=(gcols*cellWidth)-cellWidth,
               onTop=0,
               onBottom=(grows*cellHeight)-cellHeight;
            // check piece for any sides on grid border
            if(brk[1]==onLeft||brk[1]==onRight||brk[2]==onTop||brk[2]==onBottom)return true;
            // check piece for any sides not touching another piece
            var
               cx      = Number(brk[1]),// selected piece X-coord
               cy      = Number(brk[2]),// selected piece Y-coord
               cl_id   = "cell_" + (cx-cellWidth)   + "_" + cy,         // piece to the left of selected
               ct_id   = "cell_" + cx         + "_" + (cy-cellHeight),// piece above selected
               cr_id   = "cell_" + (cx+cellWidth)   + "_" + cy,         // piece to the right of selected
               cb_id   = "cell_" + cx         + "_" + (cy+cellHeight);// piece below selected
            if(
               //document.getElementById(cl_id).getAttribute("src")==
                  //document.getElementById("ELpcNull").getAttribute("src")||
               document.getElementById(ct_id).getAttribute("src")==
                  document.getElementById("ELpcNull").getAttribute("src")||
               //document.getElementById(cr_id).getAttribute("src")==
               //   document.getElementById("ELpcNull").getAttribute("src")||
               document.getElementById(cb_id).getAttribute("src")==
                  document.getElementById("ELpcNull").getAttribute("src")
            )return true;
            return false;
         }
         function clearSelected(el){// deselect and forget 1st selected piece
            el.style.borderColor=selColorOff;
            selectedElID=null;
         }
         function removePieces(pc1,pc2){// pieces have been matched and can be removed from board
            selectedElID=null;// forget 1st piece
            var pcs=new Array(pc1,pc2);
            for(var i=0;i<pcs.length;i++){
               pcs[i].style.borderColor=selColorOff;
               pcs[i].setAttribute("src",document.getElementById("ELpcNull").getAttribute("src"));
               for(var j=0;j<pcs[i].attributes.length;j++){
                  if(pcs[i].attributes[j].name=="onclick"){
                     pcs[i].attributes[j].value="";
                     break;
                  }
               }
            }
            piecesCleared++;
         }
         function matchEls(pc1,pc2){
            return(pc1.getAttribute("src")==pc2.getAttribute("src"))?true:false;
         }
         function chkValue(srcEl){
            // do nothing if player clicks on empty space
            if(srcEl.getAttribute("src")==document.getElementById("ELpcNull").getAttribute("src"))return;
            if(selectedElID==null){// if no other pieces are selected (I am 1st)...
               if(freeSide(srcEl)){
                  selectedElID=srcEl.id;// remember me as selected
                  document.getElementById(selectedElID).style.borderColor=selColorOn;// show me as selected
               }
            }else{// another piece is selected (I am 2nd)...
               var
                  selectedEl=document.getElementById(selectedElID),
                  doChkMoves=false;
               if(srcEl.id==selectedElID){// clear selection and exit if same element clicked twice
                  clearSelected(selectedEl);
                  return;
               }
               if(matchEls(selectedEl,srcEl)){// if we match...
                  if(freeSide(srcEl)){// if I have one side free (can assume 1st has a free side since it's selected)...
                     var pcName=srcEl.getAttribute("src").match(/pc\_glass(\w+?)(Pwr|)\.gif/);
                     eval("var ptReg=document.getElementById('ELpoints"+pcName[1]+"')");
                     if(pcName[2]=="Pwr"){// if I am a power stone, update my points
                        ptReg.innerHTML=(Number(ptReg.innerHTML)+1);
                        ptReg.parentNode.setAttribute("class","powerUp");
                        ptReg.parentNode.className="powerUp";// for IE
                     }else if(pcName[2]==""){// if I am an animal stone, make sure player has points to remove me
                        if(Number(ptReg.innerHTML)>0){
                           ptReg.innerHTML=(Number(ptReg.innerHTML)-1);
                           if(Number(ptReg.innerHTML)==0){
                              ptReg.parentNode.setAttribute("class","powerDn");
                              ptReg.parentNode.className="powerDn";// for IE
                           }
                        }else{
                           alert("You must collect 2 "+pcName[1]+" powerstones before you can slay this beast");
                           clearSelected(selectedEl);// deselect and forget 1st piece
                           return;
                        }
                     }
                     removePieces(selectedEl,srcEl);
                     doChkMoves=true;
                  }else clearSelected(selectedEl);// deselect and forget 1st piece
               }else clearSelected(selectedEl);// deselect and forget 1st piece
               // check game status...
               if(chkGameStatus()){
                  doMsgOverlay("<div style='padding:100px 20px 0px 20px;'>"+
                     congrats[rand(congrats.length-1)]+", Grasshopper. You have won!<br><br>"+
                     "<a href='' onclick='window.location.reload();'>Care to play again?</a></div>"
                  );
               }else if(doChkMoves && !chkMovesLeft()){
                  doMsgOverlay("<div style='padding:100px 20px 0px 20px;'>"+
                     "So sorry, Grasshopper.<br>You have run out of plays.<br><br>"+
                     "<a href='' onclick='window.location.reload();'>Care to try again?</a></div>"
                  );
                  document.getElementById("ELmovesLeft").innerHTML="No More Plays";
               }
            }
         }
         function chkMovesLeft(){
            var
               cells=document.getElementsByTagName("IMG"),
               pcsA=new Array(),//animal pieces
               pcsP=new Array(),//power pieces
               flag=false;
            for(var i=0;i<cells.length;i++){
               if(cells[i].getAttribute("class")=="cell" &&
                  cells[i].getAttribute("src")!=document.getElementById("ELpcNull").getAttribute("src") &&
                  freeSide(cells[i])
               ){
                  var tmp=cells[i].getAttribute("src").match(/pc\_glass(\w+?)(Pwr|)\.gif/);
                  // if powerstone
                  if(tmp[2]=="Pwr"){
                     // and its match has already been found (with free side)
                     if(in_array(tmp[1],pcsP)){flag=true;break;}//we have at least one play, break.
                     pcsP.push(tmp[1]);// else put it in powerstone array
                  }else{// is an animal stone
                     // check for enough points to play animal stone
                     eval("var ptReg=Number(document.getElementById('ELpoints"+tmp[1]+"').innerHTML)");
                     // if matching animal stone has been found (with free side) and player has points to play it
                     if(in_array(tmp[1],pcsA) && ptReg>0){flag=true;break;}// we have at least one play, break
                     pcsA.push(tmp[1]);
                  }
               }
            }
            return flag;
         }
         function chkGameStatus(){
            return(piecesCleared==total_pieces/2)?true:false;
         }
         function newGame(){
            window.location.reload();
         }
         function showHelp(){
            document.getElementById("ELhelp").style.display=
               (document.getElementById("ELhelp").style.display=="none")?"block":"none";
         }
      //-->
   </script>
</head>
<body>
<div id="ELdisp">
   <div id="ELtitle">DragonStone</div>
   <div id="copr">©2007 - Micah Atwell - <a href="http://www.micahatwell.com">www.micahatwell.com</a>.</div>
</div>
<div id="ELpointsReg">
   <b>Powers Collected</b><br>
   <div class="powerDn"><span id="ELpointsDragon">0</span> - Dragon</div>
   <div class="powerDn"><span id="ELpointsTiger">0</span> - Tiger</div>
   <div class="powerDn"><span id="ELpointsCobra">0</span> - Cobra</div>
   <div class="powerDn"><span id="ELpointsWolf">0</span> - Wolf</div>
   <div class="powerDn"><span id="ELpointsMonkey">0</span> - Monkey</div>
   <div class="powerDn"><span id="ELpointsRooster">0</span> - Rooster</div>
   <div class="powerDn"><span id="ELpointsRabbit">0</span> - Rabbit</div>
   <div class="powerDn"><span id="ELpointsRat">0</span> - Rat</div><br>
   <span id="ELmovesLeft"></span><br><br>
   <a href="" onclick="window.location.reload();return false;">New Game</a><br>
   <a href="" onclick="showHelp();return false;">show/hide help</a><br>
</div>
<script language="JavaScript" type="text/javascript">
   <!--
      mkGrid();
      if(!chkMovesLeft()){
         if(confirm("No moves possible. Click OK to reload the game."))window.location.reload();
         else document.getElementById("ELmovesLeft").innerHTML="No Plays Possible";
      }
   //-->
</script>
<div id="ELhelp" style="display:block;">
   <table cellpadding="0" cellspacing="0" border="0">
      <tr><td colspan="2"><b>The Beasts</b></td><td><b>Power Stones</b></td></tr>
      <script language="JavaScript" type="text/javascript">
         <!--
            var out="";
            for(i=0;i<unique_pieces.length;i++){
               if(i==0)out+="<tr>";else if((i%2)==0)out+="</tr><tr>";
               out+="<td align='left'>"+unique_pieces[i][1]+"</td>"+
                  "<td style='text-align:center;'><img src='"+unique_pieces[i][0]+"' alt=''></td>"+
                  "<td style='text-align:center;'><img src='"+unique_pieces[i+1][0]+"' alt=''></td>";
               i++;
            }
            document.write(out);
         //-->
      </script>
   </table><br>
   <b>Objective:</b><br><br>
   Clear the board by collecting power stones and slaying the beasts. To slay a beast, you must first collect two of its power stones (click two identical power stones). You will then have enough power to slay that beast, which you accomplish by then clicking two identical beasts.<br><br>
   Gamepieces along the edges of the board can be selected at any time. All others must have at least the top or bottom edge free (not touching another piece, similar to Mahjong).<br><br>
   As you collect power stones, the numbers and types of beasts you can slay will be shown to the right of the board.<br><br>
   So, Grasshopper, choose your moves wisely, else you find yourself without any more and a beast may come to claim you.<br><br>
   <a href="" onclick="showHelp();return false;">close help</a>
</div>
</body>
</html>
<!--Copyright (C) 2007, Micah Atwell. All Rights Reserved. http://www.micahatwell.com-->