docs + cleanup and tweaks...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

simplesnake/simplesnake.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Timestamp: 20170421204925
+# Timestamp: 20170421232507
 
 CACHE:
 simplesnake.html

simplesnake/simplesnake.js

@@ -38,9 +38,22 @@
 *
 *
 * Goals:
-* 	- Show that the "intuitive" is not the only approach
+* 	- Show that the "intuitive" is not the only approach or is not 
-* 	- Show that the "intuitive" is not allways the simplest
+* 		necessarily the simplest...
 * 	- Show one approach to a scalable yet simple architecture
+* 	- Illustrate several programming patterns and approaches:
+* 		- concatinative 
+* 			- see how Snake methods are implemented and how they are used
+* 				in setup(..)...
+* 			- see Snake.call(..) and Snake.apply(..) methods and how they
+* 				enable extending the code inline...
+* 		- meta-programming 
+* 			see: makeEvent(..)
+* 		- event-oriented-programming
+* 			see Snake events and how they are used in setup(..) to extend
+* 			the basic game logic...
+* 	- Show the use of several HTML5/CSS3 features including appCache, 
+* 		touch events and keyboard events and handling...
 *
 *
 *
@@ -109,6 +122,25 @@ var Snake = {
 		y = y < 0 ? (y + h) : y
 		return { x: x, y: y }
 	},
+
+	// system...
+	setup: function(field, size, interval){
+		this.config.field_size = size || this.config.field_size
+		this.config.interval = interval || this.config.interval
+		field = field || this._field
+		field = this._field = typeof(field) == typeof('str') ? document.querySelector(field)
+			: field
+		this._make_field()
+		this._cells = [].slice.call(field.querySelectorAll('td'))
+		this.field_size = {
+			width: field.querySelector('tr').querySelectorAll('td').length,
+			height: field.querySelectorAll('tr').length,
+		}
+		this.players = {}
+		return this
+			.appleEaten(null)
+			.snakeKilled(null)
+	},
 	_make_field: function(w){
 		var l = []
 		l.length = w || this.config.field_size
@@ -284,23 +316,6 @@ var Snake = {
 	gameStopped: makeEvent('__stopHandlers'),
 
 	// actions...
-	setup: function(field, size, interval){
-		this.config.field_size = size || this.config.field_size
-		this.config.interval = interval || this.config.interval
-		field = field || this._field
-		field = this._field = typeof(field) == typeof('str') ? document.querySelector(field)
-			: field
-		this._make_field()
-		this._cells = [].slice.call(field.querySelectorAll('td'))
-		this.field_size = {
-			width: field.querySelector('tr').querySelectorAll('td').length,
-			height: field.querySelectorAll('tr').length,
-		}
-		this.players = {}
-		return this
-			.appleEaten(null)
-			.snakeKilled(null)
-	},
 	start: function(t){
 		this.__timer = this.__timer 
 			|| setInterval(this._tick.bind(this), t || this.config.interval || 200)