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...