I call this a maze game because the challenge is to get from point A to point B.
It is a really simple game to make, requiring only 513 lines of code, plus another 103 on the instructions page.The only library it uses is jQuery.
You can play the game here.
http://sandbox.7generationgames.com/aztech_test/pyramid_maze/instructions.html
You can tell, I’m still polishing it.
Since I’m feeling ambitious, I’m going to sit here and knock out 6 blog posts, one for each 100 lines of code. Ready?
The first 100 lines are just setting the stage – literally. I am including jQuery and for those who say you should use a hosted version – you’re wrong. Our games are played many remote places where Internet connections are unreliable so we locally host everything on the device.
Once the document is ready, we’re going to set the stage, literally.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js_libraries/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// THIS IS WHERE WE SET UP THE GAME ;
//Get a reference to the stage and output
var stage = document.querySelector("#stage");
var output = document.querySelector("#output");
var endOfGame = document.querySelector("#endOfGame");
var gold = 10;
var experience = 0;
var health = 10;
var gameMessage = "Use the arrow keys to climb the pyramid.";
var gameMessage2 = "";
I initialize a bunch of variables I am going to use later, the stage is where the game is going to be drawn, the output element is where I’ll put a message if you die a miserable failure, or if you win. The endofgame div will show your dead body or you as a god, depending on the outcome. I also start you out with 10 gold pieces, 10 health points and 0 experience.
The initial message just tells you to use the arrow keys to move. I add an event listener for when you press a key. I’ll explain that tomorrow. Basically, it determines which way you go and what happens.
// Set starting game message ;
setMessage();
//Add a keyboard listener
window.addEventListener("keydown", keydownHandler, false);
//The game map. These numbers align to different images on the map;
var map =
[
[7, 7, 7, 7, 3, 0, 0, 7, 7,7],
[7, 7, 7, 1, 0, 2, 0, 7, 7,7],
[7, 7, 0, 5, 6, 0, 2, 7, 7,7],
[7, 0,6, 0, 0, 2, 0, 2, 7,7],
[9, 2, 0, 6, 0, 0, 1, 0, 0,7],
[5,1, 0, 0, 0, 0, 0, 0, 0, 0 ],
[0, 0, 1, 0, 0, 2, 0, 6, 0, 0 ]
];
The map is really cool. You can use this matrix and just change the images
for the numbers and make the game completely different.
If you wanted it to be a game in space, you could change the 0 to equal a
starry background, the 5 to be enemy space ships. In this case, I want it to be inside of a pyramid.
The next map is where the player is located. I started him at the bottom left. You could start wherever you want just by changing where the number 4 is.
//The game objects map. Initially, the player is in the bottom left;
var gameObjects =
[
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[0, 0, 0, 0, 0, 0, 0, 0, 0,0],
[4, 0, 0, 0, 0, 0, 0, 0, 0,0]
];
//Map code for cell type ;
var inside = 0;
var squash = 1;
var rock = 2;
var head_dress = 3;
var player = 4;
var monkey = 5;
var goldcoin = 6;
var air = 7 ;
var jaguar2 = 8 ;
var feather = 9 ;
Above is where I set what each number if the map will correspond to. So, 0 is just inside the pyramid, 1 is a squash, 2 is a rock and so on.
// CREATES A VARIABLE THAT IS THE BACKGROUND SOUND TRACK ;
// CREATES A VARIABLE FOR WHETHER OR NOT THE PLAYER IS WALKING ;
var audio1 = new Audio();
var walk = 0 ;
// GIVES THE SIZE OF EACH CELL – 90PX SQUARE IN THIS CASE ;
// THE NUMBER OF ROWS IS THE LENGTH OF THE MAP ARRAY, NUMBER OF COLUMNS IS 12;
// CHANGING THESE NUMBERS WILL CHANGE THE MAP SIZE ;
// MAKE SURE COLUMNS = NUMBER OF COLUMNS IN ARRAYS ABOVE !! ;
var size = 90;
var rows = map.length;
var columns = 12;
// ARROW KEY CODES ;
var up = 38;
var down = 40;
var right = 39;
var left = 37;
//GETTING THE PLAYER’S POSITION;
var playerRow;
var playerColumn;
for (var row = 0; row < rows; row++) {
for (var column = 0; column < columns; column++) {
if (gameObjects[row][column] === player) {
playerRow = row;
playerColumn = column;
}
}
}
// THESE TWO FUNCTIONS START THE GAME BOARD AND GAME SOUND TRACK ;
render();
startSound();
So, there you have it – one-sixth of the way through making the game.
Maria (our CEO) thinks these posts are a waste of time because people who buy games for their kids are too busy taking their kids to soccer practice, softball and dance class to read blogs on coding games.
Prove her wrong by buying our games.
or one of our cool shirts – great for wearing while coding.
Nothing educational is ever a waste of time. Especially, if you can just copy and paste.
Thank you! I love it when people agree with me 😀
i agree
Hello Mam I need Solutions Regarding Exercise Questions on Python Language Programming So Can you help in This Regard