Fire JS Bin - neon-fighter

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

//Neon fighter, a HTML5 Canvas game
//Copyright Will Clay 2010
//email me at syler A-T canvaswave D-O-T com if you want to use the game or any of the scripts

//HTML elements
var mainCanvas;
var ctx; //the drawing context
var bgCanvas;
var bgCtx;
var overCanvas;
var overText1;
var overText2;
var highscoreDiv;

//some preloader variables
var itemsLoaded;
var itemsToLoad;
var loadInterval;
var loaded;

//the mouse location
var mouseX,mouseY

//some booleans
var gameOn;
var frozen;
var mouseDown;
var three;

//virtual canvases;
var skyCan;

//air traffic control
var ATC;
var currentIndex;
var playerIndex;
var ATCInterval;
var ballTimeout;
var starTimeour;
var faceTimeout;
var maskTimeout
var cannonTimeout;
var powerTimeout;
var hurtTimeout;
var endPowerTimeout;

//score keeping
var gameTime;
var enemyScore;
var currentScore;

//sprite prototypes
var playerReg;
var playerHurt;
var playerInv;
var playerShot;
var enemyBall;
var enemyStar;
var enemyFace;
var enemyMask;
var enemyShot;
var enemyCannon;
var enemyMissile;
var powerInv;
var powerThree;
var powerHealth;

//others
var lastFire;
var powerStart;
var powerEnd;

//animated sprite prototype class with multiple pre-rendered frames
function SpriteProto(nFrames,nParentCtx,nSize,nName){
	this.frames = nFrames;
	this.parentCtx = nParentCtx;
	this.size = nSize;
	this.name = nName;
	this.frameArray = new Array(this.frames);
	for(var i=0;i<this.frames;i++){
		this.frameArray[i] = document.createElement("CANVAS");
	}
	this.startFrame=0;
	this.currentFrame=0;
	this.animated=true;
	this.maxHp=1;
}

//linked list of Sprites w/ positions, velocities, etc.
function Sprite(){
	this.index = 0;
	this.spriteProto = 0;
	this.next = 0;
	this.prev = 0;
	this.x0=0;
	this.y0=0;
	this.x=0;
	this.y=0;
	this.dx=0;
	this.dy=0;
	this.ddx=0;
	this.ddy=0;
	this.currentFrame=0;
	this.startFrame=0;
	this.animated=true;
	this.hp=1;
	this.shotFreq = 0;
	this.lastShot = 0;
	this.noAnimFrame=0;
}

Sprite.prototype.draw = function(){
	if(this.spriteProto == 0) return;
	if(this.spriteProto.parentCtx.drawImage){
		if(this.spriteProto.animated){
			this.spriteProto.parentCtx.drawImage(this.spriteProto.frameArray[this.spriteProto.currentFrame],Math.round(this.x),Math.round(this.y));
		}
		else{
			this.spriteProto.parentCtx.drawImage(this.spriteProto.frameArray[this.noAnimFrame],Math.round(this.x),Math.round(this.y));
		}
	}
}

//air traffic control maintains proper animation and positions
function AirTrafficController(nFrameRate){
	this.frameRate = nFrameRate;
	this.frameLength = 1000/this.frameRate;
	var d = new Date();
	this.startTime = d.getTime();
	this.sprites = 0;
}

AirTrafficController.prototype.initialize = function(){
	this.frameLength = 1000/this.frameRate;
	var d = new Date();
	this.startTime = d.getTime();
	this.sprites = 0;
}

AirTrafficController.prototype.addSprite = function(nIndex,nSprite){
	if(this.sprites == 0){
		this.sprites = new Sprite();
		this.sprites.index = nIndex;
		this.sprites.spriteProto = nSprite;
		this.sprites.hp = nSprite.maxHp;
	}
	else{
		var tempSprite = this.sprites;
		while(tempSprite.next!=0){
			tempSprite = tempSprite.next;
		}
		tempSprite.next=new Sprite();
		tempSprite.next.index = nIndex;
		tempSprite.next.spriteProto = nSprite;
		tempSprite.next.hp = nSprite.maxHp;
		tempSprite.next.next = 0;
		tempSprite.next.prev = tempSprite;
	}
}

AirTrafficController.prototype.removeSprite = function(nIndex){
	if(this.sprites != 0){
		var tempSprite = this.sprites;
		while(tempSprite.next!=0 && tempSprite.index != nIndex){
			tempSprite = tempSprite.next;
		}
		if(tempSprite.index == nIndex){
			if(tempSprite.prev==0 && tempSprite.next==0){
				tempSprite = 0;
				this.sprites = 0;
			}
			else{
				if(tempSprite.prev==0){
					this.sprites = tempSprite.next;
					tempSprite.next.prev=0;
				}
				else if(tempSprite.next==0){
					tempSprite.prev.next=0;
				}
				else{
					tempSprite.prev.next = tempSprite.next;
					tempSprite.next.prev = tempSprite.prev;
				}
				tempSprite = 0;
			}
		}
	}
}

AirTrafficController.prototype.draw = function(){
	this.frameLength = 1000/this.frameRate;
	var tempSprite = this.sprites;
	if(tempSprite.sprite == 0) return;
	var d = new Date();
	var currentTime = d.getTime();
	var oldFrame;
	var difference;
	var globalFrame=this.getFrame();
	while(tempSprite != 0){
		if(tempSprite.animated){
			oldFrame=tempSprite.currentFrame;
			tempSprite.currentFrame = globalFrame;
			tempSprite.x+=tempSprite.dx*(tempSprite.currentFrame-oldFrame);
			tempSprite.y+=tempSprite.dy*(tempSprite.currentFrame-oldFrame);
			if(tempSprite.currentFrame!=oldFrame){
				tempSprite.dx+=tempSprite.ddx;
				tempSprite.dy+=tempSprite.ddy;
			}
		}
		if(tempSprite.spriteProto.animated){
			tempSprite.spriteProto.currentFrame = (globalFrame - tempSprite.spriteProto.startFrame)%tempSprite.spriteProto.frames;
		}
		tempSprite.draw();
		tempSprite = tempSprite.next;
	}
}

AirTrafficController.prototype.getFrame = function(){
	var d = new Date();
	var currentTime = d.getTime();
	return Math.floor((currentTime-this.startTime)/this.frameLength);
}

AirTrafficController.prototype.getSprite = function(nIndex){
	var tempSprite = this.sprites;
	if(tempSprite.sprite == 0) return 0;
	while(tempSprite != 0 && tempSprite.index != nIndex){
		tempSprite = tempSprite.next;
	}
	if(tempSprite == 0) return 0;
	return tempSprite;
}

