Instantly share code, notes, and snippets.

Embed
What would you like to do?
sprite management w/ sample
window.onload = init;
function init(){
// -- Sprite Management Api -- //
var rectangular_intersection = function(r1, r2){
var t1 = [r1[0], r1[0] + r1[2], r1[1], r1[1] + r1[3]];
var t2 = [r2[0], r2[0] + r2[2], r2[1], r2[1] + r2[3]];
return !(t2[0] > t1[1] ||
t2[1] < t1[0] ||
t2[2] > t1[3] ||
t2[3] < t1[2]);
};
var ImageLoader = function(args, callback){
// Usage: new ImageLoader({
// 'img1':'/url/to/img1',
// 'img2':'/url/to/img2',}, cb);
// Returns: {'img1': [Image], 'img2': [Image]}
var self = this;
this.loaded = 0;
this.images = {};
for(var entry in args){
var _img = new Image();
this.images[entry] = _img;
_img.onload = function() {
self.loaded +=1;
if(self.loaded == Object.keys(args).length)
callback(self.images);
}
_img.src = args[entry];
}
};
var SpriteGroup = function(){
var self = this;
this.children = [];
this.render = function(args){
for(var i=0;i<this.children.length;i++){
this.children[i].render(args);
}
};
this.add = function(sprite){
this.children.push(sprite);
};
this.remove_index = function(index){
this.children.splice(index, 1);
}
this.remove = function(sprite){
for(var i=0;i<this.children.length;i++){
if(this.children[i] == sprite){
this.children.splice(i, 1);
break;
}
}
}
this.collides_with_sprite = function(sprite, callback){
var collisions = [];
for(var i=0;i<this.children.length;i++){
var target = this.children[i];
if(target.collides_with(sprite)){
collisions.push(target);
if(callback) callback(target);
}
}
return collisions;
}
this.collides_with_group = function(group, callback){
var _source_collisions = [];
var _target_collisions = [];
for(var i=0;i<group.children.length;i++){
var sprite = group.children[i];
var _collisions = self.collides_with_sprite(sprite, callback);
if(_collisions.length){
_source_collisions.push(sprite);
for(var j=0; j<_collisions.length;j++)
if(_target_collisions.indexOf(_collisions[j])==-1)
_target_collisions.push(_collisions[j]);
}
}
return [_target_collisions, _source_collisions];
};
};
var Sprite = function(args){
var self = this;
this.x = args.x || 0;
this.y = args.y || 0;
this.width = args.width || 0;
this.height = args.height || 0;
this.image = args.image;
this.render = args.render;
if(args.group) args.group.add(this);
this.rect = function() {
var target = self.image || args;
return [
this.x,
this.y,
target.width,
target.height];
};
this.collides_with = function(sprite){
return rectangular_intersection(
self.rect(),
sprite.rect());
};
};
// -- Sample -- //
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var player1 = new Sprite({
x: 10,
y: canvas.height/2,
width: 10,
height: 10,
render: function(args){
ctx.fillStyle = '#FF0000';
ctx.fillRect.apply(ctx, this.rect());
}
});
var player2 = new Sprite({
x: canvas.width - 10,
y: canvas.height/2,
width: 10,
height: 10,
render: function(args){
ctx.fillStyle = '#0000FF';
ctx.fillRect.apply(ctx, this.rect());
}
});
var player3 = new Sprite({
x: canvas.width/2 ,
y: canvas.height -10,
width: 10,
height: 10,
render: function(args){
ctx.fillStyle = '#00FF00';
ctx.fillRect.apply(ctx, this.rect());
}
});
var player4 = new Sprite({
x: canvas.width/2 ,
y: 10,
width: 10,
height: 10,
render: function(args){
ctx.fillStyle = '#FFFF00';
ctx.fillRect.apply(ctx, this.rect());
}
});
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
function generate_dot(color, group, x, y, from_angle, to_angle){
var s = new Sprite({
x: x,
y: y,
width: 5,
height: 5,
group:group,
render:function(args){
var v = 2;
var _angle = this.angle * Math.PI / 180 - Math.PI/2;
this.x += v * Math.cos(_angle);
this.y += v * Math.sin(_angle);
if(this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height){
group.remove(s);
survived += 1;
}else{
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(this.x, this.y, this.width/2, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
}
}
});
s.angle = from_angle + Math.random()*(to_angle-from_angle);
}
var p1_dots = new SpriteGroup();
var p2_dots = new SpriteGroup();
var p3_dots = new SpriteGroup();
var p4_dots = new SpriteGroup();
var survived = 0;
var generated = 0;
var start = new Date();
var last = new Date();
var elapsed = 0;
function loop() {
setTimeout(function(){
window.requestAnimationFrame(loop);
var now = new Date();
var dt = now - last;
var total = (now - start) / 1000;
last = now;
elapsed += dt;
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0,0, canvas.width, canvas.height);
//if(elapsed > 10){
// elapsed = 0;
generate_dot('#FF0000', p1_dots, player1.x, player1.y, 45 , 135);
generate_dot('#0000FF', p2_dots, player2.x, player2.y, 225, 315);
generate_dot('#00FF00', p3_dots, player3.x, player3.y, -45, 45);
generate_dot('#FFFF00', p4_dots, player4.x, player4.y, 135, 225);
generated += 4;
//}
var p1_p2_collisions = p1_dots.collides_with_group(p2_dots);
var p1_p3_collisions = p1_dots.collides_with_group(p3_dots);
var p1_p4_collisions = p1_dots.collides_with_group(p4_dots);
var p2_p3_collisions = p2_dots.collides_with_group(p3_dots);
var p2_p4_collisions = p2_dots.collides_with_group(p4_dots);
var p3_p4_collisions = p3_dots.collides_with_group(p4_dots);
for(var i=0;i<p1_p2_collisions[0].length;i++) p1_dots.remove(p1_p2_collisions[0][i]);
for(var i=0;i<p1_p2_collisions[1].length;i++) p2_dots.remove(p1_p2_collisions[1][i]);
for(var i=0;i<p2_p3_collisions[0].length;i++) p2_dots.remove(p2_p3_collisions[0][i]);
for(var i=0;i<p2_p3_collisions[1].length;i++) p3_dots.remove(p2_p3_collisions[1][i]);
for(var i=0;i<p1_p3_collisions[0].length;i++) p1_dots.remove(p1_p3_collisions[0][i]);
for(var i=0;i<p1_p3_collisions[1].length;i++) p3_dots.remove(p1_p3_collisions[1][i]);
for(var i=0;i<p1_p4_collisions[0].length;i++) p1_dots.remove(p1_p4_collisions[0][i]);
for(var i=0;i<p1_p4_collisions[1].length;i++) p4_dots.remove(p1_p4_collisions[1][i]);
for(var i=0;i<p2_p4_collisions[0].length;i++) p2_dots.remove(p2_p4_collisions[0][i]);
for(var i=0;i<p2_p4_collisions[1].length;i++) p4_dots.remove(p2_p4_collisions[1][i]);
for(var i=0;i<p3_p4_collisions[0].length;i++) p3_dots.remove(p3_p4_collisions[0][i]);
for(var i=0;i<p3_p4_collisions[1].length;i++) p4_dots.remove(p3_p4_collisions[1][i]);
player1.render();
player2.render();
player3.render();
player4.render();
p1_dots.render();
p2_dots.render();
p3_dots.render();
p4_dots.render();
ctx.fillStyle = 'black';
ctx.fillText('Generated : ' + generated, 10,10);
ctx.fillText('Survived : ' + survived + ' ( ' + Math.floor(survived/generated * 100)+'% )', 10,30);
}, 1000/60);
}
loop();
}
@omaraboumrad

This comment has been minimized.

Copy link
Owner

omaraboumrad commented Oct 19, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment