Browse Source

Initial commit for CoffeeScript rewrite

feature/coffeescript
Sven Slootweg 8 years ago
parent
commit
05b6972f7d
  1. 7
      build-games.sh
  2. 894
      compiled/radium.js
  3. 14
      gemswap.html
  4. BIN
      gemswap/assets/images/diamond.png
  5. BIN
      gemswap/assets/images/diamond_inverted.png
  6. BIN
      gemswap/assets/images/diamond_shimmer.png
  7. 94
      gemswap/core.coffee
  8. 12
      gemswap/gemswap.css
  9. 85
      gemswap/gemswap.js
  10. 349
      gemswap/source/diamond.svg
  11. 416
      gemswap/source/diamond_inverted.svg
  12. 347
      gemswap/source/diamond_shimmer.svg
  13. 0
      radium/000_prepare.coffee
  14. 0
      radium/base.coffee
  15. 106
      radium/engine.coffee
  16. 113
      radium/engine.draw.coffee
  17. 13
      radium/engine.random.coffee
  18. 35
      radium/object.coffee
  19. 63
      radium/resource-manager.coffee
  20. 72
      radium/scene.coffee
  21. 1
      radium/sound.coffee
  22. 12
      radium/sprite.coffee
  23. 30
      radium/tileset.coffee
  24. 6
      radium/util.coffee
  25. 2
      radium/zzz_exports.coffee
  26. 3
      watch.sh

7
build-games.sh

@ -0,0 +1,7 @@
for f in gemswap/source/*.svg
do
name=${f%%.*}
name=${name##*/}
echo "Processing $f..."
inkscape --export-png=gemswap/assets/images/$name.png $f
done

894
compiled/radium.js

