From b6df5d6739975848fc10893700d78cdd616a0c96 Mon Sep 17 00:00:00 2001 From: Paul Duncan Date: Fri, 6 Mar 2020 18:39:37 -0500 Subject: initial commit --- public/face.js | 182 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 public/face.js (limited to 'public/face.js') diff --git a/public/face.js b/public/face.js new file mode 100644 index 0000000..2e8d722 --- /dev/null +++ b/public/face.js @@ -0,0 +1,182 @@ +jQuery(function($) { + "use strict"; + + /** + * get the current time, in milliseconds since the epoch. + */ + function now() { + return (new Date()).getTime(); + } + + function to_rect(pos) { + return { + x: 14 + 26 * pos.x, + y: 13 + 31 * pos.y, + w: 24, + h: 29, + }; + } + + function to_css(rect) { + return { + width: rect.w + 'px', + height: rect.h + 'px', + 'background-position': [rect.x, rect.y].map(function(v) { + return (-v) + 'px'; + }).join(' '), + }; + } + + var FRAMES = [{ + // hurt0-c + time: { min: 0, max: 250 }, + rate: { min: -0.5, max: 1 }, + pos: { x: 1, y: 0 }, + }, { + // hurt0-r + time: { min: 250, max: 500 }, + rate: { min: -0.5, max: 1 }, + pos: { x: 2, y: 0 }, + }, { + // hurt0-c + time: { min: 500, max: 750 }, + rate: { min: -0.5, max: 1 }, + pos: { x: 1, y: 0 }, + }, { + // hurt0-l + time: { min: 750, max: 1000 }, + rate: { min: -0.5, max: 1 }, + pos: { x: 0, y: 0 }, + }, { + // hurt1-c + time: { min: 0, max: 250 }, + rate: { min: -2, max: -0.5 }, + pos: { x: 1, y: 1 }, + }, { + // hurt1-r + time: { min: 250, max: 500 }, + rate: { min: -2, max: -0.5 }, + pos: { x: 2, y: 1 }, + }, { + // hurt1-c + time: { min: 500, max: 750 }, + rate: { min: -2, max: -0.5 }, + pos: { x: 1, y: 1 }, + }, { + // hurt1-l + time: { min: 750, max: 1000 }, + rate: { min: -2, max: -0.5 }, + pos: { x: 0, y: 1 }, + }, { + // hurt2-c + time: { min: 0, max: 250 }, + rate: { min: -3, max: -2 }, + pos: { x: 1, y: 2 }, + }, { + // hurt2-r + time: { min: 250, max: 500 }, + rate: { min: -3, max: -2 }, + pos: { x: 2, y: 2 }, + }, { + // hurt2-c + time: { min: 500, max: 750 }, + rate: { min: -3, max: -2 }, + pos: { x: 1, y: 2 }, + }, { + // hurt2-l + time: { min: 750, max: 1000 }, + rate: { min: -3, max: -2 }, + pos: { x: 0, y: 2 }, + }, { + // hurt3-c + time: { min: 0, max: 250 }, + rate: { min: -4, max: -3 }, + rect: { x: 14 + 26 * 1, y: 14 + 31 * 3, w: 24, h: 29 }, + }, { + // hurt3-r + time: { min: 250, max: 500 }, + rate: { min: -4, max: -3 }, + rect: { x: 14 + 26 * 2, y: 14 + 31 * 3, w: 24, h: 29 }, + }, { + // hurt3-c + time: { min: 500, max: 750 }, + rate: { min: -4, max: -3 }, + rect: { x: 14 + 26 * 1, y: 14 + 31 * 3, w: 24, h: 29 }, + }, { + // hurt3-l + time: { min: 750, max: 1000 }, + rate: { min: -4, max: -3 }, + rect: { x: 14 + 26 * 0, y: 14 + 31 * 3, w: 24, h: 29 }, + }, { + // hurt4-c + time: { min: 0, max: 250 }, + rate: { min: -5, max: -4 }, + rect: { x: 14 + 26 * 1, y: 16 + 31 * 4, w: 24, h: 29 }, + }, { + // hurt4-r + time: { min: 250, max: 500 }, + rate: { min: -5, max: -4 }, + rect: { x: 14 + 26 * 2, y: 16 + 31 * 4, w: 24, h: 29 }, + }, { + // hurt4-c + time: { min: 500, max: 750 }, + rate: { min: -5, max: -4 }, + rect: { x: 14 + 26 * 1, y: 16 + 31 * 4, w: 24, h: 29 }, + }, { + // hurt4-l + time: { min: 750, max: 1000 }, + rate: { min: -5, max: -4 }, + rect: { x: 14 + 26 * 0, y: 16 + 31 * 4, w: 24, h: 29 }, + }, { + // dead + time: { min: 0, max: 1001 }, + rate: { min: -10000, max: -5 }, + rect: { x: 14, y: 335, w: 24, h: 31 }, + }, { + // invincible + time: { min: 0, max: 1001 }, + rate: { min: 1, max: 10000 }, + rect: { x: 40, y: 335, w: 24, h: 29 }, + }].map(function(row) { + return { + time: row.time, + rate: row.rate, + css: to_css(row.rect ? row.rect : to_rect(row.pos)), + }; + }); + + function get_frame(time, rate) { + // time, modulo 1000 + var tm = time % 1000; + + var frames = FRAMES.filter(function(row) { + return ( + (tm >= row.time.min) && (tm < row.time.max) && + (rate >= row.rate.min) && (rate < row.rate.max) + ); + }); + + return ((frames.length > 0) ? frames[0] : FRAMES[0]); + } + + // 14x13, 24x29 + + 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); + } + + setInterval(tick, 250); + $('#rate').keyup(tick).focus(); + + $('.set-rate').click(function() { + $('#rate').val($(this).data('val')); + return false; + }); +}); + -- cgit v1.2.3