JSFiddle - React, Tailwind, and code Playground

by Umar

HTML

<base href="http://joyjs.org/" />
<script type="text/javascript">
/* 
 * joy.js v0.1.0 
 * http://joyjs.org
 * 
 * @copyright 2012-2013 Endel Dreyer 
 * @license MIT
 * @build 2/3/2013
 */

(function(global) {
  /**
   * @module Joy
   * @static
   */
  var Joy = global.Joy || {
    Init: {},
    Render: {},
    Input: {},
    Context: {},

    Events: {
      /**
       * Triggered when DisplayObject is initialized.
       * @attribute Events.INIT
       * @type {String}
       * @static
       * @readonly
       */
      INIT: 'init',

      /**
       * Triggered when scene is loaded.
       * @attribute Events.SCENE_ACTIVE
       * @type {String}
       * @static
       * @readonly
       */
      SCENE_ACTIVE: 'sceneActive',

      /**
       * Triggered when DisplayObject is added into DisplayObjectContainer.
       * @attribute Events.ADDED
       * @type {String}
       * @static
       * @readonly
       */
      ADDED: 'added',

      /**
       * Triggered when DisplayObject is removed from DisplayObjectContainer.
       * @attribute Events.REMOVED
       * @type {String}
       * @static
       * @readonly
       */
      REMOVED: 'removed',

      /**
       * Triggered at every frame.
       * @attribute Events.UPDATE
       * @type {String}
       * @static
       * @readonly
       */
      UPDATE: 'update',

      /**
       * Triggered on collision update.
       * @attribute Events.COLLISION
       * @type {String}
       * @static
       * @readonly
       */
      COLLISION: 'collision',

      /**
       * Triggered at the moment collision starts.
       * @attribute Events.COLLISION_START
       * @type {String}
       * @static
       * @readonly
       */
      COLLISION_ENTER: 'collisionEnter',

      /**
       * Triggered at the moment collision ends.
       * @attribute Events.COLLISION_EXIT
       * @type {String}
       * @static
       * @readonly
       */
      COLLISION_EXIT: 'collisionExit'
    },

    /**
     * @attribute...

JavaScript

var engine = new Joy.Engine({ debug: true, width: document.width - 5, height: document.height - 5 });
engine.createScene(function(scene) {
    
    // Create custom mouse behaviour, to be attached on any DisplayObject
    var MyMouseBehaviour = Joy.Behaviour.extend({
        INIT: function () {
            // Add button behaviour, to handle MOUSE_OVER and MOUSE_OUT events
            this.behave(Joy.Behaviour.Button);
        },
        
        // When mouse enters
        MOUSE_OVER: function () {
            new Joy.Tween(this.position).to({
                y: this.position.y - 5
            }).easing(Joy.TweenManager.Easing.Sinusoidal.InOut).start();
        },
        
        // When mouse leave
        MOUSE_OUT: function () {
            new Joy.Tween(this.position).to({
                y: this.position.y + 5
            }).easing(Joy.TweenManager.Easing.Sinusoidal.InOut).start();
        },
        
        CLICK: function(e) {
            new Joy.Tween(this.position).to({
                x: Math.random() * (engine.width - this.width),
                y: Math.random() * (engine.height - this.height)
            }).easing(Joy.TweenManager.Easing.Sinusoidal.InOut).start();
        }
    });
    
    // Setup logo
    var logo = new Joy.Sprite({
        x: engine.width / 2,
        y: engine.height / 2,
        smooth: true,
        src: "assets/examples/joyjs.png"
    }).bind('load', function() {
        // Change pivot to center
        this.pivot.x = (this.width / 2);
        this.pivot.y = (this.height / 2);
        // Add clickable behaviour
    }).behave(MyMouseBehaviour);
    
    scene.addChild(logo);
});