@ -0,0 +1,894 @@
// Generated by CoffeeScript 1.7.1
(function() {
var Engine, Object, ResourceManager, Scene, Sound, Sprite, Tileset, TilesetTile, util,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
__slice = [].slice;
window.pass = void 0;
Engine = (function() {
function Engine(resource_manager) {
this.resource_manager = resource_manager;
this.getTileset = __bind(this.getTileset, this);
this.getSprite = __bind(this.getSprite, this);
this.getSound = __bind(this.getSound, this);
this.getObject = __bind(this.getObject, this);
this.getScene = __bind(this.getScene, this);
this.createTileset = __bind(this.createTileset, this);
this.createSprite = __bind(this.createSprite, this);
this.createSound = __bind(this.createSound, this);
this.createObject = __bind(this.createObject, this);
this.createScene = __bind(this.createScene, this);
this.setPreloadScene = __bind(this.setPreloadScene, this);
this.setInitialScene = __bind(this.setInitialScene, this);
this.iteration = __bind(this.iteration, this);
this.loop = __bind(this.loop, this);
this.start = __bind(this.start, this);
this.updateCanvasSize = __bind(this.updateCanvasSize, this);
this.getSurface = __bind(this.getSurface, this);
this.createSurface = __bind(this.createSurface, this);
this.addCanvas = __bind(this.addCanvas, this);
this.canvases = {};
this.fps = 45;
this.last_frameskip_collection = Math.floor(Date.now());
this.frameskip = 0;
this.current_frameskip = 0;
this.scenes = {};
this.objects = {};
this.sounds = {};
this.sprites = {};
this.tilesets = {};
}
Engine.prototype.addCanvas = function(canvas, label) {
if (label == null) {
label = "";
}
return this.canvases[label] = util.unpackElement(canvas);
};
Engine.prototype.createSurface = function(label) {
return this.canvases[label] = document.createElement("canvas");
};
Engine.prototype.getSurface = function(label) {
var _ref;
if (typeof label === "string") {
return (_ref = this.canvases[label]) != null ? _ref.getContext("2d") : void 0;
} else if (label.tagName === "CANVAS") {
return label.getContext("2d");
} else {
return label;
}
};
Engine.prototype.updateCanvasSize = function(canvas, w, h) {
canvas.width = w;
canvas.height = h;
canvas.style.width = "" + w + "px";
return canvas.style.height = "" + h + "px";
};
Engine.prototype.start = function() {
this.initial_scene.addTargetSurface(this.canvases[""]);
return this.loop();
};
Engine.prototype.loop = function() {
return this.iteration();
};
Engine.prototype.iteration = function() {
var belated_timeout, current_frame, frame_interval, name, next_frame, overtime, scene, _ref;
frame_interval = 1000 / this.fps;
current_frame = Date.now();
next_frame = current_frame + frame_interval;
if (Math.floor(current_frame) > this.last_frameskip_collection) {
this.frameskip = this.current_frameskip;
this.current_frameskip = 0;
this.last_frameskip_collection = Math.floor(current_frame);
}
_ref = this.scenes;
for (name in _ref) {
scene = _ref[name];
if (scene.active) {
scene.iteration();
}
}
if (Date.now() < next_frame) {
return setTimeout(this.iteration, next_frame - Date.now());
} else {
overtime = Date.now() - next_frame;
this.current_frameskip += Math.floor(overtime / frame_interval);
belated_timeout = overtime % frame_interval;
return setTimeout(this.iteration, belated_timeout);
}
};
Engine.prototype.setInitialScene = function(scene) {
return this.initial_scene = scene;
};
Engine.prototype.setPreloadScene = function(scene) {
return this.preload_scene = scene;
};
Engine.prototype.createScene = function(name) {
var scene;
scene = new Scene(this, name);
if (this.initial_scene == null) {
this.initial_scene = scene;
}
return this.scenes[name] = scene;
};
Engine.prototype.createObject = function(name) {
return this.objects[name] = new Object(this, name);
};
Engine.prototype.createSound = function(name, sound) {
return this.sounds[name] = new Sound(this, name, this.resource_manager.getSound(sound));
};
Engine.prototype.createSprite = function(name, image) {
console.log("gget", this.resource_manager.getImage(image));
return this.sprites[name] = new Sprite(this, name, this.resource_manager.getImage(image));
};
Engine.prototype.createTileset = function(name, image, tile_width, tile_height) {
return this.tilesets[name] = new Tileset(this, name, this.resource_manager.getImage(image), tile_width, tile_height);
};
Engine.prototype.getScene = function(name) {
if (typeof name === "string") {
return this.scenes[name];
} else {
return name;
}
};
Engine.prototype.getObject = function(name) {
if (typeof name === "string") {
return this.objects[name];
} else {
return name;
}
};
Engine.prototype.getSound = function(name) {
if (typeof name === "string") {
return this.sounds[name];
} else {
return name;
}
};
Engine.prototype.getSprite = function(name) {
if (typeof name === "string") {
return this.sprites[name];
} else {
return name;
}
};
Engine.prototype.getTileset = function(name) {
if (typeof name === "string") {
return this.tilesets[name];
} else {
return name;
}
};
return Engine;
})();
Engine.prototype.draw = {
_startPath: (function(_this) {
return function(surface, options) {
var _ref;
surface = _this.getSurface(surface);
if ((_ref = !options._is_text) != null ? _ref : false) {
surface.beginPath();
}
return surface;
};
})(this),
_finishPath: (function(_this) {
return function(surface, options) {
var _ref, _ref1, _ref10, _ref11, _ref12, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9;
if ((_ref = options.stroke) != null ? _ref : true) {
surface.lineWidth = (_ref1 = (_ref2 = options.lineWidth) != null ? _ref2 : (_ref3 = options.pen) != null ? _ref3.lineWidth : void 0) != null ? _ref1 : 1;
surface.strokeStyle = (_ref4 = (_ref5 = options.lineColor) != null ? _ref5 : (_ref6 = options.pen) != null ? _ref6.lineColor : void 0) != null ? _ref4 : "black";
if ((_ref7 = options._is_text) != null ? _ref7 : false) {
surface.strokeText(options.text, options.x, options.y);
} else {
surface.stroke();
}
}
if ((_ref8 = options.fill) != null ? _ref8 : false) {
surface.fillStyle = (_ref9 = (_ref10 = options.fillColor) != null ? _ref10 : (_ref11 = options.pen) != null ? _ref11.fillColor : void 0) != null ? _ref9 : "white";
if ((_ref12 = options._is_text) != null ? _ref12 : false) {
return surface.fillText(options.text, options.x, options.y);
} else {
return surface.fill();
}
}
};
})(this),
_getTextWidth: (function(_this) {
return function(surface, text, options) {
var width;
_this._applyTextContext(surface, options);
width = surface.measureText(text).width;
surface.restore();
return width;
};
})(this),
_applyTextContext: (function(_this) {
return function(surface, options) {
var font_family, font_size, font_style, font_weight, scale, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
font_family = (_ref = options.font) != null ? _ref : "sans-serif";
font_size = (_ref1 = options.size) != null ? _ref1 : 16;
font_weight = (_ref2 = options.weight) != null ? _ref2 : "normal";
font_style = (_ref3 = options.style) != null ? _ref3 : "normal";
scale = (_ref4 = options.scale) != null ? _ref4 : 1;
surface.save();
surface.font = "" + font_weight + " " + font_style + " " + font_size + "px '" + font_family + "'";
surface.globalAlpha = (_ref5 = options.alpha) != null ? _ref5 : 1;
return surface.scale(scale, scale);
};
})(this),
line: (function(_this) {
return function(x1, y1, x2, y2, options, surface) {
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
surface = _this._startPath(surface, options);
surface.moveTo(x1, y1);
surface.lineTo(x2, y2);
return _this._finishPath(surface, options);
};
})(this),
rectangle: (function(_this) {
return function(x1, y1, x2, y2, options, surface) {
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
surface = _this._startPath(surface, options);
surface.rect(x1, y1, x2 - x1, y2 - y1);
return _this._finishPath(surface, options);
};
})(this),
boxEllipse: (function(_this) {
return function(x1, y1, x2, y2, options, surface) {
var rx, ry, x, y;
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
x = (x1 + x2) / 2;
y = (y1 + y2) / 2;
rx = (x2 - x1) / 2;
ry = (y2 - y1) / 2;
return _this.radiusEllipse(x, y, rx, ry, options, surface);
};
})(this),
radiusEllipse: (function(_this) {
return function(x, y, rx, ry, options, surface) {
var i, step, _i, _ref, _ref1;
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
surface = _this._startPath(surface, options);
step = (_ref = options.step) != null ? _ref : 0.1;
if (rx === ry) {
surface.arc(x, y, rx, 0, 2 * Math.PI, false);
} else {
surface.moveTo(x + rx, y);
for (i = _i = 0, _ref1 = Math.PI * 2 + step; 0 <= _ref1 ? _i <= _ref1 : _i >= _ref1; i = 0 <= _ref1 ? ++_i : --_i) {
surface.lineTo(x + (Math.cos(i) * rx), y + (Math.sin(i) * ry));
}
}
return _this._finishPath(surface, options);
};
})(this),
boxPolygon: (function(_this) {
return function(x1, y1, x2, y2, sides, options, surface) {
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
return pass;
};
})(this),
radiusPolygon: (function(_this) {
return function(x, y, r, sides, options, surface) {
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
return pass;
};
})(this),
text: (function(_this) {
return function(x, y, text, options, surface) {
var text_width;
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
if (options.alignment == null) {
options.alignment = "left";
}
if (options.scale == null) {
options.scale = 1;
}
options._is_text = true;
options.text = text;
options.y = y;
if (options.fill == null) {
options.fill = true;
}
if (options.fillColor == null) {
options.fillColor = "black";
}
if (options.stroke == null) {
options.stroke = false;
}
if (alignment === "left") {
options.x = x;
} else {
text_width = _this._getTextWidth(text, options);
if (alignment === "center") {
options.x = x - ((text_width / 2) * scale * scale);
} else if (alignment === "right") {
options.x = x - text_width;
}
}
_this._startPath(surface, options);
_this._finishPath(surface, options);
return surface.restore();
};
})(this)
};
Engine.prototype.random = {
number: (function(_this) {
return function(min, max, precision) {
var base_number, rounding_factor, space;
base_number = Math.random();
space = Math.abs(ceiling - floor);
rounding_factor = 1 / (precision != null ? precision : 0.00000001);
return Math.floor((min + (base_number * space)) * rounding_factor) / rounding_factor;
};
})(this),
pick: (function(_this) {
return function() {
var options;
options = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
return options[Math.floor(Math.random() * options.length)];
};
})(this),
string: (function(_this) {
return function(length, alphabet) {
var i;
if (alphabet == null) {
alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
}
return ((function() {
var _i, _ref, _results;
_results = [];
for (i = _i = 0, _ref = length - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; i = 0 <= _ref ? ++_i : --_i) {
_results.push(alphabet[Math.floor(Math.random() * alphabet.length)]);
}
return _results;
})()).join("");
};
})(this)
};
Object = (function() {
function Object(engine, name) {
this.engine = engine;
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.x = 0;
this.y = 0;
}
Object.prototype.callEvent = function(name, data) {
var _ref;
if (data == null) {
data = {};
}
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":
this.drawSelf((_ref = data.surface) != null ? _ref : "");
return typeof this.onDraw === "function" ? this.onDraw(data) : void 0;
}
};
Object.prototype.drawSelf = function(surface) {
return this.drawSprite(surface);
};
Object.prototype.drawSprite = function(surface) {
var _ref;
if (surface == null) {
surface = "";
}
if ((this.sprite != null) && ((_ref = this.draw_sprite) != null ? _ref : "true")) {
return this.sprite.draw(this.x, this.y, {}, surface);
}
};
Object.prototype.getBoundingBox = function() {
var image_size, _ref;
image_size = (_ref = this.sprite) != null ? _ref.getSize() : void 0;
return {
x1: this.x,
x2: this.x + (image_size != null ? image_size.width : void 0),
y1: this.y,
y2: this.y + (image_size != null ? image_size.height : void 0)
};
};
Object.prototype.checkPointCollision = function(x, y) {
var bounding_box;
bounding_box = this.getBoundingBox();
return x >= (bounding_box != null ? bounding_box.x1 : void 0) && x <= (bounding_box != null ? bounding_box.x2 : void 0) && y >= (bounding_box != null ? bounding_box.y1 : void 0) && y <= (bounding_box != null ? bounding_box.y2 : void 0);
};
return Object;
})();
ResourceManager = (function() {
function ResourceManager(base_path) {
this.base_path = base_path != null ? base_path : "";
this.preload = __bind(this.preload, this);
this.prepare = __bind(this.prepare, this);
this.getImage = __bind(this.getImage, this);
this.addSounds = __bind(this.addSounds, this);
this.addScripts = __bind(this.addScripts, this);
this.addImages = __bind(this.addImages, this);
this.addScript = __bind(this.addScript, this);
this.addSound = __bind(this.addSound, this);
this.addImage = __bind(this.addImage, this);
this.joinPath = __bind(this.joinPath, this);
this.resources = {
stage1_images: [],
stage1_audio: [],
stage1_scripts: [],
images: [],
audio: [],
scripts: []
};
this.resource_objects = {
images: {},
audio: {},
scripts: {}
};
}
ResourceManager.prototype.joinPath = function(path) {
if (this.base_path === "") {
return path;
} else {
return util.stripRight(this.base_path, "/") + "/" + path;
}
};
ResourceManager.prototype.addImage = function(path, first_stage) {
if (first_stage == null) {
first_stage = false;
}
if (first_stage) {
return this.resources.stage1_images.push(this.joinPath(path));
} else {
return this.resources.images.push(this.joinPath(path));
}
};
ResourceManager.prototype.addSound = function(path, first_stage) {
if (first_stage == null) {
first_stage = false;
}
if (first_stage) {
return this.resources.stage1_audio.push(this.joinPath(path));
} else {
return this.resources.audio.push(this.joinPath(path));
}
};
ResourceManager.prototype.addScript = function(path, first_stage) {
if (first_stage == null) {
first_stage = false;
}
if (first_stage) {
return this.resources.stage1_scripts.push(this.joinPath(path));
} else {
return this.resources.scripts.push(this.joinPath(path));
}
};
ResourceManager.prototype.addImages = function(paths, first_stage) {
var path, _i, _len, _results;
if (first_stage == null) {
first_stage = false;
}
_results = [];
for (_i = 0, _len = paths.length; _i < _len; _i++) {
path = paths[_i];
_results.push(this.addImage(path, first_stage));
}
return _results;
};
ResourceManager.prototype.addScripts = function(paths, first_stage) {
var path, _i, _len, _results;
if (first_stage == null) {
first_stage = false;
}
_results = [];
for (_i = 0, _len = paths.length; _i < _len; _i++) {
path = paths[_i];
_results.push(this.addScript(path, first_stage));
}
return _results;
};
ResourceManager.prototype.addSounds = function(paths, first_stage) {
var path, _i, _len, _results;
if (first_stage == null) {
first_stage = false;
}
_results = [];
for (_i = 0, _len = paths.length; _i < _len; _i++) {
path = paths[_i];
_results.push(this.addSound(path, first_stage));
}
return _results;
};
ResourceManager.prototype.getImage = function(path) {
console.log("objs", this.resource_objects);
console.log("path", path);
return this.resource_objects.images[this.joinPath(path)];
};
ResourceManager.prototype.prepare = function(finished_callback) {
if (finished_callback == null) {
finished_callback = (function() {});
}
return pass;
};
ResourceManager.prototype.preload = function(progress_callback, finished_callback) {
var image, obj, _i, _len, _ref;
if (progress_callback == null) {
progress_callback = (function() {});
}
if (finished_callback == null) {
finished_callback = (function() {});
}
_ref = this.resources.images;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
image = _ref[_i];
obj = document.createElement("img");
obj.src = image;
this.resource_objects.images[image] = obj;
}
return finished_callback();
};
return ResourceManager;
})();
Scene = (function() {
function Scene(engine, name) {
this.engine = engine;
this.name = name;
this.changeScene = __bind(this.changeScene, this);
this.createInstance = __bind(this.createInstance, this);
this.checkMouseCollisions = __bind(this.checkMouseCollisions, this);
this.redraw = __bind(this.redraw, this);
this.iteration = __bind(this.iteration, this);
this.checkActive = __bind(this.checkActive, this);
this.removeTargetSurface = __bind(this.removeTargetSurface, this);
this.addTargetSurface = __bind(this.addTargetSurface, this);
this.instances = {};
this.surfaces = [];
this.dirty = true;
this.last_instance_id = 100;
this.active = false;
this.width = 800;
this.height = 600;
this.last_width = 800;
this.last_height;
}
Scene.prototype.addTargetSurface = function(surface) {
this.surfaces.push(surface);
this.engine.updateCanvasSize(surface, this.width, this.height);
$(surface).on("mousemove.radium", (function(_this) {
return function(event) {
var canvas_pos;
canvas_pos = surface.getBoundingClientRect();
_this.mouse_x = Math.floor(event.clientX - canvas_pos.left);
_this.mouse_y = Math.floor(event.clientY - canvas_pos.top);
$("#debug").html("" + _this.mouse_x + " / " + _this.mouse_y);
return _this.checkMouseCollisions();
};
})(this));
return this.checkActive();
};
Scene.prototype.removeTargetSurface = function(surface) {
this.surfaces = this.surfaces.filter(function(obj) {
return obj !== surface;
});
$(surface).off("mousemove.radium");
return this.checkActive();
};
Scene.prototype.checkActive = function() {
return this.active = this.surfaces.length > 0;
};
Scene.prototype.iteration = function() {
var id, instance, surface, _i, _len, _ref, _ref1, _ref2;
if (this.width !== this.last_width || this.height !== this.last_height) {
_ref = this.surfaces;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
surface = _ref[_i];
this.engine.updateCanvasSize(surface, this.width, this.height);
}
_ref1 = [this.width, this.height], this.last_width = _ref1[0], this.last_height = _ref1[1];
}
_ref2 = this.instances;
for (id in _ref2) {
instance = _ref2[id];
if (instance.callEvent("step")) {
this.dirty = true;
}
}
if (this.dirty) {
this.redraw();
return this.dirty = false;
}
};
Scene.prototype.redraw = function() {
var ctx, id, instance, surface, _i, _len, _ref, _results;
_ref = this.surfaces;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
surface = _ref[_i];
ctx = this.engine.getSurface(surface);
ctx.clearRect(0, 0, surface.width, surface.height);
_results.push((function() {
var _ref1, _results1;
_ref1 = this.instances;
_results1 = [];
for (id in _ref1) {
instance = _ref1[id];
_results1.push(instance.callEvent("draw", {
surface: surface
}));
}
return _results1;
}).call(this));
}
return _results;
};
Scene.prototype.checkMouseCollisions = function() {
var id, instance, _ref, _results;
_ref = this.instances;
_results = [];
for (id in _ref) {
instance = _ref[id];
if (instance.checkPointCollision(this.mouseX, this.mouseY)) {
_results.push(instance.callEvent("mouseover"));
} else {
_results.push(void 0);
}
}
return _results;
};
Scene.prototype.createInstance = function(object, x, y) {
var id, instance;
if (x == null) {
x = 0;
}
if (y == null) {
y = 0;
}
id = this.last_instance_id += 1;
instance = window.Object.create(this.engine.getObject(object));
instance.x = x;
instance.y = y;
instance.id = id;
instance.scene = this;
this.instances[id] = instance;
instance.callEvent("create");
return instance;
};
Scene.prototype.changeScene = function(scene) {
return pass;
};
return Scene;
})();
Sound = (function() {
function Sound() {}
return Sound;
})();
Sprite = (function() {
function Sprite(engine, name, image) {
this.engine = engine;
this.name = name;
this.image = image;
this.getSize = __bind(this.getSize, this);
this.draw = __bind(this.draw, this);
pass;
}
Sprite.prototype.draw = function(x, y, options, surface) {
var _ref;
if (options == null) {
options = {};
}
if (surface == null) {
surface = "";
}
surface = this.engine.getSurface(surface);
surface.globalAlpha = (_ref = options.alpha) != null ? _ref : 1;
return surface.drawImage(this.image, x, y);
};
Sprite.prototype.getSize = function() {
return {
width: this.image.width,
height: this.image.height
};
};
return Sprite;
})();
Tileset = (function() {
function Tileset(engine, name, image, tile_width, tile_height) {
this.engine = engine;
this.name = name;
this.image = image;
this.tile_width = tile_width;
this.tile_height = tile_height;
this.tile = __bind(this.tile, this);
this.tiles = {};
}
Tileset.prototype.tile = function(x, y, precise, w, h) {
var key, _ref;
if (precise == null) {
precise = false;
}
if (w == null) {
w = 0;
}
if (h == null) {
h = 0;
}
key = ("" + x + "/" + y + "/" + w + "/" + h + "/") + (precise ? 1 : 0);
return (_ref = this.tiles[key]) != null ? _ref : tiles[key] = new TilesetTile(this.engine, this, x, y, precise, w, h);
};
return Tileset;
})();
TilesetTile = (function() {
function TilesetTile(engine, tileset, x, y, precise, w, h) {
this.engine = engine;
this.tileset = tileset;
this.x = x;
this.y = y;
this.precise = precise != null ? precise : false;
this.w = w != null ? w : 0;
this.h = h != null ? h : 0;
this.getSize = __bind(this.getSize, this);
this.draw = __bind(this.draw, this);
pass;
}
TilesetTile.prototype.draw = function(x, y) {
var source_h, source_w, source_x, source_y, surface;
if (this.precise) {
source_x = this.x;
source_y = this.y;
source_w = this.w;
source_h = this.h;
} else {
source_x = this.x * this.tileset.tile_width;
source_y = this.y * this.tileset.tile_height;
source_w = this.tileset.tile_width;
source_h = this.tileset.tile_height;
}
surface = this.engine.getSurface();
return surface.drawImage(source_x, source_y, source_width, source_height, x, y);
};
TilesetTile.prototype.getSize = function() {
if (this.precise) {
return {
width: this.w,
height: this.h
};
} else {
return {
width: this.tileset.tile_width,
height: this.tileset.tile_height
};
}
};
return TilesetTile;
})();
util = {
stripRight: function(string, character) {
return string.replace(new RegExp(character + "*$", "g"), "");
},
unpackElement: function(element) {
console.log(element);
if (element instanceof jQuery) {
return element[0];
} else {
return element;
}
}
};
window.ResourceManager = ResourceManager;
window.Engine = Engine;
}).call(this);

