This is the fifth, and last in a series of posts on how to make a simple maze game. The first four posts can be found below.
- Initialized all of the variables and called a few functions.
- Described keyDownHandler function that executes based on where the player goes.
- Explained the render function that draws the game board
- Described several short functions used in the game
The CSS and HTML parts of the game are pretty simple. First, let’s look at the CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Title</title>
<style>
#bk{position: absolute; left:0; top: 0; z-index: 5; opacity: .3;}
body {
height:750px;
width:920px;
}
#death { display: none; position: absolute; top: 200px; left: 200px; z-index: 6;}
#message {position:absolute; left: 650px; top: 10px; z-index: 11;
background-color: navajowhite; border: 1px solid saddlebrown ;}
#stage {position:absolute; left: 10px; top: 10px; width:920px; height: 630px;}
#output2{
width: 650px;
height: 100px;
border: 1px solid black;
position: absolute;
left: 150px;
top: 50px;
margin:15px;
padding-top:15px;
text-align: center;
font-size: 32px;
display: none ;
background-image: url(aztech_pyramid_art/tile.jpg);
color: white;
z-index: 6;
}
#player{ position: absolute; z-index: 2;}
#output {position: absolute; z-index: 7; left: 20px; top: 20px; height: 90px; width:200px; font-size: 18px; padding-top: 15px; padding-left: 10px;
background-image: url(aztech_pyramid_art/points.png); background-repeat: no-repeat;}
#tryagain {position: absolute; z-index: 7; left: 420px; top: 320px; height: 90px; width:200px; font-size: 28px; color: white; padding-top: 15px; padding-left: 10px;
background-image: url(aztech_pyramid_art/points.png); background-repeat: no-repeat; display:none ;}
#winner {display:none ; float: right;}
</style>
</head>
The first element, bk, is the game board background. I wanted it to be somewhat opaque so you can see the player and objects through it. It’s supposed to give you the feeling of looking into the pyramid. The z-index of 5 makes the pyramid image be on top, but the opacity lets you see through it.
The death element is not shown originally – display: none – this attribute is changed if the player dies in the game.
The message element is that, well, message, in the top right corner of the screen, it is on top of everything, z-index of 11. I set a background color so it is easy to see the text against the white background.
The stage is where the game is drawn, I positioned it absolutely from the top left corner so when a person increases or decreases the screen size the game is in the same spot and doesn’t end up off the screen. At some point, I will modify this for phones, but this is not that point.
Join our Community! Invest in 7 Generation Games.
Wefunder Page: https://wefunder.com/7generationgames, Disclosure: bit.ly/38dFXeI
The output2 element will be shown when the game has ended and give an appropriate message based on if the player won or lost. It has a z-index of 6 because it is drawn over the pyramid. It is not shown (display: none) until the game has ended.
The player has a z-index of 2 because he is supposed to be inside the pyramid, so he is underneath the opaque pyramid image. If you want the player to be on top of your game board, give him a higher z-index. In that case, too, you probably would not use the opacity attribute for your background.
The output element is in the top left corner. It shows how much health and how much gold a player has. Now that I think about it, these elements probably could have had a bit more obvious names.
The “tryagain” div is styled to look like a large button. Not surprisingly, it reloads the game when you click on it.
Finally, there is the winner div, which is originally hidden. It is floated to the right just because the image looks good that way.
Okay, last bit, the HTML and we’re done. This is the easiest part. The container div isn’t actually necessary here but I include it because when this maze is part of our larger game, Aztech, it will be formatted just like all of the other pages, all of which have the id of container.
As you can see, the HTML is nothing but a series of mostly empty divs. I have the pyramid background, the words TRY AGAIN in the div that is the try again “button” and two images for if you lose (a gif of the player falling over dead) and if you win (you are now a god).
<body>
<div id="container">
<img id="bk" src="aztech_pyramid_art/maze_back.jpg" />
<div id="message"></div>
<div id="tryagain">TRY AGAIN</div>
<div id="points"></div>
<div id="stage"></div>
<div id="endOfGame"></div>
<p id="output"></p>
<div id="output2">
</div>
<div id="death">
<img src="aztech_pyramid_art/death.gif" />
</div>
<div id="winner">
<img src="aztech_pyramid_art/now_god.png" />
</div>
</div>
</body>
</html>
And, that’s it! That’s all there is to building a simple game with JavaScript. Woo-hoo.
I had started a series previously on how to do a simple game with impact.js, a JavaScript library. Will try to finish that up this weekend, but have been super-busy trying to get the first app in the Aztech series in the hands of beta testers by May. If you have a summer program and want to be a beta tester, email info@7generationgames.com