eitan-ninja

<!DOCTYPE html>
<html>
<head>
    <title>ninja jump</title>
</head>
<body>

    <script>
        // CONSTANTS
        var CANVAS_WIDTH = 800;
        var CANVAS_HEIGHT = 600;
        var NANONAUT_WIDTH = 181;
        var NANONAUT_HEIGHT = 229;
        var GROUND_Y = 540;

        // SETUP
        var canvas = document.createElement('canvas');
        var c = canvas.getContext('2d');
        canvas.width = CANVAS_WIDTH;
        canvas.height = CANVAS_HEIGHT;
        document.body.appendChild(canvas);

        var nanonautImage = new Image();
        nanonautImage.src = 'game-assets/Nanonaut.png';
        var backgroundImage = new Image();
        backgroundImage.src = 'game-assets/background.png'


        var nanonautX = 50;
        var nanonautY = 40;

        window.addEventListener('load', start);

        function start() {
            window.requestAnimationFrame(mainLoop);
        }


        // MAIN LOOP
        function mainLoop() {
            update();
            draw();
            window.requestAnimationFrame(mainLoop);
        }


        // PLAYER INPUT

        // UPDATING
        function update() {
        }


        // DRAWING
        function draw() {

            c.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT) ;

            // draw sky
            c.fillStyle = 'LightSkyBlue';
            c.fillRect(0, 0, CANVAS_WIDTH, GROUND_Y - 40);
            c.drawImage(backgroundImage, 0, -210);

            //DRAW GROUND
            c.fillStyle = 'ForestGreen';
            c.fillRect(0, GROUND_Y - 40, CANVAS_WIDTH, CANVAS_HEIGHT - GROUND_Y + 40);


            c.drawImage(nanonautImage, nanonautX, nanonautY);
        }


    </script>
</body>
</html>