The X-Lab - Experimental Development Repository

Cornered
Category: games
Language: HTML/Javascript
Description:
Move the blocks to get yours into a corner within the time allowed.
Source Code:
<!--### Written by Micah Atwell - www.micahatwell.com/xlab ###-->
<!--
   Copyright (C) 2006 Micah Atwell. All Rights Reserved.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <title>Games - Cornered</title>
   <style type="text/css">
      body{font-family:sans-serif;font-size:9pt;}
      td{font-family:sans-serif;font-size:9pt;}
      .sq{position:absolute;}
      #elBoard p{margin-left:20px;}
      #elBoard td{color:#cccccc;}
      #elCtrls td{font-family:monospace;font-size:15px;background-color:#cccccc;
         border:solid black;border-width:2px 1px 2px 1px;padding-left:5px;}
      #elCtrls td div{display:inline;color:orangered;font-weight:bold;}
   </style>
   <script language="javascript" type="text/javascript">
      <!--
         if(navigator.userAgent.indexOf("MSIE") != -1)var br="IE";
         else if(navigator.userAgent.indexOf("Gecko") != -1)var br="Moz";
         else{alert('You must use Internet Explorer or a Mozilla browser to play this game.');history.back(1);}
         // stuff that only needs to be declared once (eg Constants and non-exclusive game variables)
         function declareObjs(){
            board=document.getElementById("elBoard");
            board.style.position="absolute";
            board.style.left=20;
            board.style.top=20;
            board.style.width=400;
            board.style.height=400;
            board.style.backgroundColor="black";
            ctrls=document.getElementById("elCtrls");
            ctrls.style.position="absolute";
            ctrls.style.left=0;
            ctrls.style.top=parseInt(board.style.height)+parseInt(board.style.top);
            ctrls.style.left=parseInt(board.style.left);
            btnStart=document.getElementById("elBtnStart");
            btnForfeit=document.getElementById("elBtnForfeit");
            rounds=document.getElementById("elRounds");
            clock=document.getElementById("elClock");
            scoreboard=document.getElementById("elScoreboard");
            sq=40;
            gCols=parseInt(board.style.width)/sq;
            gRows=parseInt(board.style.height)/sq;
            gC=gCols*gRows;
            gameScore=0;
            gameNum=0;
            diff=12;
            loaded=false;
            lastGame=false;
         }
         //stuff that needs to be declared on every new game instance (eg Variables and game-exclusives)
         function startGame(){
            btnStart.disabled=true;
            btnForfeit.disabled=false;
            moves=0;
            roundScore=0;
            sqC=0;
            time=60;
            timer=setInterval("updDisplay(clock,--time);if(time==0)endGame(false);",1000);
            gameNum++; updDisplay(rounds,gameNum);
            if(gameNum > 1 && diff > 2){
               diff--;
               if(diff==3)lastGame=true;
            }
            mkGrid();
            loaded=true;
         }
         function endGame(forfeit){
            clearInterval(timer);
            if(!forfeit)roundScore=time;
            gameScore+=roundScore; updDisplay(scoreboard,gameScore);
            msg="Round "+gameNum+" Completed\nScore: "+roundScore;
            if(lastGame)msg+="\nYou made it through all rounds!\nOverall Score: "+gameScore;
            alert(msg);
            if(!lastGame)   startGame();else{window.location.reload();}
         }
         function updDisplay(el,sc){el.innerHTML=sc;}
         function mkGrid(){plX=randPos();plY=randPos();if(plX==0)plX+=sq;else if(plX==((gCols-1)*sq))plX-=sq;if(plY==0)plY+=sq;else if(plY==((gRows-1)*sq))plY-=sq;blX=randPos();blY=randPos();if(blX==plX && blY==plY){blX=randPos();blY=randPos();}var out='';for(var i=0;i<gRows;i++){for(var j=0;j<gCols;j++){sqC++;if((i*sq)==plX && (j*sq)==plY){sqID="player";sqSrc="imgs/gemPlayer.gif";}else if((i*sq)==blX && (j*sq)==blY){sqID="blank";sqSrc="imgs/clear.gif";}else{if(rand(diff)==diff){sqID="nm"+sqC;sqSrc="imgs/gemStatic.gif";}else{sqID="m"+sqC;sqSrc="imgs/gemFiller.gif";}}out+="<img id='"+sqID+"' class='sq' src='"+sqSrc+"' width='"+sq+"' height='"+sq+"' border='0' alt='' style='left:"+(i*sq)+"px;top:"+(j*sq)+"px;'>";}}board.innerHTML=out;pl=document.getElementById("player");bl=document.getElementById("blank");}
         function rand(seed){return Math.round(Math.random()*seed);}
         function randPos(){return rand(9)*40;}
         function move(el){
            elx=parseInt(el.style.left);ely=parseInt(el.style.top);blx=parseInt(bl.style.left);bly=parseInt(bl.style.top);
            L=elx-sq;R=elx+sq;U=ely-sq;D=ely+sq;swapBl=true;
            if(bly==ely && blx==L)el.style.left=L;else if(bly==ely && blx==R)el.style.left=R;
            else if(blx==elx && bly==U)el.style.top=U;else if(blx==elx && bly==D)el.style.top=D;else swapBl=false;
            if(swapBl){bl.style.left=elx;bl.style.top=ely;moves++;}
            elx=parseInt(el.style.left);ely=parseInt(el.style.top);
            if(el.id=="player" && ((elx==0 && ely==0)||(elx==((gCols-1)*sq) && ely==0)||(elx==0 && ely==((gRows-1)*sq))||(elx==((gCols-1)*sq) && ely==((gRows-1)*sq))))endGame(false);
         }
         function OC(e){if(loaded){if(br=="IE")srcEl=event.srcElement;else srcEl=e.target;if(srcEl.id.search(/(nm|blank)/)==-1)move(srcEl);}}
         document.onclick=OC;
      //-->
   </script>
