diff --git a/public/js/entities.js b/public/js/entities.js index 42a3a27d..5e5403f6 100644 --- a/public/js/entities.js +++ b/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) diff --git a/public/js/entities/CheepCheep.js b/public/js/entities/CheepCheep.js new file mode 100644 index 00000000..5b22d1c0 --- /dev/null +++ b/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; + }; +} diff --git a/public/levels/2-2.json b/public/levels/2-2.json index 591ebc96..5706b7da 100644 --- a/public/levels/2-2.json +++ b/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": [] } diff --git a/public/sprites/cheep-gray.json b/public/sprites/cheep-gray.json new file mode 100644 index 00000000..f0c3e10c --- /dev/null +++ b/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" + ] + } + ] +} diff --git a/public/sprites/cheep-red.json b/public/sprites/cheep-red.json new file mode 100644 index 00000000..65087860 --- /dev/null +++ b/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" + ] + } + ] +}