5 ms·

Show HN: An isometric marble run build in CoffeeScript

141 points by robert-boehnke 16y ago

ullrich 16y ago
the sources can be found on github http://github.com/robb/Marbleo.us http://github.com/robb/Marbleo.us
grantbachman 16y ago
I think it's pretty cool, but might I suggest loading a fully built track as the default?
- DanielRibeiro 16y ago
  I found it is. Just click on a green arrow after test map.
  - grantbachman 16y ago
    My mistake, the fact that they have the ability to jump over distances is even cooler. Nice touch.
duck 16y ago
Turn your design into something real: http://woodgears.ca/marbles/run.html http://woodgears.ca/marbles/run.html or http://woodgears.ca/marbles/modular.html http://woodgears.ca/marbles/modular.html
jashkenas 16y ago
Direct links to some of the interesting source: https://github.com/robb/Marbleo.us/blob/master/src/js/Block.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Block.... https://github.com/robb/Marbleo.us/blob/master/src/js/Path.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Path.c... https://github.com/robb/Marbleo.us/blob/master/src/js/Game.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Game.c...
jonty 16y ago
Building this successfully destroyed all my productivity. http://bit.ly/g11Q6h http://bit.ly/g11Q6h
- d0m 16y ago
  Playing with it destroyed a bit of my productivity ;) I like the ending of the map.
natesm 16y ago
It's a little hard to tell where the marble is in "3d" space. I think it might be a little better if it was even lighter while "underground". A lot of isometric games use shadows to show exactly where objects are - that could help as well. Edit: now I figured out what the big problem is: you can't see where it's headed when it's underground. In Roller Coaster Tycoon, when your train went into a tunnel, there was a sort of transparent view of the underground track. I think having that here would make a lot of sense.
- robert-boehnke 16y ago
  thanks for pointing that out, that does seem like a good idea and I will look into that
dengzhi 16y ago
i don't drink coffee. kthx.
peregrine 16y ago
This basically does not run at all in my browser. (Chrome 11.0.696.44 beta)
- robert-boehnke 16y ago
  I have had some trouble with it on my Windows netbook with 2d canvas acceleration enabled, could that be it?
syntsalt 16y ago
Very cool. What does isometric mean? Is it like Eschere drawing, i.e. marble goes bak up the hill?
- ejames 16y ago
  "Isometric" refers to the style of the 3D viewpoint. The x and y axis are presented at a 45° angle, and the camera looks 'down' on the surface diagonally. Escher's work is an example of how an isometric perspective can be manipulated to present an impossible object, such as a staircase that appears to go upwards even though the 'top' stair is connected to the 'bottom'.
- hrasm 16y ago
  Isometric view refers to the way in which 3D objects are represented on a 2D plane. This is the most preferred view in drawing building plans and the like. The other method is called Perspective view in which parallel lines on a 3D object converge to a point on the 2D representation. For e.g., a long-shot picture of a straight railroad track. This is what we usually see in pictures, paintings and the like.
neimado 16y ago
I doubt it matters that you did this in CoffeeScript at all. so what.
indrora 16y ago
my little thing: http://j.mp/etrO8H http://j.mp/etrO8H
a1k0n 16y ago
I wish I could just buy blocks like these for my son. Bandai Spacewarp-type-things are a little too much yet, and the marble toys we have are pretty lame in comparison to this.
- robert-boehnke 16y ago
  You can: They were based off marble blocks built by a Swiss company called Cuboro: http://cuboro.ch/en/Info/Products http://cuboro.ch/en/Info/Products They are not very cheap though.
  - corin_ 16y ago
    I grew up with a set of those (not sure if from that company or just a really similar product), and to me it represents a nicer time when toys for children were... can't quite find the right way to put it, but overall nicer. Loading the marbleo.us page instantly took be back in my mind, so thankyou :)