14
gemswap.html

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<title>Gemswap</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="compiled/radium.js"></script>
<script src="gemswap/gemswap.js"></script>
<link rel="stylesheet" href="gemswap/gemswap.css">
</head>
<body>
<canvas id="gamecanvas"></canvas>
<div id="debug"></div>
</body>
</html>

BIN
gemswap/assets/images/diamond.png

After

Width: 64  |  Height: 64  |  Size: 3.8 KiB

BIN
gemswap/assets/images/diamond_inverted.png

After

Width: 64  |  Height: 64  |  Size: 3.8 KiB

BIN
gemswap/assets/images/diamond_shimmer.png

After

Width: 93  |  Height: 93  |  Size: 5.3 KiB

94
gemswap/core.coffee

@ -0,0 +1,94 @@
$(->
manager = new ResourceManager("gemswap/assets")
engine = new Engine(manager)
###
# Configure pre-loading assets
manager.addImages([
"images/loading_screen.png"
], true)
###
# Configure game assets
manager.addImages([
"images/diamond.png"
"images/diamond_inverted.png"
"images/diamond_shimmer.png"
])
###
manager.addSounds([
"sfx/match.wav"
"sfx/swap.wav"
])
###
manager.prepare()
manager.preload(null, ->
engine.addCanvas($("#gamecanvas"));
scene = engine.createScene("main")
engine.createSprite("diamond", "images/diamond.png")
engine.createSprite("diamond_inverted", "images/diamond_inverted.png")
engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png")
diamond = engine.createObject("diamond")
diamond.sprite = engine.getSprite("diamond")
diamond.onCreate = ->
@fade_step = 0.045
@fade_current_step = @fade_step
@fade_value = 0
@fade_decay_current = 9999 # Disable by default
@fade_decay_max = 8
@shimmer_step = 0.006
@shimmer_current_step = @shimmer_step
@shimmer_value = 0
diamond.onStep = ->
if @fade_decay_current < Math.pow(2, @fade_decay_max)
@fade_value += @fade_current_step
max = 1.5 / @fade_decay_current
if @fade_value > Math.min(max, 1)
@fade_value = Math.min(max, 1)
@fade_current_step = -@fade_step
if @fade_value <= 0
@fade_value = 0
@fade_decay_current *= 1.5
@fade_current_step = @fade_step
@shimmer_value += @shimmer_current_step
if @shimmer_value > 0.7
@shimmer_value = 0.7
@shimmer_current_step = -@shimmer_step
if @shimmer_value < 0
@shimmer_value = 0
@shimmer_current_step = @shimmer_step
return true
diamond.onDraw = ->
@engine.getSprite("diamond_inverted").draw(@x, @y, {
alpha: @fade_value
})
@engine.getSprite("diamond_shimmer").draw(@x - 14, @y - 14, {
alpha: @shimmer_value
})
diamond.onMouseOver = ->
console.log("mouseover")
@fade_decay_current = 1
scene.createInstance(diamond, 20, 20)
engine.start()
)
)

