CodeOrc.com - Learn by example
X
Make an RPG
Vue Implementations

Learn Web Development by Programming a RPG

Build a tiled gameboard for your RPG using the Web Development Stack

This tutorial is made for complete beginners and assumes you have never done any programming of any kind.

Skills learned in this lesson:
HTML
CSS
Javascript

First, when you build a web page, you will need an HTML tag, a HEAD tag and a BODY tag.

A tag is anything that is surrounded by brackets: < and >

Tags always come with an open tag and a close tag. Here are some examples:

open tagclose tag
<div></div>
<span></span>
<html></html>
<head></head>
<body></body>

The <head></head> tag contains information about the web page.

HTML tells the browser what to show.
CSS tells the browser how to show it: colors, size, positioning, etc.

Let's start building our page now. Add the following code to the HTML section on the right.

<html> <head> <link rel="stylesheet" href="/usr/78e14e/my.css"> </head> <body> Hello World </body> </html>

The link tag above adds the CSS from the tab to your page. We'll go into more details about that later. After you've finished entering the above code, click the green run button on the right. You should see the words "Hello World" on the web page below.

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

Now, let's create a small Gameboard say 3 by 3 tiles. Later, we'll place a hero on it. We want it to look like this:

Notice, there are 9 tiles. Each one looks like this:

Now, goto the code editor on the right. Remove the words "Hello World" and enter the following code between the <body> and the </body>

<div class="tile"></div>

The div tag is a foundational building block of web development used to contain text, images, or anything else.

When you hit the run button, nothing will happen yet because we haven't specified any CSS for it yet.

Goto the code editor on the right, and click the CSS tab. Enter the following code:

.tile { width: 32px; height: 32px; border: 1px solid black; }

Click the Run button. You should now see a square with a black border around it. Like this:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

Notice a similarity between these two lines of code?

HTML Div class tile CSS tile code

They both have "tile" That's because the CSS rule: .tile refers to the div tag of class="tile".

The first part ".tile" is called a CSS selector. Selectors pick which tags of the page are affected by the CSS rule. The code within the curly braces tells the browser what to do when those tags are selected.

Experiment: Change "tile" to "tile2" in both the HTML code and the CSS code. Notice that if you only change 1 the square doesn't show up.
Now experiment around with changing the width and height: change 32px to 60px and click the run button on the right. Notice how the size of the tile changes.

Let's add a background to our tile. Now that we're adding a background, we don't need a border. From the CSS section, remove the border line of code and add in a background, like so:

.tile { width: 32px; height: 32px; background: url(/img/stone_tile.png); background-size: 100% 100%; }

Hit the run button. Notice the background picture now? It should look like this:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

Okay, great. We've got our tile now. Now we just need to make 8 more tiles. So, go back to the HTML tab and copy and paste the DIV tag 8 times. The code should look like this:

<div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div> <div class="tile"></div>

Hit the Run button and you'll see a total of 9 tiles. Don't worry if they're all vertical, that's okay for now.

You should see the following:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

Try playing around with it, remove some tiles and add them back in to see if you can make 4 tiles or 7 tiles, etc.

Now we have 9 tiles next to each other. But, they're all stacked vertically. What we want is to make it like the grid we saw earlier.

We can use CSS to tell the <div></div> tiles how to line up.

display: block; results in divs that stack vertically because those divs extend all the way across the screen. This is the default behavior for divs.

display: inline-block; results in divs that end up next to each other because their width is constrained. This is the default behavior for spans.

Add the following code between the curly braces in the CSS section of the .tile.

display: inline-block;

You should see the following:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

But there's still spaces inbetween the divs. We want it to be flush, right next to each other. We're going to surround our tiles with another div tag. Place a <div> immediately before all the tiles. Then add a </div> end tag immediately after the last tile div.

Now add class="tile_container" to the div you just created. Like so:

<div class='tile_container'>

We want those spaces to have 0 width. So we'll set the font-size to zero. Add a new CSS rule for the .tile_container. The rule will be font-size: 0;

.tile_container { font-size: 0; }

You should see the following:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.

But, they're all still on one horizontal line, and we want to have 3 per line. So, we'll constrain the width of the tile_container so that the div tiles will wrap around with only 3 per line.

Add the following rule to your CSS code, in the .tile_container section.

width: 120px;

In the CSS code, the px stands for pixels. width: 120px means 120 pixels.

You should see the following:

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.
Experiment: In the CSS, Give .tile_container a rule border: 1px solid black; so you can see it's border
Experiment: Try changing the tile_container's width to 150px or 200px or 250px or 50px and see what happens.

Player Icon

Now that we've got our 3x3 small mini map, we're going to put a hero on top and write some code to move him around with the keyboard.

First things first. Create a new div and add it to your HTML code, and give it a class of "player". Add it before the first tile.

<div class='player'></div>

Now, let's tell the browser what that player div should look like, with the following CSS.

.player { width: 32px; height: 32px; background: url(/img/dwarf_m.png); background-size: 100% 100%; }

When you hit the run button, what happens?

Try placing the player div in different locations of the HTML code: before the first tile, or after the 3rd tile, or after the 4th tile, etc.

Your player icon appears in between the tiles or outside the tiles, etc. We want the icon to be on top of the tiles. For this, we need a different kind of positioning.

postion: static; is the default positioning. All the tiles you've made thus far have static positioning.

position: absolute; allows your div to be positioned according to coordinates you provide.

Go ahead and add the following CSS code to the player class. Left is like an X axis, where 0px means the 0th pixel on the left and 40px means 40 pixels to the right of that position. Top is like an inverted y axis. top: 40px means the 40th pixel from the top in the downward direction.

position: absolute; left: 40px; top: 40px;
DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.
Try changing the left and top coordinates and observe where your player icon appears.

Now we're going to make our hero move. We'll need javascript and jquery for this. First, add the following script tag right before the </body> end tag. That will include the jQuery library to your page, allowing you to use it's code.

<script src="../../js/jquery.min.js"></script> <script src="/usr/78e14e/my.js"></script>

jQuery is the most frequently used framework on the web.

Using jQuery, you can easily select parts of the page using $(). In this case, we want to pick the player, hence we have:

$('.player')

In the future, when we want to move other things around, we'll select them in a similar way, for example: $('.monster')

Next, add the following code to the javascript tab. It will call the code in the middle, once the web page is loaded.

$(document).ready( function() { $('.player').animate({ left: '+=32px' }); });

Now, when you hit the run button, the player icon will be animated to move to the right by 32 pixels. left: +=32px means increase the left position by 32 pixels.

DO IT
Did it work? Try to figure it out. If it still doesn't work just click DO IT and we'll fix the code for you.
Try changing +=32px to +=64px, or to -=32px. Notice how much player icon moves.
Try changing left to top. Does the player icon move up or down?

Great Job! Now that you have some basic understanding of HTML and CSS, it's time to learn about some Javascript fundamentals. After that, we'll go back to building our tiled Game world RPG.


In the next lesson, we will learn about Javascript variables

Get the Latest Tutorial Updates
<< >>
X