Skip to content

Instantly share code, notes, and snippets.

@farleyknight

farleyknight/index.html

Created March 28, 2015 23:46
Show Gist options
  • Save farleyknight/4cb42b23a9c0af3bdb27 to your computer and use it in GitHub Desktop.
Save farleyknight/4cb42b23a9c0af3bdb27 to your computer and use it in GitHub Desktop.
Download ZIP
Sprite Animation Demo // source http://jsbin.com/gufehe
Raw
index.html
<!-- saved from url=(0144)http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/downloads/sprite-animation-demo/sprite-animation-demo.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Sprite Animation Demo</title>
</head>
<body cz-shortcut-listen="true">
<canvas id="balloonAnimation" width="500" height="500" style="color: #2200ff; border: 1px solid black;"></canvas>
<script src="sprite-animation-demo.js"></script>
<script id="jsbin-javascript">
// Balloon Popping
(function() {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
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 balloon,
balloonImage,
canvas,
totalBalloonCount = 10;
function gameLoop() {
window.requestAnimationFrame(gameLoop);
canvas = document.getElementById("balloonAnimation");
balloon.update();
// Clear the canvas
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
balloon.render();
}
// setTimeout(function() {
// console.log("Popping the balloon");
// balloon.pop();
// }, 1000 * (5) * (1));
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.offsetX = 18;
that.offsetY = 36;
that.spriteWidth = 50;
that.spriteHeight = 50;
that.pop = function() {
// console.log("Setting state to 'popping'");
that.state = "popping";
};
that.isPopping = function() {
return that.state === "popping";
};
that.hasPopped = function() {
return that.state === "popped";
};
that.isUnpopped = function() {
return that.state === "unpopped";
};
that.reset = function() {
that.y = 450;
that.y_velocity = -10; // We're moving up 10px per frame
that.x = Math.round(Math.random() * 450);
that.value = Math.round(Math.random() * 100);
// that.state can only be: "unpopped", "popping" and "popped"
that.state = "unpopped";
};
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
if (that.hasPopped()) {
that.reset();
}
// If we hit the ceiling, reset
if (that.y < 0) {
that.pop();
}
// If we haven't popped yet, we can
// move ourselves up a bit.
if (that.isUnpopped()) {
frameIndex = 0;
that.y += that.y_velocity;
} else if (that.isPopping() && (frameIndex < numberOfFrames - 1)) {
// Go to the next frame
frameIndex += 1;
} else {
that.state = "popped";
frameIndex = 0;
}
}
};
that.render = function () {
if (!that.hasPopped()) {
// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
that.x,
that.y,
that.width / numberOfFrames,
that.height);
// that.context.strokeRect(that.x, that.y, that.spriteWidth, that.spriteHeight);
that.context.font = "24px Arial";
that.context.fillText(that.value, that.x + that.offsetX, that.y + that.offsetY);
}
};
that.reset();
return that;
}
// Get canvas
canvas = document.getElementById("balloonAnimation");
canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event)
{
var x = event.x;
var y = event.y;
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
console.log("x:" + x + " y:" + y);
if ((balloon.x < x) && (x < balloon.x + balloon.spriteWidth) && (balloon.y < y) && (y < balloon.y + balloon.spriteHeight)) {
balloon.pop();
}
}
// Create sprite sheet
balloonImage = new Image();
// Create sprite
balloon = sprite({
context: canvas.getContext("2d"),
width: 440,
height: 100,
image: balloonImage,
numberOfFrames: 7,
ticksPerFrame: 4
});
// Load sprite sheet
balloonImage.addEventListener("load", gameLoop);
balloonImage.src = "https://jsbin-user-assets.s3.amazonaws.com/farleyknight/balloon-popping-animation.png";
} ());
</script>
<script id="jsbin-source-html" type="text/html">
<\!-- saved from url=(0144)http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/downloads/sprite-animation-demo/sprite-animation-demo.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Sprite Animation Demo</title>
</head>
<body cz-shortcut-listen="true">
<canvas id="balloonAnimation" width="500" height="500" style="color: #2200ff; border: 1px solid black;"></canvas>
<script src="sprite-animation-demo.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Balloon Popping
(function() {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
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 balloon,
balloonImage,
canvas,
totalBalloonCount = 10;
function gameLoop() {
window.requestAnimationFrame(gameLoop);
canvas = document.getElementById("balloonAnimation");
balloon.update();
// Clear the canvas
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
balloon.render();
}
// setTimeout(function() {
// console.log("Popping the balloon");
// balloon.pop();
// }, 1000 * (5) * (1));
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.offsetX = 18;
that.offsetY = 36;
that.spriteWidth = 50;
that.spriteHeight = 50;
that.pop = function() {
// console.log("Setting state to 'popping'");
that.state = "popping";
};
that.isPopping = function() {
return that.state === "popping";
};
that.hasPopped = function() {
return that.state === "popped";
};
that.isUnpopped = function() {
return that.state === "unpopped";
};
that.reset = function() {
that.y = 450;
that.y_velocity = -10; // We're moving up 10px per frame
that.x = Math.round(Math.random() * 450);
that.value = Math.round(Math.random() * 100);
// that.state can only be: "unpopped", "popping" and "popped"
that.state = "unpopped";
};
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
if (that.hasPopped()) {
that.reset();
}
// If we hit the ceiling, reset
if (that.y < 0) {
that.pop();
}
// If we haven't popped yet, we can
// move ourselves up a bit.
if (that.isUnpopped()) {
frameIndex = 0;
that.y += that.y_velocity;
} else if (that.isPopping() && (frameIndex < numberOfFrames - 1)) {
// Go to the next frame
frameIndex += 1;
} else {
that.state = "popped";
frameIndex = 0;
}
}
};
that.render = function () {
if (!that.hasPopped()) {
// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
that.x,
that.y,
that.width / numberOfFrames,
that.height);
// that.context.strokeRect(that.x, that.y, that.spriteWidth, that.spriteHeight);
that.context.font = "24px Arial";
that.context.fillText(that.value, that.x + that.offsetX, that.y + that.offsetY);
}
};
that.reset();
return that;
}
// Get canvas
canvas = document.getElementById("balloonAnimation");
canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event)
{
var x = event.x;
var y = event.y;
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
console.log("x:" + x + " y:" + y);
if ((balloon.x < x) && (x < balloon.x + balloon.spriteWidth) && (balloon.y < y) && (y < balloon.y + balloon.spriteHeight)) {
balloon.pop();
}
}
// Create sprite sheet
balloonImage = new Image();
// Create sprite
balloon = sprite({
context: canvas.getContext("2d"),
width: 440,
height: 100,
image: balloonImage,
numberOfFrames: 7,
ticksPerFrame: 4
});
// Load sprite sheet
balloonImage.addEventListener("load", gameLoop);
balloonImage.src = "https://jsbin-user-assets.s3.amazonaws.com/farleyknight/balloon-popping-animation.png";
} ());
</script></body>
</html>
Raw
jsbin.gufehe.js
// Balloon Popping
(function() {
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
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 balloon,
balloonImage,
canvas,
totalBalloonCount = 10;
function gameLoop() {
window.requestAnimationFrame(gameLoop);
canvas = document.getElementById("balloonAnimation");
balloon.update();
// Clear the canvas
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
balloon.render();
}
// setTimeout(function() {
// console.log("Popping the balloon");
// balloon.pop();
// }, 1000 * (5) * (1));
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.offsetX = 18;
that.offsetY = 36;
that.spriteWidth = 50;
that.spriteHeight = 50;
that.pop = function() {
// console.log("Setting state to 'popping'");
that.state = "popping";
};
that.isPopping = function() {
return that.state === "popping";
};
that.hasPopped = function() {
return that.state === "popped";
};
that.isUnpopped = function() {
return that.state === "unpopped";
};
that.reset = function() {
that.y = 450;
that.y_velocity = -10; // We're moving up 10px per frame
that.x = Math.round(Math.random() * 450);
that.value = Math.round(Math.random() * 100);
// that.state can only be: "unpopped", "popping" and "popped"
that.state = "unpopped";
};
that.update = function () {
tickCount += 1;
if (tickCount > ticksPerFrame) {
tickCount = 0;
if (that.hasPopped()) {
that.reset();
}
// If we hit the ceiling, reset
if (that.y < 0) {
that.pop();
}
// If we haven't popped yet, we can
// move ourselves up a bit.
if (that.isUnpopped()) {
frameIndex = 0;
that.y += that.y_velocity;
} else if (that.isPopping() && (frameIndex < numberOfFrames - 1)) {
// Go to the next frame
frameIndex += 1;
} else {
that.state = "popped";
frameIndex = 0;
}
}
};
that.render = function () {
if (!that.hasPopped()) {
// Draw the animation
that.context.drawImage(
that.image,
frameIndex * that.width / numberOfFrames,
0,
that.width / numberOfFrames,
that.height,
that.x,
that.y,
that.width / numberOfFrames,
that.height);
// that.context.strokeRect(that.x, that.y, that.spriteWidth, that.spriteHeight);
that.context.font = "24px Arial";
that.context.fillText(that.value, that.x + that.offsetX, that.y + that.offsetY);
}
};
that.reset();
return that;
}
// Get canvas
canvas = document.getElementById("balloonAnimation");
canvas.addEventListener("mousedown", getPosition, false);
function getPosition(event)
{
var x = event.x;
var y = event.y;
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
console.log("x:" + x + " y:" + y);
if ((balloon.x < x) && (x < balloon.x + balloon.spriteWidth) && (balloon.y < y) && (y < balloon.y + balloon.spriteHeight)) {
balloon.pop();
}
}
// Create sprite sheet
balloonImage = new Image();
// Create sprite
balloon = sprite({
context: canvas.getContext("2d"),
width: 440,
height: 100,
image: balloonImage,
numberOfFrames: 7,
ticksPerFrame: 4
});
// Load sprite sheet
balloonImage.addEventListener("load", gameLoop);
balloonImage.src = "https://jsbin-user-assets.s3.amazonaws.com/farleyknight/balloon-popping-animation.png";
} ());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment