Elevation Game Separated Radio Buttons Primer Tutorial
If you were around for the recent Golden Ratio Game CSS Tutorial, and tried out this game, was it in the back (or front) of your mind, that if it had been you writing the code you’d have preferred to use input type=radio rather than type=button with those decision maker elements up the top? Am sure there are a lot of people like you. Today, we write a new game using HTML input type=radio elements, and we delve into the idea of a lot of HTML “plonked” in between. Yes, those usual label tags can have a lot of Javascript DOM innerHTML “filling”, should you like to go down that path. We like the idea because the radio buttons line up at the left and context lies under it. This, we feel, is good for decision making. It means if we start today’s game with its default live run look, the decision is yet to be made by the user whether to pick a …
- Harder … or …
- Easier
… mode of play for today’s HTML and Javascrript (DOM) “Elevation Game” where one unknown out of …
- Harder’s elevation, altitude, distance, height … or …
- Easier’s elevation, altitude, distance
… is what the user solves for, and we can, with “separated” radio buttons, place in a diagram we’ve constructed to explain the situation to the user.
We hope you enjoy the game whose HTML and Javascript code you could call separated_radio.html as you see fit.
Previous relevant Golden Ratio Game CSS Tutorial is shown below.
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.
If this was interesting you may be interested in this too.