waqf 16y ago
The very first thing I thought to do when I saw the app was to widen my window (to 2000px or so) so that I wouldn't have to scroll to see all the available blocks. But the block selector doesn't resize with the window. Please could you fix that?
bni 16y ago
I feel my curly-brace intertia softening a bit lately, so Im considering converting Orbium to CoffeScript. The game has "classes", like this: https://github.com/bni/orbium/blob/gh-pages/js/tile.js https://github.com/bni/orbium/blob/gh-pages/js/tile.js https://github.com/bni/orbium/blob/gh-pages/js/inspector.js https://github.com/bni/orbium/blob/gh-pages/js/inspector.js So I think it will translate well. Anyone with CoffeScript experience that can share what its like to convert over a codebase from JS -> CoffeScript?
- jashkenas 16y ago
  Hah, mostly: delete, delete, delete. http://www.screenr.com/xd0 http://www.screenr.com/xd0 Fair warning, the syntax in that screencast is a bit out of date. For your codebase, instead of having to "call super" manually: orbium.Inspector = function(count, xnr, ynr, vari, col) { this.setBase = function() { orbium.Tile.prototype.setBase.call(this, "modtile"); }; } It'll look more like: class orbium.Inspector extends orbium.Tile constructor: (count, xnr, ynr, vari, col) -> ... setBase: -> super "modtile"
  - bni 16y ago
    Thanks, probably some search and replace will do most of the boring stuff. Since it follows the classical pattern already the structure of the code will be mostly the same, but with a lot less dense syntax :-) Im concerned about adding a compile step, since I like the "just reload" workflow a lot that you get with JS. text/coffeescript script tags could help out with this. But from the the CoffeScript site: "it's not recommended for serious use". Why not?
    - jashkenas 16y ago
      Check out the --watch flag, which will give you the same "just reload" workflow you have with JS. Using `text/coffeescript` script tags works, but isn't recommended because you're effectively programming through an eval(), and debugging becomes more difficult.
ullrich 16y ago
this is quite cool: http://marbleo.us/#PwAAAD8AAAA_AAAAPwAAAAMAAAAoAAAAKgAAAD8AAAAfAgEAPQAAAj8AAAADAAAAKAAAACoAAAA_AAAALwIBAD4AAAI_AAAAAwAAACgAAAAqAAAAAAAAABgCAQAVAAACPQAAAAMAAAAoAAAAKgAAAAAAAAAsAgEAFgAAAgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_wAABz8AAAA_AAAAPwAAAD8AAAArAAAAKgAAACoAAAA_AAAAAwEBADwAAAE_AAAAKwAAACoAAAAqAAAAAgAAAAQCAQA8AAACPwAAACsAAAAqAAAAKgAAAAAAAAAYAwEAAQAAAwAAAAAAAAAAAAAAABgHCAAAAAAABAMBABQAAAMBAAAAAAAAAAAAAAAAAAAAAAAAACACAQAWAAACAQAAAAAAAAAAAAAAAAAAADAHCQADAAADFAAAAAEAAAAAAAAAAAAAAAAAAAAqAAAAGgcIAD0AAAMrAAAAKgAAACoAAAAqAAAAKgAAABoDAQA9AAADKwAAACoAAAAqAAAAKgAAACoAAAAiAgEAPgAAAisAAAAqAAAAKgAAACoAAAACAAAABAIGABQAAAIpAAAAKgAAAP8AAAIdAgUAGQMBAv8AAAUUAQUAMQIBARcAAAIBAAAAAAAAAAAAAAAAAAAAMAIGABcAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACoAAAAaAgEAPQAAAisAAAAqAAAAKgAAACoAAAAqAAAAGgMBAD0AAAMrAAAAKgAAACoAAAAqAAAAKgAAADICAQA_AAACKwAAACoAAAAqAAAAKgAAAP8AAAcIAgUAAAAAAv8AAAUVAQQAFQAAAQEAAAAAAAAAAAAAAAAAAAAAAAAAIQIFABYAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACoAAAAKAgEAPAAAAisAAAAqAAAAKgAAACoAAAAqAAAAMgIBAD8AAAIrAAAAKgAAACoAAAAqAAAA_wAABxQAAAAVAAAAFQAAACkBAQD_AAADHAIFABUAAAL_AAAFIAIFABYAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACkBBQAWAAABFQAAAAEAAAAAAAAAAAAAAAAAAAAqAQEA_wAABh0CAQApAAACKgAAACoAAAAqAAAAKgAAACoAAAA-AQEAKwAAASoAAAAqAAAAKgAAACoAAAAqAAAAPgEBABcAAAEVAAAADQICACgAAAIqAAAAKgAAAAUDAQAUAAADFQAAADEHCQArAAADKgAAACoAAAA1AgUAFwAAAhUAAAABAAAAAAAAACgAAAAqAAAAKQEEABYAAAEVAAAAAQAAAAAAAAAoAAAAKgAAAAYCAQD_AAAGNgIBACsAAAIqAAAAKgAAACoAAAAqAAAAKgAAABUAAAAVAAAAKQAAACoAAAAqAAAAKgAAACoAAAAVAAAAFQAAACkAAAAqAAAAKgAAACoAAAAqAAAABQIEABQAAAIpAAAAKgAAACoAAAAqAAAAKgAAABUBBAAVAAABFQAAACkAAAAqAAAAKgAAACoAAAA1AgUAFwAAAhUAAAApAAAAAgAAACgAAAAqAAAA http://marbleo.us/#PwAAAD8AAAA_AAAAPwAAAAMAAAAoAAAAKgAAAD8AA...

