A Pen by Ali BARIN.

script.js

$(function(){
	Crafty.init(document.body.clientWidth, document.body.clientHeight);

	Crafty.sprite(57, 'http://alibarin.com.tr/codepen/spaceship/sprite.png', {
		spaceShip: [0, 0],
		enemyShip: [1, 0]
	});

	Crafty.bind('EnterFrame', function(frame){
		Crafty.stage.elem.style.backgroundPosition = "0px " + (frame.frame * 3) + "px";
	});

	// bullet

	Crafty.c('bullet', {
		init: function(){
			this
				.addComponent('2D', 'Canvas', 'Dom', 'Collision', 'Color')
				.origin('center')
				.attr({
					x: 20, y: 20, yspeed: 5, h: 8, w: 3
				})
				.color('#ffffff')
				.bind('EnterFrame', function(){
					this.y -= this.yspeed;
				})

		}
	});

	Crafty.c('enemy', {
		init: function(){
			this
				.addComponent('2D', 'DOM', 'Color', 'Tween', 'enemyShip', 'Collision')
				.attr({
					x: 20, y: 20, dX: 3, xspeed: 5, yspeed: 5, h: 50, w: 50
				})
				.bind('EnterFrame', function(){
					this.x += this.xspeed;

					if (this.x <= 0 || this.x >= (Crafty.viewport.width - this.w)){
						this.xspeed *= -1;

						this.tween({
							y: (this.y + this.h)
						}, 10);
					}
				})
				.onHit('bullet', function(bullet){
					this.destroy();
					bullet[0].obj.destroy();
				});


		}
	});

	Crafty.scene('Loading', function(){
		Crafty
			.e('HTML')
			.attr({ h: 20, w: 100, x: (Crafty.viewport.width/2 - 50), y: (Crafty.viewport.height/2 - 10)})
			.append('<a id="start-game" href="javascript:;">Loading...</a>');

		Crafty.load(['http://alibarin.com.tr/codepen/spaceship/sprite.png'], function () {
			Crafty.scene('Start');
		});
	});

	Crafty.scene('Start', function(){
		Crafty
			.e('HTML')
			.addComponent('Mouse')
			.attr({ h: 20, w: 100, x: (Crafty.viewport.width/2 - 50), y: (Crafty.viewport.height/2 - 10)})
			.append('<a id="start-game" href="javascript:;">START</a>')
			.bind('Click', function(){
				Crafty.scene('Level 1');
			});
    
		Crafty
			.e('HTML')
			.attr({ h: 20, w: 350, x: (Crafty.viewport.width/2 - 175), y: (Crafty.viewport.height/2 + 40)})
			.append('use space key for fire, use arrow keys for movement ')
			.bind('Click', function(){
				Crafty.scene('Level 1');
			});

		Crafty
			.e('HTML')
			.addComponent('Mouse', 'Color')
			.attr({ h: 40, w: 170, x: (Crafty.viewport.width - 170), y: (Crafty.viewport.height - 40)})
			.append('<span class="copyright">Developed by <a href="http://alibarin.com.tr">Ali BARIN</a>.</span>');
	});

	Crafty.scene('Level 1', function(){
		// create noob enemies
		for(x = 1; x <= (document.body.clientWidth / 160); x++){
			for(y = 1; y <= 3; y++){
				Crafty
				.e('enemy')
				.attr({
					x: (80 * x),
					y: 50 * y
				});
			}
		}

		// create our nicely space ship!
		Crafty
			.e('hero, 2D, DOM, Multiway, Keyboard, spaceShip, Collision')
			.attr({
				x: (Crafty.viewport.width - 50) / 2,
				y: Crafty.viewport.height - 75,
				w: 50,
				h: 57
			})
			.multiway(5, { LEFT_ARROW: 180, RIGHT_ARROW: 0 })
			.bind('EnterFrame', function (dmg) {
				if (this.x > (Crafty.viewport.width - 50))
					this.x -= 5;
				
				if (this.x < 0)
					this.x += 5;

				if ( ! Crafty('enemy').length){
					Crafty.scene('Win');
				}
			})
			.bind('KeyDown', function(){
				if (this.isDown('SPACE')){
					Crafty
						.e('bullet')
						.attr({
							h: 8,
							w: 3,
							x: this.x + (50/2) - 1.5,
							y: this.y - 10,
							xspeed: 20,
							yspeed: 20
						});
				}
			})
			.onHit('enemy', function(enemy){
				enemy[0].obj.destroy();
				this.destroy();

				Crafty.scene('Game Over');
			});
	});

	Crafty.scene('Win', function(){
		Crafty
			.e('HTML')
			.attr({ h: 20, w: 400, x: (Crafty.viewport.width/2 - 200), y: (Crafty.viewport.height/2 - 10)})
			.append('<a id="start-game" href="javascript:;">You \'re hero, win!</a>');		
	});

	Crafty.scene('Game Over', function(){
		Crafty
			.e('HTML')
			.attr({ h: 20, w: 400, x: (Crafty.viewport.width/2 - 200), y: (Crafty.viewport.height/2 - 10)})
			.append('<a id="start-game" href="javascript:;">Sorry dude, game over!</a>');
	});

	Crafty.scene('Loading');
		
});

SpaceShip.markdown

SpaceShip

A basic game, built with Crafty javascript game framework.

A Pen by Ali BARIN on CodePen.

License.

style.css

	body{ background: #333; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }

	#cr-stage{
		background: url(http://alibarin.com.tr/codepen/spaceship/starfield.jpg);
		background-size: auto 100%;
		//margin: 50px auto 0 auto;
	}

	#start-game{
		color: #aaa;
		font-size: 32px;
		font-weight: bold;
		text-decoration: none;
	}

	#start-game:hover{ color: #ccc; }

	span.copyright, span.copyright a{ color: #ccc; }