Use externalized components

10 years ago · 00bdf3b5df
parent 29eef55a28
commit 00bdf3b5df
3 changed files with 13 additions and 20 deletions
--- a/intro-to-crafty/index.html
+++ b/intro-to-crafty/index.html
@ -3,6 +3,7 @@
  <head>
    <script src="lib/crafty.js"></script>
    <script src="src/game.js"></script>
+    <script src="src/components.js"></script>
    <script>
      window.addEventListener('load', Game.start);
    </script>
--- a/intro-to-crafty/src/components.js
+++ b/intro-to-crafty/src/components.js
@ -22,16 +22,22 @@ Crafty.c('Grid', {
  }
 });

+Crafty.c('Actor', {
+  init: function() {
+    this.requires('2D, Canvas, Grid');
+  }
+});
+
 Crafty.c('Tree', {
  init: function() {
-    this.requires('2D, Canvas, Grid, Color');
-    this.color('rgb(20, 125, 40)');
+    this.requires('Actor, Color')
+      .color('rgb(20, 125, 40)');
  }
 });

 Crafty.c('Bush', {
  init: function() {
-    this.requires('2D, Canvas, Grid, Color');
-    this.color('rgb(20, 185, 40)');
+    this.requires('Actor, Color')
+      .color('rgb(20, 185, 40)');
  }
 });
--- a/intro-to-crafty/src/game.js
+++ b/intro-to-crafty/src/game.js
@ -25,23 +25,9 @@ Game = {
        var at_edge = x == 0 || x == Game.map_grid.width - 1 || y == 0 || y == Game.map_grid.height - 1;

        if (at_edge) {
-          Crafty.e('2D, Canvas, Color')
-            .attr({
-              x: x * Game.map_grid.tile.width,
-              y: y * Game.map_grid.tile.height,
-              w: Game.map_grid.tile.width,
-              h: Game.map_grid.tile.height
-            })
-            .color('rgb(20, 125, 40)');
+          Crafty.e('Tree').at(x, y);
        } else if (Math.random() < 0.06) {
-          Crafty.e('2D, Canvas, Color')
-            .attr({
-              x: x * Game.map_grid.tile.width,
-              y: y * Game.map_grid.tile.height,
-              w: Game.map_grid.tile.width,
-              h: Game.map_grid.tile.height
-            })
-            .color('rgb(20, 185, 40)');
+          Crafty.e('Bush').at(x, y);
        }
      }
    }