//set up the main screen and intialize variables
function initialize(){
	itemsLoaded = 0;
	itemsToLoad = 2;
	loaded = false;
	gameOn = false;
	frozen=false;
	mouseDown = false;
	currentIndex=1;
	ATC = new AirTrafficController(20);

lastFire=0;

mainCanvas = document.getElementById("mainCanvas");
	ctx = mainCanvas.getContext("2d");
	bgCanvas = document.getElementById("bgCanvas");
	bgCtx = bgCanvas.getContext("2d");
	overCanvas = document.getElementById("overCanvas");
	overText1 = document.getElementById("overText1");
	overText2 = document.getElementById("overText2");
	overText3 = document.getElementById("overText3");
	highscoreDiv = document.getElementById("highscoreDiv");

resize();

var overCtx = overCanvas.getContext("2d");
	overCtx.strokeStyle = "black";
	overCtx.fillStyle = "rgba(255,255,255,0.01)";
	overCtx.fillRect(0,0,overCanvas.width,overCanvas.height);
	overCtx.strokeRect(0,0,overCanvas.width,overCanvas.height);

overText1.style.fontSize = "28px";
	overText1.style.color = "white";
	overText1.style.textAlign = "right";
	overText1.innerHTML = "0";
	overText1.style.visibility="hidden";

overText2.style.fontSize = "20px";
	overText2.style.textAlign = "center";
	overText2.innerHTML = "Loading";

overText3.style.fontSize = "48px";
	overText3.style.color = "rgb(90,220,50)";
	overText3.style.textAlign = "center";
	overText3.innerHTML = "Neon Fighter";

if(overCanvas.addEventListener){
		overCanvas.addEventListener("click",clickEvent,false);
		overCanvas.addEventListener("mousemove",moveEvent,false);
		overCanvas.addEventListener("mousedown",mousedownEvent,false);
		overCanvas.addEventListener("mouseup",mouseupEvent,false);

window.addEventListener("resize",resize,false);
	}
	else{
		overCanvas.attachEvent("onclick",clickEvent);
		overCanvas.attachEvent("onmousemove",moveEvent);
		overCanvas.attachEvent("onmousedown",mousedownEvent);
		overCanvas.attachEvent("onmouseup",mouseupEvent);

window.attachEvent("onresize",resize);
	}
	drawBackground();
	preload();
	loadInterval = window.setInterval("checkLoaded();",50);
}

function resize(){
	bgCanvas.style.position = "absolute";
	mainCanvas.style.position = "absolute";
	overText1.style.position = "absolute"
	overText2.style.position = "absolute"
	overText3.style.position = "absolute"
	overCanvas.style.position = "absolute";
	highscoreDiv.style.position = "absolute";

bgCanvas.style.zIndex = -100;
	mainCanvas.style.zIndex = 0;
	overText1.style.zIndex = 100;
	overText2.style.zIndex =200;
	overText3.style.zIndex =300;
	overCanvas.style.zIndex = 1000;
	highscoreDiv.style.zIndex=1200;

bgCanvas.style.left = mainCanvas.offsetLeft+"px";
	bgCanvas.style.top = mainCanvas.offsetTop+"px";

overCanvas.style.left = mainCanvas.offsetLeft+"px";
	overCanvas.style.top = mainCanvas.offsetTop+"px";

overText1.style.width = mainCanvas.width+"px";
	overText1.style.top = mainCanvas.offsetTop+"px";

overText2.style.width = mainCanvas.width+"px";
	overText2.style.top = (mainCanvas.height/2+mainCanvas.offsetTop-overText2.style.height/2)+"px";

overText3.style.width = mainCanvas.width+"px";
	overText3.style.top = (mainCanvas.height/4+mainCanvas.offsetTop-overText3.style.height/2)+"px";

highscoreDiv.style.top = (mainCanvas.offsetTop+(mainCanvas.height-parseInt(highscoreDiv.style.height))/2)+"px";
	highscoreDiv.style.left = (mainCanvas.offsetLeft+(mainCanvas.width-parseInt(highscoreDiv.style.width))/2)+"px";
}

//Checks if the preload functions have completed
function checkLoaded(){
	if(itemsLoaded >= itemsToLoad){
		loaded=true;
		window.clearInterval(loadInterval);
		overText2.innerHTML = "Click to Start";
	}
}

//manages mouse clicks
function clickEvent(e){
	if(!e) e=window.event;
	if(e.stopPropagation) e.stopPropagation();
	if(e.preventDefault) e.preventDefault();
	findMouse(e);
	if(loaded && !gameOn && !frozen){
		beginGame();
	}
	else if(gameOn){
		fireShot();
	}
}

//manages mouse movements
function moveEvent(e){
	if(!e) e=window.event;
	if(e.stopPropagation) e.stopPropagation();
	if(e.preventDefault) e.preventDefault();
	findMouse(e);
	if(gameOn && ATC.sprites != 0){
		ATC.getSprite(playerIndex).x = mouseX-playerReg.size/2;
		ATC.getSprite(playerIndex).y = mouseY;
	}
}

//you get the idea
function mousedownEvent(e){
	mouseDown=true;
	if(!e) e=window.event;
	if(e.stopPropagation) e.stopPropagation();
	if(e.preventDefault) e.preventDefault();
}

function mouseupEvent(e){
	mouseDown=false;
	if(!e) e=window.event;
	if(e.stopPropagation) e.stopPropagation();
	if(e.preventDefault) e.preventDefault();
}

//re-initializes game variables and starts the game loop
function beginGame(){
	gameOn = true;
	enemyScore=0;
	overText2.style.visibility = "hidden";
	overText3.style.visibility = "hidden";
	overText1.style.visibility = "visible";
	overCanvas.style.cursor = "none";
	powerStart=0;
	powerEnd=0;
	ATC.initialize();
	playerIndex = currentIndex;
	ATC.addSprite(currentIndex,playerReg);
	ATC.getSprite(currentIndex).x = mouseX-playerReg.size/2;
	ATC.getSprite(currentIndex).y = mouseY;

//main game loop
	ATCInterval = window.setInterval("mainCanvas.width=mainCanvas.width;bgCtx.drawImage(skyCan,0,0);ATC.draw();process();drawBar();",ATC.frameLength);
	ballTimeout=window.setTimeout("createBall();",1000);
	powerTimeout=window.setTimeout("createPower();",5000);
	starTimeout=window.setTimeout("createStar();",10000);
	faceTimeout=window.setTimeout("createFace();",30000);
	maskTimeout=window.setTimeout("createMask();",120000);
	cannonTimeout=window.setTimeout("createCannon();",60000);
	lastFire=0;
}

//ends the game loop and other timed events, opens the score submission form
function gameOver(){
	gameOn=false;
	frozen=true;
	three=false;
	window.clearInterval(ATCInterval);
	window.clearTimeout(ballTimeout);
	window.clearTimeout(powerTimeout);
	window.clearTimeout(starTimeout);
	window.clearTimeout(faceTimeout);
	window.clearTimeout(maskTimeout);
	window.clearTimeout(cannonTimeout);
	var tempSprite=ATC.sprites;
	while(tempSprite!=0){
		delSprite = tempSprite;
		tempSprite = tempSprite.next;
		ATC.removeSprite(delSprite.index);
	}
	currentIndex=1;
	mainCanvas.width=mainCanvas.width;
	bgCtx.drawImage(skyCan,0,0);
	overText2.innerHTML = "Game Over<br>Click to Restart";
	overText2.style.visibility="visible";
	overCanvas.style.cursor = "default";
	lastFire=0;
	openForm();
}

