Enemy Added, some images edited

assets/js/game.js

@@ -1,28 +1,49 @@
 window.onload = function(){
-    Crafty.init(800,600);
+    Crafty.init();
     Crafty.canvas.init();
-    Crafty.sprite(60,50,"assets/img/Ships_1.png",{
-        ship1 : [0,0],
-        ship2 : [1,0],
-        shadow_ship1: [0,1],
-        shadow_ship2: [1,1]
+    Crafty.sprite(57,44,"assets/img/ship1.png",{
+        ship1:[0,0]
     });
-    Crafty.sprite(40,40,"assets/img/Wpn2.png",{
+    Crafty.sprite(57,32,"assets/img/ship2.png",{
+        ship2:[0,0]
+    });
+    Crafty.sprite(57,32,"assets/img/ship3.png",{
+        ship3:[0,0]
+    });
+    Crafty.sprite(57,32,"assets/img/ship4.png",{
+        ship4:[0,0]
+    });
+    Crafty.sprite(11,28,"assets/img/bullet.png",{
         bullet:[0,0] 
     });
+
     Crafty.scene("game",function(){
 
         var area = 50;
-        Crafty.background('url(assets/img/dunes_simple.jpg)');
+        Crafty.background('url(assets/img/bg.jpg)');
+        Crafty.c("Enemy",{
+            init:function(){
+                this.requires("Collision")
+                .attr({
+                    rotation:180
+                }).bind('Moved', function() {
+                    this._y += 1; 
+                }).origin("center");
+                return this;
+            },
+            move:function(){
+                this.trigger("Moved");
+
+            }
+        });
         Crafty.c("Player",{
             init:function(){
-
+                var keyDown = false;
                 this.requires("Keyboard,Collision").
                 attr({
                     x:Crafty.viewport.width/2-this.w/2,
                     y:Crafty.viewport.height-this.h-100
                 }).bind('Moved', function(from) {
-
                     if(this.x+this.w/2+area > Crafty.viewport.width || this.x+this.w/2-area < 0 || this.y+this.h-area + Crafty.viewport.y <0 || this.y+this.h/2+area + Crafty.viewport.y > Crafty.viewport.height){
                         this.attr({
                             x:from.x, 
@@ -31,32 +52,41 @@ window.onload = function(){
                     }
                 }).bind("KeyDown", function(e) {
                     if(e.keyCode === Crafty.keys.SPACE){
-                        Crafty.e("2D, Canvas, bullet")
-                        .attr({
-                            x: this._x,
-                            y: this._y,
-                            rotation: this._rotation,
-                            xspeed: 20 * Math.sin(this._rotation / 57.3),
-                            yspeed: 20 * Math.cos(this._rotation / 57.3)
-                        })
-                        .bind("EnterFrame", function() {
-                            this.x += this.xspeed;
-                            this.y -= this.yspeed;
-
-                            //destroy if it goes out of bounds
-                            if(this._x > Crafty.viewport.width || this._x < 0 || this._y+Crafty.viewport.y > Crafty.viewport.height || this._y+Crafty.viewport.y < 0) {
-                                this.destroy();
-                            }
-                        });
+                        keyDown = true;
                     } 
+                }).bind("KeyUp", function(e) {
+                    if(e.keyCode === Crafty.keys.SPACE){
+                        keyDown = false;
+                    } 
+                }).bind("EnterFrame",function(frame){
+                    if(keyDown && (frame.frame % 10 == 0)){
+                        this.shoot();
+                    }
+                });
+            },
+            shoot:function(){
+                Crafty.e("2D, Canvas, bullet")
+                .attr({
+                    x: this._x+this._w/2,
+                    y: this._y-this._h/2,
+                    rotation: this._rotation,
+                    xspeed: 20 * Math.sin(this._rotation / 57.3),
+                    yspeed: 20 * Math.cos(this._rotation / 57.3)
+                })
+                .bind("EnterFrame", function() {
+                    //this.x += this.xspeed;
+                    this.y -= this.yspeed; 
+                    //destroy if it goes out of bounds
+                    if( this._y > Crafty.viewport.height || this._y < 0) {
+                        this.destroy();
+                    }
                 });
-            } 
+            }
         });
         Crafty.c("RightControls", {
             init: function() {
                 this.requires('Multiway');
             },
-
             rightControls: function(speed) {
                 this.multiway(speed, {
                     UP_ARROW: -90, 
@@ -72,13 +102,14 @@ window.onload = function(){
 
 
         var player = Crafty.e("2D,Canvas,ship1,Player,Collision,RightControls").rightControls(5);
-
+        var enemy = Crafty.e("2D,Canvas,ship2,Enemy,Collision");
         var speed = 1;
-        Crafty.bind("EnterFrame",function(){
-            Crafty.viewport.y += 1;
-            player.y -= 1;
-            Crafty.stage.elem.style.backgroundPosition ="0px "+(Crafty.viewport.y)+"px";
-
+        var scroll = 0;
+        Crafty.bind("EnterFrame",function(frame){
+            scroll += 1;
+            enemy.trigger("Moved");
+            Crafty.stage.elem.style.backgroundPosition ="0px "+scroll+"px";
+
         })
     });
     Crafty.scene("game");

index.html

@@ -2,7 +2,7 @@
 <html>
     <head>
         <title>Deser Rescue</title>
-        <script type="text/javascript" src="http://craftyjs.com/release/0.4.4/crafty-min.js"></script>
+        <script type="text/javascript" src="http://cdn.crafty-modules.com/crafty-DEBUG.js"></script>
         <script type="text/javascript" src="assets/js/game.js"></script>
         <meta charset="UTF-8" />
         <style>