Add entity cheep-cheep.

public/js/entities.js

@@ -1,6 +1,7 @@
 import {loadMario} from './entities/Mario.js';
 import {loadGoombaBrown, loadGoombaBlue} from './entities/Goomba.js';
 import {loadKoopaGreen, loadKoopaBlue} from './entities/Koopa.js';
+import {loadCheepSlow, loadCheepFast, loadCheepSlowWavy, loadCheepFastWavy} from './entities/CheepCheep.js';
 import {loadPiranhaPlant} from './entities/PiranhaPlant.js';
 import {loadBullet} from './entities/Bullet.js';
 import {loadCannon} from './entities/Cannon.js';
@@ -51,6 +52,14 @@ export async function loadEntities(audioContext) {
             .then(addAs('koopa-green')),
         setup(loadKoopaBlue)
             .then(addAs('koopa-blue')),
+        setup(loadCheepSlow)
+            .then(addAs('cheep-slow')),
+        setup(loadCheepFast)
+            .then(addAs('cheep-fast')),
+        setup(loadCheepSlowWavy)
+            .then(addAs('cheep-slow-wavy')),
+        setup(loadCheepFastWavy)
+            .then(addAs('cheep-fast-wavy')),
         setup(loadBullet)
             .then(addAs('bullet')),
         setup(loadCannon)

public/js/entities/CheepCheep.js

@@ -0,0 +1,155 @@
+import Entity from '../Entity.js';
+import Trait from '../Trait.js';
+import Killable from '../traits/Killable.js';
+import {loadSpriteSheet} from '../loaders/sprite.js';
+
+export function loadCheepSlow() {
+    return loadSpriteSheet('cheep-gray')
+        .then(createCheepSlowFactory);
+}
+
+export function loadCheepSlowWavy() {
+    return loadSpriteSheet('cheep-gray')
+        .then(createCheepSlowWavyFactory);
+}
+
+export function loadCheepFast() {
+    return loadSpriteSheet('cheep-red')
+        .then(createCheepFastFactory);
+}
+
+export function loadCheepFastWavy() {
+    return loadSpriteSheet('cheep-red')
+        .then(createCheepFastWavyFactory);
+}
+
+class Behavior extends Trait {
+
+    collides(us, them) {
+        if(them.traits.has(Killable)) {
+            them.traits.get(Killable).kill();
+        }
+    }
+
+    update(entity, gameContext, level) {
+        const {deltaTime} = gameContext;
+        entity.pos.x += entity.vel.x * deltaTime;
+    }
+
+}
+
+class Wavy extends Trait {
+    constructor() {
+        super();
+        this.amplitude = 16;
+        this.direction = 1;
+        this.offset = 0;
+        this.speed = 0.5;
+    }
+
+    update(entity, gameContext, level) {
+        const {deltaTime} = gameContext;
+        const movementY = (entity.vel.x * deltaTime * this.direction) * this.speed;
+        entity.pos.y += movementY;
+
+        this.offset += movementY;
+        if (Math.abs(this.offset) > this.amplitude) {
+            this.direction = -this.direction;
+        }
+    }
+}
+
+function createCheepSlowFactory(sprite) {
+    const swimAnim = sprite.animations.get('swim');
+
+    function routeAnim(entity) {
+        return swimAnim(entity.lifetime);
+    }
+
+    function drawCheepSlow(context) {
+        sprite.draw(routeAnim(this), context, 0, 0, true);
+    }
+
+    return function createCheepSlow() {
+        const entity = new Entity();
+        entity.size.set(16, 16);
+        entity.vel.x = -16;
+        entity.addTrait(new Behavior());
+        entity.draw = drawCheepSlow;
+
+        return entity;
+    };
+}
+
+function createCheepSlowWavyFactory(sprite) {
+    const swimAnim = sprite.animations.get('swim');
+
+    function routeAnim(entity) {
+        return swimAnim(entity.lifetime);
+    }
+
+    function drawCheepSlowWavy(context) {
+        sprite.draw(routeAnim(this), context, 0, 0, true);
+    }
+
+    return function createCheepSlowWavy() {
+        const entity = new Entity();
+        entity.size.set(16, 16);
+        entity.vel.x = -16;
+
+        entity.addTrait(new Behavior());
+        entity.addTrait(new Wavy());
+
+        entity.draw = drawCheepSlowWavy;
+
+        return entity;
+    };
+}
+
+function createCheepFastFactory(sprite) {
+    const swimAnim = sprite.animations.get('swim');
+
+    function routeAnim(entity) {
+        return swimAnim(entity.lifetime);
+    }
+
+    function drawCheepFast(context) {
+        sprite.draw(routeAnim(this), context, 0, 0, true);
+    }
+
+    return function createCheepFast() {
+        const entity = new Entity();
+        entity.size.set(16, 16);
+        entity.vel.x = -32;
+        entity.addTrait(new Behavior());
+        entity.draw = drawCheepFast;
+
+        return entity;
+    };
+}
+
+function createCheepFastWavyFactory(sprite) {
+    const swimAnim = sprite.animations.get('swim');
+
+    function routeAnim(entity) {
+        return swimAnim(entity.lifetime);
+    }
+
+    function drawCheepFastWavy(context) {
+        sprite.draw(routeAnim(this), context, 0, 0, true);
+    }
+
+    return function createCheepFastWavy() {
+        const entity = new Entity();
+        entity.size.set(16, 16);
+        entity.vel.x = -32;
+
+        entity.addTrait(new Behavior());
+        entity.addTrait(new Wavy());
+        entity.traits.get(Wavy).speed = 0.25;
+
+        entity.draw = drawCheepFastWavy;
+
+        return entity;
+    };
+}

public/levels/2-2.json

@@ -98,7 +98,7 @@
                         [36, 3, 12],
                         [67, 3, 10],
                         [101, 3, 11],
-                        [113, 3, 4],
+                        [113, 3, 6],
                         [134, 3, 12],
                         [133, 11],
                         [137, 11],
@@ -113,9 +113,85 @@
                     ]
                 }
             ]
