EffectHub.com: your best source for gaming

Recommendation

More Effects...

const TWO_PI = Math.PI * 2;

// canvas settings
var viewWidth = 768,
    viewHeight = 512,
    halfWidth = viewWidth * 0.5,
    halfHeight = viewHeight * 0.5,
    topCanvas = document.getElementById('top_canvas'),
    tctx,
    bottomCanvas = document.getElementById('bottom_canvas'),
    bctx,
    contexts = [];

var iceberg_img = document.getElementById('iceberg_img');

// time/animation settings
var timeStep = (1/60),
    time = 0;

var iceberg,
    bubbles = [],

Iceberg = function(w, h) {
    this.w = w;
    this.h = h;
};
Iceberg.prototype = {
    x:0,
    y:0,
    update:function() {
        this.x = halfWidth + Math.sin(time) * 5;
        this.y = halfHeight + Math.cos(time) * 20;
    },
    draw:function() {
        var r = Math.sin(time) * Math.PI * 0.01;

contexts.forEach(function(c) {
            c.save();
            c.rotate(r);
            c.drawImage(iceberg_img, this.x - this.w * 0.5, this.y - this.h * 0.5);
            c.restore();
        }, this);
    }
};

Bubble = function() {
    this.r = 2 + Math.random() * 2;
    this.swayDir = Math.random() > 0.5 ? -1 : 1;
    this.speed = 20 + Math.random() * 30;
};
Bubble.prototype = {
    x:0,
    y:0,
    sway:0,
    update:function() {
        this.sway = Math.sin(time) * 30 * this.swayDir;
        this.y -= this.speed * timeStep;
    },
    draw:function() {
        bctx.fillStyle = '#0083b9';
        bctx.beginPath();
        bctx.arc(this.x + this.sway, this.y, this.r, 0, TWO_PI);
        bctx.fill();
    }
};

function initCanvases() {
    topCanvas.width = bottomCanvas.width = viewWidth;
    topCanvas.height = bottomCanvas.height = halfHeight;

contexts[0] = tctx = topCanvas.getContext('2d');
    contexts[1] = bctx = bottomCanvas.getContext('2d');

var zoom = 1.3;

bctx.translate(halfWidth, halfHeight);
    bctx.scale(zoom, zoom);
    bctx.translate(-halfWidth, -halfHeight);
    bctx.translate(0, -halfHeight / zoom);
}

function initObjects() {
    iceberg = new Iceberg(400, 200);
    iceberg.x = halfWidth;
    iceberg.y = 0;

for (var i = 0; i < 100; i++) {
        var bubble = new Bubble();
        bubble.x = Math.random() * viewWidth;
        bubble.y = Math.random() * halfHeight + halfHeight;

bubbles.push(bubble);
    }
}

function update() {
    iceberg.update();

bubbles.forEach(function(b) {
        b.update();

if (b.y < halfHeight) {
            b.y = viewHeight;
        }
    });
}

function draw() {
    // clear
    tctx.fillStyle = '#0083b9';
    tctx.fillRect(0, 0, viewWidth, viewHeight);
    bctx.fillStyle = '#004e6f';
    bctx.fillRect(0, 0, viewWidth, viewHeight);

iceberg.draw();

bubbles.forEach(function(b) {
        b.draw();
    });
}

window.onload = function() {
    initCanvases();
    initObjects();
    requestAnimationFrame(loop);
};

function loop() {
    update();
    draw();
    time += timeStep;
    requestAnimationFrame(loop);
}

CSS

HTML

Recommendation

Join Effecthub.com