Demo

Source code

"use strict";

const whl = require("whale-core");
const pyxel = require("whale-pyxel");
const mainLoop = require("whale/std/main_loop.js");


function random(min, max)
{
  return min + Math.random() * (max - min);
}


function randomRange(vec)
{
  return random(vec.x, vec.y);
}


function midRange(vec)
{
  return (vec.x + vec.y) / 2;
}


var game = {
  init: function()
  {
    this.windowSize = whl.Vec2(800, 600);
    this.window = whl.Window(
      "WhaleJS", whl.IVec2(100, 100), whl.IVec2(this.windowSize),
      whl.Window.Options.OPENGL | whl.Window.Options.SHOWN
    );
    this.gfx = whl.RenderContext(this.window);
    this.canvas = whl.Canvas(this.gfx, this.windowSize);

    this.spriteSheet = whl.SpriteSheet(
      whl.fs.openFile("atlas.json").read(),
      whl.Texture(whl.loadPNG(whl.fs.openFile("atlas.png").read()))
    );
    this.backgroundSprite = this.spriteSheet.sprite("background");
    this.logoSprite = this.spriteSheet.sprite("logo");

    this.whaleDoc = pyxel.Doc(whl.fs.openFile("whale.pyxel").read());
    this.bubbleSprite = whl.clone(this.whaleDoc.animation("bubble").frameAt(0).sprite);

    this.whalePos = whl.Vec2(600, 150);
    this.whaleScale = 8;
    this.whaleScaleRange = whl.Vec2(3, 15);
    this.whaleSpeed = -20;
    this.bubbleSpeed = -5;
    this.whaleAnim = "swim2";
    this.offscreenFactor = 2;
    this.offscreenDelay = Infinity;

    this.bubbleBurstDelayRange = whl.Vec2(2, 5);
    this.bubbleBurstCountRange = whl.Vec2(2, 4);
    this.bubbleDelayRange = whl.Vec2(0.15, 0.5);
    this.bubbles = [];
    this.scheduleNextBubbleBurst();
    this.timeToBubbleBurst = 1; // Force first burst early.
  },

  draw: function(time, dTime)
  {
    // Draw background.
    this.canvas.draw(this.backgroundSprite);

    // Draw whale (if small).
    if (this.whaleScale < midRange(this.whaleScaleRange))
      this.drawWhale(time, dTime);

    // Draw bubbles (if small).
    var bubbleCutoffY = -this.bubbleSprite.size.y * 0.5;
    this.bubbles = this.bubbles.filter(
      function(bubble) { return bubble.pos.y > bubbleCutoffY * bubble.scale; }
    );

    this.timeToBubbleBurst -= dTime;
    if (this.timeToBubbleBurst < 0)
    {
      this.timeToBubble -= dTime;
      if (this.bubbleBurstCount > 0 && this.timeToBubble <= 0)
      {
        this.bubbles.push({
          pos: this.whalePos.add(whl.Vec2(this.whaleSpeed < 0 ? -8 : 6, -7).mul(this.whaleScale)),
          scale: random(this.whaleScale * 0.5, this.whaleScale)
        });
        this.timeToBubble = randomRange(this.bubbleDelayRange);
        --this.bubbleBurstCount;
      }
      if (this.bubbleBurstCount <= 0)
        this.scheduleNextBubbleBurst();
    }

    this.drawBubbles(time, dTime, true);

    // Draw logo.
    var logoPos = this.windowSize.sub(this.logoSprite.size).div(2);
    logoPos.y += 25 * Math.sin(time);
    this.logoSprite.transform = whl.translate(logoPos);
    this.canvas.draw(this.logoSprite);

    // Draw whale and bubbles (if large).
    if (this.whaleScale >= midRange(this.whaleScaleRange))
      this.drawWhale(time, dTime);
    this.drawBubbles(time, dTime, false);

    this.window.redraw();

    Duktape.gc();
  },

  scheduleNextBubbleBurst: function()
  {
    this.timeToBubbleBurst = randomRange(this.bubbleBurstDelayRange);
    this.bubbleBurstCount = randomRange(this.bubbleBurstCountRange);
    this.timeToBubble = 0;
  },

  drawWhale: function(time, dTime)
  {
    var whale = whl.clone(this.whaleDoc.animation(this.whaleAnim).frameAt(time).sprite);
    this.offscreenDelay += dTime;
    if (this.offscreenDelay > 2)
      this.whalePos.x += this.whaleSpeed * this.whaleScale * dTime;
    var whaleHalfSize = whale.size.mul(0.5 * this.whaleScale);
    var preClampX = this.whalePos.x;
    this.whalePos.x = whl.clamp(this.whalePos.x, -whaleHalfSize.x, this.windowSize.x + whaleHalfSize.x);
    if (this.whalePos.x != preClampX)
    {
      this.whaleScale = randomRange(this.whaleScaleRange);
      whaleHalfSize = whale.size.mul(0.5 * this.whaleScale);
      this.whaleSpeed = -this.whaleSpeed;
      this.whalePos.x = this.whaleSpeed > 0 ? -whaleHalfSize.x : this.windowSize.x + whaleHalfSize.x;
      this.whalePos.y = random(whaleHalfSize.y, this.windowSize.y - whaleHalfSize.y);
      this.offscreenDelay = 0;
    }
    whale.transform =
      whl.translate(this.whalePos).mul(
      whl.scale(whl.Vec2(this.whaleScale * -Math.sign(this.whaleSpeed), this.whaleScale)).mul(
      whl.translate(whale.size.mul(-0.5))));

    this.canvas.draw(whale);
  },

  drawBubbles: function(time, dTime, drawSmall)
  {
    for (var idx in this.bubbles)
    {
      var bubble = this.bubbles[idx];
      var midScale = midRange(this.whaleScaleRange);
      if ((drawSmall && bubble.scale >= midScale) ||
          (!drawSmall && bubble.scale < midScale))
      {
        continue;
      }
      bubble.pos.y += this.bubbleSpeed * bubble.scale * dTime;
      var xOffset = whl.Vec2((2 * bubble.scale) * Math.sin(bubble.pos.y / 25), 0);
      this.bubbleSprite.transform = whl.translate(bubble.pos.add(xOffset)).mul(
                                    whl.scale(whl.Vec2(bubble.scale, bubble.scale)).mul(
                                    whl.translate(this.bubbleSprite.size.mul(-0.5))));
      this.canvas.draw(this.bubbleSprite);
    }
  }
};


function loop()
{
  mainLoop.run(game);
}