<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;
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>