//creates a new player shot sprite (or three)
function fireShot(){
	if(ATC.getFrame()-lastFire <= 1) return;
	currentIndex++;
	ATC.addSprite(currentIndex,playerShot);
	ATC.getSprite(currentIndex).x=mouseX-playerShot.size/2;
	ATC.getSprite(currentIndex).y=mouseY;
	ATC.getSprite(currentIndex).startFrame=ATC.getFrame();
	ATC.getSprite(currentIndex).currentFrame=ATC.getFrame();
	ATC.getSprite(currentIndex).dy=-10;
	if(three){
		currentIndex++;
		ATC.addSprite(currentIndex,playerShot);
		ATC.getSprite(currentIndex).x=mouseX-playerShot.size/2;
		ATC.getSprite(currentIndex).y=mouseY;	
		ATC.getSprite(currentIndex).startFrame=ATC.getFrame();
		ATC.getSprite(currentIndex).currentFrame=ATC.getFrame();
		ATC.getSprite(currentIndex).dx=-5.5;
		ATC.getSprite(currentIndex).ddy=-.8;

currentIndex++;
		ATC.addSprite(currentIndex,playerShot);
		ATC.getSprite(currentIndex).x=mouseX-playerShot.size/2;
		ATC.getSprite(currentIndex).y=mouseY;
		ATC.getSprite(currentIndex).startFrame=ATC.getFrame();
		ATC.getSprite(currentIndex).currentFrame=ATC.getFrame();
		ATC.getSprite(currentIndex).dx=5.5;
		ATC.getSprite(currentIndex).ddy=-.8;
	}
	lastFire = ATC.getFrame();
}

//Handles all in game calculations and processes, including deleting dead sprites, firing shots, and ending the game
function process(){
	var tempSprite = ATC.sprites;
	if(tempSprite == 0 || !gameOn) return;
	var delSprite;
	//document.getElementById("debug").innerHTML+="b "+tempSprite.spriteProto;
	var d = new Date();
	var currentTime = d.getTime();
	var index;
	var x0,y0;
	var dx,dy,mag,theta;
	var shotFrame;
	gameTime = Math.floor(currentTime-ATC.startTime);
	var globalFrame = Math.floor((currentTime-ATC.startTime)/ATC.frameLength);
	if(mouseDown && globalFrame-lastFire > 1){
		fireShot();
	}
	currentScore = 10*Math.floor(gameTime/100) +enemyScore;
	overText1.innerHTML = (currentScore);
	if(tempSprite.spriteProto==0) return;
	while(tempSprite != 0){
		if(tempSprite.spriteProto.name == "star"){
			tempSprite.ddx = Math.floor((tempSprite.x0-tempSprite.x)/150);
		}
		if(tempSprite.spriteProto.name == "em"){
			x0 = tempSprite.x+tempSprite.spriteProto.size/2;
			y0 = tempSprite.y+tempSprite.spriteProto.size/2;
			dx = ATC.getSprite(playerIndex).x+ATC.getSprite(playerIndex).spriteProto.size/2-x0;
			dy = ATC.getSprite(playerIndex).y+ATC.getSprite(playerIndex).spriteProto.size/2-y0;
			mag=Math.sqrt(dx*dx+dy*dy);
			//document.getElementById("debug").innerHTML+=x0+" "+y0+" "+dx+" "+dy+" "+mag+"; ";
			tempSprite.ddx = 2*dx/mag;
			tempSprite.ddy = 2*dy/mag;
			dx = tempSprite.dx;
			dy = tempSprite.dy;
			mag=Math.sqrt(dx*dx+dy*dy);
			
			if(mag > 6){
				tempSprite.dx=(dx*6/mag);
				tempSprite.dy=(dy*6/mag);
			}
			mag=Math.sqrt(dx*dx+dy*dy);
			theta=0;
			if(mag!=0) theta = Math.acos(dx/mag);
			if(dy<0) theta=2*Math.PI-theta;
			//document.getElementById("debug").innerHTML+=dx+" "+dy+" "+mag+" "+theta+"; ";
			tempSprite.noAnimFrame = Math.floor(tempSprite.spriteProto.frames*theta/2/Math.PI)%tempSprite.spriteProto.frames;
		}
		else if(tempSprite.spriteProto.name == "face" || tempSprite.spriteProto.name == "cannon" || tempSprite.spriteProto.name == "mask"){
			if(tempSprite.x > mainCanvas.width-tempSprite.spriteProto.size){
				tempSprite.dx = -Math.abs(tempSprite.dx);
			}
			if(tempSprite.x < 0){
				tempSprite.dx = Math.abs(tempSprite.dx);
			}
			if(tempSprite.y > mainCanvas.height-tempSprite.spriteProto.size){
				tempSprite.dy = -Math.abs(tempSprite.dy);
			}
			if(tempSprite.y < 0){
				tempSprite.dy = Math.abs(tempSprite.dy);
			}
			if(tempSprite.spriteProto.name == "mask" && ATC.getSprite(tempSprite.index+1)!=0){
				ATC.getSprite(tempSprite.index+1).x = tempSprite.x+(tempSprite.spriteProto.size-ATC.getSprite(tempSprite.index+1).spriteProto.size)/2;
				ATC.getSprite(tempSprite.index+1).y = tempSprite.y+(tempSprite.spriteProto.size-ATC.getSprite(tempSprite.index+1).spriteProto.size)/2;
				ATC.getSprite(tempSprite.index+1).dx = tempSprite.dx;
				ATC.getSprite(tempSprite.index+1).dy = tempSprite.dy;
			}
			if(globalFrame - tempSprite.lastShot > tempSprite.spriteProto.shotFreq){
				currentIndex++;
				index=currentIndex;
				x0 = tempSprite.x+tempSprite.spriteProto.size/2;
				y0 = tempSprite.y+tempSprite.spriteProto.size/2;
				if(tempSprite.spriteProto.name == "face"){
					ATC.addSprite(index,enemyShot);
					dx = -x0+ATC.getSprite(playerIndex).x+ATC.getSprite(playerIndex).spriteProto.size/2;
					dy = -y0+ATC.getSprite(playerIndex).y+ATC.getSprite(playerIndex).spriteProto.size/2;
					mag=Math.sqrt(dx*dx+dy*dy);
					if(mag != 0){
						dx=dx*4/mag;
						dy=dy*4/mag;
					}
				}
				else{
					ATC.addSprite(index,enemyMissile);
					theta = 2*Math.PI*(tempSprite.spriteProto.currentFrame)/tempSprite.spriteProto.frames;
					dx = 4*Math.cos(theta);
					dy = 4*Math.sin(theta);
					ATC.getSprite(index).noAnimFrame=tempSprite.spriteProto.currentFrame;
				}
				ATC.getSprite(index).x=x0;
				ATC.getSprite(index).y=y0;
				ATC.getSprite(index).dx=dx;
				ATC.getSprite(index).dy=dy;
				ATC.getSprite(index).startFrame=ATC.getFrame();
				ATC.getSprite(index).currentFrame=ATC.getFrame();
				tempSprite.lastShot=globalFrame;
			}
		}
		if(tempSprite.spriteProto.name == "ps" && tempSprite.y < tempSprite.spriteProto.size/2){
			delSprite = tempSprite;
			tempSprite = tempSprite.next;
			ATC.removeSprite(delSprite.index);
		}
		else if(tempSprite.spriteProto.name == "em" && ATC.getFrame()-tempSprite.startFrame > 4000/ATC.frameLength){
			delSprite = tempSprite;
			tempSprite = tempSprite.next;
			ATC.removeSprite(delSprite.index);
		}
		else if(tempSprite.y > mainCanvas.height+tempSprite.spriteProto.size && tempSprite.spriteProto.name != "em" && tempSprite.index != playerIndex){
			delSprite = tempSprite;
			tempSprite = tempSprite.next;
			ATC.removeSprite(delSprite.index);
		}
		else if(tempSprite.hp <= 0){
			delSprite = tempSprite;
			tempSprite = tempSprite.next;
			ATC.removeSprite(delSprite.index);
			if(delSprite.spriteProto.name == "ball"){
				enemyScore+=100;
			}
			if(delSprite.spriteProto.name == "star"){
				enemyScore+=200;
			}
			if(delSprite.spriteProto.name == "face"){
				enemyScore+=1000;
			}
			if(delSprite.spriteProto.name == "mask"){
				enemyScore+=3000;
			}
			if(delSprite.spriteProto.name == "cannon"){
				enemyScore+=1500;
			}
			if(delSprite.index == playerIndex){
				gameOver();
				return;
			}
		}
		else if(tempSprite.spriteProto.name == "es"){
			if(tempSprite.x > mainCanvas.width+tempSprite.spriteProto.size || tempSprite.x < -tempSprite.spriteProto.size || tempSprite.y > mainCanvas.height+tempSprite.spriteProto.size || tempSprite.y < -tempSprite.spriteProto.size){
				delSprite = tempSprite;
				tempSprite = tempSprite.next;
				ATC.removeSprite(delSprite.index);
			}
			tempSprite = tempSprite.next
		}
		else{
			tempSprite = tempSprite.next;
		}
	}	
	collisionDetect();	
}

