Untitled Document

var WIDTH;
var HEIGHT;
var elements = new Array();
var color = ["rgba(133, 189, 252, 0.1)", "rgba(253, 133, 252, 0.6)", "rgba(252, 253, 11, 0.6)", "rgba(255, 255, 255, 0.6)", "rgba(0, 0, 0, 0.6)"];
var col;
col = 1;
var Mousex; //Records mouse locations
var Mousey;
var g;
var r;
r = 75; //Radius of Mouse
var myImage = new Image();
myImage.src = "images/logo.png";
var islogo;
islogo =false;
var logo = [10, 10];
var Dcol = 0; //Default Color

function start(){

g = document.getElementById('canvas').getContext("2d");//Save canvas to fast var
getBrowserDimensions();
setgrid();
return setInterval(draw, 100);//Run draw loop on interval

}

function setgrid()
{

var k;
var j;
var spot = 0;

for(j=0; j<WIDTH; j = j +30)
{

for(k=0; k<HEIGHT; k = k +30)
{

elements[spot] = new element(j, k, 0);
spot += 1;
}

}

}

function element(x, y, s){

this.x =x;
this.y =y;

this.s = s;

this.getX = function(){
return this.x;
}

this.getY = function(){
return this.y;
}

this.getS = function(){
return this.s;
}

}

function draw() {

var i;
for(i=0; i<elements.length; i++){

if(highlight(i))
g.fillStyle = color[col];
else
g.fillStyle = color[Dcol];;

g.fillRect(elements[i].getX(), elements[i].getY(), 20, 20);
}

g.drawImage(myImage, logo[0], logo[1], 650, 212);

}

function highlight(n){

var i;

var x = elements[n].getX();
var y = elements[n].getY();

return intersect(x+10, y+10)

}

function intersect(x1, y1){

dx =Math.abs(MouseX - x1); //Preform midpoints
dy = Math.abs(MouseY - y1);

dis = 0;
dis = Math.sqrt((dx*dx) + (dy*dy));//uses Pythagorean to ditermine distance from midpoint to click

if(dis < r)
return true;
else return false;
}

function onMouseMove(evt)
{
//Constant store mouse coordinates
MouseX = evt.pageX;
MouseY = evt.pageY;

}

function onMouseDown(evt)
{

if(col<color.length-1)
col += 1;
else
col = 0;

}

function KeyCheck()

{

if(event.keyCode == 32){
if(Dcol<color.length-1)
Dcol+=1;
else Dcol = 0;
}

}

document.onkeyup = KeyCheck;
document.onmousedown = onMouseDown;
document.onmousemove =onMouseMove;
window.onresize = getBrowserDimensions;

function getBrowserDimensions() {

document.getElementById('canvas').width = window.innerWidth ;
document.getElementById('canvas').height = window.innerHeight;

WIDTH = document.getElementById('canvas').width;//reset width/height and origin
HEIGHT = document.getElementById('canvas').height;
elements.length = 0;
setgrid()

}

</script>
</head>
<body onLoad="start();" style="padding:0; margin:0">
<canvas id="canvas" width="600" height="600" ></canvas>

<audio autoplay loop>
<source src="media/Taikutsu.mp3" type="audio/mpeg" />
<source src="media/Taikutsu.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>

<div style="position:absolute; bottom:0; right:0;font-size:22px; padding:30px;">
<strong>Click To Change Your Mouse</strong><br>
<strong>Spacebar To Change Background</strong>
</div>

</body>
</html>