working version, add examples

sz-piotr · Aug 13, 2017 · dc45c99 · dc45c99
1 parent 199d560
commit dc45c99
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 7 deletions.
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>OUYO Examples: Basic</title>
+  </head>
+  <body>
+    <canvas id="canvas" width="800" height="600"></canvas>
+
+    <script src="../../lib/ouyo.js"></script>
+    <script>
+      const { Engine, component, Query } = OUYO
+      const canvas = document.getElementById('canvas')
+      const ctx = canvas.getContext('2d')
+
+      const engine = new Engine()
+
+      const PositionComponent = component(function(x, y) {
+        this.x = x
+        this.y = y
+      })
+
+      const VelocityComponent = component(function(x, y) {
+        this.x = x
+        this.y = y
+      })
+
+      const RectangleComponent = component(function(width, height, color) {
+        this.width = width
+        this.height = height
+        this.color = color
+      })
+
+      const MovementSystem = {
+        query: Query.all(PositionComponent, VelocityComponent),
+        processEntity(entity, timeDelta) {
+          const position = entity.get(PositionComponent)
+          const velocity = entity.get(VelocityComponent)
+
+          position.x += velocity.x * timeDelta
+          position.y += velocity.y * timeDelta
+        }
+      }
+
+      const ClearScreenSystem = {
+        update() {
+          ctx.fillStyle = 'black'
+          ctx.fillRect(0, 0, canvas.width, canvas.height)
+        }
+      }
+
+      const RectangleRenderSystem = {
+        query: Query.all(PositionComponent, RectangleComponent),
+        processEntity(entity, timeDelta) {
+          const position = entity.get(PositionComponent)
+          const rectangle = entity.get(RectangleComponent)
+
+          ctx.fillStyle = rectangle.color
+          ctx.fillRect(position.x, position.y, rectangle.width, rectangle.height)
+        }
+      }
+
+      engine.registerSystem(MovementSystem)
+      engine.registerSystem(ClearScreenSystem)
+      engine.registerSystem(RectangleRenderSystem)
+
+      engine.start(function(engine) {
+        engine.createEntity()
+          .add(new PositionComponent(0, 0))
+          .add(new VelocityComponent(5, 5))
+          .add(new RectangleComponent(30, 20, 'yellow'))
+      })
+    </script>
+  </body>
+</html>
diff --git a/lib/ouyo.js b/lib/ouyo.js
diff --git a/lib/ouyo.js.map b/lib/ouyo.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "build": "webpack -p --progress",
     "examples": "http-server -o -a localhost -i",
     "test": "jest",
-    "testwatch": "jest --watchAll"
+    "testwatch": "jest --watchAll",
+    "examples": "http-server -o"
   },
   "devDependencies": {
     "babel-core": "^6.25.0",
@@ -32,6 +33,8 @@
     "webpack": "^3.4.1"
   },
   "jest": {
-    "moduleFileExtensions": ["js"]
+    "moduleFileExtensions": [
+      "js"
+    ]
   }
 }
diff --git a/src/engine.js b/src/engine.js
@@ -136,8 +136,8 @@ export class Engine {
   }
 
   update(timeDelta) {
-    for(let i = 0; i < systems.length; ++i) {
-      this.runSystem(systems[i], timeDelta)
+    for(let i = 0; i < this.systems.length; ++i) {
+      this.runSystem(this.systems[i], timeDelta)
       this.handleChanges()
     }
   }