//Checks for collisions between sprites and acts accordingly
function collisionDetect(){
	var sprite1,sprite2;
	var x1,x2,y1,y2;
	var d;
	for(sprite1=ATC.sprites;sprite1!=0;sprite1=sprite1.next){
		for(sprite2=ATC.sprites;sprite2!=0;sprite2=sprite2.next){
			x1=sprite1.x+sprite1.spriteProto.size/2;
			y1=sprite1.y+sprite1.spriteProto.size/2;
			x2=sprite2.x+sprite2.spriteProto.size/2;
			y2=sprite2.y+sprite2.spriteProto.size/2;
			d=Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
			if(2*d<(sprite1.spriteProto.size+sprite2.spriteProto.size)){
				if(sprite1.spriteProto.name == "ps" && sprite2.index!=playerIndex && sprite2.spriteProto.name!="ps" && sprite2.spriteProto.name !="es" && sprite2.spriteProto.name !="em"){
					sprite1.y=-20;
					sprite2.hp--;
				}
				if(sprite2.spriteProto.name=="player"){
					if(sprite1.spriteProto.name == "ball" || sprite1.spriteProto.name == "star"){
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+20;;
						sprite2.hp--;
						sprite2.spriteProto = playerHurt;
						hurtTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg",500);
					}
					else if(sprite1.spriteProto.name == "face" || sprite1.spriteProto.name == "cannon"){
						sprite2.hp-=3;
						sprite2.spriteProto = playerHurt;
						hurtTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg",500);
					}
					else if(sprite1.spriteProto.name == "mask"){
						sprite2.hp-=6;
						sprite2.spriteProto = playerHurt;
						hurtTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg",500);
					}
					else if(sprite1.spriteProto.name == "es"){
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+20;
						sprite2.hp-=1;
						sprite2.spriteProto = playerHurt;
						hurtTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg",500);
					}
					else if(sprite1.spriteProto.name == "em"){
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+2000;
						sprite2.hp-=2;
						sprite2.spriteProto = playerHurt;
						hurtTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg;",500);
					}
				}
				if(sprite2.index==playerIndex){
					if(sprite1.spriteProto.name == "inv"){
						window.clearTimeout(endPowerTimeout);
						window.clearTimeout(hurtTimeout);
						three=false;
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+2000;
						sprite2.spriteProto = playerInv;
						powerStart = gameTime;
						powerEnd = gameTime+7000;
						endPowerTimeout=window.setTimeout("ATC.getSprite(playerIndex).spriteProto=playerReg;",7000);
					}
					if(sprite1.spriteProto.name == "three"){
						window.clearTimeout(endPowerTimeout);
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+2000;
						sprite2.spriteProto = playerReg;
						powerStart = gameTime;
						powerEnd = gameTime+14000;
						three=true;
						endPowerTimeout=window.setTimeout("three=false;",14000);
					}
					if(sprite1.spriteProto.name == "health"){
						sprite1.y=mainCanvas.height+sprite1.spriteProto.size+2000;
						sprite2.hp+=3;
					}
				}
			}
		}
	}
}

//these functions create enemy sprites and power-ups
function createBall(){
	currentIndex++;
	var index = currentIndex;
	var minTime = 1000-gameTime/200;
	ATC.addSprite(index,enemyBall);
	ATC.getSprite(index).x=Math.floor((500-enemyBall.size)*Math.random());
	ATC.getSprite(index).startFrame=ATC.getFrame();
	ATC.getSprite(index).currentFrame=ATC.getFrame();
	ATC.getSprite(index).dy=2;
	if(gameOn) ballTimeout=window.setTimeout("createBall()",minTime+Math.floor(4000*Math.random()));
}

function createStar(){
	currentIndex++;
	var index = currentIndex;
	var minTime = 1000-gameTime/200;
	ATC.addSprite(index,enemyStar);
	ATC.getSprite(index).x=Math.floor((500-enemyStar.size)*Math.random());
	ATC.getSprite(index).startFrame=ATC.getFrame();
	ATC.getSprite(index).currentFrame=ATC.getFrame();
	ATC.getSprite(index).dy=4;
	ATC.getSprite(index).x0 = ATC.getSprite(index).x;
	ATC.getSprite(index).dx=4;
	if(gameOn) starTimeout=window.setTimeout("createStar()",minTime+Math.floor(3000*Math.random()));
}

function createFace(){
	currentIndex++;
	var index = currentIndex;
	var minTime = 10000-gameTime/100;
	ATC.addSprite(index,enemyFace);
	ATC.getSprite(index).x=Math.floor((500-enemyFace.size)*Math.random());
	ATC.getSprite(index).startFrame=ATC.getFrame();
	ATC.getSprite(index).currentFrame=ATC.getFrame();
	ATC.getSprite(index).dy=2;
	ATC.getSprite(index).dx=2;
	if(gameOn) faceTimeout=window.setTimeout("createFace()",minTime+Math.floor(6000*Math.random()));
}

