forked from marijnh/Eloquent-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path07_elife.txt
More file actions
1187 lines (988 loc) · 39.2 KB
/
07_elife.txt
File metadata and controls
1187 lines (988 loc) · 39.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
:chap_num: 7
:prev_link: 06_object
:next_link: 08_error
:load_files: ["code/chapter/07_elife.js", "js/animateworld.js"]
= Project: Electronic Life =
[quote, Edsger Dijkstra, The Threats to Computing Science]
____
[...] the question of whether Machines Can Think [...] is about as
relevant as the question of whether Submarines Can Swim.
____
In “project” chapters, I'll stop pummeling you with new
theory for a brief moment, and instead work through a program with you. Theory
is indispensable when learning to program, but it should be
accompanied by reading and understanding non-trivial programs.
Our project in this chapter is to build a virtual ecosystem, a little
world populated with critters that move around and
struggle for survival.
== Definition ==
In order to make this task manageable, we will radically simplify the
concept of a _world_. Namely, a world will be a
two-dimensional grid where each entity takes up one full square of the
grid. On every _turn_, the critters all get a chance to take
some action.
(((discretization)))(((simulation)))Thus, we chop both time and space
into units with a fixed size: squares for space and turns for time. Of
course, this is a somewhat crude and inaccurate approximation. But our
simulation is intended to be amusing, not accurate, so we can freely
cut such corners.
We can define a world with a _plan_, which is an array of strings
that lays out the world's grid using one character per square.
// include_code
[source,javascript]
----
var plan =
["############################",
"# # # o ##",
"# #",
"# ##### #",
"## # # ## #",
"### ## # #",
"# ### # #",
"# #### #",
"# ## o #",
"# o # o ### #",
"# # #",
"############################"];
----
The “#” characters in this plan represent walls and rocks, and the
“o” characters represent critters. The spaces, as you might have
guessed, are empty space.
(((toString method)))A plan array can be used to create a world
object. Such an object keeps track of the size and content of the
world. It has a `toString` method,
which converts the world back to a printable string (similar to the plan it was
based on), so that we can see what's going on inside. The world object also
has a `turn` method, which allows all the critters in it take one
turn, and updates the world to reflect their actions.
== Representing space ==
The grid that models the world has a fixed width and height.
Squares are identified by their x- and y-coordinates. We use a very
simple type, `Vector` (as seen in the exercises for the previous
chapter) to represent these coordinate pairs.
// include_code
[source,javascript]
----
function Vector(x, y) {
this.x = x;
this.y = y;
}
Vector.prototype.plus = function(other) {
return new Vector(this.x + other.x, this.y + other.y);
};
----
Next, we need an object type that models the grid itself. A grid is
part of a world, but we are making it a separate object (which will be
a property of a world object) to keep the world object itself
simple. The world should concern itself with world-related things, the
grid with grid-related things.
(((array)))(((data structure)))To store a grid of values, we
have several options. We can use an array of row arrays and use two
property accesses to get to a specific square, like this:
[source,javascript]
----
var grid = [["top left", "top middle", "top right"],
["bottom left", "bottom middle", "bottom right"]];
console.log(grid[1][2]);
// → bottom right
----
Or, we can use a single array, with size width×height, and decide
that the element at (x,y) is found at position x + (y × width) in the
array.
[source,javascript]
----
var grid = ["top left", "top middle", "top right",
"bottom left", "bottom middle", "bottom right"];
console.log(grid[2 + (1 * 3)]);
// → bottom right
----
(((Array type)))Since the actual access to this array will be wrapped in
methods on the grid object type, it doesn't matter to outside code
which approach we take. I chose the second representation, because it
makes it much easier to create the array. When calling the `Array`
constructor with a single number as argument, it creates a new empty
array of the given length.
This code defines the `Grid` object, with some basic methods:
// include_code
[source,javascript]
----
function Grid(width, height) {
this.space = new Array(width * height);
this.width = width;
this.height = height;
}
Grid.prototype.isInside = function(vector) {
return vector.x >= 0 && vector.x < this.width &&
vector.y >= 0 && vector.y < this.height;
};
Grid.prototype.get = function(vector) {
return this.space[vector.x + this.width * vector.y];
};
Grid.prototype.set = function(vector, value) {
this.space[vector.x + this.width * vector.y] = value;
};
----
And a trivial test:
[source,javascript]
----
var grid = new Grid(5, 5);
console.log(grid.get(new Vector(1, 1)));
// → undefined
grid.set(new Vector(1, 1), "X");
console.log(grid.get(new Vector(1, 1)));
// → X
----
== A critter's programming interface ==
(((interface)))Before we can start on the `World` constructor, we must
get more specific about the critter objects that will be living inside
it. I mentioned that the world will ask the critters what actions
they want to take. This works as follows: each critter object has an
`act` method that, when called, returns an _action_. An action is an
object with a `type` property, which names the type of action the
critter wants to take, for example `"move"`. The action may also
contain extra information, such as the direction the critter wants to
move in.
Critters are terribly myopic, and can only see the squares
directly around them on the grid. But even this limited vision can be useful
when deciding which action to take. When the `act` method is called,
it is given a _view_ object that allows the critter to inspect its
surroundings. We name the eight surrounding squares
by their compass directions: `"n"` for north, `"ne"` for
northeast, and so on. Here's the object we will use to map from direction
names to coordinate offsets:
// include_code
[source,javascript]
----
var directions = {
"n": new Vector( 0, -1),
"ne": new Vector( 1, -1),
"e": new Vector( 1, 0),
"se": new Vector( 1, 1),
"s": new Vector( 0, 1),
"sw": new Vector(-1, 1),
"w": new Vector(-1, 0),
"nw": new Vector(-1, -1)
};
----
The view object has a method `look`, which
takes a direction and returns a character, for example `"#"` when
there is a wall in that direction, or `" "` (space) when there is
nothing there. The object also provides the convenient methods `find` and
`findAll`. Both take a map character as argument. The first returns
a direction in which the character can be found next to the critter,
or `null` if no such direction exists. The second
returns an array containing all directions with that character.
For example, a creature sitting left (west) of a wall will get `["ne", "e",
"se"]` when calling `findAll` on its view object with the `"#"`
character as argument.
Here is a simple, stupid critter that just
follows its nose until it hits an obstacle, then bounces off in
a random open direction:
// include_code
[source,javascript]
----
function randomElement(array) {
return array[Math.floor(Math.random() * array.length)];
}
function BouncingCritter() {
this.direction = randomElement(Object.keys(directions));
};
BouncingCritter.prototype.act = function(view) {
if (view.look(this.direction) != " ")
this.direction = view.find(" ") || "s";
return {type: "move", direction: this.direction};
};
----
The `randomElement` helper function simply picks a random element from an
array, using `Math.random` plus some arithmetic to get a random index.
We'll use this again later, as randomness can be useful in simulations.
The `BouncingCritter` constructor calls `Object.keys`. We saw this function in the previous chapter: it returns an array
containing all the property names in the given object. Here,
it gets all the direction names from the `directions` object we defined earlier.
The “++|| "s"++” in the `act` method is there to prevent `this.direction` from getting
the value `null` if the critter is somehow trapped with no empty space
around it (for example when crowded into a corner by other critters).
== The world object ==
Now we can start on the `World` object type. The constructor
takes a plan (the array of strings representing the world's grid, described earlier) and a _legend_ as arguments.
A legend is an object that tells us what each character in the map means.
It contains a constructor for every character—
except for the space character, which always refers to `null`, the value
we'll use to represent empty space.
// include_code
[source,javascript]
----
function elementFromChar(legend, ch) {
if (ch == " ")
return null;
var element = new legend[ch]();
element.originChar = ch;
return element;
}
function World(map, legend) {
var grid = new Grid(map[0].length, map.length);
this.grid = grid;
this.legend = legend;
map.forEach(function(line, y) {
for (var x = 0; x < line.length; x++)
grid.set(new Vector(x, y),
elementFromChar(legend, line[x]));
});
}
----
In `elementFromChar`, first we create an
instance of the right type by looking up the character's constructor and applying
`new` to it. Then we add an `originChar` property to it to make it easy to
find out what character the element was originally created from.
(((toString method)))We need this `originChar` property when
implementing the world's `toString` method. This method builds up a map-like
string from the world's current state, by performing a two-dimensional
loop over the squares on the grid.
// include_code
[source,javascript]
----
function charFromElement(element) {
if (element == null)
return " ";
else
return element.originChar;
}
World.prototype.toString = function() {
var output = "";
for (var y = 0; y < this.grid.height; y++) {
for (var x = 0; x < this.grid.width; x++) {
var element = this.grid.get(new Vector(x, y));
output += charFromElement(element);
}
output += "\n";
}
return output;
};
----
A wall is a very simple object—it is only used for taking up space,
and has no `act` method.
// include_code
[source,javascript]
----
function Wall() {}
----
When we try out the `World` object by creating an instance based on
the plan from earlier in the chapter, and then calling `toString` on it, we get a
string very similar to the plan we put in.
// include_code strip_log
// test: trim
[source,javascript]
----
var world = new World(plan,
{"#": Wall,
"o": BouncingCritter});
console.log(world.toString());
// → ############################
// # # # o ##
// # #
// # ##### #
// ## # # ## #
// ### ## # #
// # ### # #
// # #### #
// # ## o #
// # o # o ### #
// # # #
// ############################
----
== this and its scope ==
(((this variable)))(((variable,scope)))(((self variable)))The `World`
constructor contains a call to `forEach`. One interesting thing to
note is that inside the function passed to `forEach`, we are no longer
directly in the function scope of the constructor. Each function call
gets its own `this` binding, so the `this` inside of the inner
function does _not_ refer to the newly constructed object that the
outer `this` refers to. In fact, when a function isn't called as a
method, `this` will refer to the global object.
This means that we can't write `this.grid` to access the grid from
inside the loop. Instead, the outer function creates a normal local
variable, `grid`, through which the inner function gets access to the
grid.
This is a bit of a design blunder in JavaScript. Fortunately, the next
version of the language provides a solution for this problem.
Meanwhile, there are workarounds. A common pattern is to say `var self
= this` and from then on refer to `self`, which is a normal variable
and thus visible to inner functions.
Another solution is to use the `bind` method, which allows us to
provide an explicit `this` object to bind to.
[source,javascript]
----
var test = {
prop: 10,
addPropTo: function(array) {
return array.map(function(elt) {
return this.prop + elt;
}.bind(this));
}
};
console.log(test.addPropTo([5]));
// → [15]
----
The function passed to `map` is the result of the `bind` call, and
thus has its `this` bound to the first argument given to ++bind++—the
outer function's `this` value (which holds the `test` object).
Most standard higher-order methods on arrays, such as `forEach`
and `map`, take an optional second argument that can also be used to
provide a `this` for the calls to the iteration function. So you could
express the example above in a slightly simpler way:
[source,javascript]
----
var test = {
prop: 10,
addPropTo: function(array) {
return array.map(function(elt) {
return this.prop + elt;
}, this); // ← no bind
}
};
console.log(test.addPropTo([5]));
// → [15]
----
This only works for higher-order functions that support such a _context_ parameter.
When they don't, you'll need to use one of the other approaches.
In our own higher-order functions, we can support such a context
parameter by using the `call` method to call the function given as
argument. For example, here is a `forEach` method for our `Grid` type,
which calls a given function for each element in the grid that isn't
null or undefined:
// include_code
[source,javascript]
----
Grid.prototype.forEach = function(f, context) {
for (var y = 0; y < this.height; y++) {
for (var x = 0; x < this.width; x++) {
var value = this.space[x + y * this.width];
if (value != null)
f.call(context, value, new Vector(x, y));
}
}
};
----
== Animating life ==
(((simulation)))The next step is to write a `turn` method for the
world object that gives the critters a chance to act. It
will go over the grid using the `forEach` method we just defined,
looking for objects with an `act` method. When it finds one, `turn` calls
that method to get an action object, and carries out the
action when it is valid. For now, only `"move"` actions are
understood.
There is one potential problem with this approach. Can you spot it? If
we let critters move as we come across them, they may move to a square
that we haven't looked at yet, and we'll allow them to move _again_
when we reach that square. Thus, we have to keep an array of critters
that have already had their turn, and ignore those when we see them again.
// include_code
[source,javascript]
----
World.prototype.turn = function() {
var acted = [];
this.grid.forEach(function(critter, vector) {
if (critter.act && acted.indexOf(critter) == -1) {
acted.push(critter);
this.letAct(critter, vector);
}
}, this);
};
----
We use the second parameter to the grid's `forEach` method to be able
to access the correct `this` inside of the inner function. The
`letAct` method contains the actual logic that allows the
critters to move.
// include_code
[source,javascript]
----
World.prototype.letAct = function(critter, vector) {
var action = critter.act(new View(this, vector));
if (action && action.type == "move") {
var dest = this.checkDestination(action, vector);
if (dest && this.grid.get(dest) == null) {
this.grid.set(vector, null);
this.grid.set(dest, critter);
}
}
};
World.prototype.checkDestination = function(action, vector) {
if (directions.hasOwnProperty(action.direction)) {
var dest = vector.plus(directions[action.direction]);
if (this.grid.isInside(dest))
return dest;
}
};
----
First, we simply ask the critter to act, passing it a view object
that knows about the world and the critter's current position in that
world (we'll define `View` in a moment). This returns an action of
some kind.
If the action's `type` is not `"move"`, it is ignored. If it _is_
`"move"`, and it has a `direction` property that refers to a valid
direction, _and_ the square in that direction is empty (null), we set
the square where the critter used to be to hold null, and store the
critter in the destination square.
(((defensive programming)))Note that `letAct` takes care to ignore
nonsense input—it doesn't assume that the action's `direction`
property is valid, or that the `type` property makes sense. This kind
of _defensive_ programming makes sense in some situations. The main
reason for doing it is to validate inputs coming from sources you don't
control (such as user or file input), but it can also be useful to
isolate subsystems from each other. In this case, the intention is
that the critters themselves can be programmed sloppily—they don't
have to verify if their intended actions make sense. They can just
request an action, and the world will figure out whether to allow it.
(((interface)))(((private property)))These two methods are not part of
the external interface of a `World` object. They are an internal
detail. Some languages provide ways to explicitly declare certain
methods and properties _private_ and signal an error when you try to
use them from outside the object. JavaScript does not, so you will
have to rely on some other form of communication to describe what is
part of an object's interface. Sometimes it can help to use a naming
scheme to distinguish between external and internal properties, for
example by prefixing all internal ones with an underscore character
(“_”). This will make accidental uses of properties that are not part
of an object's interface easier to spot.
The one missing part, the `View` type, looks like this:
// include_code
[source,javascript]
----
function View(world, vector) {
this.world = world;
this.vector = vector;
}
View.prototype.look = function(dir) {
var target = this.vector.plus(directions[dir]);
if (this.world.grid.isInside(target))
return charFromElement(this.world.grid.get(target));
else
return "#";
};
View.prototype.findAll = function(ch) {
var found = [];
for (var dir in directions)
if (this.look(dir) == ch)
found.push(dir);
return found;
};
View.prototype.find = function(ch) {
var found = this.findAll(ch);
if (found.length == 0) return null;
return randomElement(found);
};
----
The `look` method figures out the coordinates that we are trying to
look at, and, if they are inside the grid, finds the character
corresponding to the element that sits there. For coordinates outside the grid,
`look` simply pretends that there is a wall there, so that if you define a
world that isn't walled in, the critters still won't be tempted to try
and walk off the edges.
== It moves ==
We instantiated a world object before. Now that we've added all the
necessary methods, it should be possible to actually make it move.
[source,javascript]
----
for (var i = 0; i < 5; i++) {
world.turn();
console.log(world.toString());
}
// → … five turns of moving critters
----
ifdef::tex_target[]
The first two maps that are displayed will look something like this
(depending on the random direction the critters picked):
----
############################ ############################
# # # ## # # # ##
# o # # #
# ##### # # ##### o #
## # # ## # ## # # ## #
### ## # # ### ## # #
# ### # # # ### # #
# #### # # #### #
# ## # # ## #
# # o ### # #o # ### #
#o # o # # # o o #
############################ ############################
----
They move! To get a more interactive view of these critters crawling
around and bouncing off the walls, open this chapter in the online
version of the book at `eloquentjavascript.net`.
endif::tex_target[]
ifdef::html_target[]
Simply printing out many copies of the map is a rather unpleasant
way to observe a world, though. That's why the sandbox provides an
`animateWorld` function that will run a world as an on-screen
animation, moving three turns per second, until you hit the stop
button.
// test: no
[source,javascript]
----
animateWorld(world);
// → … life!
----
The implementation of `animateWorld` will remain a mystery for
now, but after you've read the later chapters of this book, which
discuss JavaScript integration in web browsers, it won't look so
magical anymore.
endif::html_target[]
== More lifeforms ==
The dramatic
highlight of our world, if you watch for a bit, is when two
critters bounce off each other.
Can you think of another interesting form of behavior?
The one I came up with is a critter that moves along walls.
Conceptually, the critter keeps its left hand (paw, tentacle, whatever) to the
wall and follows along. This turns out to be not
entirely trivial to implement.
First, we need to be able to “compute” with directions. Since directions are
modeled by a set of strings, we need to define our own operation
(`dirPlus`) to calculate relative directions. So `dirPlus("n", 1)`
means one 45-degree turn clockwise from North, giving `"ne"`. Similarly,
`dirPlus("s", -2)` means 90 degrees counterclockwise from South, which
is East.
// include_code
[source,javascript]
----
var directionNames = Object.keys(directions);
function dirPlus(dir, n) {
var index = directionNames.indexOf(dir);
return directionNames[(index + n + 8) % 8];
}
function WallFollower() {
this.dir = "s";
}
WallFollower.prototype.act = function(view) {
var start = this.dir;
if (view.look(dirPlus(this.dir, -3)) != " ")
start = this.dir = dirPlus(this.dir, -2);
while (view.look(this.dir) != " ") {
this.dir = dirPlus(this.dir, 1);
if (this.dir == start) break;
}
return {type: "move", direction: this.dir};
};
----
The `act` method only has to
“scan” the critter's surroundings, starting from its
left-hand side and going clockwise until it finds
an empty square. It then moves in the direction of that empty square.
What complicates things is that a critter may end up in the
middle of empty space, either as its start
position or as a result of walking around another critter.
If we apply the approach I just described in
empty space, the poor thing will just keep on turning left at every
step, running in circles.
So there is an extra check (the `if` statement) to
start scanning to the left only if it looks like the critter has just passed some kind
of obstacle—that is, if the space behind-and-to-the-left of the critter is not
empty. Otherwise, the critter starts scanning directly ahead, so that
it'll walk straight when in empty space.
And finally, there's a test comparing `this.dir` to `start` after
every pass through the loop, to make sure that the loop won't run forever
when the critter is walled in or crowded in by other critters and
can't find empty space.
ifdef::html_target[]
This small world demonstrates the wall-following creatures.
// test: no
[source,javascript]
----
animateWorld(new World(
["############",
"# # #",
"# ~ ~ #",
"# ## #",
"# ## o####",
"# #",
"############"],
{"#": Wall,
"~": WallFollower,
"o": BouncingCritter}
));
----
endif::html_target[]
== A more lifelike simulation ==
(((simulation)))To make life in our world more interesting, we will
add the concepts of food and reproduction. Each living thing in the
world gets a new property, `energy`, which is reduced by performing
actions and increased by eating things. When the critter has enough energy,
it can reproduce, generating a new critter of the same kind. To
keep things simple, the critters in our world reproduce
asexually, all by themselves.
(((entropy)))If critters only
move around and eat one another, the world will soon succumb to the
law of increasing entropy, run out of energy, and become a lifeless wasteland.
To prevent this from happening (too quickly, at least), we add plants
to the world. Plants do not move. They just use photosynthesis to grow
(that is, increase their energy) and reproduce.
To make this work, we'll need a world with a different `letAct`
method. We could just replace the method of the `World` prototype, but
I've become very attached to our simulation with the wall-following
critters, and would hate to break that old world.
(((inheritance)))One solution is to use inheritance. We create a new
constructor, `LifelikeWorld`, whose prototype is based on the `World`
prototype, but which overrides the `letAct` method.
The new `letAct` method delegates the work of actually
performing an action to various functions stored in the `actionTypes`
object, which we will define later.
// include_code
[source,javascript]
----
function LifelikeWorld(map, legend) {
World.call(this, map, legend);
}
LifelikeWorld.prototype = Object.create(World.prototype);
var actionTypes = Object.create(null);
LifelikeWorld.prototype.letAct = function(critter, vector) {
var action = critter.act(new View(this, vector));
var handled = action &&
action.type in actionTypes &&
actionTypes[action.type].call(this, critter,
vector, action);
if (!handled) {
critter.energy -= 0.2;
if (critter.energy <= 0)
this.grid.set(vector, null);
}
};
----
The new `letAct` method first checks whether an
action was returned at all, then whether a handler function for this
type of action exists, and finally, whether that handler returned true,
indicating that it successfully handled the action. Note the use of
`call` to give the handler access to the world, though its `this`
binding.
If the action didn't work for whatever reason, the default action is
for the creature to simply wait. It loses one fifth point of
energy, and if its energy level drops to zero
or below, the creature dies, and is removed from the grid.
== Action handlers ==
The simplest action a creature can perform is `"grow"`, used
by plants. When an action object like `{type: "grow"}` is returned,
the following handler method will be called:
// include_code
[source,javascript]
----
actionTypes.grow = function(critter) {
critter.energy += 0.5;
return true;
};
----
Growing always succeeds, and adds half a point to the plant's energy
level.
Moving is more involved:
// include_code
[source,javascript]
----
actionTypes.move = function(critter, vector, action) {
var dest = this.checkDestination(action, vector);
if (dest == null ||
critter.energy <= 1 ||
this.grid.get(dest) != null)
return false;
critter.energy -= 1;
this.grid.set(vector, null);
this.grid.set(dest, critter);
return true;
};
----
This action first checks, using the `checkDestination` method defined earlier,
whether the action provides a valid destination. If not, or when the
destination isn't empty, or if the critter lacks the required
energy, `move` returns false to indicate no action was taken.
Otherwise, it moves the critter, and subtracts the energy cost.
In addition to moving, critters can also eat:
// include_code
[source,javascript]
----
actionTypes.eat = function(critter, vector, action) {
var dest = this.checkDestination(action, vector);
var atDest = dest != null && this.grid.get(dest);
if (atDest == null || atDest.energy == null)
return false;
critter.energy += atDest.energy;
this.grid.set(dest, null);
return true;
};
----
Eating another critter also involves providing a valid destination
square. This time, the destination must not be empty, and must contain
something with energy, like a critter (but not a wall—walls are not edible). If
so, the energy from the eaten is transferred to the eater,
and the victim is removed from the grid.
And finally, we allow our critters to reproduce:
// include_code
[source,javascript]
----
actionTypes.reproduce = function(critter, vector, action) {
var baby = elementFromChar(this.legend,
critter.originChar);
var dest = this.checkDestination(action, vector);
if (dest == null ||
critter.energy <= 2 * baby.energy ||
this.grid.get(dest) != null)
return false;
critter.energy -= 2 * baby.energy;
this.grid.set(dest, baby);
return true;
};
----
Reproducing costs twice the energy level of the newborn critter. So we
first create a (hypothetical) baby using `elementFromChar` on the
critter's own origin character. Once we have a baby, we can find its
energy level and test whether the parent has enough energy to
successfully bring it into the world. We also require a valid (and
empty) destination.
If everything is okay, the baby is put onto the grid (it is now no
longer hypothetical) and the energy is spent.
== Populating the new world ==
We now have a framework to simulate these more lifelike
creatures. We could put the critters from the old world into it, but
they would just die, since they don't have an energy attribute. So let
us make new ones. First we'll write a plant, which is a rather simple
lifeform.
// include_code
[source,javascript]
----
function Plant() {
this.energy = 3 + Math.random() * 4;
}
Plant.prototype.act = function(context) {
if (this.energy > 15) {
var space = context.find(" ");
if (space)
return {type: "reproduce", direction: space};
}
if (this.energy < 20)
return {type: "grow"};
};
----
Plants start with an energy level between 3 and 7, randomized so that
they don't all reproduce in the same turn. When a plant reaches 15 energy
points and there is empty space nearby, it reproduces into that empty
space. If a plant can't reproduce, it simply grows until it reaches energy level 20.
Next, a plant eater.
// include_code
[source,javascript]
----
function PlantEater() {
this.energy = 20;
}
PlantEater.prototype.act = function(context) {
var space = context.find(" ");
if (this.energy > 60 && space)
return {type: "reproduce", direction: space};
var plant = context.find("*");
if (plant)
return {type: "eat", direction: plant};
if (space)
return {type: "move", direction: space};
};
----
We'll use the `*` character for plants, so that's what this creature
will look for when it searches for food.
== Bringing it to life ==
And that gives us enough elements to try our new world. Imagine the
map below as a grassy valley with a herd of herbivores in it, some
boulders, and lush plant life everywhere.
// include_code
[source,javascript]
----
var valley = new LifelikeWorld(
["############################",
"##### ######",
"## *** **##",
"# *##** ** O *##",
"# *** O ##** *#",
"# O ##*** #",
"# ##** #",
"# O #* #",
"#* #** O #",
"#*** ##** O **#",
"##**** ###*** *###",
"############################"],
{"#": Wall,
"O": PlantEater,
"*": Plant}
);
----
Let us see what happens if we run this. !!tex These snapshots
illustrate a typical run of this world.!!
ifdef::html_target[]
// test: no
[source,javascript]
----
animateWorld(valley);
----
endif::html_target[]
ifdef::tex_target[]
----
############################ ############################
##### ###### ##### ** ######
## *** O *## ## ** * O ##
# *##* ** *## # **## ##
# ** ##* *# # ** O ##O #
# ##* # # *O * * ## #
# ## O # # *** ## O #
# #* O # #** #*** #
#* #** O # #** O #**** #
#* O O ##* **# #*** ##*** O #
##* ###* ### ##** ###** O ###
############################ ############################