In the previous article, we learnt about writing your first text-based html game. This will be another approach to creating a html text based game and this time we will style the html using the bootstrap plugin, CSS and JavaScript. If you are new to bootstrap kindly follow this link: https://getbootstrap.com/ to read on the documentation. 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 workspace, download the bootstrap plugin into the workspace directory. The Bootstrap plugin can be found at https://getbootstrap.com/
After creating the project create three new packages namely:
- css
- src
- vendor
After creating the packages, create the following file on the root directory of the project
Name the file jgame.html
Code for jgame.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 scripting and styling, JS and JQuery files for the game engine.
The following is the content of the document:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="vendor/bootstrap.min.css">
<link rel="stylesheet" href="css/jgame.css">
<title>AmanPreet Game</title>
</head>
<body>
<div class="container"><div class="content">
<div id="jgame"></div>
</div></div>
<script type="text/javascript" src="vendor/jquery-1.11.1.js"></script>
<script type="text/javascript" src="src/jgame.js"></script>
<script type="text/javascript" src="src/demo.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jgame.startup({
gameData : jgame_demo
});
});
</script>
</body>
</html>
Code for jgame.css
#jgame_scene {
margin-top: 40px;
border: 1px solid #cccccc;
padding: 10px;
height: 400px;
overflow-y: scroll;
}
#jgame_controls {
border: 1px solid #cccccc;
padding: 10px;
}The HTML file is responsible for calling the JavaScript engine which is named as jquery-1.11.1.js and the CSS styling that is saved as jgame.css. Unfortunately, I cannot post the JavaScript files on the blog due to its length but you can download the full project from the drop box link below:
https://www.dropbox.com/sh/ox5fh8b4t5zhifh/AADqXLdP7RSiP4u1ozmAL30Qa?dl=0
CONCLUSION
That is how to create a html text based game using html and JavaScript game engines. Unlike plain html, bootstrap has a lot of plugins that allows us to build beautiful UI’s using the most minimal code possible. It is also important to note that bootstrap code enables the app to be responsive on any device that it will opened from. This approach also does separate application from the logic code.
Thank you for reading my blog. Please share it with your friends and fellow developers.
Happy coding!
