Virtual Life App with Animation (text only)

• Languages: Javascript ES5
• Languages Additional: Javascript ES6 Modules
• Tools: VS Code, Live Server extension, Git (if available)
• API Features: DOM Elements
• Libraries: none
• Patterns and Practices: Separation of concerns, Factory method pattern, Inheritance

Feature Specification

• Create a user interface that displays the state of the world using text symbols i.e. #, a, p, etc.

Code Design

• Create HTML using only the DOM.
• There will be no changes to your index.html

 

• Create a WorldAnimator prototyped object that is responsible for the animation cycle and using the world object.  Its constructor will accept only a single object – the world.

 

• Add the following method to the WorldAnimator prototype:
• start() - start the animation

 

• Use window.setInterval() for the turn and animation process

 

• Create a WorldView prototyped object that will render the html and state of the world.

• Add the following methods:

 

• initialize() - Will prepare the DOM, by converting the initial worldString into a DOM element (e.g. <table> or something similar), and appending it to the screen.
• Optional: may accept the string representation of the world as an argument.  This may not be necessary if you already passed that to the constructor.

 

• render(worldString) - Will draw the state of the world
• Will take the string representation of the world.

 

• Note: do NOT send the entire world as an object to the view, as this would violate the principle of separation of concerns. This is an important part of the MVC (model-view-controller) pattern

 

• Change the app.js to import and construct a world animator and call start().

 

Notes

 

• Create and append DOM objects to the body:

 

     var tableElement = document.createElement("table");

        document.body.appendChild(tableElement);

References

 

• Introduction to the DOM
• setInterval()