game.js

var log = console.log.bind(console)
var OBJECT_PLAYER = 1,
	OBJECT_PLAYER_PROJECTILE = 2,
	OBJECT_ENEMY = 4
	OBJECT_ENEMY_PROJECTILE = 8,
	OBJECT_POWERUP = 16;

var sprites = {
	ship:{sx:0,sy:0,w:37,h:40},
	missle:{sx:0,sy:40,w:3,h:10,frame:1},
	enemy_purple:{sx:37,sy:0,w:37,h:40,frame:1},
	enemy_bee:{sx:74,sy:0,w:37,h:40,frame:1},
	enemy_ship:{sx:111,sy:0,w:37,h:40,frame:1},
	enemy_circle:{sx:148,sy:0,w:30,h:30,frame:1},
	explosion:{sx:0,sy:64,w:64,h:64,frame:12},
}

var enemies = {
	straight:{x:0,y:-50,sprite:'enemy_ship',health:10,E:100},
	ltr:{x:0,y:-100,sprite:'enemy_purple',health:10,B:200,C:1,E:200},
	circle:{x:400,y:-50,sprite:'enemy_circle',health:10,A:0,B:-200,C:1,E:20,F:200,G:1,H:Math.PI/2},
	wiggle:{x:100,y:-50,sprite:'enemy_bee',health:20,B:100,C:4,E:100},
	step:{x:0,y:-50,sprite:'enemy_circle',health:10,B:300,C:1.5,E:60},
	// basic:{x:100,y:-50,sprite:'enemy_purple',B:100,C:2,E:100,health:20},
	// basic1:{x:100,y:-50,sprite:'enemy_bee',B:100,C:2,E:100},
}

var level1 = [
	//start,end,gap,type,override
	[0,4000,500,'step',{x:0}],
	[6000,13000,800,'ltr',{x:100}],
	[12000,16000,400,'circle',{x:100}],
	[18200,20000,500,'straight',{x:150}],
	[18200,20000,500,'straight',{x:100}],
	[18400,20000,500,'straight',{x:200}],
	[22000,25000,400,'wiggle',{x:200}],
	[22000,25000,400,'wiggle',{x:300}],
]

var Starfield = function(speed,opacity,numStars,clear){
	// Set up the offscreen canvas
	var stars = document.createElement('canvas')
	stars.width = Game.width
	stars.height = Game.height
	var starCtx = stars.getContext("2d")
	var offset = 0

	// If the clear option is set,
	// make the background black instead of transparent
	if(clear){
		starCtx.fillStyle = "#000"
		starCtx.fillRect(0,0,stars.width,stars.height)		
	}

	// Now draw a bunch of random 2 pixel
	// rectangles onto the offscreen canvas
	starCtx.fillStyle = "#fff"
	starCtx.globalAlpha = opacity
	for(var i=0;i<numStars;i++){
		starCtx.fillRect(Math.floor(Math.random()*stars.width),
						 Math.floor(Math.random()*stars.height),1,1)
	}

	this.draw = function(ctx){
		var intOffset = Math.floor(offset)
		var remaining = stars.height - intOffset
		// Draw the top half of the starfield
		if(intOffset>0){
			ctx.drawImage(stars,
							0,remaining,
							stars.width,intOffset,
							0,0,
							stars.width,intOffset)

			// ctx.drawImage(stars,0,440,400,30,
							//0,0,400,30)
		}
		// Draw the bottom half of the starfield
		if(remaining>0){
			ctx.drawImage(stars,
							0,0,
							stars.width,remaining,
							0,intOffset,
							stars.width,remaining)
		}
	}

	// This method is called to update the starfield
	this.step = function(dt){
		offset =offset+dt * speed
		offset = offset % stars.height
		// log(offset)
	}
}

var PlayerShip = function(){
	this.setup('ship',{vx:0,frame:1,reloadTime:0.25,maxVel:200})
	// this.w = SpriteSheet.map['ship'].w
	// this.h = SpriteSheet.map['ship'].h
	this.x = Game.width/2 - this.w/2
	this.y = Game.height- 10 - this.h
	// this.vx = 0	
	// this.maxVel = 200
	// this.reloadTime = 0.25
	this.reload = this.reloadTime
	this.step = function(dt){
		if(Game.keys['left']){
			this.vx = -this.maxVel
		}else if(Game.keys['right']){
			this.vx = this.maxVel
		}else{
			this.vx = 0
		}
		this.x += this.vx * dt

		if(this.x < 0){
			this.x = 0
		}else if(this.x > Game.width - this.w){
			this.x = Game.width - this.w
		}
		this.reload-=dt
		if(Game.keys['fire']&&this.reload<0){
			Game.keys['fire'] = false
			this.reload = this.reloadTime
			this.board.add(new PlayrMissle(this.x,this.y+this.h/2))
			this.board.add(new PlayrMissle(this.x+this.w,this.y+this.h/2))
		}
	}

	// this.draw = function(ctx){
	// // 	SpriteSheet.draw(ctx,'ship',this.x,this.y,1)
	// 	log(this.w)
	// }
	// this.merge(this.baseParameters)
}

