samedi 25 novembre 2017

Coin




<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Sprite Animation Demo</title>
    <style></style></head>
    <body>
        <canvas id="coinAnimation" width="100" height="100"></canvas>
        <script>

(function() {

    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

(function () {

var coin,
coinImage,
canvas;

function gameLoop () {

  window.requestAnimationFrame(gameLoop);

  coin.update();
  coin.render();
}

function sprite (options) {

var that = {},
frameIndex = 0,
tickCount = 0,
ticksPerFrame = options.ticksPerFrame || 0,
numberOfFrames = options.numberOfFrames || 1;

that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;

that.update = function () {

            tickCount += 1;

            if (tickCount > ticksPerFrame) {

tickCount = 0;

                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };

that.render = function () {

  // Clear the canvas
  that.context.clearRect(0, 0, that.width, that.height);
 
  // Draw the animation
  that.context.drawImage(
    that.image,
    frameIndex * that.width / numberOfFrames,
    0,
    that.width / numberOfFrames,
    that.height,
    0,
    0,
    that.width / numberOfFrames,
    that.height);
};

return that;
}

// Get canvas
canvas = document.getElementById("coinAnimation");
canvas.width = 100;
canvas.height = 100;

// Create sprite sheet
coinImage = new Image();

// Create sprite
coin = sprite({
context: canvas.getContext("2d"),
width: 1000,
height: 100,
image: coinImage,
numberOfFrames: 10,
ticksPerFrame: 4
});

// Load sprite sheet
coinImage.addEventListener("load", gameLoop);
coinImage.src = "http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/images/coin-sprite-animation.png";

} ());
</script>
   
</body></html>
By -