Virtual Life App with World Item
Copy your previous project for
the starting point
Feature Specification
- Same features as Virtual Life app project
Code Design
- The design of the code will change to make the virtual
life app more modular. This may seem like an awkward transition at
first, but the benefits will soon become evident if you will put in the
work to set up your objects as prototypes who provide clear services by
means of their functions.
- The idea here is that each WorldItem (animal,
plant, wall, or space) keeps track of its own location and its own actions
during a given turn, for a given state of the world, so the first step is
to change your code so that it is filling its data structure with World
Items, not merely characters. Each of these WorldItems will have
thinking and decision-making abilities on its own. This concept is
very important and powerful with respect to building large systems that
scale well, to avoid unnecessary processing.
- You will also be introduced to the concept of the Factory
pattern, which serves a critical role in the process of object
production. The World will ask the World Item Factory to create
WorldItems, so that it can fill its data grid structure. The World
knows which kind of objects it wants to create and where it wants each
one, but the Factory will add some additional details before returning a
complete object.
- For example, the World may tell the Factory: give me a
WorldItem of type “a” at row 1 and col 3, so the Factory creates that
object and adds two additional details: a human-readable object type
(“animal”) and an array of object types which this type can move over
([“plant”, “empty”]). Then it returns the created object back to the
World.
- The world should now be a prototyped object.
- The constructor of the world object will take a world
plan string as a parameter. The world plan will be a string
representation of the world (identical to the output of .toString()).
See below for example of how the World is constructed.
- The world.js file should contain a function to parse the
world plan into the needed data structure, e.g. “parseWorldPlan(worldPlan)”
which returns a grid of Items.
- Extend the world object with the following methods:
- copy(targetWorldItem, sourceWorldItem) - Will
copy the source world item to the location of the target world item.
- move(targetWorldItem, sourceWorldItem) - Will
move the source world item to the location of the target world item.
- remove(worldItem) - Will remove the world item
and replace it with an empty space.
- What other services or methods might the World provide?
- Create an object prototype (with a constructor) named WorldItem
to represent an item that occupies a cell in a world-item script file.
The constructor should accept all the parameters that are provided by the
worldItemFactory’s build method (see below), and convert each one into a
local property of the object. (e.g. “
this.data
= data”).
- The WorldItem object should keep track of its location in
the world and other information related to the world item.
- Add the following methods:
§
act(world) - Will complete the action for a single world
item during its turn -- i.e. die, reproduce, move. Takes the world object by
reference to use for services the world provides, like copy, move, remove, etc.
- Other helper methods to determine if the Item will
reproduce or move.
- Create a worldItemFactory object that will build
new world items:
- This object will be responsible for creating an instance
of world item objects.
- This object will call new on the world item
constructor
§ new worldItem()
- Add the following methods
- build(…data) - Will return a new world
item
o
To get you started, here is an example of how this factory will
work:
function worldItemFactory() { }
worldItemFactory.build =
function(symbol,latitude,longitude) {
var type;
var ableToMoveOn;
switch (symbol) {
case "#":
type = "wall";
break;
case "p":
type = "plant";
ableToMoveOn = ["empty"];
break;
case "a":
type = "animal";
ableToMoveOn = ["empty",
"plant"];
break;
case " ":
type = "empty";
break;
}
return new
WorldItem(symbol,latitude,longitude,type,ableToMoveOn);
}
·
Create links to your JavaScript file(s):
<body>
<script src="http://brickhousecodecamp.org/educationMaterials/workbenchProjects/phase-i/virtual-life-01-app/animate-world.js"></script>
<script src="world-item.js"></script>
<script src="world-item-factory.js"></script>
<script src="world.js"></script>
<script>
var worldPlan =
"######" + "\n" +
"# p# #" + "\n" +
"# # a#" + "\n" +
"# pa #" + "\n" +
"# #p #" + "\n" +
"######";
var world = new World(worldPlan);
animateWorld(world)
</script>
</body>
Notes
·
If you are working in JSBin, you can put all the JavaScript
(everything referenced in <script> tags above) and paste the content into
your JavaScript panel. Ask a tutor if you need help with this. Our hope is
that you will do most of your development in Visual Studio Code, then use the
Live Server extension to launch this and access with Chrome. Use the Chrome
DevTools (F12) to debug your code. Then when you have something totally tested
and working, port your work into a bin on JSBin to submit the assignment.
·
How to define a prototyped object:
o
Make a constructor (use upper camel case)
function WorldItem(symbol,latitude,longitude,type,ableToMoveOn) {
this.type = type;
this.symbol = symbol;
this.latitude = latitude;
this.longitude = longitude;
this.ableToMoveOn = ableToMoveOn;
}
o
Add functions:
WorldItem.prototype.act = function(world) {
let alive = true;
let isPlant = this.type == "plant";
let isAnimal = this.type == "animal";
if (isPlant || isAnimal) {
alive = Math.random() < 0.73 ? true : false;
if (alive) {
…
}
}
o
Create an instance of the object:
var worldItem = new WorldItem(data);
worldItem.act();
References