Added rockets

Philipp-S · Sep 19, 2020 · 99b44ca · 99b44ca
1 parent 21ad187
commit 99b44ca
Show file tree

Hide file tree

Showing 14 changed files with 106 additions and 15 deletions.
diff --git a/build/img/cursor.png b/build/img/cursor.png
diff --git a/build/img/rocket.png b/build/img/rocket.png
diff --git a/build/index.html b/build/index.html
@@ -9,11 +9,13 @@
     <script src = "js/state.js"></script>
     <script src = "js/renderer.js"></script>
     <script src = "js/camera.js"></script>
+    <script src = "js/cursor.js"></script>
     <script src = "js/constants.js"></script>
+    <script src = "js/rocket.js"></script>
 </head>
-<body>
+<body style="margin:0px">
 
-    <canvas id="canvas_main" width="1024" height="768">
+    <canvas id="canvas_main" width="1024" height="768" style="cursor: none">
 
     </canvas>
 

diff --git a/camera.ts b/camera.ts
@@ -11,5 +11,12 @@ class Camera extends Entity {
     update(deltaTime: number, state: State) : void {
         this.pos = { x: this.tracedEntity.pos.x, y: this.tracedEntity.pos.y}
     }
+
+    screenPointToWorld(screenPos: Point) {
+        return {
+            x: screenPos.x - CONST.SCREEN_WIDTH / 2 + this.pos.x,
+            y: screenPos.y - CONST.SCREEN_HEIGHT / 2 + this.pos.y,
+        }
+    }
 
 }
diff --git a/constants.ts b/constants.ts
@@ -12,5 +12,7 @@ const CONST = {
     PLAYER_FRICTION_GROUND: 0.999, // fraction of speed the player loses per second while grounded
     PLAYER_ACCEL_AIR: 1000, // player acceleration while airborne
     PLAYER_FRICTION_AIR: 0.7, // fraction of speed the player loses per second while airborne
-    PLAYER_GROUND_BOUNCE: 0.75 // how much the player bounces when impacting the ground
+    PLAYER_GROUND_BOUNCE: 0.75, // how much the player bounces when impacting the ground
+    ROCKET_VELOCITY: 1000, // speed of rockets in pixels per second
+    ROCKET_START_HEIGHT: 50 // hight at the player sprite where rockets are spawned
 }
