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.

Owner

omaraboumrad commented Oct 19, 2013

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