This is a variation of a basic, computer-game version of the hand game Rock, Paper, Scissors (also known as Rochambeau or as Stone, Paper, Scissors). The wizard name Osmanwic referenced in the game's introduction paragraph is a partial anagram of Mac Win OS.

Using HTML, CSS, and JavaScript, to create a simple game in the DOM that is two player (the player versus the computer), has a win state and lose state, and includes multiple rounds.

(back to top)

(back to top)

| |

(back to top)

|

(back to top)

First in the global scope, the game's default values are assigned to variables--ie, for the Player's and Computer's Health Levels (16 each) and the number of rounds remaining (5)--, variables are declared for HTML elements that will be manipulated, event listenrs are added to the Spell Buttons, and the Play Again button is hidden with document.querySelector('.playAgainButton').style.display = 'none';.

Game play is all within a single function. The Play Again button's event listener is added within that function. Also within the function is the condition statement to end the game, if (roundsRemaining === 0) and relevant end-of-game code, eg, making making the Play Again button appear.

(back to top)

Dueling Wizards

• Add a button the player can click to disable spell sound effects.
• When the game ends, reduce opacity property of Spell Buttons to ~0.6 to show the buttons are disabled.
• Add an alternative game-ends condition of when Player or Computer's Health Level is <= 0, and increase default Health Levels and default Rounds Remaining, so that Computer or Player death is possible, with the appropriate alternative gameResult text printed to the DOM.
• Enhance the styling. Eg,
  • adding emoji or animated GIFs for the Elemental categories;
  • replace Damage Table image file with a dynamic table, eg, the table cells corresponding to the round's userSpell and, after a slight delay, computerSpell change background color, as does, after a second slight delay, the appropriate cell that states the damage.
• Add a Spell Conduit choice; user selects Scroll, Wand, Staff, or Amulet, which is compared against the Computer's randomly selected Conduit and Health Points deducted in accordance with a Conduit Power Table. Default Health Levels should be raised since the potential total damage per round will be a larger number by introducing the Spell Conduit choice. Player and Computer Conduit choices and damage would need to appear in the DOM.
• Add a way for the Player to choose when to drink a potion that increase Health Level. (Possibly randomize the Health Level increase as 1, 2, or 3 Health Level points.) Randomize Computer decision as to whether or not, in each round, the Computer drinks the potion.

(back to top)

Suggestions for enchancements are welcome! Simply open an issue with the tag "enhancement". Please give the project a star...I would be very grateful! Thank you!

(back to top)

Scott Isebrand - @isebrand

Project Link: https://github.com/ScottIsebrand/dueling-wizards

(back to top)

Fonts:

• Balthazar. Google Fonts. Accessed February 28, 2023.

Background Image:

• Renee Robinson. Paper Texture. Flickr. (Creative Commons 4.0.) Accessed February 28, 2023

Freesound.org [Creative Commons 4.0]

• klankbeeld. beach North Sea.
• qubodup. Fire Magic.
• magnuswaker. Concrete SMASH 2.
• plagasul. maxxbasswind.wav.

• Adding audio: Chris Ferdinandi. "How to play a sound with JavaScript." Go Make Things (blog). Accessed March 2, 2023

• Basic HTML layout: Pritish Nagpal. "Rock, Paper and Scissor Game using Javascript." GeeksForGeeks.org. Accessed February 26, 2023.

• To hide buttons: Rahul Uniyal. "Hide elements in HTML using display property." GeeksForGeeks.org. Accessed February 28, 2023.

• To reload a page: gianebao. Answer to "How to reload a page using JavaScript". Stack Overflow. Accessed March 2, 2023.

Template:

• Othneil Drew. "Best-README-Template." GitHub.com. Accessed March 2, 2023.

Badges:

• Ileriayo Adebiyi. "Markdown Badges." GitHub.com. Accessed March 2, 2023.
• Shunsuke Mano. Shields with icons. GitHub.com. Accessed March 2, 2023.

(back to top)