JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<div id="game">
    <canvas width="500" height="500"></canvas> 
</div>

CSS

#game {
    width: 500px;
    height: 500px; 
    border: 2px solid #ccc;   
}

#game canvas {
    width: 100%;
    height: 100%;  
}

JavaScript

(function() {
    // Utility functions
    var getRandomNumber = function(min, max) {
        return Math.floor(Math.random() * max + min);
    }


    // DOM 
    var canvas = document.getElementById('game').getElementsByTagName('canvas')[0],
        context = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height;

    // Game
    var terrain = [];

    // Generate terrain
    for (var i = 0; i < 3; i++) {

        for (var x = 0; x < width; x += parseInt(100 / i)) {

            // Store terain state
            var lower = 100 / i + 1,
                upper = -100 / i + 1

                var y = (height / 2) + getRandomNumber(lower, upper);

            terrain[x] = y;


        }
    }
    for (var i = 0; i < terrain.length; i++) {


        context.moveTo(i, terrain[i]);
        
        
        
        var next = {
            x: i + 1,
            y: terrain[i+1],
        } 
            
            console.log(next);
        
        context.lineTo(next.x, next.y);

    }

    context.strokeStyle = "green";
    context.stroke();

})();