PlayerShip.prototype = new Sprite()
PlayerShip.prototype.type = OBJECT_PLAYER
// PlayerShip.prototype.hit = function(damage){
// 	if(this.board remove(this)){
// 		loseGame()
// 	}
// }

var PlayrMissle = function(x,y){
	// this.w = SpriteSheet.map['missle'].w
	// this.h = SpriteSheet.map['missle'].h
	this.setup('missle',{vy:-700,damage:10})
	this.x = x-this.w/2
	this.y = y-this.h
	// this.vy = -700
}

PlayrMissle.prototype = new Sprite()
PlayrMissle.prototype.type = OBJECT_PLAYER_PROJECTILE

PlayrMissle.prototype.step = function(dt){
	this.y += this.vy * dt
	var collision = this.board.collide(this,OBJECT_ENEMY)
	if(collision){
		collision.hit(this.damage)
		this.board.remove(this)
	}else if(this.y < -this.h){
		this.board.remove(this)
	}
}

// PlayrMissle.prototype.draw = function(ctx){
// 	SpriteSheet.draw(ctx,'missle',this.x,this.y)
// }

// var Enemy = function(blueprint,override){
// 	var baseParameters = {A:0,B:0,C:0,D:0,
// 						  E:0,F:0,G:0,H:0}
// 	for(var prop in baseParameters){
// 		this[prop] = baseParameters[prop]
// 		// log(prop)
// 	}
// 	for(var prop in blueprint){
// 		this[prop] = blueprint[prop]
// 		// log(prop)
// 	}	
// 	if(override){
// 		for(prop in override){
// 			this[prop] = override[prop]
// 			// log(prop)
// 		}
// 	}

// 	// log(this.sprite)
// 	// log(SpriteSheet.map[this.sprite])
// 	this.w = SpriteSheet.map[this.sprite].w
// 	this.h = SpriteSheet.map[this.sprite].h
// 	this.t = 0
// }

var Enemy = function(blueprint,override){
	this.merge(this.baseParameters)
	this.setup(blueprint.sprite,blueprint)
	this.merge(override)
}

Enemy.prototype = new Sprite()
Enemy.prototype.type = OBJECT_ENEMY

Enemy.prototype.baseParameters ={
	A:0,B:0,C:0,D:0,
	E:0,F:0,G:0,H:0,t:0,
}

Enemy.prototype.step = function(dt){
	this.t += dt
	this.vx = this.A + this.B*Math.sin(this.C*this.t+this.D)
	this.vy = this.E + this.F*Math.sin(this.G*this.t+this.H)
	this.x += this.vx*dt
	this.y += this.vy*dt
	var collision = this.board.collide(this,OBJECT_PLAYER)
	if(collision){
		collision.hit(this.damage)
		this.board.remove(this)
	}
	if(this.y>Game.height||this.x>Game.width){
		this.board.remove(this)
	}
	// log(this.t,this.y)
}

Enemy.prototype.hit = function(damage){
	this.health -= damage
	if(this.health <= 0){
		if(this.board.remove(this)){
			this.board.add(new Explosion(this.x+this.w/2,this.y+this.h/2))
		}
	}
}

// Enemy.prototype.draw = function(ctx){
// 	SpriteSheet.draw(ctx,this.sprite,this.x,this.y)
// 	// log(this.x,this.y)
// }

var playGame = function(){
	// Game.setBoard(3,new TitleScreen("Alien Invasion","Game Started..."))
	// Game.setBoard(3,new playerShip())
	var board = new GameBoard()
	board.add(new PlayerShip())
	board.add(new Level(level1,winGame))	
	Game.setBoard(3,board)
	// log(enemies.basic)
}

var winGame = function(){
	Game.setBoard(3,new TitleScreen("You win!","press fire to play again",playGame))
}

var loseGame = function(){
	Game.setBoard(3,new TitleScreen("You lose!","press fire to play again",playGame))
}

var startGame = function(){	
	Game.setBoard(0,new Starfield(20,0.4,100,true))
	Game.setBoard(1,new Starfield(50,0.6,100))
	Game.setBoard(2,new Starfield(100,1,100))	
	Game.setBoard(3,new TitleScreen("Alien Invasion","Press space to start playing",playGame))	
}

window.onload = function(){
	Game.init('game',sprites,startGame)
}