JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
<div id="container"></div>
<a href="http://stackoverflow.com/questions/21798914/very-poor-performance-with-kineticjs-on-android">stackoverflow link</a>

JavaScript

var Shared = {};
var Config = {};

var grid = {
    width: 480,
    height: 480,
    rows: 10,
    cols: 10
}

var stage = new Kinetic.Stage({
    container: 'container',
    width: grid.width + 20,
    height: grid.height + 20,
    x: 20,
    y: 20
});
Shared.GameStage = stage;

var layer = new Kinetic.Layer({
    name: "game_grid"
});
stage.add(layer);
Shared.GameGrid = layer;

var tweenLayer = new Kinetic.Layer({
    name: "tweenLayer"
});
stage.add(tweenLayer);
Shared.tweenLayer = tweenLayer;


// load the pumpking.png image. When loaded do init()
var PumpkinImage = new Image(grid.width / grid.rows, grid.height / grid.cols);
PumpkinImage.onload = function () {
    init();
}
PumpkinImage.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/pumpkin.png";

// create the game board
function init() {
    for (var i = 0; i < grid.rows; i++) {
        for (var j = 0; j < grid.cols; j++) {
            var params = {
                stage: 3,
                width: grid.width / grid.rows,
                height: grid.height / grid.cols,
                x: i * (grid.width / grid.rows),
                y: j * (grid.height / grid.cols)
            };
            Shared.GameGrid.add(Pumpkin(params));
        }
    }
    Shared.GameGrid.draw();
}

// create a kinetic Image that scales on touch
function Pumpkin(params) {

    // create a kinetic image
    var kineticImage = new Kinetic.Image({
        x: params.x,
        y: params.y,
        width: params.width,
        height: params.height,
        image: PumpkinImage,
        offset: {
            x: params.width / 2,
            y: params.height / 2
        },
    });

    // tween on touchstart
    kineticImage.on("mousedown touchstart", function (event) {
        event.cancelBubble = true;
        tweenPlayer(this);
    });

    // flag to determine if this node should be moved to tweenLayer
    kineticImage.hasBeenTweened = false;

    return kineticImage;
}

// self-destructing tween
function...