JSFiddle - React, Tailwind, and code Playground

by Kevin Lu

HTML

<h1>Floppy Bird</h1>

<canvas id="canvas"></canvas>

CSS

canvas {
    border-radius: 5px;
    border: 2px solid;
}
</style> <script type="text/javascript"> window.addEventListener('load', function() {
    var script=document.body.getElementsByTagName('script')[0].text;
    var canvas=document.getElementById('canvas');
    new Processing(canvas, script);
}
, false);
 </script> <style>

JavaScript

size(500, 500);


//var drawBlock =
var birdImage = loadImage(
    'https://3.bp.blogspot.com/-iZkRN4Y0yjY/UvvanzNqvFI/AAAAAAAAAFk/VnczMeAOdrg/s1600/tumblr_n0gdfqLjvb1snavd7o1_250.png');

var bird = {
    image: birdImage,
    top: 170,
    height: 35,
    left: 130,
    width: 40,
    velocity: 0,
    isAlive: true
};

var gravity = 0.25;
var pipeGap = 150;
var pipeWidth = 50;
var pipeDelay = 200;

var pipeTimer = 0;
var score = 0;

var pipes = [];

var makePipe = function () {
    var center = random(pipeGap, 500 - pipeGap);
    var pipe = {};
    pipe.top = center - (pipeGap / 2);
    pipe.bottom = center + (pipeGap / 2);
    pipe.x = 500;
    pipe.counted = false;
    return pipe;
};

var advancePipes = function () {
    pipes.forEach(function (pipe) {
        pipe.x--;
    });
    if (pipeTimer <= pipeDelay) {
        pipeTimer++;
    } else {
        pipeTimer = 0;
        pipes.push(makePipe());
    }
};

var removeOffscreenPipes = function () {
    pipes = pipes.filter(function (pipe) {
        return pipe.x > -50;
    });
};

var updateScore = function () {
    pipes.forEach(function (pipe) {
        if (pipe.x < (bird.left - 50) && !pipe.counted) {
            score++;
            pipe.counted = true;
        }
    });
}

var drawPipes = function () {
    pipes.forEach(drawPipe);
};

var drawPipe = function (pipe) {
    fill(50, 200, 50);
    // top pipe
    rect(pipe.x, 0, 50, pipe.top);
    rect(pipe.x, pipe.bottom, 50, 500);

};

var drawBird = function () {
    fill(200, 50, 20, 60);
    //rect(bird.left, bird.top, bird.width, bird.height);
    image(bird.image, bird.left - 10, bird.top - 19, bird.width + 20, bird.height + 40);
};

var drawScore = function () {
    fill(0, 0, 0);
    textSize(50);
    text(score, 140, 50);
};

var fall = function () {
    bird.velocity += gravity;
    bird.top += bird.velocity;
};

var flap = function () {
    if (!bird.isAlive) {
        return;
    }
    bird.velocity = -5;
};

var didCollideWithPipes = function...