12
gemswap/gemswap.css

@ -0,0 +1,12 @@
body
{
text-align: center;
background-color: #000000;
color: white;
}
#gamecanvas
{
width: 800px;
height: 600px;
}

85
gemswap/gemswap.js

@ -0,0 +1,85 @@
// Generated by CoffeeScript 1.7.1
(function() {
$(function() {
var engine, manager;
manager = new ResourceManager("gemswap/assets");
engine = new Engine(manager);
/*
* Configure pre-loading assets
manager.addImages([
"images/loading_screen.png"
], true)
*/
manager.addImages(["images/diamond.png", "images/diamond_inverted.png", "images/diamond_shimmer.png"]);
/*
manager.addSounds([
"sfx/match.wav"
"sfx/swap.wav"
])
*/
manager.prepare();
return manager.preload(null, function() {
var diamond, scene;
engine.addCanvas($("#gamecanvas"));
scene = engine.createScene("main");
engine.createSprite("diamond", "images/diamond.png");
engine.createSprite("diamond_inverted", "images/diamond_inverted.png");
engine.createSprite("diamond_shimmer", "images/diamond_shimmer.png");
diamond = engine.createObject("diamond");
diamond.sprite = engine.getSprite("diamond");
diamond.onCreate = function() {
this.fade_step = 0.045;
this.fade_current_step = this.fade_step;
this.fade_value = 0;
this.fade_decay_current = 9999;
this.fade_decay_max = 8;
this.shimmer_step = 0.006;
this.shimmer_current_step = this.shimmer_step;
return this.shimmer_value = 0;
};
diamond.onStep = function() {
var max;
if (this.fade_decay_current < Math.pow(2, this.fade_decay_max)) {
this.fade_value += this.fade_current_step;
max = 1.5 / this.fade_decay_current;
if (this.fade_value > Math.min(max, 1)) {
this.fade_value = Math.min(max, 1);
this.fade_current_step = -this.fade_step;
}
if (this.fade_value <= 0) {
this.fade_value = 0;
this.fade_decay_current *= 1.5;
this.fade_current_step = this.fade_step;
}
}
this.shimmer_value += this.shimmer_current_step;
if (this.shimmer_value > 0.7) {
this.shimmer_value = 0.7;
this.shimmer_current_step = -this.shimmer_step;
}
if (this.shimmer_value < 0) {
this.shimmer_value = 0;
this.shimmer_current_step = this.shimmer_step;
}
return true;
};
diamond.onDraw = function() {
this.engine.getSprite("diamond_inverted").draw(this.x, this.y, {
alpha: this.fade_value
});
return this.engine.getSprite("diamond_shimmer").draw(this.x - 14, this.y - 14, {
alpha: this.shimmer_value
});
};
diamond.onMouseOver = function() {
console.log("mouseover");
return this.fade_decay_current = 1;
};
scene.createInstance(diamond, 20, 20);
return engine.start();
});
});
}).call(this);

