Use Case JavaScript
Let’s create a very simple game!
The objective is to use a JavaScript Class.
This project won’t take much of your time and you can experiment with it, expand it and just have fun.
The Game
Very simple. We will have two players (good guy, enemy) battle each other until one player’s health reaches zero and that person dies.
The Player objects will be instantiations of a Player Class.
We will not be creating anything with a sophisticated interface or complex JavaScript. That will be for you to do at your leisure. But it will work!
You can see all the code, play it and copy if desired here. (I may change it over time as this makes a fun distraction for me after a day of programming.)
The Player Class
This JavaScript Class will contain several basic properties. Most are for you to experiment/implement on your own. For us, the Health will be the most important.
But you will have a Weapon, Type(of character) and Level you could implement, to add a lot of fun functionality.
Create this class in your favorite editor and test it. I used VSCode initially. Save it as desired.
(For testing just the Player Class I saved it as playerclass.js but later, after adding a few functions, I save it as script.js, to be referenced in a web page.)
We will be modifying and adding to this, but this is the core of our Player.
Next I’d like us to add two methods after the constructor.
- The reset() method will be used to initialize our players and restart.
- The getAllInfo() method will give current information on all the properties of our players. Again, for this, only the health (level too but I don’t use it) will change. Basically it returns a status.
Add these two methods after the constructor and test to make sure it works.
Finally, we will add a Class method where the battling is done, and a random number generator to determine who made the vicious attack.
- The method doBattle() will get a random number from the method getRan(). We will get a random number for each player and adjust their health based on whose value is greater.
Important. There is a reference to an HTML element, action, on lines 77, 80 and 86, that we have not created yet.
Note: I adjust the player’s level but don’t do anything with it. At least not for now!
The HTML
Next we will create simple HTML file. In the <head> we will reference a very simple CSS file and in the <body>, script.js, which contains our Player Class and three JavaScript functions to help us play. Name the HTML file as desired.
Note: I switched to an HTML editor, although I could have kept using VSCode, so the images appear differently.
Again, keeping the HTML very simple so you can do it quickly and the play with improvements later.
It does reference a CSS file, line 6, which will be next. In line 26 I referenced my script.js, which is the Player Class and three additional functions.
The CSS
Nothing fancy here. Create a file called style.css as follows.
The Final JavaScript File
I named it script.js. It contains the Player Class and three functions to help us play the game.
Create a file and name it script.js. Put your Player Class in it and the three functions below to Play the game. The reference to script.js is line 26 of your HTML file.
- The function initGame() basically sets up the players.
- The function startGame() gets the battle going! It gets player1 battling against player1. Who takes damage? Inquiring minds want to know.
- The function status() shows each player’s current status, again, health being the important one for us.
Running the Game
Open your HTML file in your browser and have a go. It should look as follows after you click “Play/Reset”. Keep hitting the “Start Battle” and watch the health. When one reaches zero, that player dies.
The HTML file after clicking Play/Reset
Yay! Gehn died after a ferocious battle by repeatedly clicking Start Battle.
Conclusion:
This purpose of this is not to show anything fancy but to use a JavaScript Class and have fun.
I hope you will play with this, add functionality, improve the interface, extend the Class, add Classes — who knows.