mrain.html

<!doctype html>
<html lang="en">
<html>
<head>
 <meta charset="utf-8">

  <title>._jack_the_intrepid_sqrl</title>
  <meta name="description" content="Gotta Getta gNut">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
		<meta charset="utf-8">
		<title>Matrix</title>
</head>
	<body>
	<div align="center">
	<h3>._strange_nm-\qp/-mn_i_thought_it_would_be_green.</i></h3>
	<canvas id="q" width="500" height="700">Sorry Browser Won't Support</canvas><br/><br/>
	<button id="play">Play</button>
	<button id="pause">pause</button>
	</div>
<script>
$(document).ready(function(){
var s=window.screen;
var width = q.width=s.width;
var height = q.height;
var yPositions = Array(300).join(0).split('');
var ctx=q.getContext('2d');
 
var draw = function () {
  ctx.fillStyle='rgba(25,25,0,.05)';
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle='#FF0000';
  ctx.font = '10pt Georgia';
  yPositions.map(function(y, index){
    text = String.fromCharCode(1e2+Math.random()*33);
    x = (index * 10)+10;
    q.getContext('2d').fillText(text, x, y);
	if(y > 100 + Math.random()*1e4)
	{
	  yPositions[index]=0;
	}
	else
	{
      yPositions[index] = y + 10;
	}
  });
};
RunMatrix();
function RunMatrix()
{
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
		Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
clearInterval(Game_Interval);
}
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
 
})
</script>
</body>
</html>