Changes and stuff

feature/coffeescript
Sven Slootweg 10 years ago
parent 05b6972f7d
commit 4cccde754c

@ -409,29 +409,27 @@
function Object(engine, name) { function Object(engine, name) {
this.engine = engine; this.engine = engine;
this.name = name; this.name = name;
this.checkPointCollision = __bind(this.checkPointCollision, this);
this.getBoundingBox = __bind(this.getBoundingBox, this);
this.drawSprite = __bind(this.drawSprite, this);
this.drawSelf = __bind(this.drawSelf, this);
this.callEvent = __bind(this.callEvent, this);
this.sprite = null; this.sprite = null;
this.x = 0; this.x = 0;
this.y = 0; this.y = 0;
} }
Object.prototype.callEvent = function(name, data) { Object.prototype.callEvent = function(name, data) {
var _ref; var event_map, _ref, _ref1;
if (data == null) { if (data == null) {
data = {}; data = {};
} }
event_map = {
mouseover: this.onMouseOver,
create: this.onCreate,
step: this.onStep
};
switch (name) { switch (name) {
case "create":
return typeof this.onCreate === "function" ? this.onCreate(data) : void 0;
case "step":
return typeof this.onStep === "function" ? this.onStep(data) : void 0;
case "draw": case "draw":
this.drawSelf((_ref = data.surface) != null ? _ref : ""); this.drawSelf((_ref = data.surface) != null ? _ref : "");
return typeof this.onDraw === "function" ? this.onDraw(data) : void 0; return typeof this.onDraw === "function" ? this.onDraw(data) : void 0;
default:
return (_ref1 = event_map[name]) != null ? _ref1.bind(this)(data) : void 0;
} }
}; };
@ -633,7 +631,7 @@
this.width = 800; this.width = 800;
this.height = 600; this.height = 600;
this.last_width = 800; this.last_width = 800;
this.last_height; this.last_height = 600;
} }
Scene.prototype.addTargetSurface = function(surface) { Scene.prototype.addTargetSurface = function(surface) {
@ -643,8 +641,8 @@
return function(event) { return function(event) {
var canvas_pos; var canvas_pos;
canvas_pos = surface.getBoundingClientRect(); canvas_pos = surface.getBoundingClientRect();
_this.mouse_x = Math.floor(event.clientX - canvas_pos.left); _this.mouse_x = (event.clientX - canvas_pos.left) | 0;
_this.mouse_y = Math.floor(event.clientY - canvas_pos.top); _this.mouse_y = (event.clientY - canvas_pos.top) | 0;
$("#debug").html("" + _this.mouse_x + " / " + _this.mouse_y); $("#debug").html("" + _this.mouse_x + " / " + _this.mouse_y);
return _this.checkMouseCollisions(); return _this.checkMouseCollisions();
}; };
@ -717,7 +715,7 @@
_results = []; _results = [];
for (id in _ref) { for (id in _ref) {
instance = _ref[id]; instance = _ref[id];
if (instance.checkPointCollision(this.mouseX, this.mouseY)) { if (instance.checkPointCollision(this.mouse_x, this.mouse_y)) {
_results.push(instance.callEvent("mouseover")); _results.push(instance.callEvent("mouseover"));
} else { } else {
_results.push(void 0); _results.push(void 0);

@ -1,7 +1,7 @@
$(-> $(->
manager = new ResourceManager("gemswap/assets") manager = new ResourceManager("gemswap/assets")
engine = new Engine(manager) engine = new Engine(manager)
window.debug_engine = engine
### ###
# Configure pre-loading assets # Configure pre-loading assets
manager.addImages([ manager.addImages([
@ -14,6 +14,9 @@ $(->
"images/diamond.png" "images/diamond.png"
"images/diamond_inverted.png" "images/diamond_inverted.png"
"images/diamond_shimmer.png" "images/diamond_shimmer.png"
"images/yellow.png"
"images/yellow_inverted.png"
"images/yellow_shimmer.png"
]) ])
### ###
@ -33,8 +36,13 @@ $(->
engine.createSprite("diamond_inverted", "images/diamond_inverted.png") engine.createSprite("diamond_inverted", "images/diamond_inverted.png")
engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png") engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png")
engine.createSprite("yellow", "images/yellow.png")
engine.createSprite("yellow_inverted", "images/yellow_inverted.png")
engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png")
diamond = engine.createObject("diamond") diamond = engine.createObject("diamond")
diamond.sprite = engine.getSprite("diamond") diamond.sprite = engine.getSprite("diamond")
diamond.draw_sprite = false
diamond.onCreate = -> diamond.onCreate = ->
@fade_step = 0.045 @fade_step = 0.045
@ -43,9 +51,11 @@ $(->
@fade_decay_current = 9999 # Disable by default @fade_decay_current = 9999 # Disable by default
@fade_decay_max = 8 @fade_decay_max = 8
@shimmer_step = 0.006 @shimmer_step = 0.006 * Math.random()
@shimmer_current_step = @shimmer_step @shimmer_current_step = @shimmer_step
@shimmer_value = 0 @shimmer_value = 0
@gem_type = if Math.random() > 0.5 then "diamond" else "yellow"
diamond.onStep = -> diamond.onStep = ->
if @fade_decay_current < Math.pow(2, @fade_decay_max) if @fade_decay_current < Math.pow(2, @fade_decay_max)
@ -75,19 +85,22 @@ $(->
return true return true
diamond.onDraw = -> diamond.onDraw = ->
@engine.getSprite("diamond_inverted").draw(@x, @y, { @engine.getSprite(@gem_type).draw(@x, @y)
@engine.getSprite("#{@gem_type}_inverted").draw(@x, @y, {
alpha: @fade_value alpha: @fade_value
}) })
@engine.getSprite("diamond_shimmer").draw(@x - 14, @y - 14, { @engine.getSprite("#{@gem_type}_shimmer").draw(@x - 14, @y - 14, {
alpha: @shimmer_value alpha: @shimmer_value
}) })
diamond.onMouseOver = -> diamond.onMouseOver = ->
console.log("mouseover")
@fade_decay_current = 1 @fade_decay_current = 1
scene.createInstance(diamond, 20, 20) for x in [0 .. 728] by 72
for y in [0 .. 550] by 72
scene.createInstance(diamond, x, y)
engine.start() engine.start()
) )

@ -4,6 +4,7 @@
var engine, manager; var engine, manager;
manager = new ResourceManager("gemswap/assets"); manager = new ResourceManager("gemswap/assets");
engine = new Engine(manager); engine = new Engine(manager);
window.debug_engine = engine;
/* /*
* Configure pre-loading assets * Configure pre-loading assets
@ -11,7 +12,7 @@
"images/loading_screen.png" "images/loading_screen.png"
], true) ], true)
*/ */
manager.addImages(["images/diamond.png", "images/diamond_inverted.png", "images/diamond_shimmer.png"]); manager.addImages(["images/diamond.png", "images/diamond_inverted.png", "images/diamond_shimmer.png", "images/yellow.png", "images/yellow_inverted.png", "images/yellow_shimmer.png"]);
/* /*
manager.addSounds([ manager.addSounds([
@ -21,23 +22,28 @@
*/ */
manager.prepare(); manager.prepare();
return manager.preload(null, function() { return manager.preload(null, function() {
var diamond, scene; var diamond, scene, x, y, _i, _j;
engine.addCanvas($("#gamecanvas")); engine.addCanvas($("#gamecanvas"));
scene = engine.createScene("main"); scene = engine.createScene("main");
engine.createSprite("diamond", "images/diamond.png"); engine.createSprite("diamond", "images/diamond.png");
engine.createSprite("diamond_inverted", "images/diamond_inverted.png"); engine.createSprite("diamond_inverted", "images/diamond_inverted.png");
engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png"); engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png");
engine.createSprite("yellow", "images/yellow.png");
engine.createSprite("yellow_inverted", "images/yellow_inverted.png");
engine.createSprite("yellow_shimmer", "images/yellow_shimmer.png");
diamond = engine.createObject("diamond"); diamond = engine.createObject("diamond");
diamond.sprite = engine.getSprite("diamond"); diamond.sprite = engine.getSprite("diamond");
diamond.draw_sprite = false;
diamond.onCreate = function() { diamond.onCreate = function() {
this.fade_step = 0.045; this.fade_step = 0.045;
this.fade_current_step = this.fade_step; this.fade_current_step = this.fade_step;
this.fade_value = 0; this.fade_value = 0;
this.fade_decay_current = 9999; this.fade_decay_current = 9999;
this.fade_decay_max = 8; this.fade_decay_max = 8;
this.shimmer_step = 0.006; this.shimmer_step = 0.006 * Math.random();
this.shimmer_current_step = this.shimmer_step; this.shimmer_current_step = this.shimmer_step;
return this.shimmer_value = 0; this.shimmer_value = 0;
return this.gem_type = Math.random() > 0.5 ? "diamond" : "yellow";
}; };
diamond.onStep = function() { diamond.onStep = function() {
var max; var max;
@ -66,18 +72,22 @@
return true; return true;
}; };
diamond.onDraw = function() { diamond.onDraw = function() {
this.engine.getSprite("diamond_inverted").draw(this.x, this.y, { this.engine.getSprite(this.gem_type).draw(this.x, this.y);
this.engine.getSprite("" + this.gem_type + "_inverted").draw(this.x, this.y, {
alpha: this.fade_value alpha: this.fade_value
}); });
return this.engine.getSprite("diamond_shimmer").draw(this.x - 14, this.y - 14, { return this.engine.getSprite("" + this.gem_type + "_shimmer").draw(this.x - 14, this.y - 14, {
alpha: this.shimmer_value alpha: this.shimmer_value
}); });
}; };
diamond.onMouseOver = function() { diamond.onMouseOver = function() {
console.log("mouseover");
return this.fade_decay_current = 1; return this.fade_decay_current = 1;
}; };
scene.createInstance(diamond, 20, 20); for (x = _i = 0; _i <= 728; x = _i += 72) {
for (y = _j = 0; _j <= 550; y = _j += 72) {
scene.createInstance(diamond, x, y);
}
}
return engine.start(); return engine.start();
}); });
}); });

@ -1,24 +1,32 @@
# NOTE: All class methods are loosely bound (ie. -> instead of =>). This is to
# make sure that @properties refer to instances of Objects, rather than
# the defaults set in the Object class.
class Object class Object
constructor: (@engine, @name) -> constructor: (@engine, @name) ->
@sprite = null @sprite = null
@x = 0 @x = 0
@y = 0 @y = 0
callEvent: (name, data = {}) => callEvent: (name, data = {}) ->
event_map =
mouseover: @onMouseOver
create: @onCreate
step: @onStep
switch name switch name
when "create" then @onCreate?(data)
when "step" then @onStep?(data)
when "draw" when "draw"
@drawSelf(data.surface ? "") @drawSelf(data.surface ? "")
@onDraw?(data) @onDraw?(data)
else event_map[name]?.bind(this)(data)
drawSelf: (surface) => drawSelf: (surface) ->
@drawSprite(surface) @drawSprite(surface)
drawSprite: (surface = "") => drawSprite: (surface = "") ->
@sprite.draw(@x, @y, {}, surface) if @sprite? and (@draw_sprite ? "true") @sprite.draw(@x, @y, {}, surface) if @sprite? and (@draw_sprite ? "true")
getBoundingBox: => getBoundingBox: ->
image_size = @sprite?.getSize() image_size = @sprite?.getSize()
return { return {
@ -28,8 +36,8 @@ class Object
y2: @y + image_size?.height y2: @y + image_size?.height
} }
checkPointCollision: (x, y) => checkPointCollision: (x, y) ->
# TODO: Precision collision matching! # TODO: Precision collision matching!
bounding_box = @getBoundingBox() bounding_box = @getBoundingBox()
return x >= bounding_box?.x1 and x <= bounding_box?.x2 and y >= bounding_box?.y1 and y <= bounding_box?.y2 return x >= bounding_box?.x1 and x <= bounding_box?.x2 and y >= bounding_box?.y1 and y <= bounding_box?.y2

@ -8,15 +8,15 @@ class Scene
@width = 800 @width = 800
@height = 600 @height = 600
@last_width = 800 @last_width = 800
@last_height @last_height = 600
addTargetSurface: (surface) => addTargetSurface: (surface) =>
@surfaces.push(surface) @surfaces.push(surface)
@engine.updateCanvasSize(surface, @width, @height) @engine.updateCanvasSize(surface, @width, @height)
$(surface).on("mousemove.radium", (event) => $(surface).on("mousemove.radium", (event) =>
canvas_pos = surface.getBoundingClientRect() canvas_pos = surface.getBoundingClientRect()
@mouse_x = Math.floor(event.clientX - canvas_pos.left) @mouse_x = (event.clientX - canvas_pos.left) | 0
@mouse_y = Math.floor(event.clientY - canvas_pos.top) @mouse_y = (event.clientY - canvas_pos.top) | 0
$("#debug").html("#{@mouse_x} / #{@mouse_y}") $("#debug").html("#{@mouse_x} / #{@mouse_y}")
@checkMouseCollisions() @checkMouseCollisions()
) )
@ -51,7 +51,7 @@ class Scene
checkMouseCollisions: => checkMouseCollisions: =>
for id, instance of @instances for id, instance of @instances
instance.callEvent("mouseover") if instance.checkPointCollision(@mouseX, @mouseY) instance.callEvent("mouseover") if instance.checkPointCollision(@mouse_x, @mouse_y)
createInstance: (object, x = 0, y = 0) => createInstance: (object, x = 0, y = 0) =>
id = @last_instance_id += 1 id = @last_instance_id += 1

Loading…
Cancel
Save