Ants Up a Wall Game Primer Tutorial

Ants Up a Wall Game Primer Tutorial

Ants Up a Wall Game Primer Tutorial

We’d like to thank the brick wall inspiration of this very useful link we talked about yesterday with CSS Style Display and Visibility Tall Poppies Tutorial for the reason to take on our “Ants Up a Wall” game today.

Today, though, we arrange it that the wall sits down the bottom of the screen, where, as you would all know, any self respecting ant will emerge from, if they take an interest in your computer equipment.

Your mission, Jim, should you decide to accept it is to protect your food supplies on the wall from marauding ants. We’ve assembled a crack team for you, Jim, or you can come up with your own Bee Team (chortle, chortle). As always, should you or any of your I.M. Force be caught or killed, the Secretary will disavow any knowledge of your actions.

Aspects of today’s “Ants Up a Wall” game’s HTML and Javascript and CSS ants_up_the_wall.html source code for your perusal …

  • brick wall inspired as above, thanks, and represented as an HTML hr (horizontal rule) element, positioned via use of …
  • CSS calc
  • CSS rotation
  • Javascript Object OOP style syntax … for a …
  • data structure which is an Array of Javascript (Ant) objects … and as for yesterday’s game, all of …
  • (Math.floor(Math.random() * [integerRange]) +/- [integerOffset]) // randomosity aid
  • setTimeout (and setInterval (to derive a “seconds elapsed” idea to the game)) timer methods … and, lately, at least …
  • Emoji usage

The marauding ants need a limit of their numbers, in case users leave the web application running forever, and that is where we relieve memory requirements by using the delete (array member) method of keeping the (array) indexes constant but save on memory requirements over time.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Games, OOP, Tutorials and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *