{"id":53938,"date":"2021-11-15T03:01:54","date_gmt":"2021-11-14T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=53938"},"modified":"2021-11-17T20:48:02","modified_gmt":"2021-11-17T10:48:02","slug":"ants-up-a-wall-game-fixed-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/ants-up-a-wall-game-fixed-tutorial\/","title":{"rendered":"Ants Up a Wall Game Fixed Tutorial"},"content":{"rendered":"
\"Ants<\/a>

Ants Up a Wall Game Fixed Tutorial<\/p><\/div>\n

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.<\/p>\n

Do not know whether it tweaked with you, but yesterday’s Hashtag Navigation Scrolling Tweaks Primer Tutorial<\/a> (hashtag_and_a_bit.html<\/a>‘s web application<\/a>) used a technique of interest to us, the …<\/p>\n


\nCSS \"position\"<\/a> transition change from its default \"relative\" value to \"fixed\" via Javascript DOM
\n<\/code><\/p>\n

… 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 …<\/p>\n

    \n
  1. “position” property “fixed” change, in anticipation of scrolling that might happen later, can be supplemented by …<\/l>\n
  2. glean a good “top” (or “y”) co-ordinate via [element].getBoundingClientRect<\/a>().top (of its naturally occurring and suitable “top” position)<\/li>\n
  3. forced suitable “left” (or “x”) co-ordinate to suit our purposes (ended up at 220 to suit an iPhone)<\/li>\n<\/ol>\n

    … the best of both woooorrrrrlllllldddsss, we reckon?!<\/p>\n

    And today, we’re onto improving Ants Up a Wall Game Primer Tutorial<\/a>‘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 …<\/p>\n

      \n
    • normal calm ants … that can become …<\/li>\n
    • “transfixed” (ie. CSS position: fixed; and no movement) … but come out of that …<\/li>\n
    • energised ants … that can move faster and in a different direction<\/li>\n<\/ul>\n

      To change the scoring, or not to change the scoring, that is the question? And the answer is …<\/p>\n

      \nNo\n<\/p><\/blockquote>\n

      … we’ll just leave it to the user to tweak to the better tactics now with our changed<\/a> ants_up_the_wall.html<\/a> …<\/p>\n