141 points by robert-boehnke 16y ago

ullrich 16y ago

the sources can be found on github http://github.com/robb/Marbleo.us http://github.com/robb/Marbleo.us

grantbachman 16y ago

I think it's pretty cool, but might I suggest loading a fully built track as the default?

DanielRibeiro 16y ago
I found it is. Just click on a green arrow after test map.
- grantbachman 16y ago
  My mistake, the fact that they have the ability to jump over distances is even cooler. Nice touch.

duck 16y ago

Turn your design into something real: http://woodgears.ca/marbles/run.html http://woodgears.ca/marbles/run.html or http://woodgears.ca/marbles/modular.html http://woodgears.ca/marbles/modular.html

jashkenas 16y ago

Direct links to some of the interesting source: https://github.com/robb/Marbleo.us/blob/master/src/js/Block.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Block.... https://github.com/robb/Marbleo.us/blob/master/src/js/Path.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Path.c... https://github.com/robb/Marbleo.us/blob/master/src/js/Game.coffee https://github.com/robb/Marbleo.us/blob/master/src/js/Game.c...

jonty 16y ago

Building this successfully destroyed all my productivity. http://bit.ly/g11Q6h http://bit.ly/g11Q6h

d0m 16y ago
Playing with it destroyed a bit of my productivity ;) I like the ending of the map.

natesm 16y ago

It's a little hard to tell where the marble is in "3d" space. I think it might be a little better if it was even lighter while "underground". A lot of isometric games use shadows to show exactly where objects are - that could help as well. Edit: now I figured out what the big problem is: you can't see where it's headed when it's underground. In Roller Coaster Tycoon, when your train went into a tunnel, there was a sort of transparent view of the underground track. I think having that here would make a lot of sense.

robert-boehnke 16y ago
thanks for pointing that out, that does seem like a good idea and I will look into that

dengzhi 16y ago

i don't drink coffee. kthx.

peregrine 16y ago

This basically does not run at all in my browser. (Chrome 11.0.696.44 beta)

robert-boehnke 16y ago
I have had some trouble with it on my Windows netbook with 2d canvas acceleration enabled, could that be it?

syntsalt 16y ago

Very cool. What does isometric mean? Is it like Eschere drawing, i.e. marble goes bak up the hill?

ejames 16y ago
"Isometric" refers to the style of the 3D viewpoint. The x and y axis are presented at a 45° angle, and the camera looks 'down' on the surface diagonally. Escher's work is an example of how an isometric perspective can be manipulated to present an impossible object, such as a staircase that appears to go upwards even though the 'top' stair is connected to the 'bottom'.
hrasm 16y ago
Isometric view refers to the way in which 3D objects are represented on a 2D plane. This is the most preferred view in drawing building plans and the like. The other method is called Perspective view in which parallel lines on a 3D object converge to a point on the 2D representation. For e.g., a long-shot picture of a straight railroad track. This is what we usually see in pictures, paintings and the like.

neimado 16y ago

I doubt it matters that you did this in CoffeeScript at all. so what.

indrora 16y ago

my little thing: http://j.mp/etrO8H http://j.mp/etrO8H

a1k0n 16y ago

I wish I could just buy blocks like these for my son. Bandai Spacewarp-type-things are a little too much yet, and the marble toys we have are pretty lame in comparison to this.

robert-boehnke 16y ago
You can: They were based off marble blocks built by a Swiss company called Cuboro: http://cuboro.ch/en/Info/Products http://cuboro.ch/en/Info/Products They are not very cheap though.
- corin_ 16y ago
  I grew up with a set of those (not sure if from that company or just a really similar product), and to me it represents a nicer time when toys for children were... can't quite find the right way to put it, but overall nicer. Loading the marbleo.us page instantly took be back in my mind, so thankyou :)

waqf 16y ago

The very first thing I thought to do when I saw the app was to widen my window (to 2000px or so) so that I wouldn't have to scroll to see all the available blocks. But the block selector doesn't resize with the window. Please could you fix that?

bni 16y ago

I feel my curly-brace intertia softening a bit lately, so Im considering converting Orbium to CoffeScript. The game has "classes", like this: https://github.com/bni/orbium/blob/gh-pages/js/tile.js https://github.com/bni/orbium/blob/gh-pages/js/tile.js https://github.com/bni/orbium/blob/gh-pages/js/inspector.js https://github.com/bni/orbium/blob/gh-pages/js/inspector.js So I think it will translate well. Anyone with CoffeScript experience that can share what its like to convert over a codebase from JS -> CoffeScript?

