In this article, we are going to learn about our text based game based on html, css and java script. If you are a beginner at text based game creation, then I encourage you to read the article. For this article we will use VS Code to build beautiful looking UI and the engine backend of the game that is based on JavaScript. If you have any other code editor that allows html editing, you can go ahead and use it as this project is not IDE or Editor based.
CREATING HOME PAGE
Open your editor and create a new workspace and rename it to your preference.
After creating the project create three new packages namely:
- Styles
- Game-disks
- Fonts
After creating the packages, create the following file on the root directory of the project
Name the file index.html
Code for index.html
This is an html document that contains the user interface for our application. It will have text field for the game player to input the specific instruction sets. The html page will also display the instructions to the user of the game. We created the output and the input layout using <div> containers that control the layout of the screen. Additionally, we created links to the CSS and JS files for scripting and styling.
The following is the content of the document:
<!-- Game content -->
<div id="output"></div>
<!-- Player input -->
<div class="input">
<span class="ml-2">> </span><input id="input" autofocus spellcheck="false">
</div>
<!-- CSS styles -->
<link id="styles" rel="stylesheet" type="text/css" href="styles/modern.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@700&family=Work+Sans&display=swap" rel="stylesheet">
<!-- Include game engine -->
<script src="index.js"></script>
<!-- Include game data ('disk') -->
<script src="game-disks/demo-disk.js"></script>
<!-- Load disk into engine -->
<script>loadDisk(demoDisk);</script>
The HTML file is responsible for calling the JavaScript engine which is named as index.js and the JavaScript disk file initialized as the demoDisk. The JavaScript files are long for me to post on the blog but you can download the full project from the drop box link below:
https://www.dropbox.com/sh/rcibwa9dkhydkjj/AAA-Wmn0smJhJzPAw5vDfXi4a?dl=0
CONCLUSION
That is how to create a html text based game using html and JavaScript game engines. It enables us keep the code clean and easier to maintain because it separates the application design from application logic.
Thank you for reading my blog. Please share it with your friends and fellow developers.
Happy coding!