function createMask(){
	currentIndex+=2;
	var index1 = currentIndex-1;
	var index2 = currentIndex;
	var minTime = 60000-gameTime/100;
	ATC.addSprite(index1,enemyMask);
	ATC.getSprite(index1).x=Math.floor((500-enemyMask.size)*Math.random());
	ATC.getSprite(index1).startFrame=ATC.getFrame();
	ATC.getSprite(index1).currentFrame=ATC.getFrame();
	ATC.getSprite(index1).dy=2;
	ATC.getSprite(index1).dx=2;

ATC.addSprite(index2,enemyFace);
	ATC.getSprite(index2).x=ATC.getSprite(index1).x+(enemyMask.size-enemyFace.size)/2;
	ATC.getSprite(index2).y=(enemyMask.size-enemyFace.size)/2;
	ATC.getSprite(index2).startFrame=ATC.getFrame();
	ATC.getSprite(index2).currentFrame=ATC.getFrame();
	ATC.getSprite(index2).dy=2;
	ATC.getSprite(index2).dx=2;
	if(gameOn) maskTimeout=window.setTimeout("createMask()",minTime+Math.floor(6000*Math.random()));
}

function createCannon(){
	currentIndex++;
	var index = currentIndex;
	var minTime = 12000-gameTime/80;
	ATC.addSprite(index,enemyCannon);
	ATC.getSprite(index).x=Math.floor((500-enemyCannon.size)*Math.random());
	ATC.getSprite(index).startFrame=ATC.getFrame();
	ATC.getSprite(index).currentFrame=ATC.getFrame();
	ATC.getSprite(index).dy=1+Math.floor(Math.random()*3);
	ATC.getSprite(index).dx=1+Math.floor(Math.random()*3);
	if(gameOn) cannonTimeout=window.setTimeout("createCannon()",minTime+Math.floor(5000*Math.random()));
}

//draws the life and power up bars
function drawBar(){
	if(!gameOn) return;
	lingrad = bgCtx.createLinearGradient(0,30,0,45);
	if(ATC.getSprite(playerIndex).spriteProto.name != "playerHurt"){
		lingrad.addColorStop(0,"rgba(0,255,70,0)");
		lingrad.addColorStop(.3,"rgba(0,255,70,.7)");
		lingrad.addColorStop(.6,"rgba(0,255,70,1)");
		lingrad.addColorStop(.8,"rgba(0,255,70,.6)");
		lingrad.addColorStop(1,"rgba(0,255,70,.2)");
	}
	else{
		lingrad.addColorStop(0,"rgba(255,20,70,0)");
		lingrad.addColorStop(.3,"rgba(255,20,70,.7)");
		lingrad.addColorStop(.6,"rgba(255,20,70,1)");
		lingrad.addColorStop(.8,"rgba(255,20,70,.6)");
		lingrad.addColorStop(1,"rgba(255,20,70,.2)");
	}
	bgCtx.save();
	bgCtx.fillStyle = lingrad;
	bgCtx.fillRect(mainCanvas.width/10,30,8*mainCanvas.width/10*ATC.getSprite(playerIndex).hp/ATC.getSprite(playerIndex).spriteProto.maxHp,15);
	if(gameTime < powerEnd){
		lingrad = bgCtx.createLinearGradient(0,50,0,65);
		lingrad.addColorStop(0,"rgba(0,0,190,0)");
		lingrad.addColorStop(.3,"rgba(0,0,190,.7)");
		lingrad.addColorStop(.6,"rgba(0,0,190,1)");
		lingrad.addColorStop(.8,"rgba(0,0,190,.6)");
		lingrad.addColorStop(1,"rgba(0,0,190,.2)");
		bgCtx.fillStyle = lingrad;
		bgCtx.fillRect(mainCanvas.width/10,50,8*mainCanvas.width/10*(powerEnd-gameTime)/(powerEnd-powerStart),15);
	}
	bgCtx.restore();
}

//draws the background and saves it for later-only called at first loading of game
function drawBackground(){
	var bgCtx = bgCanvas.getContext("2d");
	bgCtx.fillStyle = "rgb(10,10,30)";
	bgCtx.fillRect(0,0,bgCanvas.width,bgCanvas.height);
	overText2.style.color = "white";
	bgCtx.strokeStyle = "rgb(128,137,156)";
	for(var x=0;x<bgCanvas.width;x++){
		for(var y=0;y<bgCanvas.height;y++){
			if(Math.floor(Math.random()*1000)==500){
				bgCtx.save();
				bgCtx.translate(x+.5,y+.5);
				bgCtx.rotate(Math.PI*Math.random());
				bgCtx.beginPath();
				bgCtx.moveTo(-1,0);
				bgCtx.lineTo(1,0);
				bgCtx.moveTo(0,-1);
				bgCtx.lineTo(0,1);	
				bgCtx.stroke()
				bgCtx.restore();
			}
		}
	}
	skyCan = document.createElement("CANVAS");
	skyCan.width = bgCanvas.width;
	skyCan.height = bgCanvas.height;
	skyCan.getContext("2d").drawImage(bgCanvas,0,0);
	itemsLoaded++;
}

