Created
May 6, 2012 14:23
-
-
Save hecomi/2622511 to your computer and use it in GitHub Desktop.
だんまくさんぷる4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Shooting Sample | |
* created by @hecomi | |
* web: http://d.hatena.ne.jp/hecomi/ | |
*/ | |
$(function(){ | |
/* ------------------------------------------------------------------------- */ | |
// Global Parameters | |
/* ------------------------------------------------------------------------- */ | |
const FPS = 30; | |
const MARGIN = 50; | |
const WIDTH = 640; | |
const HEIGHT = 480; | |
// color | |
const COLOR = { | |
RED : 0, | |
GREEN : 1, | |
BLUE : 2, | |
YELLOW : 3, | |
PURPLE : 4, | |
PINK : 5, | |
ORANGE : 6, | |
SKYBLUE : 7, | |
BLACK : 8, | |
WHITE : 9, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Image Loader | |
/* ------------------------------------------------------------------------- */ | |
var ImageLoader = function(imgPath) { | |
this.loaded = false; | |
this.img = new Image(); | |
this.path = imgPath + "?" + new Date().getTime(); | |
}; | |
ImageLoader.prototype = { | |
load : function() { | |
this.img.onload = function(_this) { | |
return function() { | |
_this.loaded = true; | |
} | |
}(this); | |
this.img.src = this.path; | |
}, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Materials Container | |
/* ------------------------------------------------------------------------- */ | |
var Materials = { | |
map : {}, | |
add : function(material) { | |
var key = material.key; | |
this.map[key] = { | |
instance : new ImageLoader(material.path), | |
path : material.path, | |
width : material.width, | |
height : material.height, | |
cd : material.cd, | |
}; | |
this.map[key].instance.load(); | |
}, | |
loaded : function() { | |
for (var key in this.map) { | |
if (!this.map[key].instance.loaded) return false; | |
} | |
return true; | |
}, | |
img : function(key) { | |
return this.map[key].instance.img; | |
}, | |
path : function(key) { | |
return this.map[key].path; | |
}, | |
width : function(key) { | |
return this.map[key].width; | |
}, | |
height : function(key) { | |
return this.map[key].height; | |
}, | |
cd : function(key) { | |
return this.map[key].cd; | |
}, | |
} | |
/* ------------------------------------------------------------------------- */ | |
// Container | |
/* ------------------------------------------------------------------------- */ | |
var Container = function() { | |
this.array = []; | |
} | |
Container.prototype = { | |
add : function(instance) { | |
this.array.push(instance); | |
}, | |
move : function() { | |
var n = 0; | |
for (var i in this.array) { | |
this.array[i].move(); | |
if (!this.array[i].flag) { | |
this.array.splice(n, 1); | |
} | |
++n; | |
} | |
}, | |
draw : function() { | |
for (var i in this.array) { | |
this.array[i].draw(); | |
} | |
}, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Mover | |
/* ------------------------------------------------------------------------- */ | |
var Mover = function(mover) { | |
this.x = ('x' in mover) ? mover.x : 0; | |
this.y = ('y' in mover) ? mover.y : 0; | |
this.vx = ('vx' in mover) ? mover.vx : 0; | |
this.vy = ('vy' in mover) ? mover.vy : 3; | |
this.color = ('color' in mover) ? mover.color : 0; | |
this.key = ('key' in mover) ? mover.key : null, | |
this.w = ('key' in mover) ? Materials.width(mover.key) : 0; | |
this.h = ('key' in mover) ? Materials.height(mover.key) : 0; | |
this.cd = ('key' in mover) ? Materials.cd(mover.key) : 0; | |
this.sx = this.w * this.color; | |
this.sy = 0; | |
this.cnt = 0; | |
this.flag = true; | |
}; | |
Mover.prototype = { | |
move : function() { | |
this.x += this.vx; | |
this.y += this.vy; | |
this.chkBoundary(); | |
++this.cnt; | |
}, | |
draw : function() { | |
$('#canvas').drawImage({ | |
source : Materials.path(this.key), | |
x : this.x, | |
y : this.y, | |
width : this.w, | |
height : this.h, | |
sWidth : this.w, | |
sHeight : this.h, | |
sx : this.sx, | |
sy : this.sy, | |
cropFromCenter: false, | |
}); | |
}, | |
chkBoundary : function() { | |
if (this.x < -this.w - MARGIN || this.x > WIDTH + this.w + MARGIN || | |
this.y < -this.h - MARGIN || this.y > HEIGHT + this.h + MARGIN) { | |
this.flag = false; | |
} | |
}, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Bullet | |
/* ------------------------------------------------------------------------- */ | |
var Bullet = function(bullet) { | |
Mover.call(this, bullet); | |
}; | |
Bullet.prototype = $.extend({}, Mover.prototype); | |
/* ------------------------------------------------------------------------- */ | |
// Bullet Variations | |
/* ------------------------------------------------------------------------- */ | |
// Radian based Bullet | |
var RadianBullet = function(bullet) { | |
this.v = ('v' in bullet) ? bullet.v : 0; | |
this.ang = ('ang' in bullet) ? bullet.ang : 0; | |
Mover.call(this, bullet); | |
}; | |
RadianBullet.prototype = $.extend({}, Bullet.prototype, { | |
move : function() { | |
this.x += this.v * Math.cos(this.ang); | |
this.y += this.v * Math.sin(this.ang); | |
this.chkBoundary(); | |
++this.cnt; | |
}, | |
}); | |
/* ------------------------------------------------------------------------- */ | |
// Bullet Curtain | |
/* ------------------------------------------------------------------------- */ | |
var BulletCurtain = function() { | |
this.cnt = 0; | |
this.flag = true; | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Bullet Curtain Variations | |
/* ------------------------------------------------------------------------- */ | |
// N-Way Pattern | |
var BC_NWay = function(bc) { | |
BulletCurtain.call(this); | |
for (var x in bc) { | |
this[x] = bc[x]; | |
} | |
}; | |
BC_NWay.prototype = { | |
move : function() { | |
for (var i = 0; i < this.num; ++i) { | |
if (this.cnt === this.period*i) { | |
for (var n = 0; n < this.nway; ++n) { | |
Bullets.add(new RadianBullet({ | |
x : this.x, | |
y : this.y, | |
v : this.v, | |
ang : this.ang0 - this.dang*(this.nway-1)/2 + this.dang*n, | |
key : this.key, | |
color : 'color' in this ? this.color : COLOR.RED, | |
})); | |
} | |
} | |
} | |
++this.cnt; | |
if (this.cnt > this.period*this.num) { | |
this.flag = false; | |
} | |
}, | |
draw : function() {}, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// Canvas | |
/* ------------------------------------------------------------------------- */ | |
var Canvas = { | |
resize : function() { | |
var wRate = $(window).width() / WIDTH; | |
var hRate = $(window).height() / HEIGHT; | |
var rate = Math.min(wRate, hRate); | |
$('#canvas').css({ | |
width : WIDTH * rate, | |
height : HEIGHT * rate, | |
}); | |
}, | |
clear : function() { | |
$('#canvas').clearCanvas(); | |
}, | |
}; | |
/* ------------------------------------------------------------------------- */ | |
// OnLoad | |
/* ------------------------------------------------------------------------- */ | |
$(window).bind({ | |
resize : Canvas.resize | |
}); | |
Canvas.resize(); | |
/* ------------------------------------------------------------------------- */ | |
// Containers | |
/* ------------------------------------------------------------------------- */ | |
var Bullets = new Container(); | |
var BulletCurtains = new Container(); | |
/* ------------------------------------------------------------------------- */ | |
// Resource | |
/* ------------------------------------------------------------------------- */ | |
Materials.add({ | |
key : 'bullet.normal', | |
path : 'img/bullet/normal.png', | |
width : 20, | |
height : 20, | |
cd : 5, | |
}); | |
var loadTimer = setInterval(function(){ | |
if (Materials.loaded()) { | |
clearInterval(loadTimer); | |
main(); | |
} | |
}, 100); | |
/* ------------------------------------------------------------------------- */ | |
// Main | |
/* ------------------------------------------------------------------------- */ | |
function main() { | |
var frame = 0; | |
setInterval(function(){ | |
if (frame%60 === 0) { | |
BulletCurtains.add( | |
new BC_NWay({ | |
nway : 5, | |
x : WIDTH/2, | |
y : HEIGHT/4, | |
v : 5, | |
ang0 : Math.PI/2, | |
dang : Math.PI/10, | |
num : 8, | |
period : 5, | |
color : COLOR.RED, | |
key : 'bullet.normal', | |
}, Bullets) | |
); | |
} | |
BulletCurtains.move(); | |
Bullets.move(); | |
Canvas.clear(); | |
Bullets.draw(); | |
++frame; | |
}, 1000/FPS); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment