Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg version="1.1" id="spaceShip" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100.339px" height="88.377px" viewBox="10 0 100.339 88.377" enable-background="new 10 0 100.339 88.377"
	 xml:space="preserve">
		<polygon fill="#FFFFFF" points="91.086,81.166 60.237,0 29.386,81.166 60.237,71.166 "></polygon>
		<polygon fill="#2b72a3" points="43.352,44.423 10,88.377 29.386,81.166 "></polygon>
		<polygon fill="#2b72a3" points="76.989,44.423 110.339,88.377 90.956,81.166 "></polygon>

		<polygon class="spaceShip-shadow" fill="#111" points="91.086,81.166 60.237,0 29.386,81.166 60.237,71.166 "></polygon>
		<polygon class="spaceShip-shadow" fill="#111" points="43.352,44.423 10,88.377 29.386,81.166 "></polygon>
		<polygon class="spaceShip-shadow" fill="#111" points="76.989,44.423 110.339,88.377 90.956,81.166 "></polygon>
	</svg>

	<canvas id="canvas"></canvas>

	<div id="infos-player">
		<div id="container-health">
			<div id="health"></div>
		</div>
		<div id="points">0</div>
	</div>

	<div id="game-cover">
		<p><img src="http://pixel-salad.com/website/canvas/game/img/cover.png"></p>
		<button id="play">Play</button>
	</div>

	<div id="game-instructions">
		<p class="inline"><img src="http://pixel-salad.com/website/canvas/game/img/arrow.png"><img class="rotate" src="http://pixel-salad.com/website/canvas/game/img/arrow.png"><img src="http://pixel-salad.com/website/canvas/game/img/mouse.png"></p>
		<p>Use the keyboard arrows to move left or right</p>
		<p>Use the mouse to aim and the left click to shoot</p>
    <p class="inline"><img src="http://pixel-salad.com/website/canvas/game/img/bonus.png"></p>
		<p>Try picking up this bonus for extra power!</p>
		<button id="start">Start</button>
	</div>

	<div id="game-over">
		<p>Game over</p>
		<button id="retry">Retry?</button>
	</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

html, body{
	font-family: 'Roboto', sans-serif;
	color: #fff;
	background-color: #111;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#canvas{
	position: absolute;
	z-index: 1;
}
#spaceShip{
	position: absolute;
	z-index: 2;
	width: 100px;
	height: 80px;
	display: none;
}
.spaceShip-shadow{
	opacity: 0;
}
#infos-player{
	position: absolute;
	width: 100%;
	height: 150px;
	z-index: 3;
}

#container-health{
	position: absolute;
	width: 150px;
	height: 20px;
	border-radius: 5px;
	margin: 40px;
	border: 5px solid white;
	overflow: hidden;
}
#health{
	float: left;
	width: 100%;
	height: 100%;

	background-color: #86cf65;
}
#points{
	font-size: 40px;
	color: #fff;
	float: right;
	margin: 40px;
}

#game-over{
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	display: none;
	/*display: flex;*/
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#game-over p{
	position: relative;
	font-size: 40px;
	color: #fff;
	text-align: center;
	pointer-events: none;
}

#game-instructions{
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 100%;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
#game-instructions p{
	font-size: 20px;
	color: #fff;
	text-align: center;
	margin: 0 20px 0 20px;
}
.inline img{
	display: inline-block;
	vertical-align: middle;
	margin: 20px;
}
.inline .rotate{
	transform: rotate(180deg);
}
button{
	position: relative;
	font-size: 20px;
	color: #111;
	padding: 10px;
	margin: 20px;
	border-radius: 5px;
	cursor: pointer;
	min-height: 50px;
}

#game-cover{
	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
              
            
!

