JSFiddle - React, Tailwind, and code Playground
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, explodeSize, pos, speed, img, explodeImage, spriteCount, explosionSpriteCount){
this.size = size;
this.explodeSize = explodeSize;
this.img = img;
this.explodeImg = explodeImage;
this.spriteCount = spriteCount;
this.pos = pos;
this.el = null;
this.timeout = 0;
this.speed = speed;
this.spriteCounter = 0;
this.explosionSpriteCounter = 0;
this.explosionSpriteCount = explosionSpriteCount;
this.stanga = true;
this.init();
}
Player.prototype = {
init : function(){
var self = this;
var img = new Image();
img.onload = function(){self.pace = img.width / self.spriteCount}
img.src = this.img;
var img2 = new Image();
img2.onload = function(){self.explosionPace = img2.width / self.explosionSpriteCount}
img2.src = this.explodeImg;
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(){
var instance = this;
$(document)
.on('keydown', function(e){
// if it is a directional key, start moving the player
...