We will draw our canvas by adding the following function to our app.init.js file:
APP.canvas.Init = function () {
APP.canvas = document.getElementById("main_canvas");
APP.canvas.width = APP.MAP_WIDTH * APP.CELL_WIDTH;
APP.canvas.height = APP.MAP_HEIGHT * APP.CELL_HEIGHT;
APP.context = APP.canvas.getContext("2d");
APP.context.fillStyle = APP.BG_COLOR;
APP.context.fillRect(0, 0, APP.canvas.width, APP.canvas.height);
};Now, in the app.key_handler.js file, we will write our code to give the player the ability to move our rat using the keyboard. The code should look similar to the following:
APP.Keydown_Handler = function (event) {
"use strict";
var KEYS = {
/* We will initialize the arrow keys first. 37 = left key, 38
= up key, 39 = right key and 40 = down key. */
LEFT : 37,
UP : 38,
RIGHT : 39,
DOWN : 40
};
/* This switch-case will handle the key pressing and the rat's
movement. */
switch (event.keyCode) {
case KEYS.UP:
APP.player.direction = APP.Direction.UP;
break;
case KEYS.RIGHT:
APP.player.direction = APP.Direction.RIGHT;
break;
case KEYS.DOWN:
APP.player.direction = APP.Direction.DOWN;
break;
case KEYS.LEFT:
APP.player.direction = APP.Direction.LEFT;
break;
}
};We need to take a look where our wall ends or starts while pressing the keys. We need to stop moving the rat when we reach the edges. Therefore, we have to set some conditions for that. The first one is to check the direction. The function can be written as shown in the following:
APP.Check_Direction = function () {
switch (this.direction) {
case APP.Direction.UP:
if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK){
this.up = true;
this.down = false;
this.right = false;
this.left = false;
return true;
}
break;
case APP.Direction.DOWN:
if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
this.up = false;
this.down = true;
this.right = false;
this.left = false;
return true;
}
break;
case APP.Direction.RIGHT:
if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
this.up = false;
this.down = false;
this.right = true;
this.left = false;
return true;
}
break;
case APP.Direction.LEFT:
if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
this.up = false;
this.down = false;
this.right = false;
this.left = true;
return true;
}
break;
}
return false;
};While checking the directions, we also need to move in the right direction. The function to select the direction can be written as follows:
APP.Select_Direction = function () {
var possible_directions = [],
direction_quantity = 9,
rnd;
switch (this.previus_direction) {
case APP.Direction.UP:
possible_directions[0] = APP.Direction.UP;
possible_directions[1] = APP.Direction.UP;
possible_directions[2] = APP.Direction.UP;
possible_directions[3] = APP.Direction.UP;
possible_directions[4] = APP.Direction.UP;
possible_directions[5] = APP.Direction.UP;
possible_directions[6] = APP.Direction.RIGHT;
possible_directions[7] = APP.Direction.DOWN;
possible_directions[8] = APP.Direction.LEFT;
break;
case APP.Direction.RIGHT:
possible_directions[0] = APP.Direction.RIGHT;
possible_directions[1] = APP.Direction.RIGHT;
possible_directions[2] = APP.Direction.RIGHT;
possible_directions[3] = APP.Direction.RIGHT;
possible_directions[4] = APP.Direction.RIGHT;
possible_directions[5] = APP.Direction.RIGHT;
possible_directions[6] = APP.Direction.UP;
possible_directions[7] = APP.Direction.DOWN;
possible_directions[8] = APP.Direction.LEFT;
break;
case APP.Direction.DOWN:
possible_directions[0] = APP.Direction.DOWN;
possible_directions[1] = APP.Direction.DOWN;
possible_directions[2] = APP.Direction.DOWN;
possible_directions[3] = APP.Direction.DOWN;
possible_directions[4] = APP.Direction.DOWN;
possible_directions[5] = APP.Direction.DOWN;
possible_directions[6] = APP.Direction.UP;
possible_directions[7] = APP.Direction.RIGHT;
possible_directions[8] = APP.Direction.LEFT;
break;
case APP.Direction.LEFT:
possible_directions[0] = APP.Direction.LEFT;
possible_directions[1] = APP.Direction.LEFT;
possible_directions[2] = APP.Direction.LEFT;
possible_directions[3] = APP.Direction.LEFT;
possible_directions[4] = APP.Direction.LEFT;
possible_directions[5] = APP.Direction.LEFT;
possible_directions[6] = APP.Direction.UP;
possible_directions[7] = APP.Direction.RIGHT;
possible_directions[8] = APP.Direction.DOWN;
break;
}
rnd = Math.floor(Math.random() * direction_quantity);
this.direction = possible_directions[rnd];
};Now, we have to check for the walls. We can do this by adding a few conditions to the function as shown in the following:
APP.Check_Wall = function () {
if (this.up) {
if (APP.map.marks[this.y - 1][this.x] !== APP.WALL_MARK) {
this.up = true;
this.down = false;
this.right = false;
this.left = false;
} else {
this.direction = APP.Direction.STOP;
}
}
if (this.right) {
if (APP.map.marks[this.y][this.x + 1] !== APP.WALL_MARK) {
this.up = false;
this.down = false;
this.right = true;
this.left = false;
} else {
this.direction = APP.Direction.STOP;
}
}
if (this.down) {
if (APP.map.marks[this.y + 1][this.x] !== APP.WALL_MARK) {
this.up = false;
this.down = true;
this.right = false;
this.left = false;
} else {
this.direction = APP.Direction.STOP;
}
}
if (this.left) {
if (APP.map.marks[this.y][this.x - 1] !== APP.WALL_MARK) {
this.up = false;
this.down = false;
this.right = false;
this.left = true;
} else {
this.direction = APP.Direction.STOP;
}
}
};The movement of the arrow keys should be well defined. We should create the following functions for the arrow keys:
APP.Move_Up = function () {
if (this.frame === 0) {
this.frame = this.speed;
this.y--;
} else {
this.frame--;
}
if (this.y < 0) {
this.y = APP.MAP_HEIGHT - 1;
}
};
APP.Move_Right = function () {
if (this.frame === 0) {
this.frame = this.speed;
this.x++;
} else {
this.frame--;
}
if (this.x >= APP.MAP_WIDTH) {
this.x = 0;
}
};
APP.Move_Down = function () {
if (this.frame === 0) {
this.frame = this.speed;
this.y++;
} else {
this.frame--;
}
if (this.y >= APP.MAP_HEIGHT) {
this.y = 0;
}
};
APP.Move_Left = function () {
if (this.frame === 0) {
this.frame = this.speed;
this.x--;
} else {
this.frame--;
}
if (this.x < 0) {
this.x = APP.MAP_WIDTH - 1;
}
};To keep our game's canvas clean and in good shape, we need to initialize a few variables with a few fixed variables (for example, height of map, height of cell, width of map, width of cell, and so on). We can do this by writing the following code in our app.constants.js file. Check the comments with the code to get a clear idea how the code will work:
var APP = {};
(function () {
"use strict";
//used for map's size and each cell's size
APP.MAP_WIDTH = 28;
APP.MAP_HEIGHT = 31;
APP.CELL_WIDTH = 20;
APP.CELL_HEIGHT = 20;
APP.BG_COLOR = "#000000";
APP.GAME_FPS = 40;
APP.PLAYER_SPEED = 8;
APP.INITIAL_PLAYER_FRAME = 8;
APP.INITIAL_PLAYER_X = 14;
APP.INITIAL_PLAYER_Y = 23;
APP.WALL_CELL_DIGIT = 5;
APP.BLANK_CELL_DIGIT = 6;
APP.DOT_CELL_DIGIT = 7;
APP.WALL_MARK = "W";
APP.BLANK_MARK = "B";
APP.DOT_MARK = "D";
APP.PORTAL_BLINKING_SPEED = 2;
APP.PORTAL_WIDTH = 20;
APP.FIRST_PORTAL_X = 0;
APP.FIRST_PORTAL_Y = 265;
APP.SECOND_PORTAL_X = 510;
APP.SECOND_PORTAL_Y = 265;
APP.MONSTERS_QUANTITY = 4;
APP.INKY_SPEED = 7;
//for the cat's speed and position.
APP.INITIAL_INKY_X = 12;
APP.INITIAL_INKY_Y = 14;
APP.INITIAL_INKY_FRAME = 7;
APP.PINKY_SPEED = 7;
APP.INITIAL_PINKY_X = 13;
APP.INITIAL_PINKY_Y = 14;
APP.INITIAL_PINKY_FRAME = 4;
APP.BLINKY_SPEED = 7;
APP.INITIAL_BLINKY_X = 14;
APP.INITIAL_BLINKY_Y = 11;
APP.INITIAL_BLINKY_FRAME = 4;
APP.CLYDE_SPEED = 7;
APP.INITIAL_CLYDE_X = 15;
APP.INITIAL_CLYDE_Y = 14;
APP.INITIAL_CLYDE_FRAME = 7;
APP.Direction = {
UP : "UP",
RIGHT : "RIGHT",
DOWN : "DOWN",
LEFT : "LEFT",
STOP : "STOP"
};
})();..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.