+        },
+        {
+            "tiles": []
+        }
+    ],
+
+    "entities": [
+        {
+            "name": "cheep-slow",
+            "pos": [1184, 112]
+        },
+        {
+            "name": "cheep-slow",
+            "pos": [1376, 160]
+        },
+        {
+            "name": "cheep-slow",
+            "pos": [1664, 160]
+        },
+        {
+            "name": "cheep-fast",
+            "pos": [1184, 144]
+        },
+        {
+            "name": "cheep-fast",
+            "pos": [1616, 64]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [1248, 112]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [1552, 96]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [1872, 80]
+        },
+        {
+            "name": "cheep-fast-wavy",
+            "pos": [2048, 160]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [2098, 176]
+        },
+        {
+            "name": "cheep-slow",
+            "pos": [2192, 128]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [2320, 144]
+        },
+        {
+            "name": "cheep-fast",
+            "pos": [2400, 80]
+        },
+        {
+            "name": "cheep-slow",
+            "pos": [2624, 48]
+        },
+        {
+            "name": "cheep-fast",
+            "pos": [2672, 160]
+        },
+        {
+            "name": "cheep-slow-wavy",
+            "pos": [2800, 128]
+        },
+        {
+            "name": "cheep-fast",
+            "pos": [2928, 64]
+        },
+        {
+            "name": "cheep-fast-wavy",
+            "pos": [2976, 128]
         }
     ],
-
-    "entities": [],
     "triggers": []
 }

public/sprites/cheep-gray.json

@@ -0,0 +1,25 @@
+{
+    "imageURL": "/img/sprites.png",
+
+    "frames": [
+        {
+            "name": "swim-1",
+            "rect": [48, 32, 16, 16]
+        },
+        {
+            "name": "swim-2",
+            "rect": [64, 32, 16, 16]
+        }
+    ],
+
+    "animations": [
+        {
+            "name": "swim",
+            "frameLen": 0.13,
+            "frames": [
+                "swim-1",
+                "swim-2"
+            ]
+        }
+    ]
+}

public/sprites/cheep-red.json

@@ -0,0 +1,25 @@
+{
+    "imageURL": "/img/sprites.png",
+
+    "frames": [
+        {
+            "name": "swim-1",
+            "rect": [48, 0, 16, 16]
+        },
+        {
+            "name": "swim-2",
+            "rect": [64, 0, 16, 16]
+        }
+    ],
+
+    "animations": [
+        {
+            "name": "swim",
+            "frameLen": 0.13,
+            "frames": [
+                "swim-1",
+                "swim-2"
+            ]
+        }
+    ]
+}