diff --git a/cursor.ts b/cursor.ts
@@ -0,0 +1,12 @@
+class Cursor extends Entity {
+
+    constructor() {
+        super( {x:0, y: 0})
+        this.renderPivot = {x:7, y:7}
+        Resources.setImage(this, ImageResource.CURSOR)
+    }
+
+    update(deltaTime: number, state: State) : void {
+        this.pos = state.camera.screenPointToWorld(Input.mouse);
+    }
+}
diff --git a/input.ts b/input.ts
@@ -16,8 +16,11 @@ let Input = {
     setMouseState(event) {
         this.mouse.x = event.clientX;
         this.mouse.y = event.clientY;
+        let leftclick = event.buttons & 1;
+        if (!this.mouse.down && leftclick) {
+            this.mouse.click = true;
+        }
         this.mouse.down = (event.buttons & 1);
-        this.mouse.click = (event.buttons & 1);
     },
 
     // register the event listeners

diff --git a/mob.ts b/mob.ts
@@ -7,7 +7,7 @@ class Mob extends Entity {
     renderPivot: Point
 
     constructor(pos: Point) {
-        super( { x: pos.x, y:pos.y })
+        super( pos )
         Resources.setImage(this, ImageResource.BALLOON)
     }
 

diff --git a/player.ts b/player.ts
@@ -19,7 +19,14 @@ class Player extends Entity {
 
         // shooting
         if(Input.mouse.click) {
-            this.explosion({x: 0, y: 10})
+            let startPos = { x: this.pos.x,
+                             y: this.pos.y - CONST.ROCKET_START_HEIGHT }
+            state.entities.push(new Rocket(
+                startPos,
+                { x: state.cursor.pos.x - startPos.x,
+                  y: state.cursor.pos.y - startPos.y },
+                this.velocity
+            ))
         }
 
         // apply input

diff --git a/renderer.ts b/renderer.ts
@@ -28,9 +28,15 @@ class Renderer {
         // objects
         state.entities.forEach(r => {
             if (r.sprite) {
-                let x = Math.round(r.pos.x + offset.x - r.renderPivot.x)
-                let y = Math.round(r.pos.y + offset.y - r.renderPivot.y)
-                this.ctx.drawImage(r.sprite,x ,y )
+                this.ctx.save()
+                this.ctx.translate( Math.round(r.pos.x + offset.x),
+                                    Math.round(r.pos.y + offset.y) )
+                if (r.rotation !== 0) { 
+                    this.ctx.rotate(r.rotation)
+                }
+                this.ctx.translate( -r.renderPivot.x, -r.renderPivot.y) 
+                this.ctx.drawImage(r.sprite, 0 , 0 )
+                this.ctx.restore()
             }
         })
 

diff --git a/resources.ts b/resources.ts
@@ -1,7 +1,9 @@
 // handler for resources
 enum ImageResource {
     PLAYER = "img/player.png",
-    BALLOON = "img/balloon_red.png"
+    BALLOON = "img/balloon_red.png",
+    CURSOR = "img/cursor.png",
+    ROCKET = "img/rocket.png"
 }
 
 class Resources {

diff --git a/rocket.ts b/rocket.ts
@@ -0,0 +1,40 @@
+class Rocket extends Entity {
+
+    private velocity: Point;
+    private direction: Point;
+
+    constructor(pos: Point, direction: Point, initialVelocity: Point) {
+        super(pos)
+
+        let distx = direction.x
+        let disty = direction.y
+        let dist = Math.sqrt(distx * distx + disty * disty)
+
+        this.direction = { x: distx / dist, y: disty / dist }
+        this.velocity = { x: this.direction.x * CONST.ROCKET_VELOCITY + initialVelocity.x,
+                          y: this.direction.y * CONST.ROCKET_VELOCITY + initialVelocity.y }
+        //this.rotation = Math.atan(-this.direction.x / -this.direction.y)
+        this.rotation = Math.atan(this.direction.y / this.direction.x)
+        if (this.direction.x < 0) this.rotation += Math.PI
+
+        this.renderPivot = {x: 19, y: 9}
+        Resources.setImage(this, ImageResource.ROCKET)
+    }
+
+    update(deltaTime: number, state: State) : void {
+        // fly
+        this.pos.x += this.velocity.x * deltaTime;
+        this.pos.y += this.velocity.y * deltaTime;
+
+        // explode
+        if (this.pos.y >= 0) {
+            this.explode(state)
+        }
+
+    }
+
+    private explode(state: State) : void {
+        state.removeEntity(this)
+        state.player.explosion(this.pos)
+    }
+}
diff --git a/state.ts b/state.ts
@@ -3,8 +3,8 @@ class State {
 
     public camera: Camera 
     public entities: Entity[]
-
-    private player: Player
+    public cursor: Cursor
+    public player: Player
 
 
     constructor() {
@@ -14,6 +14,8 @@ class State {
         this.entities.push(this.player)
         this.camera = new Camera(this.player)
         this.entities.push(this.camera)
+        this.cursor = new Cursor()
+        this.entities.push(this.cursor)
 
         for(let i = 0; i < 10; i++) {
             this.entities.push(new Mob({
@@ -23,6 +25,13 @@ class State {
         }
     }
 
+    removeEntity(entity: Entity) {
+        let index = this.entities.indexOf(entity)
+        if (index > -1) {
+            this.entities.splice(index, 1)
+        }
+    }
+
     update(deltaTime: number) {
         this.entities.forEach(e => e.update(deltaTime, this))
     }

diff --git a/types.ts b/types.ts
@@ -6,9 +6,10 @@ interface Point {
 }
 
 abstract class Entity {
-    public pos: Point;
-    public sprite?: CanvasImageSource;
-    public renderPivot: Point;
+    public pos: Point
+    public sprite?: CanvasImageSource
+    public rotation: number = 0
+    public renderPivot: Point
 
     constructor(pos: Point) {
         this.pos = { x: pos.x, y: pos.y }