//draws every sprite prototype frame and saves them for later
function preload(){
	var nFrame = 60;
	var nSize = 45;
	playerReg = new SpriteProto(nFrame,ctx,nSize,"player");
	playerReg.maxHp = 30;
	var i;
	var tempCtx;
	for(i = 0; i < nFrame;i++){
		playerReg.frameArray[i].width = nSize;
		playerReg.frameArray[i].height = nSize;
		tempCtx = playerReg.frameArray[i].getContext("2d");
		tempCtx.strokeStyle = "rgb(120,197,050)";
		tempCtx.lineWidth = 2.25;
		tempCtx.beginPath();
		tempCtx.moveTo(nSize/2,nSize/10);	
		tempCtx.lineTo(6*nSize/10,6*nSize/10);
		tempCtx.lineTo(9*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,8*nSize/10);
		tempCtx.lineTo(nSize/10,8*nSize/10);
		tempCtx.lineTo(4*nSize/10,6*nSize/10);
		tempCtx.lineTo(nSize/2,nSize/10);
		tempCtx.stroke();
		tempCtx.strokeStyle="rgb(090,100,200)";
		tempCtx.lineWidth = 2.25;
		tempCtx.save();
		tempCtx.translate(nSize/2,2*nSize/3);
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.arc(0,0,nSize/8,0,2*Math.PI,false);
		tempCtx.moveTo(0,-1*nSize/4);
		tempCtx.lineTo(0,nSize/4);
		tempCtx.stroke();
		tempCtx.restore();
		tempCtx.save();
		tempCtx.fillStyle = "rgba(255,23,23,"+(.5+.5*Math.sin(i/nFrame*2*Math.PI))+")";
		tempCtx.beginPath();
		tempCtx.arc(nSize/2,nSize/10,nSize/20,0,2*Math.PI,false);
		tempCtx.fill();
		tempCtx.restore();
	}

nFrame = 60;
	nSize = 45;
	playerHurt = new SpriteProto(nFrame,ctx,nSize,"playerHurt");
	playerHurt.startFrame = playerReg.startFrame;
	playerHurt.maxHp = 30;
	for(i = 0; i < nFrame;i++){
		playerHurt.frameArray[i].width = nSize;
		playerHurt.frameArray[i].height = nSize;
		tempCtx = playerHurt.frameArray[i].getContext("2d");
		tempCtx.strokeStyle = "rgb(250,107,060)";
		tempCtx.lineWidth = 2.25;
		tempCtx.beginPath();
		tempCtx.moveTo(nSize/2,nSize/10);	
		tempCtx.lineTo(6*nSize/10,6*nSize/10);
		tempCtx.lineTo(9*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,8*nSize/10);
		tempCtx.lineTo(nSize/10,8*nSize/10);
		tempCtx.lineTo(4*nSize/10,6*nSize/10);
		tempCtx.lineTo(nSize/2,nSize/10);
		tempCtx.stroke();
		tempCtx.strokeStyle="rgb(090,100,200)";
		tempCtx.lineWidth = 2.25;
		tempCtx.save();
		tempCtx.translate(nSize/2,2*nSize/3);
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.arc(0,0,nSize/8,0,2*Math.PI,false);
		tempCtx.moveTo(0,-1*nSize/4);
		tempCtx.lineTo(0,nSize/4);
		tempCtx.stroke();
		tempCtx.restore();
		tempCtx.save();
		tempCtx.fillStyle = "rgba(255,23,23,"+(.5+.5*Math.sin(i/nFrame*2*Math.PI))+")";
		tempCtx.beginPath();
		tempCtx.arc(nSize/2,nSize/10,nSize/20,0,2*Math.PI,false);
		tempCtx.fill();
		tempCtx.restore();
	}

nFrame = 60;
	nSize = 45;
	playerInv = new SpriteProto(nFrame,ctx,nSize,"playerInv");
	playerInv.startFrame = playerReg.startFrame;
	playerInv.maxHp = 30;
	var bright;
	for(i = 0; i < nFrame;i++){
		playerInv.frameArray[i].width = nSize;
		playerInv.frameArray[i].height = nSize;
		tempCtx = playerInv.frameArray[i].getContext("2d");
		bright = 215+Math.floor(40*Math.sin(2*i*Math.PI/nFrame));
		tempCtx.strokeStyle = "rgb("+bright+","+bright+","+bright+")";
		tempCtx.lineWidth = 2.25;
		tempCtx.beginPath();
		tempCtx.moveTo(nSize/2,nSize/10);	
		tempCtx.lineTo(6*nSize/10,6*nSize/10);
		tempCtx.lineTo(9*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,8*nSize/10);
		tempCtx.lineTo(6*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,9*nSize/10);
		tempCtx.lineTo(4*nSize/10,8*nSize/10);
		tempCtx.lineTo(nSize/10,8*nSize/10);
		tempCtx.lineTo(4*nSize/10,6*nSize/10);
		tempCtx.lineTo(nSize/2,nSize/10);
		tempCtx.stroke();
		tempCtx.strokeStyle="rgb(090,100,200)";
		tempCtx.lineWidth = 2.25;
		tempCtx.save();
		tempCtx.translate(nSize/2,2*nSize/3);
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.arc(0,0,nSize/8,0,2*Math.PI,false);
		tempCtx.moveTo(0,-1*nSize/4);
		tempCtx.lineTo(0,nSize/4);
		tempCtx.stroke();
		tempCtx.restore();
		tempCtx.save();
		tempCtx.fillStyle = "rgba(255,23,23,"+(.5+.5*Math.sin(i/nFrame*2*Math.PI))+")";
		tempCtx.beginPath();
		tempCtx.arc(nSize/2,nSize/10,nSize/20,0,2*Math.PI,false);
		tempCtx.fill();
		tempCtx.restore();
	}

nFrame = 10;
	nSize = 7;
	playerShot = new SpriteProto(nFrame,ctx,nSize,"ps");
	//tempCtx = playerShot.frameArray[0].getContext("2d");

for(i = 0; i < nFrame;i++){
		playerShot.frameArray[i].width = nSize;
		playerShot.frameArray[i].height = nSize;
		tempCtx = playerShot.frameArray[i].getContext("2d");
		tempCtx.strokeStyle = "rgba(020,210,010,"+(.875+.125*Math.sin(i/nFrame*2*Math.PI))+")";
		tempCtx.lineWidth = 1.5;
		tempCtx.beginPath();
		tempCtx.moveTo(nSize/10,9*nSize/10);
		tempCtx.lineTo(5*nSize/10,nSize/10);	
		tempCtx.lineTo(9*nSize/10,9*nSize/10);

tempCtx.stroke();
	}
	
	nFrame = 40;
	nSize = 40;
	enemyBall = new SpriteProto(nFrame,bgCtx,nSize,"ball");
	enemyBall.maxHp=3;

for(i = 0; i < nFrame;i++){
		enemyBall.frameArray[i].width = enemyBall.size;
		enemyBall.frameArray[i].height = enemyBall.size;
		tempCtx = enemyBall.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 4;
		tempCtx.translate(enemyBall.size/2,enemyBall.size/2);
		tempCtx.strokeStyle = "rgb("+(200+Math.floor(30*Math.sin(i/nFrame*4*Math.PI)))+",110,90)";
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.arc(0,0,4*enemyBall.size/10,0,2*Math.PI,false);
		tempCtx.moveTo(-9*enemyBall.size/20,0);
		tempCtx.lineTo(9*enemyBall.size/20,0);
		tempCtx.moveTo(0,-9*enemyBall.size/20);
		tempCtx.lineTo(0,9*enemyBall.size/20);
		tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 40;
	nSize = 30;
	var nPoints = 6;
	var j;
	enemyStar= new SpriteProto(nFrame,bgCtx,nSize,"star");
	enemyStar.maxHp=2;

for(i = 0; i < nFrame;i++){
		enemyStar.frameArray[i].width = nSize;
		enemyStar.frameArray[i].height = nSize;
		tempCtx = enemyStar.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 3;
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.fillStyle="rgb("+(180+Math.floor(75*Math.sin(i/nFrame*2*Math.PI)))+",200,"+
			(180+Math.floor(75*Math.sin(i/nFrame*2*Math.PI+Math.PI)))+")";
		tempCtx.beginPath();
		tempCtx.arc(nSize/10,0,nSize/15,0,2*Math.PI,false);
		tempCtx.fill();
		tempCtx.strokeStyle = "rgb("+(165+Math.floor(50*Math.sin(i/nFrame*Math.PI)))+",110,150)";
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.moveTo(4*nSize/10,0);
		for(j=0;j<nPoints*2+1;j++){
			tempCtx.rotate(Math.PI/nPoints);
			if(j%2==0) tempCtx.lineTo(2*nSize/10,0);
			else tempCtx.lineTo(4*nSize/10,0);
		}
		tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 75;
	nSize = 70;
	var nPoints = 20;
	var j;
	enemyFace  = new SpriteProto(nFrame,bgCtx,nSize,"face");
	enemyFace.maxHp = 20;
	enemyFace.shotFreq=8;

for(i = 0; i < nFrame;i++){
		enemyFace.frameArray[i].width = nSize;
		enemyFace.frameArray[i].height = nSize;
		tempCtx = enemyFace.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 3;
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.strokeStyle="rgb("+(210+Math.floor(35*Math.sin(i/nFrame*2*Math.PI)))+",160,0)";
		tempCtx.beginPath();
		tempCtx.arc(0,0,7*nSize/20,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.beginPath();
		tempCtx.arc(-nSize/8,-nSize/10,nSize/15,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.beginPath();
		tempCtx.arc(nSize/8,-nSize/10,nSize/15,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.beginPath();
		tempCtx.moveTo(nSize/20,-nSize/10);
		tempCtx.lineTo(nSize/20,nSize/40);
		tempCtx.arc(0,nSize/40,nSize/20,0,Math.PI,false);
		tempCtx.moveTo(-nSize/20,nSize/40);
		tempCtx.lineTo(-nSize/20,-nSize/10);

tempCtx.moveTo(-3*nSize/16,-nSize/5);
		tempCtx.lineTo(-nSize/16,-nSize/6);
		tempCtx.moveTo(nSize/16,-nSize/6);
		tempCtx.lineTo(3*nSize/16,-nSize/5);
		tempCtx.stroke();

if(i<nFrame/2){
			tempCtx.beginPath();
			tempCtx.arc(0,nSize/6,nSize/12,0,2*Math.PI,false);
			tempCtx.stroke();
		}
		else{
			tempCtx.beginPath();
			tempCtx.arc(-nSize/8,nSize/6,nSize/15,Math.PI/2,3*Math.PI/2,false);
			tempCtx.lineTo(nSize/8,nSize/10);
			tempCtx.arc(nSize/8,nSize/6,nSize/15,3*Math.PI/2,5*Math.PI/2,false);
			tempCtx.lineTo(-nSize/8,7*nSize/30);
			tempCtx.stroke();		
		}

tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.moveTo(9*nSize/20,0);
		for(j=0;j<nPoints*2+1;j++){
			tempCtx.rotate(Math.PI/nPoints);
			if(j%2==0) tempCtx.lineTo(7*nSize/20,0);
			else tempCtx.lineTo(9*nSize/20,0);
		}
		tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 90;
	nSize = 110;
	var nPoints = 10;
	var j;
	enemyMask  = new SpriteProto(nFrame,bgCtx,nSize,"mask");
	enemyMask.maxHp = 45;

for(i = 0; i < nFrame;i++){
		enemyMask.frameArray[i].width = nSize;
		enemyMask.frameArray[i].height = nSize;
		tempCtx = enemyMask.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 3;
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.strokeStyle="rgb("+(210+Math.floor(35*Math.sin(i/nFrame*2*Math.PI)))+",160,0)";
		tempCtx.rotate(2*i*Math.PI/nFrame);
		for(j=0;j<nPoints;j++){
			tempCtx.rotate(2*Math.PI/nPoints);
			tempCtx.save();
			tempCtx.translate(7*nSize/20,0);
			tempCtx.rotate(4*i*Math.PI/nFrame);
			tempCtx.beginPath();
			tempCtx.moveTo(nSize/10,0);
			tempCtx.lineTo(-nSize/10,-nSize/10);
			tempCtx.lineTo(-nSize/10,nSize/10);
			tempCtx.lineTo(nSize/10,0);
			tempCtx.stroke();
			tempCtx.restore();
		}

tempCtx.restore();
	}

nFrame = 30;
	nSize = 16;
	var nPoints = 4;
	var j;
	enemyShot = new SpriteProto(nFrame,bgCtx,nSize,"es");

for(i = 0; i < nFrame;i++){
		enemyShot.frameArray[i].width = nSize;
		enemyShot.frameArray[i].height = nSize;
		tempCtx = enemyShot.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 2;
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.strokeStyle = "rgb("+(200+Math.floor(50*Math.sin(i/nFrame*Math.PI)))+",70,70)";
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.beginPath();
		tempCtx.moveTo(4*nSize/10,0);
		for(j=0;j<nPoints*2+1;j++){
			tempCtx.rotate(Math.PI/nPoints);
			if(j%2==0) tempCtx.lineTo(2*nSize/10,0);
			else tempCtx.lineTo(4*nSize/10,0);
		}
		tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 60;
	nSize = 30;
	var nPoints = 4;
	var j;
	enemyCannon = new SpriteProto(nFrame,bgCtx,nSize,"cannon");
	enemyCannon.maxHp = 13;
	enemyCannon.shotFreq = 20;

for(i = 0; i < nFrame;i++){
		enemyCannon.frameArray[i].width = nSize;
		enemyCannon.frameArray[i].height = nSize;
		tempCtx = enemyCannon.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.lineWidth = 3;
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.strokeStyle = "rgb(90,150,"+(200+Math.floor(50*Math.sin(i/nFrame*Math.PI)))+")";
		tempCtx.beginPath();
		tempCtx.arc(0,0,2*nSize/6,0,2*Math.PI,false);
		tempCtx.stroke();

tempCtx.moveTo(4*nSize/10,0);
		for(j=0;j<nPoints;j++){
			tempCtx.rotate(2*Math.PI/nPoints);
			tempCtx.beginPath();
			tempCtx.arc(3*nSize/8,3*nSize/8,nSize/10,0,2*Math.PI,false);
			tempCtx.stroke();
		}
		tempCtx.restore();
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.strokeStyle = "rgb(90,150,"+(200+Math.floor(50*Math.sin(i/nFrame*Math.PI)))+")";
		tempCtx.lineWidth = 3;
		tempCtx.save();
		tempCtx.rotate(2*Math.PI*i/nFrame);
		tempCtx.scale(.5,1);
		tempCtx.beginPath();
		tempCtx.arc(8*nSize/10,0,nSize/10,0,2*Math.PI,false);
		tempCtx.moveTo(8*nSize/10,nSize/10);
		tempCtx.lineTo(0,nSize/10);
		tempCtx.arc(0,0,nSize/10,Math.PI/2,3*Math.PI/2,false);
		tempCtx.lineTo(8*nSize/10,-nSize/10);
		
		tempCtx.restore();
		tempCtx.stroke();
	}

nFrame = 60;
	nSize = 10;
	enemyMissile = new SpriteProto(nFrame,ctx,nSize,"em");
	enemyMissile.animated=false;

for(i = 0; i < nFrame;i++){
		enemyMissile.frameArray[i].width = nSize;
		enemyMissile.frameArray[i].height = nSize;
		tempCtx = enemyMissile.frameArray[i].getContext("2d");
		tempCtx.save();
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.rotate(i*2*Math.PI/nFrame);
		tempCtx.strokeStyle = "rgb(250,50,50)";
		tempCtx.lineWidth = 3;
		tempCtx.beginPath();
		tempCtx.moveTo(-4*nSize/10,-4*nSize/10);
		tempCtx.lineTo(4*nSize/10,0);	
		tempCtx.lineTo(-4*nSize/10,4*nSize/10);

tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 40;
	nSize = 25;
	powerInv = new SpriteProto(nFrame,ctx,nSize,"inv");
	powerInv.maxHp = 6;

for(i = 0; i < nFrame;i++){
		powerInv.frameArray[i].width = nSize;
		powerInv.frameArray[i].height = nSize;
		tempCtx = powerInv.frameArray[i].getContext("2d");
		bright = 215+Math.floor(40*Math.sin(2*i*Math.PI/nFrame));
		tempCtx.strokeStyle = "rgb("+bright+","+bright+","+bright+")";
		tempCtx.save();
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.lineWidth = 3;
		tempCtx.beginPath();
		tempCtx.arc(0,0,9*nSize/20,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.strokeStyle="white";
		tempCtx.beginPath();
		tempCtx.moveTo(-3*nSize/20,-5*nSize/20);
		tempCtx.lineTo(3*nSize/20,-5*nSize/20);
		tempCtx.moveTo(0,-5*nSize/20);
		tempCtx.lineTo(0,5*nSize/20);
		tempCtx.moveTo(-3*nSize/20,5*nSize/20);
		tempCtx.lineTo(3*nSize/20,5*nSize/20);
		tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 40;
	nSize = 25;
	powerThree = new SpriteProto(nFrame,ctx,nSize,"three");
	powerThree.maxHp = 6;

for(i = 0; i < nFrame;i++){
		powerThree.frameArray[i].width = nSize;
		powerThree.frameArray[i].height = nSize;
		tempCtx = powerThree.frameArray[i].getContext("2d");
		bright = 215+Math.floor(40*Math.sin(2*i*Math.PI/nFrame));
		tempCtx.strokeStyle = "rgb("+bright+","+bright+","+bright+")";
		tempCtx.save();
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.lineWidth = 3;
		tempCtx.beginPath();
		tempCtx.arc(0,0,9*nSize/20,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.strokeStyle="rgb(20,210,10)";
		tempCtx.lineWidth=1.5;
		tempCtx.beginPath();
		tempCtx.moveTo(-2*nSize/20,-1*nSize/20);
		tempCtx.lineTo(0,-5*nSize/20);
		tempCtx.lineTo(2*nSize/20,-1*nSize/20);

tempCtx.moveTo(-6*nSize/20,4*nSize/20);
		tempCtx.lineTo(-4*nSize/20,0*nSize/20);
		tempCtx.lineTo(-2*nSize/20,4*nSize/20);

tempCtx.moveTo(6*nSize/20,4*nSize/20);
		tempCtx.lineTo(4*nSize/20,0*nSize/20);
		tempCtx.lineTo(2*nSize/20,4*nSize/20);

tempCtx.stroke();
		tempCtx.restore();
	}

nFrame = 40;
	nSize = 25;
	powerHealth = new SpriteProto(nFrame,ctx,nSize,"health");
	powerHealth.maxHp = 6;

for(i = 0; i < nFrame;i++){
		powerHealth.frameArray[i].width = nSize;
		powerHealth.frameArray[i].height = nSize;
		tempCtx = powerHealth.frameArray[i].getContext("2d");
		bright = 215+Math.floor(40*Math.sin(2*i*Math.PI/nFrame));
		tempCtx.strokeStyle = "rgb("+bright+","+bright+","+bright+")";
		tempCtx.save();
		tempCtx.translate(nSize/2,nSize/2);
		tempCtx.lineWidth = 3;
		tempCtx.beginPath();
		tempCtx.arc(0,0,9*nSize/20,0,2*Math.PI,false);
		tempCtx.stroke();
		tempCtx.strokeStyle="rgb(240,30,10)";
		tempCtx.lineWidth=4;
		tempCtx.beginPath();
		tempCtx.moveTo(-5*nSize/20,0);
		tempCtx.lineTo(5*nSize/20,0);
		tempCtx.moveTo(0,-5*nSize/20);
		tempCtx.lineTo(0,5*nSize/20);

tempCtx.stroke();
		tempCtx.restore();
	}

itemsLoaded++;
}

//finds the mouse?
function findMouse(ev){
	if(!ev) {ev = window.event;};
	mouseX = ev.clientX-overCanvas.offsetLeft;
	mouseY = ev.clientY-overCanvas.offsetTop;
	if(ev.pageX || ev.pageX ==0){
		mouseX = ev.pageX-overCanvas.offsetLeft;
		mouseY = ev.pageY-overCanvas.offsetTop;
	}
	else if(ev.offsetX || ev.offsetX==0){
		mouseX=ev.offsetX;
		mouseY=ev.offsetY;
	}
	else if(ev.layerX || ev.layerX==0){
		mouseX=e.layerX;
		mouseY=e.layerY;
	}
}

//pretty self explanatory down here
function openForm(){
	document.getElementById("currentScore").innerHTML = currentScore;
	document.getElementById("score").value = currentScore;
	highscoreDiv.style.visibility = "visible";
}

function closeForm(){
	highscoreDiv.style.visibility = "hidden";
	frozen=false;
}

<!DOCTYPE HTML>
<html>
<head>
<title>Neon Fighter</title>
</head>
<body style='background-color:rgb(235,235,255)' onload = 'initialize()'>
<NOSCRIPT>
You must have javascript enabled to play this game
</NOSCRIPT>
<div style='width:500px;font-size:24px;margin-left:auto;margin-right:auto'>
	<table style='width:500px'><tr>
		<td style='width:30%;text-align:left'>Neon Fighter</td>

<td style='width:25%;text-align:right'><a style='color:black' href='index.php'>Home</a></td>
		<td style='width:45%;text-align:right'><a style='color:black' href='neonhs.php' target='_blank'>High Scores</a></td>
	</tr></table>
</div>
<div style='width:500px;height:500px;margin-left:auto;margin-right:auto'>
	<canvas id = 'bgCanvas' width=500 height=500></canvas>
	<canvas id = 'mainCanvas' width=500 height=500>
		Canvas support not found. Please use a canvas compatible browser (the latest versions of Firefox, Safari, 
		Konqueror, or Chrome should all work. IE9 may work as well.)
	</canvas>

<div id='overText1'></div>
	<div id='overText2'></div>
	<div id='overText3'></div>
	<div id='highscoreDiv' style='visibility:hidden;background-color:#101010;color:white;width:300px;height:300px;text-align:center;vertical-align:middle'>
		<form id='highscoreForm' style='vertical-align:middle;' action='http://www.canvaswave.com/neonhs.php' method='post' target='_blank'>
			<div id='formDiv' style='vertical-align:middle;font-size:24px;'>
				<p>Final Score:</p>
				<p><div id='currentScore'></div></p>

</div>
<div style='width:460px;font-size:18px;background-color:rgb(220,220,255);margin-left:auto;margin-right:auto;position:relative;top:20px;padding: 20px 20px'>
	<p>
		<text style='font-weight:bold'>About: </text> Neon Fighter is a HTML5 canvas based shooter game, created entirely in wordpad. Click and hold to shoot.
		Items in white circles are power ups. Shoot everything else that moves. The game was designed using Firefox 3.5
		but tested with Safari, Opera 10 and Google Chrome as well. It seems to run best in Chrome.
	</p>
	<p>
		<text style='font-weight:bold'>Credits: </text> All graphics and programming by Sockwave, copyright 2010. Email bugs to syler A-T canvaswave D-O-T com.
	</p>
</div>

Pop out