Golden Ratio Game CSS Tutorial
We wanted to add some styling to improve on our Golden Ratio Game we started yesterday with our Golden Ratio Primer Tutorial. These styling improvements relate to us wanting to add a Degree of Difficulty mode of play for the game, because we see that there is scope to …
- make the answer terribly predictable for the whole game
- make the rectangles more or less similar in their dimensions approximating the Golden Ratio dimensions
- rotate the rectangles and introduce overlaying and non-even display conditions, for obfuscation purposes
… which allows for scope for some differentiation with the scoring in the game, in that the harder modes of use score more points per correct choice.
Also wanted to introduce a nuanced 3D look to the HTML div elements that are the rectangles in the game. We found an excellent website here to help with achieving this with a shadow box and some border effects.
And we add more (of our favourite) CSS backgroundColor effects to help section off parts of the game display from others.
As far as the the HTML div element rotations go in that “Hardest” level of difficulty (mode of play) we, perhaps, could have arranged a CSS way of doing this, by the same …
location.href=document.URL.split('#')[0].split('?')[0] + '?score=' + score + '&goes=' + goes + '&difficulty=' + this.value;
… HTML (select element) difficulty “dropdown” onchange event logic means of doing it, but today, as we’ve done before, at Analogue Clock Primer Tutorial, we’ve dynamically arranged the three HTML div elements to get three Javascript DOM arranged rotations, as each new set of 3 rectangles is displayed. See that previous link for the basis of the code used to do this.
So that leaves us with the HTML and Javascript and CSS golden_ratio_game.html is associated with this live run link, and which changed in this way. We hope you try out the game, enjoy it, and perhaps use it as the launching pad for ideas of your own.
Previous relevant Golden Ratio Game Primer Tutorial is shown below.
Golden Ratio Game Primer Tutorial
Today we have a Golden Ratio Game for you. In mathematics and architectural design, there is a ratio of rectangular dimensions that appeals to the human pysche, and this magical irrational number, close to …
1.6180339887
… we gleaned from Wikipedia’s Golden Ratio webpage, so, thanks.
These Golden Ratio proportions are no mathematical accident, and you should read more at that Wikipedia link above, which, in summary, tells us that that irrational number above equates to …
(1 + √5) / 2
The code today is HTML with some Javascript DOM workings could be called golden_ratio_game.html And you can try it out with today’s live run link, and see whether you can pick what appeals to so many others. As with many games, it features lots of calls such as …
colis[0]=bcols[Math.floor(Math.random() * bcols.length)];
… to add that element of randomosity to your web application games.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
