aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/face.js125
1 files changed, 57 insertions, 68 deletions
diff --git a/public/face.js b/public/face.js
index 0caff8c..c632f9b 100644
--- a/public/face.js
+++ b/public/face.js
@@ -21,15 +21,6 @@ jQuery(function($) {
}
/**
- * Get the current time as milliseconds since the epoch.
- *
- * Used to find the current frame in tick() below.
- */
- function now() {
- return (new Date()).getTime();
- }
-
- /**
* Convert sprite sheet position to rectangle.
*
* Used to generate FRAMES below.
@@ -65,122 +56,126 @@ jQuery(function($) {
*/
var FRAMES = [{
// hurt0-c
- time: { min: 0, max: 250 },
- rate: { min: -5, max: 5 },
- pos: { x: 1, y: 0 },
+ t: [0, 250],
+ p: [-5, 5],
+ pos: { x: 1, y: 0 },
}, {
// hurt0-r
- time: { min: 250, max: 500 },
- rate: { min: -5, max: 5 },
- pos: { x: 2, y: 0 },
+ t: [250, 500],
+ p: [-5, 5],
+ pos: { x: 2, y: 0 },
}, {
// hurt0-c
- time: { min: 500, max: 750 },
- rate: { min: -5, max: 5 },
+ t: [500, 750],
+ p: [-5, 5],
pos: { x: 1, y: 0 },
}, {
// hurt0-l
- time: { min: 750, max: 1000 },
- rate: { min: -5, max: 5 },
+ t: [750, 1000],
+ p: [-5, 5],
pos: { x: 0, y: 0 },
}, {
// hurt1-c
- time: { min: 0, max: 250 },
- rate: { min: -15, max: -5 },
+ t: [0, 250],
+ p: [-15, -5],
pos: { x: 1, y: 1 },
}, {
// hurt1-r
- time: { min: 250, max: 500 },
- rate: { min: -15, max: -5 },
+ t: [250, 500],
+ p: [-15, -5},
pos: { x: 2, y: 1 },
}, {
// hurt1-c
- time: { min: 500, max: 750 },
- rate: { min: -15, max: -5 },
+ t: [500, 750],
+ p: [-15, -5],
pos: { x: 1, y: 1 },
}, {
// hurt1-l
- time: { min: 750, max: 1000 },
- rate: { min: -15, max: -5 },
+ t: [750, 1000],
+ p: [-15, -5],
pos: { x: 0, y: 1 },
}, {
// hurt2-c
- time: { min: 0, max: 250 },
- rate: { min: -30, max: -15 },
+ t: [0, 250],
+ p: [-30, -15],
pos: { x: 1, y: 2 },
}, {
// hurt2-r
- time: { min: 250, max: 500 },
- rate: { min: -30, max: -15 },
+ t: [250, 500],
+ p: [-30, -15],
pos: { x: 2, y: 2 },
}, {
// hurt2-c
- time: { min: 500, max: 750 },
- rate: { min: -30, max: -15 },
+ t: [500, 750],
+ p: [-30, -15],
pos: { x: 1, y: 2 },
}, {
// hurt2-l
- time: { min: 750, max: 1000 },
- rate: { min: -30, max: -15 },
+ t: [750, 1000],
+ p: [-30, -15],
pos: { x: 0, y: 2 },
}, {
// hurt3-c
- time: { min: 0, max: 250 },
- rate: { min: -50, max: -30 },
+ t: [0, 250],
+ p: [-50, -30],
rect: { x: 14 + 26 * 1, y: 14 + 31 * 3, w: 24, h: 29 },
}, {
// hurt3-r
- time: { min: 250, max: 500 },
- rate: { min: -50, max: -30 },
+ t: [250, 500],
+ p: [-50, -30],
rect: { x: 14 + 26 * 2, y: 14 + 31 * 3, w: 24, h: 29 },
}, {
// hurt3-c
- time: { min: 500, max: 750 },
- rate: { min: -50, max: -30 },
+ t: [500, 750],
+ p: [-50, -30],
rect: { x: 14 + 26 * 1, y: 14 + 31 * 3, w: 24, h: 29 },
}, {
// hurt3-l
- time: { min: 750, max: 1000 },
- rate: { min: -50, max: -30 },
+ t: [750, 1000],
+ p: [-50, -30 ],
rect: { x: 14 + 26 * 0, y: 14 + 31 * 3, w: 24, h: 29 },
}, {
// hurt4-c
- time: { min: 0, max: 250 },
- rate: { min: -75, max: -50 },
+ t: [0, 250],
+ p: [-75, max],
rect: { x: 14 + 26 * 1, y: 16 + 31 * 4, w: 24, h: 29 },
}, {
// hurt4-r
- time: { min: 250, max: 500 },
- rate: { min: -75, max: -50 },
+ t: [250, 500],
+ p: [-75, -50],
rect: { x: 14 + 26 * 2, y: 16 + 31 * 4, w: 24, h: 29 },
}, {
// hurt4-c
- time: { min: 500, max: 750 },
- rate: { min: -75, max: -50 },
+ t: [500, 750],
+ p: [-75, -50],
rect: { x: 14 + 26 * 1, y: 16 + 31 * 4, w: 24, h: 29 },
}, {
// hurt4-l
- time: { min: 750, max: 1000 },
- rate: { min: -75, max: -50 },
+ t: [750, 1000],
+ p: [-75, -50],
rect: { x: 14 + 26 * 0, y: 16 + 31 * 4, w: 24, h: 29 },
}, {
// dead
- time: { min: 0, max: 1001 },
- rate: { min: -10000, max: -75 },
+ t: [0, 1001],
+ p: [-10000, -75
rect: { x: 14, y: 335, w: 24, h: 31 },
}, {
// invincible
- time: { min: 0, max: 1001 },
- rate: { min: 5, max: 10000 },
+ t: [0, 1001],
+ p: [5, 10000],
rect: { x: 40, y: 335, w: 24, h: 29 },
}].map(function(row) {
return {
- time: row.time,
- rate: row.rate,
+ t: row.t,
+ p: row.p,
css: to_css(row.rect ? row.rect : to_rect(row.pos)),
};
});
+ function in_range(v, row) {
+ return (v >= row[0]) && (v < row[1]);
+ }
+
/**
* get current frame based on time and rate.
*/
@@ -189,10 +184,7 @@ jQuery(function($) {
var tm = time % 1000;
return FRAMES.find(function(row) {
- return (
- (tm >= row.time.min) && (tm < row.time.max) &&
- (rate >= row.rate.min) && (rate < row.rate.max)
- );
+ return in_range(tm, row.t) && in_range(rate, row.p);
}) || FRAMES[0];
}
@@ -200,13 +192,10 @@ jQuery(function($) {
* update animation.
*/
function tick() {
- var time = now(),
- rate = +$('#rate').val(),
- frame = get_frame(time, rate);
- // console.log({time: time % 1000, rect: rect});
-
- // update #face
- $('#face').css(frame.css);
+ $('#face').css(get_frame(
+ (new Date()).getTime(),
+ +$('#rate').val()
+ ));
}
setInterval(tick, 250);