JavaScript Projects for Kids

Draw the canvas

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);
};

The app.key_handler.js file

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