Ants Up a Wall Game Fixed Tutorial
It’s often hard, with web application games, to know how much “randomosity” is good. Too little, and little interest, but too much and the game might become scatter-brained, and thereby less interesting at the other end of the spectrum.
Do not know whether it tweaked with you, but yesterday’s Hashtag Navigation Scrolling Tweaks Primer Tutorial (hashtag_and_a_bit.html‘s web application) used a technique of interest to us, the …
CSS "position" transition change from its default "relative" value to "fixed" via Javascript DOM
… the “relative” initial setting getting us to a suitable “y” (or “top”) positioning and a “less suitable for our purposes” “x” (or “left”) positioning, which our …
- “position” property “fixed” change, in anticipation of scrolling that might happen later, can be supplemented by …
- glean a good “top” (or “y”) co-ordinate via [element].getBoundingClientRect().top (of its naturally occurring and suitable “top” position)
- forced suitable “left” (or “x”) co-ordinate to suit our purposes (ended up at 220 to suit an iPhone)
… the best of both woooorrrrrlllllldddsss, we reckon?!
And today, we’re onto improving Ants Up a Wall Game Primer Tutorial‘s “Ants Up the Wall” game, adding randomosity, this time introducing toggles of the CSS “position” property between “absolute” and “fixed”, so that you get …
- normal calm ants … that can become …
- “transfixed” (ie. CSS position: fixed; and no movement) … but come out of that …
- energised ants … that can move faster and in a different direction
To change the scoring, or not to change the scoring, that is the question? And the answer is …
No
… we’ll just leave it to the user to tweak to the better tactics now with our changed ants_up_the_wall.html …
Previous relevant Ants Up a Wall Game Primer Tutorial is shown below.
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.
If this was interesting you may be interested in this too.
