<html>
<head>
<title>Mario Kart: Evasion</title>
 
<style>
 
#lay1      { 
            position: absolute; background-image: url(lay1.gif); 
            top: 90; left: 100; width: 48; height: 48; 
            pixelTop: 90; pixelLeft: 100;
           }
 
#lay2      {
            position: absolute; background-image: url(lay2.gif); 
            top: 20; left: 20; width: 48; height: 48;
           }
 
#lay3      {
            position: absolute; background-image: url(lay3.gif);       
            top: 50; left: 10; width: 48; height: 48;
           }
 
#lay4      {
            position: absolute; background-image: url(lay4.gif); 
            top: 120; left: 20; width: 48; height: 48;
           }
 
#lay5      {
            position: absolute; background-image: url(lay5.gif); 
            top: 77; left: 22; width: 48; height: 48;
           }
 
#lay6      {
            position: absolute; background-image: url(lay6.gif); 
            top: 34; left: 33; width: 48; height: 48; 
           }
 
#lay7      {
            position: absolute; background-image: url(lay7.gif); 
            top: 46; left: 100; width: 48; height: 48;
           }
 
#lay8      {
            position: absolute; background-image: url(lay8.gif); top: 29;
            left: 58; width: 48; height: 48;
           }
 
#paused    {
            position: absolute; background-image: url(paused.gif); 
            top: 50; left: 50; width: 200; height: 50; visibility: hidden;
           }
 
 
</style>
 
 
<script language="JavaScript" type="text/javascript">
<!--
 
var mouseX = 0;
var mouseY = 0;
var is_paused = true;
 
document.onmousemove = trackMouse;
document.onmouseout = mouseOut;
document.onmouseover = mouseOver;
 
 
function mouseOver()
{
  is_paused = false;
  paused.visibility = "hidden";
  window.status = '';
}
 
function mouseOut()
{
  is_paused = true;
  paused.style.pixelLeft = document.body.clientWidth/2 - 100;
  paused.style.pixelTop = document.body.clientHeight/2 - 25;
  paused.visibility = "visible";
  window.status = 'Paused';
}
 
function trackMouse(e)
{
  mouseX = event.clientX + document.body.scrollLeft;
  mouseY = event.clientY + document.body.scrollTop;
}
 
 
function move()
{
  var lose = false;
 
  var bwidth = document.body.clientWidth;
  var bheight = document.body.clientHeight;
 
  if (!is_paused)
 
  for (var i = 0; i < document.all.length; i++)
    {
     if (document.all[i].extra != "layer")
        continue;
 
     var layer = document.all[i];
 
     layer.style.pixelTop += layer.delY;
     layer.style.pixelLeft += layer.delX;
 
 
     var oTop = layer.style.pixelTop + 0;
     var oLeft = layer.style.pixelLeft + 0;
 
     if (oLeft <= 0 && layer.delX < 0)
        layer.delX = -layer.delX;
     else if (oLeft + 48 >= bwidth && layer.delX > 0)
        layer.delX = -layer.delX;
 
     if (oTop <= 0 && layer.delY < 0)
        layer.delY = -layer.delY;
     else if (oTop + 48 >= bheight && layer.delY > 0)
        layer.delY = -layer.delY;
 
     // Check for mouse collision
 
     if (oLeft <= mouseX && oLeft + 48 >= mouseX &&
         oTop <= mouseY && oTop + 48 >= mouseY && !lose)
       {
        alert("You ran into " + layer.name + "!");
        lose = true;
       }
    }
 
  setTimeout("move()", 20);
}
 
 
function main()
{
 
   for (var i = 0; i < document.all.length; i++)
     {
      var layer = document.all[i];
 
      if (layer.extra == "layer")
        {
         layer.style.pixelTop = layer.offsetTop;
         layer.style.pixelLeft = layer.offsetLeft;
         layer.delX = parseInt(layer.delX);
         layer.delY = parseInt(layer.delY);
        }
     }
 
   move();
}
 
 
// -->
</script>
 
</head>
<body bgcolor="#ffffff" onLoad="main();">
 
 
<div id="lay1" name="Donkey Kong" extra="layer"
delX=-1 delY=-1></div>
 
<div id="lay2" name="Yoshi" extra="layer"
delX=3 delY=2></div>
 
<div id="lay3" name="Wario" extra="layer"
delX=3 delY=-4></div>
 
<div id="lay4" name="Toad" extra="layer"
delX=2 delY=3></div>
 
<div id="lay5" name="Princess" extra="layer"
delX=-1 delY=-2></div>
 
<div id="lay6" name="Mario" extra="layer"
delX=-2 delY=2></div>
 
<div id="lay7" name="Luigi" extra="layer"
delX=-2 delY=-1></div>
 
<div id="lay8" name="Bowser" extra="layer"
delX="-1" delY="5"></div>
 
 
<div id="paused"></div>
 
 
 
</body>
</html>

All material Copyright (c) 2001-2010 Hexar
Please direct all inquiries, love letters, and hate mail to .

Home •  Blog •  Photos •  Code •  Features •  Resume •  WinTetris