Skip to content

Instantly share code, notes, and snippets.

@hecomi

hecomi/shooting.js

Created May 6, 2012
Embed
What would you like to do?
だんまくさんぷる3
/**
* 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;
}
},
};
/* ------------------------------------------------------------------------- */
// 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();
/* ------------------------------------------------------------------------- */
// 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;
var Movers = new Container();
setInterval(function(){
if (frame%5 === 0) {
var angle = 2 * Math.PI * Math.random();
Movers.add(
new Mover({
x : WIDTH/2,
y : HEIGHT/2,
w : 10,
h : 10,
vx : 3 * Math.sin(angle),
vy : 3 * Math.cos(angle),
key : 'bullet.normal',
color : COLOR.BLUE,
})
);
}
Movers.move();
Canvas.clear();
Movers.draw();
++frame;
}, 1000/FPS);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.