JS

              
                $(function(){

	var widthWindow = 0;
	var heightWindow = 0;
	var incrementMoving = 0;
	var rythmshoot = 0;
	var speedShoot = 0;
	var maxSpeedSpaceShip = 0;
	var coeffAcceleration = 0;
	var coefSlide = 0;
	var speedRespawn = 0;
	var sizeShoot = 0;
	var counterHealth = 0;

	var shootArray = [];
	var explosionArray = [];
	var starArray = [];
	var ennemyArray = [];
	var bonusArray = [];
	var shockWaveArray = [];
	var posSpaceShip = {};
	var mouse = {x:0, y:0};
	var counterKill = 0;

	var canvas = document.getElementById('canvas');
	var spaceShip = $("#spaceShip");
	var ctx = null;
	var keyPressed = false;
	var clickDown = false;
	var bonusActivated = false;
	var gameStarted = false;

	var timerResize = null;
	var myTimerShoot = null;
	var timerNewEnnemy = null;
	var timerRandomRespawn = null;

	function initBackGround(){
		starArray = [];
		widthWindow = window.innerWidth;
		heightWindow = window.innerHeight;

		var longerSide = Math.max(widthWindow, heightWindow);
		var numStars = Math.round((((widthWindow*heightWindow)/longerSide)/10 ));

		if (canvas.getContext) {
			ctx = canvas.getContext('2d');
			canvas.setAttribute('width', widthWindow);
			canvas.setAttribute('height', heightWindow);
			addNewStar(numStars, true);
		}
	}

	function initGame(){

		clearInterval(timerRandomRespawn);
		clearInterval(timerNewEnnemy);

		shootArray = [];
		explosionArray = [];
		ennemyArray = [];
		bonusArray = [];
		shockWaveArray = [];
		widthWindow = window.innerWidth;
		heightWindow = window.innerHeight;
		posSpaceShip = {x:widthWindow/2, y:heightWindow-(spaceShip.height()*2), angle:0, color:"#fff"};

		rythmshoot = 150;
		speedShoot = 100;
		maxSpeedSpaceShip = 10;
		coeffAcceleration = 10;
		coefSlide = 20;
		speedRespawn = 500;
		sizeShoot = 5;
		counterHealth = $("#health").width();
		counterKill = 0;

		startTimerEnnemy(speedRespawn, 50)
		timerRandomRespawn = setInterval(randomRespawn, 5000);
	}

	$(document).mousemove(function(event){
		mouse.x = event.pageX;
		mouse.y = event.pageY;
	});

	$(document).mousedown(function(event){
		if(counterHealth>0){
			clickDown = true;
			resetShootPattern();
		}
	});

	$(document).mouseup(function(){
		clickDown = false;
		clearTimer(myTimerShoot)
	});

	$(document).keydown(function( event ) {
		//INCREASE SPEED
  		keyPressed = true;
	  	//Q
	  	if(event.which == 37){
			if(incrementMoving > -maxSpeedSpaceShip) incrementMoving -= maxSpeedSpaceShip/coeffAcceleration;
	  	}
	  	//D
	  	if(event.which == 39){
			if(incrementMoving < maxSpeedSpaceShip) incrementMoving += maxSpeedSpaceShip/coeffAcceleration;
	  	}
	});

	$(document).keyup(function() {
		keyPressed = false;
	});

	function moveSpaceShip(){

		posSpaceShip.angle = (Math.atan2(posSpaceShip.y - mouse.y , posSpaceShip.x -  mouse.x)* 180 / Math.PI)-90;

		//DECREASE SPEED
		if(keyPressed == false){
		  	if(incrementMoving>0) incrementMoving -= maxSpeedSpaceShip/(coefSlide+2);
		  	if(incrementMoving<0) incrementMoving += maxSpeedSpaceShip/(coefSlide+2);
		  	if(incrementMoving< maxSpeedSpaceShip/(coefSlide+2) && incrementMoving>-maxSpeedSpaceShip/(coefSlide+2)) incrementMoving = 0;
	  	}
	  	//LEFT AND RIGHT SCREEN LIMITS
	  	if(posSpaceShip.x + spaceShip.width() + incrementMoving >= widthWindow || posSpaceShip.x - spaceShip.width() + incrementMoving <= 0) {
	  		incrementMoving = -incrementMoving/2;
	  	}else{
	  		posSpaceShip.x += incrementMoving;
	  	}

	  	spaceShip.css({"left": posSpaceShip.x, "top": posSpaceShip.y, "transform": "translate(-50%, -50%) rotate("+posSpaceShip.angle+"deg) rotateY("+incrementMoving*4+"deg)"});
	  	$(".spaceShip-shadow").css("opacity", (Math.abs(incrementMoving)/maxSpeedSpaceShip)/2)
		if(counterHealth>0)reactor();

  	}

  	function reactor(){
		var constColorsFire = [
		   	"#EF271B", "#EA1744", "#E28413", "#FF6201",
		   	"#FFFFFF", "#F63E02", "#fff200"
		];
		var randomColor = randomElementFromArray(constColorsFire);
		var randomSize = randomNumberFromRange(1,8);
		var objectColor = hexToRgb(randomColor);
		var tempAngle = degrees_to_radians(posSpaceShip.angle + 90);

		for(var i=1 ; i<4 ; i++){
			ctx.beginPath();
			ctx.fillStyle = "rgba("+objectColor.r+","+objectColor.g+","+objectColor.b+","+0.8/i+")";
			ctx.arc( posSpaceShip.x + (40+(10*i)) * Math.cos(tempAngle),  posSpaceShip.y + (40+(10*i)) * Math.sin(tempAngle), 10/i, 0, 2*Math.PI);
			ctx.fill();
			ctx.closePath();
		}
	}
    
	function shoot(X, Y, Color, Radius){


		this.x = X;
		this.y = Y;
		this.radius = Radius;
		this.color = Color;
		this.angle = Math.atan2(posSpaceShip.y - mouse.y, posSpaceShip.x - mouse.x) - Math.PI;
		this.longerSide = Math.max(widthWindow, heightWindow);
		this.TargetX = posSpaceShip.x + this.longerSide * Math.cos(this.angle);
		this.TargetY = posSpaceShip.y + this.longerSide * Math.sin(this.angle);
		this.distanceX = this.x - this.TargetX;
		this.distanceY = this.y - this.TargetY;

		this.draw = function(){
			//SHOOT
			ctx.save();
			ctx.beginPath();
			ctx.shadowBlur = 20;
			ctx.shadowColor = this.color;
			ctx.fillStyle = this.color;
			ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
			ctx.fill();
			ctx.closePath();
			ctx.restore();
		}

		this.update = function(){

			if(this.x != this.TargetX) this.x -= this.distanceX/speedShoot;
			if(this.y != this.TargetY) this.y -= this.distanceY/speedShoot;

			//DETECT COLLISIONS BETWEEN SHOTS AND ENNEMYS
			for(var j=0 ; j<ennemyArray.length ; j++){
				if(distance(this.x, this.y, ennemyArray[j].x, ennemyArray[j].y) - this.radius  <= 20 ){
					//HIT
					explosionArray.push(new Explosion(this));
					ennemyArray.splice(j,1);
					removeFromArray(this, shootArray);
					counterKill++;
				}
			}

			if(this.x <= 0 || this.y <=0 ){
				removeFromArray(this, shootArray);
			}
			
			this.draw();
		}

	}

	function randomRespawn(){
		if(bonusActivated== false){
			speedRespawn = randomNumberFromRange(250,500);
			clearInterval(timerNewEnnemy);
			startTimerEnnemy(speedRespawn, randomNumberFromRange(50,100));
		}
	}

	function startTimerEnnemy(Time, Limit){
		timerNewEnnemy = setInterval(function(){
			if(ennemyArray.length<Limit)addNEwEnnemy(1);
		}, Time);
	}

	function addNEwEnnemy(Number){
		var constColors = ["#ff5457","#cb1535","#DB2B39","#EB4511"];
		for( var i=0 ; i<Number ; i++){
			var x = randomNumberFromRange(0, widthWindow);
			var dx = randomNumberFromRange(1, 2);
			var dy = randomNumberFromRange(1, 5);
			var randomRadius = randomNumberFromRange(5, 10);
			var randomColor = randomElementFromArray(constColors)
			ennemyArray.push(new Ennemy(x, 0, dx, dy, randomRadius, randomColor));
		}
	}

	function Ennemy(X, Y, Dx, Dy, Radius, Color){
		this.x = X;
		this.y = Y;
		this.dx = Dx;
		this.dy = Dy;
		this.radius = Radius;
		this.color = Color;
		this.move = 0;

		this.draw = function(){
			ctx.beginPath();
			ctx.save();
			ctx.arc(
				this.x,
				this.y, 
				this.radius, 
				0, 
				2*Math.PI
			);
			ctx.fillStyle = this.color;
			ctx.shadowBlur = 20;
			ctx.shadowColor = this.color;
			ctx.fill();
			ctx.restore();
			ctx.closePath();

		}

		this.update = function(){

			if( this.y>heightWindow ) removeFromArray(this, ennemyArray);
			if( distance(this.x, this.y, posSpaceShip.x,posSpaceShip.y) - (spaceShip.width()/2) <0 ){
				removeFromArray(this, ennemyArray);
				explosionArray.push(new Explosion(this));
				counterHealth -= 10;
			}
			if(shockWaveArray.length>0){
				if( distance(this.x, this.y, shockWaveArray[0].x ,shockWaveArray[0].y) - shockWaveArray[0].radius <0 ){
					removeFromArray(this, ennemyArray);
					explosionArray.push(new Explosion(this));
					counterKill++;
				}
			}

			this.move += 0.05;
			if(this.move == 2*Math.PI) this.move = 0;
			this.x += Math.cos(this.move)* this.dx;
			this.y += this.dy;

			this.draw();
		}
	}

	function Explosion(Shoot){

		this.particles = [];

		this.initGame = function(Parent){
			var randomAmount = randomNumberFromRange(2,4);
			for(var i=0 ; i<randomAmount; i++){
				this.particles.push(new Particle(Parent));
			}
		}

		this.update = function(){
			for(var j=0 ; j<this.particles.length ; j++){
				this.particles[j].update();
				if(this.particles[j].opacity <=0 ) this.particles.splice(j,1);
			}
		}

		this.initGame(Shoot);

	}

	function Particle(Parent){
		this.x = Parent.x;
		this.y = Parent.y;

		this.dx = randomNumberFromRange(-2, 2);
		this.dy = randomNumberFromRange(-2, 2);
		this.radius = randomNumberFromRange(1, 3);
		this.color =  Parent.color;
		this.opacity = 1;

		var constColorsFire = [
		   	"#EF271B", "#EA1744", "#E28413", "#FF6201",
		   	"#FFFFFF", "#F63E02", "#fff200"
		];
		var randomColor = randomElementFromArray(constColorsFire);
		var objectColor=  hexToRgb(randomColor);

		this.draw = function(){
			ctx.beginPath();
			ctx.arc(
				this.x,
				this.y, 
				this.radius, 
				0, 
				2*Math.PI
			);
			ctx.fillStyle = "rgba("+objectColor.r+","+objectColor.g+","+objectColor.b+","+this.opacity+")";
			ctx.fill();
			ctx.closePath();
		}

		this.update = function(){
			if(this.opacity>0) this.opacity-=0.03;
			this.y += this.dy
			this.x += this.dx

			this.draw();
		}
	}

	function addNewBonus(Number){
		var constColors = ["#77AE43", "#AEC637", "#01A7C2", "#63ADF2"];
		for( var i=0 ; i<Number ; i++){
			var x = randomNumberFromRange(0+(spaceShip.width()), widthWindow-(spaceShip.width()));
			var dy = randomNumberFromRange(1, 3);
			var randomColor = randomElementFromArray(constColors);
			var randomRadius = randomNumberFromRange(15, 25);
			bonusArray.push(new Bonus(x, 0, randomRadius, dy, randomColor));
		}
	}

	function Bonus(X, Y, Radius, Dy, Color){
		
		this.x = X;
		this.y = Y;
		this.dy = Dy;
		this.color = Color;
		this.objectColor = hexToRgb(Color);
		this.pulse = 0;
		this.radius = Radius
		this.circle = this.radius;
		this.targetRadius = this.radius + 10;
		this.opacity = 1;

		this.draw = function(){
			ctx.beginPath();
			ctx.save();
			ctx.moveTo(this.x, this.y-(this.radius/2));
			ctx.lineTo(this.x+(this.radius/2.35), this.y-(this.radius/4));
			ctx.lineTo(this.x+(this.radius/2.35), this.y+(this.radius/4));
			ctx.lineTo(this.x, this.y+(this.radius/2));
			ctx.lineTo(this.x-(this.radius/2.35), this.y+(this.radius/4));
			ctx.lineTo(this.x-(this.radius/2.35), this.y-(this.radius/4));
			ctx.fillStyle = "rgba("+this.objectColor.r+","+this.objectColor.g+","+this.objectColor.b+","+this.opacity+")";
			ctx.shadowBlur = 20;
			ctx.shadowColor = this.color;
			ctx.fill();
			ctx.restore();
			ctx.closePath();

			ctx.beginPath();
			ctx.arc(
				this.x,
				this.y, 
				this.circle, 
				0, 
				2*Math.PI
			);
			ctx.strokeStyle = "rgba(255,255,255,"+this.opacity+")";
			ctx.stroke();
			ctx.closePath();
		}

		this.update = function(){

			if(this.y > heightWindow + this.circle) removeFromArray(this, bonusArray);
			if(distance(this.x, this.y, posSpaceShip.x, posSpaceShip.y) - (spaceShip.width()/2) < 0){ 
				this.radius += this.targetRadius/this.radius;
				this.opacity -= 0.2;
				giveBonus();
				if(this.opacity<0){
					removeFromArray(this, bonusArray);
				}
			}

			this.pulse += 0.05;
			if(this.pulse == 2*Math.PI) this.pulse = 0;
			this.circle += Math.cos(this.pulse)/5;
			this.y += this.dy;

			this.draw();
		}
	}

	function giveBonus(){
		if(bonusActivated==false){
			var choose = Math.round(randomNumberFromRange(0,1));
			if(choose == 0){
				if(shockWaveArray.length==0)shockWaveArray.push(new shockWave(posSpaceShip.x, posSpaceShip.y, 1, Math.max(widthWindow,heightWindow)));
			}else{
				sizeShoot += randomNumberFromRange(5,30);
				rythmshoot = 50;
				speedShoot = 20;
				speedRespawn = randomNumberFromRange(50,100);
				clearInterval(timerNewEnnemy);
				startTimerEnnemy(speedRespawn, 150);
				resetShootPattern();

				setTimeout(normalizeBonus,15000);
			}
			bonusActivated = true;
		}
	}

	function shockWave(X, Y, Radius, TargetRadius){
		this.x = X;
		this.y = Y;
		this.radius = Radius;
		this.targetRadius = TargetRadius;
		this.thickness = 100;
		this.color = "#84f5ff";

		this.draw = function(){

			ctx.beginPath();
			ctx.save();
			ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
			ctx.strokeStyle = this.color;
			ctx.lineWidth = this.thickness;
			ctx.shadowBlur = 20;
			ctx.shadowColor = this.color;
			ctx.stroke();
			ctx.restore();
			ctx.closePath();
		}

		this.update = function(){

			if(this.radius >= this.targetRadius){
				shockWaveArray.splice(0,1);
				bonusActivated = false;
			}

			if(this.radius < this.targetRadius) this.radius += 5;
			if(this.thickness>2)this.thickness -= 0.5;
			this.draw();
		}
	}

	function normalizeBonus(){	
		bonusActivated = false;

		sizeShoot = 5;
		rythmshoot = 150;
		speedShoot = 100;
		speedRespawn = 500;
		clearInterval(timerNewEnnemy);
		startTimerEnnemy(speedRespawn, 50);
		resetShootPattern();
	}

	function resetShootPattern(){
		if(clickDown){
			clearTimer(myTimerShoot)
			myTimerShoot = setInterval(function(){
				shootArray.push(new shoot(posSpaceShip.x, posSpaceShip.y, "#FFF", sizeShoot));
			},rythmshoot);
		}
	}

	// DECOR--------------------------------------------------------------------------
	function addNewStar(NumberStars, OnScreen){

		var minRadiusStar = 1;
		var maxRadiusStar = 5;
		var velocity = 10;
		var density = 30;
		var gravity = 0.1;
		var friction = 0.7;
		var speedDestruction = 5;
		var constColors = [
		   	"#111519", "#0d1b2a", "#172a3e"
		];
		var location = 0;
		
		for( var i=0 ; i<NumberStars ; i++){

			var randomColor = randomElementFromArray(constColors)
			var randomRadius = randomNumberFromRange(minRadiusStar, maxRadiusStar);
			var x = randomNumberFromRange(maxRadiusStar, widthWindow);
			var y;
			if(OnScreen){
				y = randomNumberFromRange(maxRadiusStar, heightWindow);
			}else{
				y = 0;
			}

			starArray.push(new Star(x, y, randomColor, randomRadius));
		}
	}

	function Star(X, Y, Color, Radius){
		this.x = X;
		this.y = Y;
		this.radius = Radius;
		this.color = Color;


		this.draw = function(){
			ctx.beginPath();
			ctx.arc(
				this.x,
				this.y, 
				this.radius, 
				0, 
				2*Math.PI
			);
			ctx.fillStyle = this.color;
			ctx.fill();

		}

		this.update = function(){

			//IF STAR GO OFFSCREEN, REPLACE IT ON TOP
			if(this.y > heightWindow){
				removeFromArray(this, starArray);
				addNewStar(1,false);
			}

			this.y += this.radius;
			this.draw();
		}
	}

	function animate(){
		requestAnimationFrame(animate);
		ctx.fillStyle = "#111";
		ctx.fillRect(0,0,widthWindow,heightWindow);

		//DECOR STARS
		for(var i=0 ; i<starArray.length ; i++){
			starArray[i].update();
		}

		//SHOOTS
		for( var i=0 ; i<shootArray.length ; i++){
			shootArray[i].update();
		}

		//ENNEMY MOVEMENTS
		for(var i=0 ; i<ennemyArray.length ; i++){
			ennemyArray[i].update();
		}

		//ENNEMY HITS
		for(var i=0 ; i<explosionArray.length ; i++){
			explosionArray[i].update();
		}

		//BONUS ITEMS MOVEMENTS
		for(var i=0 ; i<bonusArray.length ; i++){
			bonusArray[i].update();
		}

		//SHOCKWAVE
		for(var i=0 ; i<shockWaveArray.length ; i++){
			shockWaveArray[i].update();
		}

		if(gameStarted){
			moveSpaceShip();
			updateCounters();
		}
	}

	function updateCounters(){

		$("#points").text(counterKill);
		$("#health").width(counterHealth);

		if(counterKill%50 === 0) if(bonusArray.length == 0 && bonusActivated == false)addNewBonus(1);
		if(counterHealth <= 0){
			if(spaceShip.width()>0){
				var tempWidth = spaceShip.width();
				tempWidth--;
				spaceShip.css("width",tempWidth);
				explosionArray.push(new Explosion(posSpaceShip));
			}else{
				$("#game-over").css("display","flex")
			}
			
		}
	}

	function randomNumberFromRange(Min, Max){
		return (Math.random()* (Max-Min)) + Min;
	}

	function randomElementFromArray(Array){
		return Array[ Math.floor(Math.random()*Array.length) ];
	}

	function removeFromArray(Item, Array){
		Array.splice(Array.indexOf(Item),1);
	}

	function distance(x0, y0, x1, y1){
		var distanceX = x1 - x0;
		var distanceY = y1 - y0;

		return Math.sqrt(Math.pow(distanceX,2) + Math.pow(distanceY,2))
	}

	function clearTimer(Timer){
		if(Timer != null) clearInterval(Timer);
		Timer = null;
	}

	function degrees_to_radians(degrees){
	  var pi = Math.PI;
	  return degrees * (pi/180);
	}

	//CONVERT HEX TO RGB
    function hexToRgb(hex) {
	    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	    return result ? {
	        r: parseInt(result[1], 16),
	        g: parseInt(result[2], 16),
	        b: parseInt(result[3], 16)
	    } : null;
	}

	window.onresize = function(){
		initBackGround();
		if(gameStarted){ 
			initGame();
			randomRespawn();
		}
	}

	$("#retry").click(function(){
		$("#health").css("width", "100%");
		$("#spaceShip").css("width", "100px");
		$("#game-over").css("display","none");
		spaceShip.css("display", "block");

		randomRespawn();
		initBackGround();
		initGame();
	})

	$("#start").click(function(){
		gameStarted = true;
		$("#game-cover").css("display","none");
		$("#game-instructions").css("display","none");
		spaceShip.css("display", "block");

		initBackGround();
		initGame();
	})

	$("#play").click(function(){
		$("#game-cover").css("display","none");
		$("#game-instructions").css("display","flex");
	})

	initBackGround();
	animate();

});
              
            
!
999px

Console