Win95 Cool Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style>

canvas { background: #eee; }

</style>

</head>

<body>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

var ballRadius = 3;

var x = 111;

var y = 70;

var dx = 1;

var dy = -1;

var r1=[1 , -1,0.1, 1 , 0.2, -0.3,0, -1 , 1 ,-0.4,1 ,0.5,-0.6,-1 ,-1 ,0.7,1 ,1 ,0.9,1 ,-1 ,0 ,-1 ,1 ,-0.5,0.5,1,-1,-0.1,-1,-0.2,1,-0.9,0.05,1,1,-0.9,1,-0.8,1,-0.05,1,-0.7,0.03,1,-1];

var r2=[0.1,-0.1,1 ,-0.2, -1 , 1 ,-1,-0.3,0.4, 1 , 0.5 ,-1 ,-1 ,-0.6,-0.7 ,1 ,0.8,0.9 ,-1 ,-1,0.3,-1,0 ,0.3,1 ,-1,1,-1,1,0,1,-0.5,1,1,0.05,0.2,1,-0.9,1,-0.8,1,-0.05,1,-1,0.03,-0.03,-0.03];

var score1 = 0;

var score2 = 0;

var b= 350;

var c=15;

var bRadius= 3;

var db=0.5;

var dc=0.5;

var j=0;

var i=0;

var h=0;

var k=0;

function drawBall() {

ctx.beginPath();

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

ctx.fillStyle = "#0095DD";

ctx.fill();

ctx.closePath();

}

function drawPaddle() {

ctx.beginPath();

ctx.strokeStyle = '#0000FF';

ctx.beginPath();

ctx.moveTo(130, 0);

ctx.lineTo(130, 150);

ctx.lineTo(330, 150);

ctx.lineTo(330, 0);

ctx.moveTo (130, canvas.height);

ctx.lineTo(130,190);

ctx.lineTo(330,170);

ctx.lineTo(330, canvas.height);

ctx.stroke();

ctx.fill();

ctx.closePath();

}

function drawBig () {

ctx.beginPath();

ctx.arc(b, c, bRadius, 0, Math.PI*2);

ctx.fillStyle = "red";

ctx.fill();

ctx.closePath();

}

function drawScore() {

ctx.font = "16px Arial";

ctx.fillStyle = "#0095DD";

ctx.fillText("Score1: "+score1, 8, 20);

ctx.fillText("Score2: "+score2, 350, 20); }

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();

drawPaddle();

drawScore();

drawBig ();

if ( x >130&&x<330 && y<150 || y>190 && x>130&&x<133||y>170&&x>327&&x<330)

{ dx=-dx ; }

if ( x<3){x=x+1; dx=-dx;}

if (x>458){

dx=-dx;

x=x-1; }

if (x>130&& x<330&& y>149&&y<151)

{ dy =-dy; }

if (x>130&&x<330 &&y>169+(333-x)/10&&y<192)

{ dy =-dy;

y=y-1;

dx=dx-0.1;

if (dx<-1){dx=dx+0.1} }

if(y>358) {

y=y-1;

dy = -dy;}

if (y<3){

dy=-dy;

y=y+1; }

if ( b >130&&b<330 && c<150 || c>190 && b>130&&b<133||c>170&&b>327&&b<330)

{

db=-db ; }

if ( b<3){b=b+1; db=-db;}

if (b>458){

db=-db;

b=b-1; }

if (b>130&& b<330&& c>149&&c<151 )

{ dc =-dc; }

if (b>130&&b<330 &&c>169+(333-b)/10&&c<192)

{ dc =-dc;

c=c-1;

db=db-0.1;

if (db<-1){db=db+0.1} }

if(c>358) {

c=c-1;

dc = -dc;}

if (c<3){

dc=-dc;

c=c+1; }

if (j >140) {

let i=Math.floor(Math.random()*44);

j=0 ;

dy=r1[i];

dx=r2[i]; }

if (h >140) {

let i=Math.floor(Math.random()*44);

db=r1[i];

dc=r2[i];

h=0 ; }

if(x>128&&x<300&&y>129&&y<150){y=y+20}

if(b>128&&b<300&&c>129&&c<150){c=c+20}

h++;

j++;

x += dx;

y += dy;

b +=db;

c +=dc;

if (x< 180)score1++;

else if(x>330)

{score2++ ;}

if (b< 180)score1++;

else if(b>330)

{score2++ ;} }

var interval = setInterval(draw);

</script>

</body>

</html>