.

Author: FleetAdmiralJakob

.gitignore

@@ -0,0 +1 @@
+/node_modules

.idea/codestream.xml

@@ -53,10 +53,9 @@ <h1 class="title">A Steampunk Game</h1>
 
     <div class="buttons">
         <button class="button" onclick="window.open('https://github.com/FleetAdmiralJakob/Steampunk-Game/wiki')">Steampunk Wiki</button>
-        <button class="button" onclick="window.open('https://github.com/FleetAdmiralJakob/Steampunk-Game')">View Code on GitHub</button>
+        <button class="button" onclick="window.open('https://github.com/FleetAdmiralJakob/Steampunk-Game')">View Code on GitHub <img alt="github icon" src="assets/github.png"/></button>
     </div>
 
-    <script src="javascripts/game.js"></script>
-    <script src="javascripts/environment.js"></script>
+    <script type="module" src="javascripts/main.js"></script>
 </body>
 </html>

assets/github.png

@@ -0,0 +1,27 @@
+import {Layer} from "./layer.js";
+
+export class Background {
+    constructor (game) {
+        this.game = game
+
+        this.image1 = document.getElementById('layer1')
+        this.image2 = document.getElementById('layer2')
+        this.image3 = document.getElementById('layer3')
+        this.image4 = document.getElementById('layer4')
+
+        this.layer1 = new Layer(this.game, this.image1, 0.2)
+        this.layer2 = new Layer(this.game, this.image2, 0.4)
+        this.layer3 = new Layer(this.game, this.image3, 1)
+        this.layer4 = new Layer(this.game, this.image4, 1.3)
+
+        this.layers = [this.layer1, this.layer2, this.layer3]
+    }
+
+    update () {
+        this.layers.forEach(layer => layer.update())
+    }
+
+    draw (context) {
+        this.layers.forEach(layer => layer.draw(context))
+    }
+}

index.html

@@ -0,0 +1,29 @@
+  export class Enemy {
+    constructor (game) {
+      this.game = game
+      this.x = this.game.width
+      this.speedX = Math.random() * -1.5 - 0.5
+      this.markedForDeletion = false
+      this.frameX = 0
+      this.frameY = 0
+      this.maxFrame = 37
+    }
+
+    update () {
+      this.x += this.speedX - this.game.speed
+      if (this.x + this.width < 0) this.markedForDeletion = true
+      // Sprite animations
+      if (this.frameX < this.maxFrame) {
+        this.frameX++
+      } else this.frameX = 0
+    }
+
+    draw (context) {
+      if (this.game.debug) context.strokeRect(this.x, this.y, this.width, this.height)
+      context.drawImage(this.image, this.frameX * this.width, this.frameY * this.height, this.width, this.height, this.x, this.y, this.width, this.height)
+      if (this.game.debug) {
+        context.font = '20px Helvetica'
+        context.fillText(this.lives, this.x, this.y)
+      }
+    }
+  }

javascripts/components/background.js

@@ -0,0 +1,35 @@
+export class Explosion {
+    constructor (game, x, y) {
+        this.game = game
+        this.frameX = 0
+        this.spriteWidth = 200
+        this.spriteHeight = 200
+
+        this.width = this.spriteWidth
+        this.height = this.spriteHeight
+        this.x = x - this.width * 0.5
+        this.y = y - this.height * 0.5
+
+        this.fps = 30
+        this.timer = 0
+        this.interval = 1000 / this.fps
+        this.markedForDeletion = false
+        this.maxFrame = 8
+    }
+
+    update (deltaTime) {
+        this.x -= this.game.speed
+        if (this.timer > this.interval) {
+            this.frameX++
+            this.timer = 0
+        } else {
+            this.timer += deltaTime
+        }
+        this.frameX++
+        if (this.frameX > this.maxFrame) this.markedForDeletion = true
+    }
+
+    draw (context) {
+        context.drawImage(this.image, this.frameX * this.spriteWidth, 0, this.spriteWidth, this.spriteHeight, this.x, this.y, this.width, this.height)
+    }
+}

javascripts/components/enemy.js

@@ -0,0 +1,14 @@
+import {Enemy} from "../../enemy.js";
+
+export class Angler1 extends Enemy {
+    constructor (game) {
+        super(game)
+        this.width = 228
+        this.height = 169
+        this.y = Math.random() * (this.game.height * 0.95 - this.height)
+        this.image = document.getElementById('angler1')
+        this.frameY = Math.floor(Math.random() * 3)
+        this.lives = 5
+        this.score = this.lives
+    }
+}

javascripts/components/explosion.js

@@ -0,0 +1,14 @@
+import {Enemy} from "../../enemy.js";
+
+export class Angler2 extends Enemy {
+    constructor (game) {
+        super(game)
+        this.width = 213
+        this.height = 165
+        this.y = Math.random() * (this.game.height * 0.95 - this.height)
+        this.image = document.getElementById('angler2')
+        this.frameY = Math.floor(Math.random() * 2)
+        this.lives = 6
+        this.score = this.lives
+    }
+}

javascripts/components/extended components/enemies/angler1.js

@@ -0,0 +1,15 @@
+import {Enemy} from "../../enemy.js";
+
+export class BulbWhale extends Enemy {
+    constructor (game) {
+        super(game)
+        this.width = 270
+        this.height = 219
+        this.y = Math.random() * (this.game.height * 0.95 - this.height)
+        this.image = document.getElementById('bulb-whale')
+        this.frameY = Math.floor(Math.random() * 2)
+        this.lives = 20
+        this.score = this.lives
+        this.speedX = Math.random() * -1.2 - 0.2
+    }
+}