Added Text entity with Font representation class for rendering text

examples/pong/pong.js

@@ -10,7 +10,10 @@ let width = 640,
     baseSize = width / 64;
 
 let white = new MomentumEngine.Classes.Color(255, 255, 255),
-    black = new MomentumEngine.Classes.Color(0, 0, 0);
+    black = new MomentumEngine.Classes.Color(0, 0, 0),
+    red = new MomentumEngine.Classes.Color(255, 0, 0);
+
+let font = new MomentumEngine.Classes.Font("Arial", "32px", white, red);
 
 
 class Ball extends MomentumEngine.Classes.Rect {
@@ -20,6 +23,8 @@ class Ball extends MomentumEngine.Classes.Rect {
 
         super(startingLeft, startingTop, baseSize, baseSize, white);
 
+        this.startingLeft = startingLeft;
+        this.startingTop = startingTop;
         this.speed = new MomentumEngine.Classes.Vector2D(0.1, 0.05); // Starting ball speed
 
     }
@@ -29,8 +34,18 @@ class Ball extends MomentumEngine.Classes.Rect {
 
         this.pos.add(this.speed.clone().multiply(delta));
 
-        if ((this.left + baseSize > width && this.speed.x > 0) || (this.left < 0 && this.speed.x < 0)) {
+        if (this.left + baseSize > width && this.speed.x > 0) {
-            this.speed.x = -this.speed.x;
+
+            this.left = this.startingLeft;
+            this.top = this.startingTop;
+            this.game.leftScoreboard.increment();
+
+        } else if (this.left < 0 && this.speed.x < 0) {
+
+            this.left = this.startingLeft;
+            this.top = this.startingTop;
+            this.game.rightScoreboard.increment();
+
         }
 
         if ((this.top + baseSize > height && this.speed.y > 0) || (this.top < 0 && this.speed.y < 0)) {
@@ -52,6 +67,7 @@ class Paddle extends MomentumEngine.Classes.Rect {
 
         this.keyUp = keys.up;
         this.keyDown = keys.down;
+        this.scoreboard = null;
 
     }
 
@@ -82,6 +98,25 @@ class Paddle extends MomentumEngine.Classes.Rect {
 }
 
 
+class Scoreboard extends MomentumEngine.Classes.Text {
+
+
+    constructor (posLeft) {
+        super(posLeft, 35, font);
+        this.score = 0;
+        this.text = "Score: 0";
+    }
+
+
+    increment () {
+        this.score++;
+        this.text = `Score: ${this.score}`;
+    }
+
+
+}
+
+
 class Pong extends MomentumEngine.Classes.Game {
 
 
@@ -107,7 +142,19 @@ class Pong extends MomentumEngine.Classes.Game {
     }
 
 
+    setLeftScoreboard (scoreboard) {
+        this.leftScoreboard = scoreboard;
+        this.addChildEntity(scoreboard);
+    }
+
+    setRightScoreboard (scoreboard) {
+        this.rightScoreboard = scoreboard;
+        this.addChildEntity(scoreboard);
+    }
+
+
     addBall (ball) {
+        ball.game = this;
         this.balls.push(ball);
         this.addChildEntity(ball);
     }
@@ -139,11 +186,19 @@ window.onload = function () {
         down: KeyConsts.CHAR_L
     });
 
+    var leftScoreboard = new Scoreboard(baseSize),
+        rightScoreboard = new Scoreboard(width - baseSize);
+
+    rightScoreboard.textAlign = "right"; // Right align the text of the right scoreboard
+
     // Create scene graph
     pong.addBall(ball);
     pong.addPaddle(leftPaddle);
     pong.addPaddle(rightPaddle);
 
+    pong.setLeftScoreboard(leftScoreboard);
+    pong.setRightScoreboard(rightScoreboard);
+
     pong.start();
 
 

src/classes/color.js

@@ -3,12 +3,12 @@
 class Color {
 
 
-    constructor (r, g, b, a) {
+    constructor (r = 0, g = 0, b = 0, a = 1) {
 
-        this.r = r || 0;
+        this.r = r;
-        this.g = g || 0;
+        this.g = g;
-        this.b = b || 0;
+        this.b = b;
-        this.a = a || 1;
+        this.a = a;
 
     }
 

src/classes/entity.js

@@ -5,9 +5,9 @@ import Vector2D from "./vector2d.js";
 class Entity {
 
 
-    constructor (x, y) {
+    constructor (x = 0, y = 0) {
 
-        this.pos = new Vector2D(x || 0, y || 0);
+        this.pos = new Vector2D(x, y);
         this.velocity = new Vector2D(0, 0);
         this.acceleration = new Vector2D(0, 0);
         this.size = new Vector2D(0, 0);

src/classes/font.js

@@ -0,0 +1,22 @@
+"use strict";
+
+import Color from "./color.js";
+
+
+class Font {
+
+
+    constructor(family, size, fill = null, stroke = null) {
+
+        this.family = family;
+        this.size = size;
+        this.fill = fill;
+        this.stroke = stroke;
+
+    }
+
+
+}
+
+
+export default Font;

src/classes/text.js

@@ -0,0 +1,65 @@
+"use strict";
+
+import Entity from "./entity.js";
+import Vector2D from "./vector2d.js";
+
+
+class Text extends Entity {
+
+
+    constructor (x, y, font, text) {
+
+        super(x, y);
+
+        this.font = font;
+        this.text = text;
+
+        this.textAlign = "start";
+        this.textBaseline = "alphabetic";
+        this.direction = "inherit";
+
+    }
+
+
+    isCollidingWith (entity) {
+
+        if (entity instanceof Rect) {
+            return CollisionMethods.AABB(this, entity);
+        }
+
+    }
+
+
+    render () {
+
+        if (this._game) {
+
+            this._game.context.font = `${this.font.size} ${this.font.family}`;
+
+            this._game.context.textAlign = this.textAlign;
+            this._game.context.textBaseline = this.textBaseline;
+            this._game.context.direction = this.direction;
+
+            if (this.font.fill) {
+                this._game.context.fillStyle = this.font.fill;
+                this._game.context.fillText(this.text, this.relativeLeft, this.relativeTop);
+            }
+
+            if (this.font.stroke) {
+                this._game.context.strokeStyle = this.font.stroke;
+                this._game.context.strokeText(this.text, this.relativeLeft, this.relativeTop);
+            }
+
+            return true;
+
+        } else {
+            return false;
+        }
+
+    }
+
+
+}
+
+
+export default Text;

src/es5.js

@@ -8,6 +8,8 @@ import Vector2D from "./classes/vector2d.js";
 import Sprite from "./classes/sprite.js";
 import Rect from "./classes/rect.js";
 import Color from "./classes/color.js";
+import Text from "./classes/text.js";
+import Font from "./classes/font.js";
 import ImageLoader from "./classes/imageloader.js";
 
 import {KeyConsts} from "./classes/keyboardinput.js";
@@ -22,6 +24,8 @@ const Classes = {
     Rect,
     Vector2D,
     Color,
+    Text,
+    Font,
     ImageLoader
 };
 

src/es6.js

@@ -8,6 +8,8 @@ import Vector2D from "./classes/vector2d.js";
 import Sprite from "./classes/sprite.js";
 import Rect from "./classes/rect.js";
 import Color from "./classes/color.js";
+import Text from "./classes/text.js";
+import Font from "./classes/font.js";
 import ImageLoader from "./classes/imageloader.js";
 
 import {KeyConsts} from "./classes/keyboardinput.js";
@@ -22,6 +24,8 @@ const Classes = {
     Rect,
     Vector2D,
     Color,
+    Text,
+    Font,
     ImageLoader
 };