</head>
<body onload="declareObjs();">
<div id="elBoard">
   <p id="ttl"><img src="imgs/logo.gif" width="180" height="40" border="0" alt="Cornered"></p>
   <p>
      <table width="350" cellpadding="2" cellspacing="0" border="0">
         <tr>
            <td align="left" valign="middle"><img src="imgs/gemPlayer.gif" width="40" height="40" border="0" alt=""></td>
            <td align="left" valign="middle">Move this square to one of the four corners within the time allowed.</td>
         </tr>
         <tr>
            <td align="left" valign="middle"><img src="imgs/gemFiller.gif" width="40" height="40" border="0" alt=""></td>
            <td align="left" valign="middle">Movable square.</td>
         </tr>
         <tr>
            <td align="left" valign="middle"><img src="imgs/gemStatic.gif" width="40" height="40" border="0" alt=""></td>
            <td align="left" valign="middle">Unmovable square.</td>
         </tr>
         <tr>
            <td align="left" valign="top" colspan="2">
               <br>
               A movable square must have the empty space beside it in order to be moved. Click the square to move it.<br><br>
               Click <b>Start</b> to begin.<br><br>
               Click <b>Forfeit Round</b> if it is not possible to get your square into one of the corners.<br><br>
               <b>Scoring:</b> 1 point for each second remaining on the clock (no points for forfeit).
            </td>
         </tr>
      </table>
   </p>
</div>
<div id="elCtrls">
   <table width="400" cellpadding="2" cellspacing="0" border="0">
      <tr>
         <td align="left">Round: <div id="elRounds">0</div></td>
         <td align="left">Time: <div id="elClock">60</div> sec</td>
         <td align="left">Game Score: <div id="elScoreboard">0</div></td>
      </tr>
   </table>
   <input type="button" value="Start" onclick="startGame();" id="elBtnStart">
   <input type="button" value="Forfeit Round" onclick="endGame(true);" id="elBtnForfeit" disabled>
</div>
<img src="imgs/clear.gif" width="1" height="1" border="0" alt="" style="visibility:hidden;display:none;">

</body>
</html>