269 lines
50 KiB
JavaScript
269 lines
50 KiB
JavaScript
|
if(typeof module !== "undefined") {
|
||
|
|
module.exports = ebsprite;
|
||
|
|
} else {
|
||
|
|
this.ebsprite = ebsprite;
|
||
|
|
}
|
||
|
|
|
||
|
|
var spriteData = [{"name":"Ness","sprites":["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16"]},{"name":"Paula","sprites":["17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32"]},{"name":"Jeff","sprites":["33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48"]},{"name":"Poo","sprites":["49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64"]},{"name":"Robot Ness","sprites":["65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80"]},{"name":"Ness in pajamas","sprites":["81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96"]},{"name":"Ness on bicycle","sprites":["97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112"]},{"name":"Ness angel","sprites":["113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128"]},{"name":"Paula angel","sprites":["129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144"]},{"name":"Jeff angel","sprites":["145","146","147","148","149","150","151","152","153","154","155","156","157","158","159","160"]},{"name":"Poo angel","sprites":["161","162","163","164","165","166","167","168","169","170","171","172","173","174","175","176"]},{"name":"Diamondized person","sprites":["177","178","179","180","181","182","183","184","185","186","187","188","189","190","191","192"]},{"name":"Charred person","sprites":["193","194","195","196","197","198","199","200","201","202","203","204","205","206","207","208"]},{"name":"Ness doing peace sign","sprites":["209","210","211","212","213","214","215","216"]},{"name":"Jeff in bed","sprites":["217","218","219","220","221","222","223","224"]},{"name":"Ness lying down","sprites":["225","226","227","228","229","230","231","232"]},{"name":"Ness climbing","sprites":["233","234","235","236","237","238","239","240"]},{"name":"Paula climbing","sprites":["241","242","243","244","245","246","247","248"]},{"name":"Jeff climbing","sprites":["249","250","251","252","253","254","255","256"]},{"name":"Poo climbing","sprites":["257","258","259","260","261","262","263","264"]},{"name":"Ness climbing down","sprites":["265","266","267","268","269","270","271","272"]},{"name":"Paula climbing down","sprites":["273","274","275","276","277","278","279","280"]},{"name":"Jeff climbing down","sprites":["281","282","283","284","285","286","287","288"]},{"name":"Poo climbing down","sprites":["289","290","291","292","293","294","295","296"]},{"name":"Robot","sprites":["297","298","299","300","301","302","303","304","305","306","307","308","309","310","311","312"]},{"name":"Robot on the ground","sprites":["313","314","315","316","317","318","319","320"]},{"name":"Li'l Ness","sprites":["321","322","323","324","325","326","327","328","329","330","331","332","333","334","335","336"]},{"name":"Li'l Paula","sprites":["337","338","339","340","341","342","343","344","345","346","347","348","349","350","351","352"]},{"name":"Li'l Jeff","sprites":["353","354","355","356","357","358","359","360","361","362","363","364","365","366","367","368"]},{"name":"Li'l Poo","sprites":["369","370","371","372","373","374","375","376","377","378","379","380","381","382","383","384"]},{"name":"Li'l Escargo Express Guy","sprites":["385","386","387","388","389","390","391","392"]},{"name":"Li'l Mach Pizza Guy","sprites":["393","394","395","396","397","398","399","400"]},{"name":"Li'l gift box","sprites":["401","402","403","404","405","406","407","408"]},{"name":"Li'l angel","sprites":["409","410","411","412","413","414","415","416","417","418","419","420","421","422","423","424"]},{"name":"Li'l teddy bear","sprites":["425","426","427","428","429","430","431","432","433","434","435","436","437","438","439","440"]},{"name":"Li'l diamondized guy","sprites":["441","442","443","444","445","446","447","448","449","450","451","452","453","454","455","456"]},{"name":"Li'l charred guy","sprites":["457","458","459","460","461","462","463","464","465","466","467","468","469","470","47
|
||
|
|
|
||
|
|
function ebsprite() {
|
||
|
|
}
|
||
|
|
|
||
|
|
ebsprite.start = function(client) {
|
||
|
|
if(this.run) return;
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
this.run = true;
|
||
|
|
this.client = client;
|
||
|
|
this.canvas = document.createElement("canvas");
|
||
|
|
var canvas = this.canvas;
|
||
|
|
document.body.insertBefore(this.canvas, document.body.firstChild);
|
||
|
|
|
||
|
|
this.canvas.width = window.innerWidth;
|
||
|
|
this.canvas.height = window.innerHeight;
|
||
|
|
this.canvas.style.position = "absolute";
|
||
|
|
var camera = new Camera(this.canvas.width, this.canvas.height);
|
||
|
|
var context = this.canvas.getContext("2d");
|
||
|
|
context.fillStyle = "rgb(255,255,255)";
|
||
|
|
|
||
|
|
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
|
||
|
|
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
|
||
|
|
|
||
|
|
var ySort = function(a, b) {
|
||
|
|
return a.position.y - b.position.y;
|
||
|
|
};
|
||
|
|
|
||
|
|
var directionMap = {
|
||
|
|
"up": {x: 0, y: -1},
|
||
|
|
"up-right": {x: 0.707106782, y: -0.707106782},
|
||
|
|
"right": {x: 1, y: 0},
|
||
|
|
"right-down": {x: 0.707106782, y: 0.707106782},
|
||
|
|
"down": {x: 0, y: 1},
|
||
|
|
"down-left": {x: -0.707106782, y: 0.707106782},
|
||
|
|
"left": {x: -1, y: 0},
|
||
|
|
"left-up": {x: -0.707106782, y: -0.707106782}
|
||
|
|
};
|
||
|
|
|
||
|
|
var render_loop = function() {
|
||
|
|
var players = [];
|
||
|
|
for(var i in playerMap) {
|
||
|
|
players.push(playerMap[i]);
|
||
|
|
}
|
||
|
|
context.clearRect(0, 0, self.canvas.width, self.canvas.height);
|
||
|
|
for(var i in players) {
|
||
|
|
var player = players[i];
|
||
|
|
if(player.walking) {
|
||
|
|
var vec = directionMap[player.direction];
|
||
|
|
var time = Date.now() - player.updateTime;
|
||
|
|
player.position.x = player.updatePosition.x + (vec.x * player.walkSpeed * time);
|
||
|
|
player.position.y = player.updatePosition.y + (vec.y * player.walkSpeed * time);
|
||
|
|
if(player.position.x < 0) player.position.x = 0;
|
||
|
|
else if(player.position.x > canvas.width) player.position.x = canvas.width;
|
||
|
|
if(player.position.y < 0) player.position.y = 0;
|
||
|
|
else if(player.position.y > canvas.width) player.position.y = canvas.width;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
players.sort(ySort);
|
||
|
|
for(var i in players) {
|
||
|
|
var player = players[i];
|
||
|
|
var img = player.spriteProvider.getCurrentSprite(player);
|
||
|
|
if(img) context.drawImage(img,
|
||
|
|
Math.floor(player.position.x - camera.position.x - (img.width / 2)),
|
||
|
|
Math.floor(player.position.y - camera.position.y - img.height));
|
||
|
|
/*if(player.chat) {
|
||
|
|
var text = player.chat;
|
||
|
|
var t = Math.floor((Date.now() - player.chatTime) / 50);
|
||
|
|
text = text.substring(0, t);
|
||
|
|
context.fillText(text,
|
||
|
|
Math.floor(player.position.x - camera.position.x),
|
||
|
|
Math.floor(player.position.y - camera.position.y - img.height) - 10);
|
||
|
|
}*/
|
||
|
|
}
|
||
|
|
if(self.run) requestAnimationFrame(render_loop);
|
||
|
|
};
|
||
|
|
render_loop();
|
||
|
|
|
||
|
|
this.onresize = function() {
|
||
|
|
canvas.width = $(window).width();
|
||
|
|
canvas.height = $(window).height();
|
||
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
}
|
||
|
|
window.addEventListener("resize", this.onresize);
|
||
|
|
|
||
|
|
function downloadImage(url, cb) {
|
||
|
|
var img = new Image();
|
||
|
|
img.onerror = function() {
|
||
|
|
cb("onerror", img);
|
||
|
|
};
|
||
|
|
img.onabort = function() {
|
||
|
|
cb("onabort", img);
|
||
|
|
};
|
||
|
|
img.onload = function() {
|
||
|
|
cb(false, img);
|
||
|
|
};
|
||
|
|
img.src = url;
|
||
|
|
};
|
||
|
|
|
||
|
|
function downloadImages(urls, cb) {
|
||
|
|
var imgs = new Array(urls.length);
|
||
|
|
var c = 0;
|
||
|
|
for(var i in urls) {
|
||
|
|
(function() {
|
||
|
|
var j = i;
|
||
|
|
downloadImage(urls[j], function(err, img) {
|
||
|
|
if(err) {
|
||
|
|
cb(err, imgs);
|
||
|
|
cb = function() {};
|
||
|
|
} else {
|
||
|
|
imgs[j] = img;
|
||
|
|
if(++c == urls.length) {
|
||
|
|
cb(false, imgs);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
function Camera(width, height) {
|
||
|
|
this.width = width;
|
||
|
|
this.height = height;
|
||
|
|
this.position = {x: 0, y: 0};
|
||
|
|
};
|
||
|
|
|
||
|
|
function SpriteProvider(sprites, cb) {
|
||
|
|
var urls = new Array(sprites.length);
|
||
|
|
for(var i in sprites) {
|
||
|
|
urls[i] = "/ebsprite/" + sprites[i] + ".png";
|
||
|
|
}
|
||
|
|
downloadImages(urls, (function(err, imgs) {
|
||
|
|
if(!err) {
|
||
|
|
var s = imgs;
|
||
|
|
this.sprites = {};
|
||
|
|
this.sprites["up"] = [s[0], s[1]];
|
||
|
|
this.sprites["right"] = [s[2], s[3]];
|
||
|
|
this.sprites["down"] = [s[4], s[5]];
|
||
|
|
this.sprites["left"] = [s[6], s[7]];
|
||
|
|
this.sprites["up-right"] = [s[8] || s[2], s[9] || s[3]];
|
||
|
|
this.sprites["right-down"] = [s[10] || s[2], s[11] || s[3]];
|
||
|
|
this.sprites["down-left"] = [s[12] || s[6], s[13] || s[7]];
|
||
|
|
this.sprites["left-up"] = [s[14] || s[6], s[15] || s[7]];
|
||
|
|
}
|
||
|
|
if(cb) cb();
|
||
|
|
}).bind(this));
|
||
|
|
};
|
||
|
|
|
||
|
|
//SpriteProvider.prototype.sprites = {};
|
||
|
|
SpriteProvider.prototype = new SpriteProvider(["2354","2355","2356","2357","2358","2359","2360","2361"]);
|
||
|
|
|
||
|
|
SpriteProvider.prototype.getCurrentSprite = function(player) {
|
||
|
|
if(this.sprites && this.sprites[player.direction]) {
|
||
|
|
if(player.walking) {
|
||
|
|
var time = Date.now() - player.updateTime;
|
||
|
|
return this.sprites[player.direction][time & 0x80 ? 0 : 1];
|
||
|
|
} else {
|
||
|
|
return this.sprites[player.direction][0];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var Player = function(id) {
|
||
|
|
this.id = id;
|
||
|
|
|
||
|
|
//this.sprites = spriteData[0].sprites;
|
||
|
|
this.sprites = spriteData[parseInt(id, 16) % spriteData.length].sprites;
|
||
|
|
this.spriteProvider = new SpriteProvider(this.sprites);
|
||
|
|
this.canMoveDiagonally = (this.sprites[8] && this.sprites[9] && this.sprites[10] && this.sprites[11] && this.sprites[12] && this.sprites[13] && this.sprites[14] && this.sprites[15]) ? true : false;
|
||
|
|
this.walkSpeed = 0.15;
|
||
|
|
|
||
|
|
this.direction = "down";
|
||
|
|
this.walking = false;
|
||
|
|
this.updatePosition = {
|
||
|
|
x: canvas.width / 2,
|
||
|
|
y: canvas.height / 2
|
||
|
|
};
|
||
|
|
this.position = {x: this.updatePosition.x, y: this.updatePosition.y};
|
||
|
|
this.updateTime = Date.now();
|
||
|
|
};
|
||
|
|
|
||
|
|
var player = new Player(client.participantId);
|
||
|
|
var playerMap = {}
|
||
|
|
playerMap[client.participantId] = player;
|
||
|
|
|
||
|
|
|
||
|
|
function move(id) {
|
||
|
|
var player = playerMap[id];
|
||
|
|
var part = client.ppl[id];
|
||
|
|
if(!player || !part) return;
|
||
|
|
var target = {x: (part.x / 100) * self.canvas.width, y: (client.ppl[id].y / 100) * self.canvas.height};
|
||
|
|
var difference = {x: target.x - player.position.x, y: target.y - player.position.y};
|
||
|
|
var distance = Math.sqrt(Math.pow(difference.x, 2) + Math.pow(difference.y, 2));
|
||
|
|
if(distance > 4) {
|
||
|
|
var angle = Math.atan2(difference.y, difference.x);
|
||
|
|
angle += Math.PI; // account negative Math.PI
|
||
|
|
angle += Math.PI / 8; // askew
|
||
|
|
angle /= (Math.PI * 2);
|
||
|
|
angle = Math.floor(angle * 8) % 8;
|
||
|
|
var direction = ["left", "left-up", "up", "up-right", "right", "right-down", "down", "down-left"][angle];
|
||
|
|
if(player.direction !== direction) {
|
||
|
|
if((Date.now() - player.updateTime > 500) || !player.walking) {
|
||
|
|
player.direction = direction;
|
||
|
|
player.updatePosition = {x: player.position.x, y: player.position.y};
|
||
|
|
player.updateTime = Date.now();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(distance > 75) {
|
||
|
|
if(!player.walking) {
|
||
|
|
player.walking = true;
|
||
|
|
player.updatePosition = {x: player.position.x, y: player.position.y};
|
||
|
|
player.updateTime = Date.now();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(distance < 25) {
|
||
|
|
if(player.walking) {
|
||
|
|
player.walking = false;
|
||
|
|
player.updatePosition = {x: player.position.x, y: player.position.y};
|
||
|
|
player.updateTime = Date.now();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.animationInterval = setInterval(function() {
|
||
|
|
move(client.participantId);
|
||
|
|
for(var id in client.ppl) {
|
||
|
|
if(!client.ppl.hasOwnProperty(id)) continue;
|
||
|
|
move(id);
|
||
|
|
}
|
||
|
|
}, 50);
|
||
|
|
|
||
|
|
this.participantAdded = function(part) {
|
||
|
|
playerMap[part.id] = new Player(part.id);
|
||
|
|
}
|
||
|
|
for(var id in client.ppl) {
|
||
|
|
if(!client.ppl.hasOwnProperty(id)) continue;
|
||
|
|
playerMap[id] = new Player(id);
|
||
|
|
}
|
||
|
|
client.on("participant added", this.participantAdded);
|
||
|
|
|
||
|
|
this.participantRemoved = function(part) {
|
||
|
|
delete playerMap[part.id];
|
||
|
|
}
|
||
|
|
client.on("participant removed", this.participantRemoved);
|
||
|
|
}
|
||
|
|
|
||
|
|
ebsprite.stop = function() {
|
||
|
|
this.run = false;
|
||
|
|
if(this.canvas) {
|
||
|
|
document.body.removeChild(this.canvas);
|
||
|
|
this.canvas = undefined;
|
||
|
|
}
|
||
|
|
window.removeEventListener("resize", this.onresize);
|
||
|
|
clearInterval(this.animationInterval);
|
||
|
|
if(this.client) {
|
||
|
|
this.client.off("participant added", this.participantAdded);
|
||
|
|
this.client.off("participant removed", this.participantRemoved);
|
||
|
|
}
|
||
|
|
}
|