JavaScript Gaming
Create a Text-Based Game using JavaScript, HTML, and CSS
Hello! I'm here to explain the basics of Creating a Text-Based Game from Scratch - So lets get to it.
1 - Create the Game's Base
<div id="GAMEAREA"> |
The "Div" element with the ID "GAMEAREA" (can be whatever you want) specifies the Element Block that will hold your Game.
|
2 - Create a "Game Bar"
<input id="Gamebar" type="text" size="40" placeholder="This is the Gamebar..."> |
"input id" stores your Game Bar in the ID specified - You can adjust the "Size" to what ever you want and write what you want as the "placeholder".
This Game Bar acts as your Prompt for the Game; We'll get into that later in this Guide. |
3A - CSS...Come out to play!
Now you'll need to use the <style> tag to add some CSS to your Game.
Start with...
<style>
Then write the following:
#GAMEAREA
{
display: inline-block;
width: 500px; <-- Can be what ever you want
height: 500px; <--
border: 5px ridge color name;
text-align: center;
border-radius: 12px;
background-color: color name; <-- The Background for your Game's <div> element
color: color name; <-- This is for the Text that will appear in your Game's <div> element
}
<style>
Then write the following:
#GAMEAREA
{
display: inline-block;
width: 500px; <-- Can be what ever you want
height: 500px; <--
border: 5px ridge color name;
text-align: center;
border-radius: 12px;
background-color: color name; <-- The Background for your Game's <div> element
color: color name; <-- This is for the Text that will appear in your Game's <div> element
}
3B - CSS Button-Styling
Next, in the <style> tag you must now style some buttons that will make-up the Progression through your Game.
.button1
{
display: inline-block;
color: color name;
background-color: color name;
text-align: center;
border: color name;
transition-duration: 0.5s; <-- For a cool effect (Only if you add "hover" to your Button)
padding: 8px 16px; <-- Padding consists of height then width in pixels
font-size: 12px;
}
{
display: inline-block;
color: color name;
background-color: color name;
text-align: center;
border: color name;
transition-duration: 0.5s; <-- For a cool effect (Only if you add "hover" to your Button)
padding: 8px 16px; <-- Padding consists of height then width in pixels
font-size: 12px;
}
(Optional) Adding "hover" to your Buttons:
Underneath your Button-Styling, write this:
.button1:hover
{
background-color: color name;
color: color name; <-- "color" is your Font Color inside the Button
}
</style>
{
background-color: color name;
color: color name; <-- "color" is your Font Color inside the Button
}
</style>
REMEMBER: Close-up the <style> tag with </style> right after your Button(s)!!
4 - Adding "Functions" to your Button(s)
<button onclick="function()" class="button1">Text inside the Button</button> Next, add this: <p style="clear:both"> |
Now you must place the Buttons along with Functions and what happens when you click on them.
"function()" is where your function will go - Examples: bag(), hero(), etc... Make sure you add the class "button1" (you may notice it is the same name as your Styled-Button above; Include all Buttons you code with the specified class and the CSS will "take over" the Button) |
5 - Adding "Game Text"
"Game Text" (or Chatter) is crucial to your Game. It allows the Game to speak to the player and provide the full Gameplay experience.
<font color="color name"><p0></p0></font>
You may have noticed something curious - p0? What does that mean? Well that is a paragraph tag with a zero attached -- Basically there can be numerous <p> tags, but try to keep to at least 8. What ever Font Color you choose - When the Text appears on your Game's <div> element - It will be that color.
Example:
<font color="red"><p0></p0></font>
<font color="orange"><p1><p1></font>
<font color="yellow"><p2></p2></font>
....etc.
<font color="red"><p0></p0></font>
<font color="orange"><p1><p1></font>
<font color="yellow"><p2></p2></font>
....etc.
REMEMBER: If you choose to write Text in-between the <p> tags (<p0>Text</p0>) - It will automatically show up on your Game's <div> element!!
6 - Calling in-game Variables and Arrays
Add this:
<script>
Now, place the Game's "Variables" but with no values:
(This includes Single Variables and Arrays)
Single Variable:
var variable name;
Example:
var heroname;
var HP;
var MP;
Arrays:
var variable name = ["name", "name"];
Example:
var holding = ["Dagger", "Sword"];
REMEMBER: To call these Arrays in your Code, write this:
var variable name[number of Array item];
Arrays are numbered - The first item in the Array is always 0, then 1, and 2, so on...
Example:
var holding[1]; <-- Will call the Text inside of Array item 1, which in this case is "Sword" in the Variable "holding"
<script>
Now, place the Game's "Variables" but with no values:
(This includes Single Variables and Arrays)
Single Variable:
var variable name;
Example:
var heroname;
var HP;
var MP;
Arrays:
var variable name = ["name", "name"];
Example:
var holding = ["Dagger", "Sword"];
REMEMBER: To call these Arrays in your Code, write this:
var variable name[number of Array item];
Arrays are numbered - The first item in the Array is always 0, then 1, and 2, so on...
Example:
var holding[1]; <-- Will call the Text inside of Array item 1, which in this case is "Sword" in the Variable "holding"
7 - Setting up your Functions and Game Chatter
function function name() <-- Call your Button Function. Example: hero(), bag(), action(), etc.
{
var GAMELOG, x; <-- Specify what Variables are used in this Code
GAMELOG = document.getElementById("GAMEAREA"); <-- This makes sure your Text shows in the GAMEAREA
x = document.getElementById("gamebar").value; <-- Crucial. This Reacts to the value inside your Gamebar
(And Basically the rest is filled with "If", "Else if", and "Else" handlers)
if(x == "value inside Gamebar")
{
GAMELOG.querySelector("p0").innerHTML = "Text to throw";
querySelector with the <p0> tag shows the Thrown Text in color and row specified
}
Else Handlers go here if necessary
}
REMEMBER: You can write Variables in the Thrown Text section, for example:
"Text to throw " + variable name;
Add the space after your Thrown Text or else the Variable and Text will be mashed together side-by-side.
{
var GAMELOG, x; <-- Specify what Variables are used in this Code
GAMELOG = document.getElementById("GAMEAREA"); <-- This makes sure your Text shows in the GAMEAREA
x = document.getElementById("gamebar").value; <-- Crucial. This Reacts to the value inside your Gamebar
(And Basically the rest is filled with "If", "Else if", and "Else" handlers)
if(x == "value inside Gamebar")
{
GAMELOG.querySelector("p0").innerHTML = "Text to throw";
querySelector with the <p0> tag shows the Thrown Text in color and row specified
}
Else Handlers go here if necessary
}
REMEMBER: You can write Variables in the Thrown Text section, for example:
"Text to throw " + variable name;
Add the space after your Thrown Text or else the Variable and Text will be mashed together side-by-side.
That's it! You'll have a Functioning Text-Based Game in no time...
Did this help you? I sure hope so! Why don't you let me know by either Contacting me or Commenting below.