JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<canvas id="canvas" width="400" height="300"></canvas>

JavaScript

function Game(id){
    this.canvas = document.getElementById(id);
    this.ctx = canvas.getContext('2d');
    this.height = canvas.height;
    this.width = canvas.width;
    this.noise = new ImprovedPerlin(1234);
    this.currentX = 0;
}

Game.prototype.Init = function(){
    this.ctx.fillStyle = '#000034';
    this.ctx.fillRect(0, 0, this.width, this.height);
};

Game.prototype.Update = function(){
    requestAnimationFrame(this.Update.bind(this));
    
    this.ctx.drawImage(this.canvas, -1, 0);
    var sinVal = Math.sin(this.currentX / 64) * 32;
    var z = 2/16;
    var x = this.currentX++;
    var wDiv = 1/256;
    
    this.ctx.fillStyle = '#000034';
    this.ctx.fillRect(this.width - 2, 0, 1, this.height);
    
    var y = this.height / 128;
    var h = this.height / 4 + sinVal;
        h += 48 * this.noise.Noise(4 * x * wDiv, y, z);
        h += 16 * this.noise.Noise(8 * x * wDiv, y, z);
        h += 8 * this.noise.Noise(16 * x * wDiv, y, z);
        h += 4 * this.noise.Noise(32 * x * wDiv, y, z);
        h += 2 * this.noise.Noise(64 * x * wDiv, y, z);
    
    var grad = this.ctx.createLinearGradient(0,0,1,h);
    grad.addColorStop(0,'#280000');
    grad.addColorStop(1,'#BBA400');
    
    this.ctx.fillStyle = grad;
    this.ctx.fillRect(this.width - 2, 0, 1, h);
    
    y *= 3;
    h = this.height * 3 / 4 + sinVal;
        h += 48 * this.noise.Noise(4 * x * wDiv, y, z);
        h += 16 * this.noise.Noise(8 * x * wDiv, y, z);
        h += 8 * this.noise.Noise(16 * x * wDiv, y, z);
        h += 4 * this.noise.Noise(32 * x * wDiv, y, z);
        h += 2 * this.noise.Noise(64 * x * wDiv, y, z);
    
    grad = this.ctx.createLinearGradient(0,h,1,this.height);
    grad.addColorStop(0,'#BBA400');
    grad.addColorStop(1,'#280000');
    
    this.ctx.fillStyle = grad;
    this.ctx.fillRect(this.width - 2, h, 1, h);
};

var game = new Game('canvas');
game.Init();
game.Update();




// ===================================================================
function...