$W=640.0;$H=480.0;$pz=7.50;$X=$Y=0.0;$to='';$fq=30;
$g=document.getElementById( "c" );
$g.style.border="1px solid black";$c=$g.getContext('2d');$nw=new Date();$now=$nw.getTime();$g.width=$W;$g.height=$H;
$c.beginPath();$X=($W/2)-$pz;$Y=($H/2)-$pz;$c.fillStyle='#ff0000';$c.fillRect($X,$Y,$pz,$pz);
$to=setInterval(function(){$rm=Math.random();
if($rm <.250){$X += $pz;$bgc='red';}
if($rm >=.250 && $rm <.500){$Y -= $pz;$bgc='green';}
if($rm >=.500 && $rm <.750){$X -= $pz;$bgc='blue';}
if($rm >=.750 ){$Y += $pz;$bgc='magenta';}
if(($X<=0)||($X>=$W)||($Y<=0)||($Y>=$H))
{clearInterval($to); $c.font='bold 16px verdana';
$nw2=new Date();$end=$nw2.getTime();$dt=($end-$now)/1000.;$rt="It's Over: Run Time = "+$dt+" seconds";
$c.fillStyle='#000';$c.fillText($rt,20,30); return;}
$c.fillStyle=$bgc;$c.fillRect( $X, $Y, $pz, $pz );
},$fq);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
Random Walk<br />
<canvas id="c"></canvas>
<!--
Random Walk version 1.4. Generate a random number from 0 to .999999.
When the number is 0 to .2500 move right; from .2501 to .5000 move down;
from .5001 to .7500 move left; .7501 or greater move up; The random numbers
and value checks are in a function that is the first argument to setInterval.
The interval is 30 milliseconds. Increase this value to slow the walk.
The canvas is 640 x 480 and is "divided" into blocks that are 7.5 pixels square.
Each direction is also associated with a color that becomes the background
color of that square. So, move down and the square is colored green.
The walk starts at midpoint of the canvas and stops when the walk gets to
an edge of the canvas. When the walk stops, the time is registered in the
upper left corner of the canvas.
-->
<script>
$width=640; // canvas width
$height=480; // canvas height
$pz=7.50; // box height
$X=$Y=0.0; // initialize
var $to; // time interval return parameter
$fq=30; // frequency interval - increase to slow the walk
$g=window.document.getElementById( "c" );
$g.width='640'; // increase the canvas dimensions
$g.height='480';
$g.style.border="1px solid black";
$c=$g.getContext('2d');
$nw=new Date();
$now=$nw.getTime(); // start time
$c.clearRect(0,0,$width,$height);
$c.beginPath();
$X=($width/2)-$pz; // set the center X and Y values
$Y=($height/2)-$pz;
$c.fillStyle='#ff0000'; // initial center box is red
$c.fillRect($X,$Y,$pz,$pz);
$to=setInterval(function()
{
$rm=Math.random();
if( $rm < .250)
{
$X += $pz; // move right
$bgc='red';
}
if( $rm >= .250 && $rm < .500 )
{
$Y -= $pz; // move down
$bgc = 'green';
}
if( $rm >= .500 && $rm < .750 )
{
$X -= $pz; // move left
$bgc = 'blue';
}
if ( $rm >= .750 )
{
$Y += $pz; // move up
$bgc='magenta';
}
if ( ( $X <= 0 ) || ( $X >= $width ) || ( $Y <=0 ) || ( $Y >= $height ) )
{
clearInterval($to);
$c.font='bold 16px verdana';
$nw2=new Date();
$end=$nw2.getTime(); // end time in milliseconds
$delt=($end-$now)/1000.; // run time in seconds
$rt="It's Over: Run Time = "+$delt+" seconds";
$c.fillStyle='#000';
$c.fillText($rt,20,30);
return;
}
$c.fillStyle=$bgc;
$c.fillRect( $X, $Y, $pz, $pz );
} ,$fq );
</script>
</body>
</html>