jashkenas 16y ago
Hah, mostly: delete, delete, delete. http://www.screenr.com/xd0 http://www.screenr.com/xd0 Fair warning, the syntax in that screencast is a bit out of date. For your codebase, instead of having to "call super" manually: orbium.Inspector = function(count, xnr, ynr, vari, col) { this.setBase = function() { orbium.Tile.prototype.setBase.call(this, "modtile"); }; } It'll look more like: class orbium.Inspector extends orbium.Tile constructor: (count, xnr, ynr, vari, col) -> ... setBase: -> super "modtile"
- bni 16y ago
  Thanks, probably some search and replace will do most of the boring stuff. Since it follows the classical pattern already the structure of the code will be mostly the same, but with a lot less dense syntax :-) Im concerned about adding a compile step, since I like the "just reload" workflow a lot that you get with JS. text/coffeescript script tags could help out with this. But from the the CoffeScript site: "it's not recommended for serious use". Why not?
  - jashkenas 16y ago
    Check out the --watch flag, which will give you the same "just reload" workflow you have with JS. Using `text/coffeescript` script tags works, but isn't recommended because you're effectively programming through an eval(), and debugging becomes more difficult.

ullrich 16y ago

this is quite cool: http://marbleo.us/#PwAAAD8AAAA_AAAAPwAAAAMAAAAoAAAAKgAAAD8AAAAfAgEAPQAAAj8AAAADAAAAKAAAACoAAAA_AAAALwIBAD4AAAI_AAAAAwAAACgAAAAqAAAAAAAAABgCAQAVAAACPQAAAAMAAAAoAAAAKgAAAAAAAAAsAgEAFgAAAgEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_wAABz8AAAA_AAAAPwAAAD8AAAArAAAAKgAAACoAAAA_AAAAAwEBADwAAAE_AAAAKwAAACoAAAAqAAAAAgAAAAQCAQA8AAACPwAAACsAAAAqAAAAKgAAAAAAAAAYAwEAAQAAAwAAAAAAAAAAAAAAABgHCAAAAAAABAMBABQAAAMBAAAAAAAAAAAAAAAAAAAAAAAAACACAQAWAAACAQAAAAAAAAAAAAAAAAAAADAHCQADAAADFAAAAAEAAAAAAAAAAAAAAAAAAAAqAAAAGgcIAD0AAAMrAAAAKgAAACoAAAAqAAAAKgAAABoDAQA9AAADKwAAACoAAAAqAAAAKgAAACoAAAAiAgEAPgAAAisAAAAqAAAAKgAAACoAAAACAAAABAIGABQAAAIpAAAAKgAAAP8AAAIdAgUAGQMBAv8AAAUUAQUAMQIBARcAAAIBAAAAAAAAAAAAAAAAAAAAMAIGABcAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACoAAAAaAgEAPQAAAisAAAAqAAAAKgAAACoAAAAqAAAAGgMBAD0AAAMrAAAAKgAAACoAAAAqAAAAKgAAADICAQA_AAACKwAAACoAAAAqAAAAKgAAAP8AAAcIAgUAAAAAAv8AAAUVAQQAFQAAAQEAAAAAAAAAAAAAAAAAAAAAAAAAIQIFABYAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACoAAAAKAgEAPAAAAisAAAAqAAAAKgAAACoAAAAqAAAAMgIBAD8AAAIrAAAAKgAAACoAAAAqAAAA_wAABxQAAAAVAAAAFQAAACkBAQD_AAADHAIFABUAAAL_AAAFIAIFABYAAAIVAAAAAQAAAAAAAAAAAAAAAAAAACkBBQAWAAABFQAAAAEAAAAAAAAAAAAAAAAAAAAqAQEA_wAABh0CAQApAAACKgAAACoAAAAqAAAAKgAAACoAAAA-AQEAKwAAASoAAAAqAAAAKgAAACoAAAAqAAAAPgEBABcAAAEVAAAADQICACgAAAIqAAAAKgAAAAUDAQAUAAADFQAAADEHCQArAAADKgAAACoAAAA1AgUAFwAAAhUAAAABAAAAAAAAACgAAAAqAAAAKQEEABYAAAEVAAAAAQAAAAAAAAAoAAAAKgAAAAYCAQD_AAAGNgIBACsAAAIqAAAAKgAAACoAAAAqAAAAKgAAABUAAAAVAAAAKQAAACoAAAAqAAAAKgAAACoAAAAVAAAAFQAAACkAAAAqAAAAKgAAACoAAAAqAAAABQIEABQAAAIpAAAAKgAAACoAAAAqAAAAKgAAABUBBAAVAAABFQAAACkAAAAqAAAAKgAAACoAAAA1AgUAFwAAAhUAAAApAAAAAgAAACgAAAAqAAAA http://marbleo.us/#PwAAAD8AAAA_AAAAPwAAAAMAAAAoAAAAKgAAAD8AA...