Welcome to the Front End

After completing my Rails project, I had a vision for what a complete web application looked like and to attain that vision would be to dig deeper into logic, scope, and controllers. The front end in my mind was styling and design. That vision was very naive. After completing the Javascript module with the FlatIron School, I see now that Javascript is the majority of the internet we interact with. Entire applications can be built solely on the frontend and the logic and structure of the frontend is limitless.

For my project I delved into the world of canvas and game making. I made a single page game that renders entirely in canvas. In order to do this, I had to learn about animation, sprite sheets, collision detection, coordinate movement, and so much more. The result is much more than picking colors, fonts, and stylings that I imagined the frontend to be. The logic ended up to heavy stuff telling the browser to calculate and render a lot of motion and actions.

The most tedious but oddly fun aspect of my project was picking out the sprite sheets for building the map and animations. There are a multitude of sprite sheets available online. Each sprite sheet is a regularly spaced gridded image file.

Food Sprite Sheet…so yummy

I rendered images from the sprite sheets using the drawImage() function on the canvas. drawImage() takes 9 arguments, that you need to give and draw your image on canvas. Conceptually the arguments designate where you are cropping the sprite sheet and how large of a crop and then where you are pasting it in the canvas and the size ration you wish to render.

canvas.drawImage(
atlas, // image
(tile["x"] - 1) * map.tsize, // source x
(tile["y"] - 1) * map.tsize, // source y
map.tsize, // source width
map.tsize, // source height
c * map.tsize,  // target x
r * map.tsize, // target y
map.tsize, // target width
map.tsize // target height
);

Animating the sprites is also done with the drawImage but in this case you need to render a different cell of the sprite sheet based on the frame count of the application. I tracked the frame count and also my animation cycle in a global variable. Then would render a different image based on where I was in the animation cycle. As I looped through the sprite sheet they and animation cycle, the rendering will appear animated.

Bob’s running sprite sheet

Here is Bob’s running sprite sheet. It consists of 6 cells that when rendered consecutively in a loop will make him appear to be running. Of course Bob can run in any direction so we have a set of 6 images for each direction. Here I make variables stepCycleLoop and currentStepLoopIndex to keep track of which cell I need to render.

const stepCycleLoop = [0, 1, 2, 3, 4 ,5];
let currentStepLoopIndex = 0;
Game._drawHeroWalkFrame = function (frameX, char) {
this.ctx.drawImage(
this[`${char}`]["image"],
(frameX+(this[`${char}`]["facing"]*6)) * (map.tsize/2),
2 * (map.tsize),
map.tsize/2,
map.tsize,
this[`${char}`]["x"] - this[`${char}`]["width"] ,
this[`${char}`]["y"] - this[`${char}`]["height"],
this[`${char}`]["width"]*2,
this[`${char}`]["height"]*2);
}
frameCount++
if (frameCount > 15) {
currentStepLoopIndex++;
frameCount = 0;
}
if (currentStepLoopIndex >= stepCycleLoop.length) {
currentStepLoopIndex = 0;
}

I track the frame count in the FrameCount variable and increment it in each update of my application. The conditional logic controls the animation speed.

Take a look at my game and code on my github. Enjoy.

SuperMarket Sweeps!