JSFiddle - React, Tailwind, and code Playground

by Kevin Lu

HTML

<h1>My Game!</h1>

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

CSS

canvas {
    http://jsfiddle.net/MrDeucalion/df46599y/52/#username 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 hero = loadImage( 'http://mmii.info/icons/puffteam/ssb_ikeSprite.gif');

var timer = 0;
var gravity = 0.25;
var yCloud = 400; //var for cloud
var levi = {
    xPos: 100,
    yPos: 300,
    width: 30,
    height: 80,
    velocity: 0,
    isAlive: true
};

var drawLevi = function () {
    image(hero,levi.xPos,levi.yPos);
};

var jump = function () {
    console.log("Jump function is called!!");
    levi.velocity = -8;
};

var fall = function () {
    levi.velocity += gravity;
    levi.yPos += levi.velocity;
    if (levi.yPos > 300) {
        levi.yPos = 300;
    }
};

var isAboveGround = function () {
    return levi.top + levi.height < 500;
};


var drawTimer = function () {
    fill(255, 255, 255);
    textSize(50);
    text(timer, 230, 50);
};


mouseClicked = function () {
    console.log("mouse is getting clicked");
    if (levi.yPos === 300) {
        console.log("jump is happening");
        jump();
    }
};

draw = function () {
    console.log("Draw getting called!");
    background(0, 255, 250);
    fill(155, 0, 0);
    ellipse(mouseX, mouseY, 50, 50);
    fill(50, 50, 50); //floor color
    rect(0, 380, 500, 300); // floor
    drawLevi();
    fall();
    drawTimer();
    // no lines
    noStroke();
    // color of clouds
    fill(255, 255, 255);
    // middle circle of cloud
    ellipse(yCloud, 80, 126, 97);
    //right circle of cloud
    ellipse(yCloud + 62, 80, 70, 60);
    //left circle of cloud
    ellipse(yCloud - 62, 80, 70, 60);

    //repeating cloud function
    if (yCloud < -240) {

        yCloud = 450;

    }
    yCloud -= 3;


};