349
gemswap/source/diamond.svg

@ -0,0 +1,349 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="64"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="diamond.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient3965">
<stop
id="stop3967"
offset="0"
style="stop-color:#6e6e6e;stop-opacity:1;" />
<stop
id="stop3969"
offset="1"
style="stop-color:#dfdfdf;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient3912">
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="0"
id="stop3914" />
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="1"
id="stop3916" />
</linearGradient>
<linearGradient
id="linearGradient3900">
<stop
style="stop-color:#b0b0b0;stop-opacity:1;"
offset="0"
id="stop3902" />
<stop
style="stop-color:#d5d5d5;stop-opacity:1;"
offset="1"
id="stop3904" />
</linearGradient>
<linearGradient
id="linearGradient3892">
<stop
style="stop-color:#c6c6c6;stop-opacity:1;"
offset="0"
id="stop3894" />
<stop
style="stop-color:#e3e3e3;stop-opacity:1;"
offset="1"
id="stop3896" />
</linearGradient>
<linearGradient
id="linearGradient3884">
<stop
style="stop-color:#d5d5d5;stop-opacity:1;"
offset="0"
id="stop3886" />
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="1"
id="stop3888" />
</linearGradient>
<linearGradient
id="linearGradient3876">
<stop
style="stop-color:#888888;stop-opacity:1;"
offset="0"
id="stop3878" />
<stop
style="stop-color:#d0d0d0;stop-opacity:1;"
offset="1"
id="stop3880" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3876"
id="linearGradient3882"
x1="7.8346815"
y1="14.376256"
x2="33.076497"
y2="14.376256"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3884"
id="linearGradient3890"
x1="6.423687"
y1="14.376256"
x2="34.487492"
y2="14.376256"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3892"
id="linearGradient3898"
x1="6.5624604"
y1="14.376256"
x2="34.348718"
y2="14.376256"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3918"
x1="43.6875"
y1="8.953125"
x2="66.375"
y2="8.953125"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3926"
x1="60.4375"
y1="32.078125"
x2="69.1875"
y2="32.078125"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3934"
x1="43.78125"
y1="55.109375"
x2="66.3125"
y2="55.109375"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3936"
x1="17.6875"
y1="64.828125"
x2="46.28125"
y2="64.828125"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3938"
x1="-2.3125"
y1="55.109375"
x2="20.1875"
y2="55.109375"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3965"
id="linearGradient3940"
x1="-5.1875"
y1="32.015625"
x2="3.5625"
y2="32.015625"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3942"
x1="-2.34375"
y1="8.921875"
x2="20.25"
y2="8.921875"
gradientUnits="userSpaceOnUse" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient3912"
id="linearGradient3944"
x1="17.75"
y1="-0.828125"
x2="46.1875"
y2="-0.828125"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="8"
inkscape:cx="24.807647"
inkscape:cy="29.688085"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:snap-global="false"
inkscape:window-width="1920"
inkscape:window-height="1102"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1">
<inkscape:grid
type="axonomgrid"
id="grid2985"
units="mm"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true"
originx="1.5mm"
gridanglez="30"
spacingy="1mm" />
</sodipodi:namedview>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-988.36218)">
<g
id="g3847"
transform="matrix(0.85711544,0,0,0.85711544,4.5723061,145.794)"
style="fill:none">
<path
id="path3845"
d="M 56.587204,42.417389 66.25,46.34375 C 68.104505,41.926547 69.125,37.090921 69.125,32 c 0,-5.031989 -0.998476,-9.811516 -2.8125,-14.1875 l -9.538024,4.136393 6.079553,10.066627 -6.171771,10.244967 z"
style="fill:url(#linearGradient3926);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
transform="translate(0,988.36218)"
sodipodi:nodetypes="ccsccccc" />
<path
transform="translate(0,988.36218)"
id="path3841"
d="M 42.011366,56.683388 46.21875,66.28125 C 55.228514,62.535229 62.473949,55.33784 66.25,46.34375 l -9.655529,-3.939171 -2.784079,11.383864 z"
style="fill:url(#linearGradient3934);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc" />
<path
transform="translate(0,988.36218)"
id="path3837"
d="M -2.28125,17.71875 7.3975812,21.617517 10.233506,10.211557 22.053146,7.2878373 17.8125,-2.28125 c -9.0435732,3.7515633 -16.3211942,10.9673576 -20.09375,20 z"
style="fill:url(#linearGradient3942);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc" />
<path
transform="translate(0,988.36218)"
id="path3835"
d="M -2.25,46.3125 7.3526661,42.057344 7.2439397,41.968803 1.211504,31.978051 7.3808589,21.665733 7.4839819,21.629013 -2.28125,17.71875 C -4.1190691,22.119046 -5.125,26.9333 -5.125,32 c 0,5.080433 1.0277284,9.902612 2.875,14.3125 z"
style="fill:url(#linearGradient3940);fill-opacity:1.0;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccsc" />
<path
transform="translate(0,988.36218)"
id="path3833"
d="M 21.656492,56.575074 10.211557,53.766494 7.2697938,42.027956 -2.25,46.3125 c 3.7690881,8.997733 10.9938676,16.215755 20,19.96875 z"
style="fill:url(#linearGradient3938);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccc" />
<path
transform="translate(0,988.36218)"
id="path3831"
d="M 21.598084,56.58047 17.75,66.28125 c 4.39296,1.830615 9.193789,2.84375 14.25,2.84375 5.045723,0 9.833135,-1.020328 14.21875,-2.84375 l -4.245957,-9.685078 -0.16355,0.09021 L 32,62.810445 21.829209,56.607815 z"
style="fill:url(#linearGradient3936);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccscccccc" />
<path
transform="translate(0,988.36218)"
id="path3813"
d="M 46.125,-2.3125 C 41.763756,-4.1122099 37.011013,-5.125 32,-5.125 c -5.035235,0 -9.809238,1.0275071 -14.1875,2.84375 L 21.957912,7.2456166 32,1.211504 42.421916,7.3735829 z"
style="fill:url(#linearGradient3944);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="csccccc" />
<path
transform="translate(0,988.36218)"
id="path3790"
d="m 46.125,-2.3125 -3.721314,9.7250576 0.25847,0.053385 11.104338,2.7456144 2.918233,11.698922 0.04948,0.05859 L 66.3125,17.8125 C 62.541859,8.7165519 55.228257,1.4440479 46.125,-2.3125 z"
style="fill:url(#linearGradient3918);fill-opacity:1;stroke:none"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cccccccc" />
</g>
<g
id="g3798"
transform="matrix(0.71188475,0,0,0.71188475,10.469688,294.51761)">
<path
transform="matrix(3.1896315,0,0,3.1896315,-35.001692,973.7547)"
d="m 20.537579,1.8360243 3.844595,3.2331978 4.998673,0.4977264 0.432323,5.0047555 3.182651,3.886542 -3.233198,3.844594 -0.497726,4.998674 -5.004755,0.432323 -3.886542,3.182651 -3.844595,-3.233198 -4.998674,-0.497727 -0.432323,-5.004755 -3.1826504,-3.886542 3.2331974,-3.844594 0.497727,-4.9986742 5.004755,-0.432323 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="-1.1715592"
sodipodi:arg1="-1.5642583"
sodipodi:r2="10.101433"
sodipodi:r1="12.5405"
sodipodi:cy="14.376256"
sodipodi:cx="20.455589"
sodipodi:sides="8"
id="path3796"
style="fill:url(#linearGradient3890);fill-opacity:1;stroke:none"
sodipodi:type="star" />
<path
transform="matrix(2.4959218,0,0,2.4959218,-20.811454,983.72765)"
d="m 20.515484,6.8463457 4.969153,-4.3608663 0.337755,6.6086777 6.59732,0.4301236 -4.434212,4.9118693 4.360866,4.969153 -6.608678,0.337755 -0.430123,6.59732 -4.91187,-4.434212 -4.969153,4.360867 -0.337755,-6.608678 -6.59732,-0.430124 4.434212,-4.911869 L 8.5648127,9.3472086 15.17349,9.0094536 15.603614,2.4121337 z"
inkscape:randomized="0"
inkscape:rounded="0"
inkscape:flatsided="false"
sodipodi:arg2="-1.1706745"
sodipodi:arg1="-1.5628423"
sodipodi:r2="12.910534"
sodipodi:r1="7.5301485"
sodipodi:cy="14.376256"
sodipodi:cx="20.455589"
sodipodi:sides="8"
id="path3794"
style="fill:url(#linearGradient3898);fill-opacity:1;stroke:none"
sodipodi:type="star" />
<path
sodipodi:type="star"
style="fill:url(#linearGradient3882);fill-opacity:1;stroke:none"
id="path3792"
sodipodi:sides="8"
sodipodi:cx="20.455589"
sodipodi:cy="14.376256"
sodipodi:r1="12.517542"
sodipodi:r2="11.660198"
sodipodi:arg1="-1.5658343"
sodipodi:arg2="-1.1731352"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="m 20.517701,1.8588682 8.832938,3.7101779 3.622338,8.8693219 -3.710178,8.832938 -8.869322,3.622338 L 11.56054,23.183466 7.9382015,14.314144 11.648379,5.4812063 z"
transform="matrix(1.4992405,0,0,1.4992405,-0.42375043,998.05627)" />
</g>
</g>
</svg>

