To add the user interface and the game's functionalities, we will be needing JavaScript. We will need the following JavaScript files in the scripts folder:
app.main.jsapp.display_functions.jsapp.init.jsapp.key_handler.jsapp.movement_functions.jsapp.constants.js
Our app.main.js file should contain the following function that will deal with the app.key_handler.js file and your computer's keyboard. It will also call the app.init.js file for the initialization of our variables.
The following code is the content of the app.main.js file:
(function () {
"use strict";
APP.Init();
APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
window.addEventListener("keydown", APP.Keydown_Handler, false);
APP.Reset = function () {
APP.map.Init();
APP.player.Init();
APP.monsters.Init();
APP.blackout.style.transition = "0s";
APP.blackout.style.visibility = "hidden";
setTimeout(function () {
APP.timer = setInterval(APP.Show_World, 1000 / APP.GAME_FPS);
APP.blackout.style.opacity = 0;
APP.blackout.style.transition = "5s ease";
}, 100);
};
}());In our app.display_functions.js file, we will write a function, where we will include the APP.Show_world function, which is used in the app.init.js file.
The function should contain the following code (refer to the comments to understand what each step does):
APP.Show_World = function () {
var i,
dots = 0; //initialized cheese number
dots = APP.map.Draw(); //put our cheese on the canvas
if (!dots) {
APP.Game_Over("YOU WIN!"); //if all cheese are ate by the rat, then the screen should display this.
}
*/This loop is determine if the rat is caught by the cats */
for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
if (APP.monsters[i].x === APP.player.x) {
if (APP.monsters[i].y === APP.player.y) {
APP.Game_Over("YOU LOSE!");
}
}
}
APP.monsters.Move(); //cats' movement function
APP.player.Move(); // rat's movement function
APP.player.Check_For_Dots(); //This function will check number of chees.
APP.portals.Show(); //This will display two portals by using these the rat can escape.
APP.player.Show(); //This will show the rat on the canvas.
/* this function will show the monster on the canvas */
for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
APP.monsters[i].Show();
}
};The APP.map.Draw function will hold the following code:
APP.map.Draw = function () {
var i, j, image, x, y, dot_counter = 0; //initialized variables.
/*this loop will create our game map/maze */
for (i = 0; i < APP.MAP_WIDTH; i++) {
for (j = 0; j < APP.MAP_HEIGHT; j++) {
image = APP.images[APP.map.cells[j][i]];
x = i * APP.CELL_WIDTH;
y = j * APP.CELL_HEIGHT;
APP.context.drawImage(image, x, y);
if (APP.map.cells[j][i] === APP.DOT_CELL_DIGIT) {
dot_counter++;
}
}
}
return dot_counter;
};For the cats' movement, we will use the APP.monsters.Move function with the following code:
APP.monsters.Move = function () {
var i;
/*This loop will define the cats' quantity */
for (i = 0; i < APP.MONSTERS_QUANTITY; i++) {
if (APP.monsters[i].frame === APP.monsters[i].speed) {
if (APP.monsters[i].direction !== APP.Direction.STOP) {
APP.monsters[i].previus_direction =
APP.monsters[i].direction;
}
APP.monsters[i].Select_Direction(); //Will select the cats' direction.
APP.monsters[i].Check_Direction(); //Will check the cats' direction.
APP.monsters[i].Check_Wall();//Will check the surroundings of the canvas or any block.
}
/* These conditions will check the boundaries of the canvas and make the cats move. */
if (APP.monsters[i].direction !== APP.Direction.STOP) {
if (APP.monsters[i].up) {
APP.monsters[i].Move_Up();
}
if (APP.monsters[i].down) {
APP.monsters[i].Move_Down();
}
if (APP.monsters[i].left) {
APP.monsters[i].Move_Left();
}
if (APP.monsters[i].right) {
APP.monsters[i].Move_Right();
}
}
}
};Our rat will move when the APP.player.Move() function is called with the following code:
APP.player.Move = function () {
if (APP.player.frame === APP.player.speed) {
APP.player.Check_Direction();
APP.player.Check_Wall(); //This will check wall
}
/* these conditions will check our rat's valid movements */
if (APP.player.direction !== APP.Direction.STOP) {
if (APP.player.up) {
APP.player.Move_Up();
}
if (APP.player.down) {
APP.player.Move_Down();
}
if (APP.player.left) {
APP.player.Move_Left();
}
if (APP.player.right) {
APP.player.Move_Right();
}
}
};
/*this function will feed our rat the chees */
APP.player.Check_For_Dots = function () {
if (APP.map.marks[APP.player.y][APP.player.x] === APP.DOT_MARK) {
APP.player.bonuses++;
APP.map.marks[APP.player.y][APP.player.x] = APP.BLANK_MARK;
APP.map.cells[APP.player.y][APP.player.x] = APP.BLANK_CELL_DIGIT;
}
};Now, we will make our rat visible on our canvas while moving the rat on the blocks by calling the function with the following code:
APP.player.Show = function () {
//initializing our needed variables.
var figure_offset = 5,
frame_number = 2 - Math.floor(this.frame / 3),
frame_offset = 1 - this.frame / this.speed,
image, x, y;
/* conditions for the rat's direction for up, down, left, right*/
if (this.up) {
image = this.up_images[frame_number];
x = (this.x * APP.CELL_WIDTH) - figure_offset;
y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;
} else if (this.down) {
image = this.down_images[frame_number];
x = (this.x * APP.CELL_WIDTH) - figure_offset;
y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;
} else if (this.right) {
image = this.right_images[frame_number];
x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
y = (this.y * APP.CELL_HEIGHT) - figure_offset;
} else {
image = this.left_images[frame_number];
x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
y = (this.y * APP.CELL_HEIGHT) - figure_offset;
}
APP.context.drawImage(image, x, y);
};To show our cats on the canvas, we need to use the following code in our APP.Show_Monster() function:
APP.Show_Monster = function () {
//initializing needed variables.
var figure_offset = 15,
frame_offset = 1 - this.frame / this.speed,
image, x, y;
/* binding the cats' directions for 4 directions*/
if (this.up) {
image = this.up_images[0];
x = (this.x * APP.CELL_WIDTH) - figure_offset;
y = ((this.y - frame_offset) * APP.CELL_HEIGHT) - figure_offset;
} else if (this.down) {
image = this.down_images[0];
x = (this.x * APP.CELL_WIDTH) - figure_offset;
y = ((this.y + frame_offset) * APP.CELL_HEIGHT) - figure_offset;
} else if (this.right) {
image = this.right_images[0];
x = ((this.x + frame_offset) * APP.CELL_WIDTH) - figure_offset;
y = (this.y * APP.CELL_HEIGHT) - figure_offset;
} else {
image = this.left_images[0];
x = ((this.x - frame_offset) * APP.CELL_WIDTH) - figure_offset;
y = (this.y * APP.CELL_HEIGHT) - figure_offset;
}
APP.context.drawImage(image, x, y);
};To show the portal, we need to write another function called APP.portals.Show (), including the following code:
APP.portals.Show = function () {
//initialized variables and incremented.
var offset, frame_offset, sw = +!this.raise;
frame_offset = sw - this.frame_counter / (this.speed * APP.GAME_FPS);
/*controlled frame of the game */
offset = Math.abs(this.width * frame_offset);
APP.context.drawImage(this[0].image, this[0].x - offset, this[0].y);
APP.context.drawImage(this[1].image, this[1].x + offset, this[1].y);
this.frame_counter++;
if (this.frame_counter === this.speed * APP.GAME_FPS) {
this.frame_counter = 0;
this.raise = !this.raise;
}
};The user will need to see a message after the game is over or make the screen blur. To do this, we need to declare another function called APP.Game_Over() with the following code:
APP.Game_Over = function (condition) {
clearInterval(APP.timer);
APP.blackout = document.getElementById("blackout");
APP.blackout.textContent = condition;
APP.blackout.style.visibility = "visible";
APP.blackout.style.opacity = 0.7;
};Our app.init.js file will contain a function. In the function, we will declare the following variables:
APP.map = {};
APP.player = {};
APP.monsters = [{}, {}, {}, {}];
APP.portals = [{}, {}];
APP.images = [];
APP.timer = {};
APP.canvas = {};
APP.context = {};
APP.blackout = document.getElementById("blackout");Write a function that will contain few more variables, as follows:
APP.Init = function () {
APP.map.Init();
APP.player.Init();
APP.portals.Init();
APP.monsters.Init();
APP.images.Init();
APP.canvas.Init();
};Now, we will initialize our game's map:
APP.map.Init = function () {
//initializing few variables ; few of them may look ugly, but don't worry they are a little bit random.
var i, j, map_in_strings = [
"5000000000000250000000000002",
"1777777777777117777777777771",
"1750027500027117500027500271",
"1716617166617117166617166171",
"1740037400037437400037400371",
"1777777777777777777777777771",
"1750027527500000027527500271",
"1740037117400250037117400371",
"1777777117777117777117777771",
"4000027140026116500317500003",
"0000217150036436400217150000",
"6666117116666666666117116666",
"0000317116502665026117140000",
"0000037436153664216437400000",
"6666667666116666116667666666",
"0000027526140000316527500000",
"0000217116400000036117150000",
"6666117116666666666117116666",
"0000317116500000026117140000",
"5000037436400250036437400002",
"1777777777777117777777777771",
"1750027500027117500027500271",
"1740217400037437400037150371",
"1777117777777777777777117771",
"4027117527500000027527117503",
"5037437117400250037117437402",
"1777777117777117777117777771",
"1750000340027117500340000271",
"1740000000037437400000000371",
"1777777777777777777777777771",
"4000000000000000000000000003"
];
APP.map.cells = [];
for (i = 0; i < APP.MAP_HEIGHT; i++) {
APP.map.cells[i] = [];
for (j = 0; j < APP.MAP_WIDTH; j++) {
APP.map.cells[i][j] = +map_in_strings[i].charAt(j);
}
}
APP.map.marks = [];
/* This loop will determine the map's size */
for (i = 0; i < APP.MAP_HEIGHT; i++) {
APP.map.marks[i] = [];
for (j = 0; j < APP.MAP_WIDTH; j++) {
if (APP.map.cells[i][j] <= APP.WALL_CELL_DIGIT) {
APP.map.marks[i][j] = APP.WALL_MARK;
} else if (APP.map.cells[i][j] === APP.BLANK_CELL_DIGIT) {
APP.map.marks[i][j] = APP.BLANK_MARK;
} else if (APP.map.cells[i][j] === APP.DOT_CELL_DIGIT) {
APP.map.marks[i][j] = APP.DOT_MARK;
}
}
}
};..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.