JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

<canvas id='can' style='width:100%;height:100%;'></canvas>

JavaScript

var left;
    var right;
    var faster = false;

    var step = 0;
    var obst = new Array();

    var locX = 430;
    var locY = 100;

    var running = true;

    var guy = new Image();
    var guyLeft = new Image();
    var guyRight = new Image();
    var crash = new Image();
    var rock = new Image();
    var tree = new Image();
    var bush = new Image();
    guy.src = "http://timelessname.com/canvas/skifree/guy_down.png";
    guyLeft.src = "http://timelessname.com/canvas/skifree/guy_left.png";
    guyRight.src = "http://timelessname.com/canvas/skifree/guy_right.png";
    crash.src = "http://timelessname.com/canvas/skifree/crash.png";
    rock.src = "http://timelessname.com/canvas/skifree/rock.png";
    tree.src = "http://timelessname.com/canvas/skifree/tree.png";

    $(window).keydown(function(e){
        if(e.keyCode == 37){
            left = true;
        }
        else if(e.keyCode == 39){
            right = true;
        }
        else if(e.keyCode == 70){
            faster = true;
        }
    });

    $(window).keyup(function(e){
        if(e.keyCode == 37){
            left = false;
        }
        else if(e.keyCode == 39){
            right = false;
        }
        else if(e.keyCode == 70){
            faster = false;
        }
        else if(e.keyCode == 32){
            if(!running){
                step = 0;
                obst = new Array();
                locX = 430;
                locY = 100;
                running = true;
                runSki();
            }
        }
    });

    //TODO: wrap edges (no wall)

    function runSki() {
        if(!running) return;
        var canvas = document.getElementById("can");
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(255,255,255)";
        ctx.fillRect (0, 0, canvas.width, canvas.height);


        if(left){
            if(locX > -320){
                locX--;
            }
        }
        if(right){
            if(locX < 640+320){
               ...