416
gemswap/source/diamond_inverted.svg

@ -0,0 +1,416 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="64"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="diamond_inverted.svg">
<defs
id="defs4">
<linearGradient
id="linearGradient4077">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4081" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4079" />
</linearGradient>
<linearGradient
id="linearGradient4069">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4073" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4071" />
</linearGradient>
<linearGradient
id="linearGradient4061">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4065" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4063" />
</linearGradient>
<linearGradient
id="linearGradient4053">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4057" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4055" />
</linearGradient>
<linearGradient
id="linearGradient4045">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4049" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4047" />
</linearGradient>
<linearGradient
id="linearGradient4037">
<stop
style="stop-color:#f6f6f6;stop-opacity:1;"
offset="0"
id="stop4041" />
<stop
style="stop-color:#959595;stop-opacity:1;"
offset="1"
id="stop4039" />
</linearGradient>
<linearGradient
id="linearGradient3965">
<stop
style="stop-color:#dfdfdf;stop-opacity:1;"
offset="0"
id="stop3969" />
<stop
style="stop-color:#6e6e6e;stop-opacity:1;"
offset="1"
id="stop3967" />
</linearGradient>
<linearGradient
id="linearGradient3912">
<stop
id="stop3916"
offset="0"
style="stop-color:#f6f6f6;stop-opacity:1;" />
<stop
id="stop3914"
offset="1"
style="stop-color:#959595;stop-opacity:1;" />
</linearGradient>
<linearGradient
id="linearGradient3900">
<stop
style="stop-color:#b0b0b0;stop-opacity:1;"
offset="0"
id="stop3902" />
<stop
style="stop-color:#d5d5d5;stop-opacity:1;"
offset="1"
id="stop3904" />
</linearGradient>
<linearGradient
id="linearGradient3892">
<stop
id="stop3896"
offset="0"
style="stop-color:#e3e3e3;stop-opacity:1;" />
<stop
id="stop3894"
offset="1"
style="stop-color:#c6c6c6;stop-op