JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<script src="http://www.spritely.net/releases/0.6.1/jquery.spritely-0.6.1.js"></script>

JavaScript

;(function(global, $, undefined){
	// Player Class
    var Player = function(size, pos, speed, img, spriteCount){
        this.size = size;
  		this.img = img;
        this.spriteCount = spriteCount;
        this.pos = pos;
        this.el = null;
        this.timeout = 0;
        this.speed = speed;
        this.init();
    } 
    
    Player.prototype = {
        init : function(){
        	this.el = $('<div />')
                        .css({
                            width : this.size.width,
                            height : this.size.height,
                            backgroundImage : 'url(' + this.img + ')',
                            position : 'absolute',
                            top : 0,
                            left : 0,
                            backgroundSize : '100% 100%'
                        })
            			.appendTo('body');
            
            this.bindEventHandlers();
            this.updatePosition();
        },
        
        // here is the place to bind all the event handlers (such as click, keydown..)
        bindEventHandlers : function(){
        	$(document)
                .on('keydown', function(e){
                	// if it is a directional key, start moving the player
                })
                .on('keyup', function(e){
                	// if it is a directional key, stop moving the player
                });
            	
        },
        
        // update the dom element's position
        updatePosition : function(){
            this.el.css({
                left : this.pos.x,
                top : this.pos.y
            });
        	},

        moveTo : function(x, y){
            this.pos.x = x;
            this.pos.y = y;
            this.updatePosition();
        },

        moveBy : function(x, y){
            this.pos.x += x;
            this.pos.y += y;
            this.updatePosition();
        }
    };
    
    
    global.player1 = new Player({width:95, height:100}, {x : 100, y :...