1
0
Fork 0
The topic of js13kgames competition in 2016 is glitch.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
André Jaenisch 66bb6feddc Rebuild game.zip 6 years ago
css Added trafficLightView to map. 6 years ago
dist Spawn cars on click of map. 6 years ago
js Spawn cars on click of map. 6 years ago
spec Spawn cars on click of map. 6 years ago
transpiled Spawn cars on click of map. 6 years ago
.gitignore Track dist directory, because GitHub.io 6 years ago
Gruntfile.coffee Spawn cars on click of map. 6 years ago
LICENSE.txt Added file extension to LICENSE 6 years ago
README.md Added trafficLightView to map. 6 years ago
app.html Spawn cars on click of map. 6 years ago
dependencies.dot Typo. 6 years ago
dependency-graph.png Typo. 6 years ago
game.zip Rebuild game.zip 6 years ago
index.html Street and similiar views extend AbstractSvgView now. 6 years ago
package.json Use dot and grunt-graphviz to model dependency tree. 6 years ago

README.md

js13kgames 2016

The topic of js13kgames competition in 2016 is glitch.

Live demo

https://ryuno-ki.github.io/js13kgames-2016/

Dependency tree

Dependency tree

Left to do

  • Map algorithm
  • Data binding (car crosses tiles)
  • Cosmic radiation on traffic light (aka "Glitch")
  • Scores
  • Sharing scores on twitter
  • Easter egg tiles

Lessens learned

Creating SVG Elements through JavaScript

In case you ever want to create <svg>s on the fly and wonder, why the heck the viewBox property isn't displayed properly (that is, appears lowercased in web browser) it is because you need to use the following:

var svgNs = 'http://www.w3.org/2000/svg';
var svgNode = document.createElementNS(svgNs, 'svg');
svgNode.setAttribute('viewBox', '0 0 100 100');
svgNode.setAttribute('xmlns', svgNs);  // This may be not needed
svgNode.setAttribute('version', svgNs);  // May be superfluos
svgNode.setAttribute('height', '60');  // Default height in DOM
svgNode.setAttribute('width', '60');  // Default width in DOM

// createElementNS is needed for all descendors of `svg` nodes as well:
var g = document.createElementNS(svgNs, 'g');  // "group" element
svgNode.appendChild(g);

SVG is an XML format. For XML you need to declare where to find the definitions of its elements. SVG has its stated at the URL in svgNs above.

Removing whitespace between SVG nodes

Once you place several <svg>s next to each other respectively on top, you'll notice that there is a small whitespace gap between them.

That is caused by <svg> rendered in DOM as display: inline;.

There are several solutions described in this CSS-Tricks article [citation needed]. I went for style="display:block;float:left;" them (in CSS).

Map generation

Don't underestimate map algorithms.

License

GPL v3