Hey All! Here is my final Learning Diary for Unit 5.

Work I Have Done For The Unit:

Throughout the course of Unit 5, I put extensive work into the generation of ideas, development of designs, and final implementation of code.

From my three main ideas, I developed two designs, a design for a dynamic web-based Asteroids game, and a design for a "continue reading" feature on the website. From my designs, I decided to develop the Asteroids game. The result of my work can be seen in asteroids.js, asteroids.html and asteroids.css. 

The asteroids game is inspired by the classic "Asteroids" arcade game. In this game, players control a ship to destroy asteroids as they navigate around an asteroid field. The purpose of the game is to give hiring managers a glimpse into my personality while showing off my technical abilities. The code does an excellent job meeting both these purposes. It demonstrates my ability to develop software, while also showing that I am a positive and fun individual. 

From a technical standpoint, the asteroids.js program operates as follows: 

The user accesses the program from index.html by pressing the "fun!" button at the top of the page. This button is only available on non-mobile devices, and directs the user to the asteroids game. The game starts with the player's ship at the centre of the HTML Canvas, which is configured to be the size of the browser window. The draw() function is called to draws objects such as instances of Asteroids, Bullet and Ship.

The player is meant to use the arrow keys to control the ship, and the space key to shoot bullets at the asteroids. The player has three lives which are decremented when an asteroid hits the ship. If the number of lives reaches zero, the game is reset.

If the player destroys all the asteroids, more asteroids are automatically generated. The player can choose to leave the game by pressing the "go back to the home page" button at the buttom right corner of the screen. 

What I Have Learned:

Throughout my time programming Asteroids, I learned a number of Javascript and programming techniques. While programming, I would read Mozilla MDN Web Docs, as I found it to be a great resource on not only Javascript, but also HTML and CSS. The majority of what I referenced was Javascript syntax, such as specific ways for declaring objects, and how to use Javascript arrays. The following are some of the things I learned while programming:

Event Listeners: 

I had the opportunity to learn how to use event listeners to detect if a key was pressed, or if the size the browser window was modified. HTML DOM EVENTS are extensive, and essentially allow you to attach a function to an event. 

Arrays: 

I learned about push() and splice() two advanced operations that you can perform on an array to improve the performance and efficiency of your program. push() allows you to append an object or value to an array. splice() removes an element from the array. I used push to dynamically add objects to arrays, and used splice to remove objects. Splice() was an important to allow me to "destroy" asteroids and bullets in my Asteroids game. Using splice(), I could set an object up for garbage collection, which allows me to generate effectively limitless quantities of asteroids and bullets while keeping my code very efficient.

Another important aspect of arrays is the array.length() property. This was important in allowing me to write for-loops that iterate fully through an array regardless of it's length. 

requestAnimationFrame(draw); 

requestAnimationFrame is an important feature of javascript that enabled me to develop a game. It acts as a callback, executing a function repeatedly. This featured allowed me to draw objects to an HTML canvas at 60FPS, making the drawings appear as if they're moving. Interestingly, this feature taught me about "callback references", because the function returns a reference to the recurring function, that you need to store in order to cancel the requestAnimationFrame at the end of the game. 

HTML Canvas 

The most important part of the Asteroids program is the HTML canvas, which allows for the drawing of Javascript graphics on-the-fly. 

Debugging

In terms of debugging, there were a number of times I needed to debug the code. Specifically, the game was very heavy in math and required the calculation of velocities and accelerations to generate realistic physics for the ship, bullets and asteroids. This math required a lot of trial and error in order to get correct. I would often manipulate single values and test the code in order to tweak the motion to my liking. 

The graphics themselves were also difficult to generate, as they required a complex understanding of vector math. For example, the player's ship is a triangle described by three points in space. In order to rotate the ship, I needed to calculate how the three points should move relative to one another, regardless of the triangles location in space. Surprisingly, This was mostly based in trigonometry from high-school.  

Lastly, there were a few times where I developed loops that resulted in "segmentation faults", by accessing memory at incorrect indexes in an array. These faults were immediately obvious, and corrected through program testing. 

Learning Outcomes & Requirements:

I have used all the concepts and constructs required. Specifically, I have used comments, sequence, selection, iteration, variables, variable declarations, arrays, functions, objects. Additionally, I have gone above and beyond by using recursion in the case of my createAsteroidBelt(numberAsteroids) function. 

I make effective use of variables, and use techniques such as parameter passing (i.e. line 95) , local variables (i.e. line 215 asteroids.js), global variables (i.e. lines 5-14 asteroids.js) and arrays (i.e. lines 10-11 asteroids.js) to improve efficiency of my code. 

Rich use of a wide variety of code constructs, objects, and functions, each appropriately used and elegantly constructed, with appropriate methods and designs for each task the code performs

• I have used a WIDE variety of code constructs, objects and functions. In terms of Objects, I developed 3 different objects (ship, asteroid, bullet), storing instances of those objects in dynamically allocated arrays.
• I have used a wide variety of variables from ranging from booleans to numbers and strings.
• I have additionally used a number of code constructs including for-loops, do-while loops, if-statements and eventlisteners. 
• I made excellent use of functions to develop well-structured, easily maintained JavaScript code. The functions separate operations within the code, making it efficient and easy to understand. The functions are written in a way so that the internal implementation can easily change while keeping the interface and arguments the same. 
  
• One of my functions (createAsteroidBelt(numberAsteroids)) makes effective use of recurrsion to generate multiple asteroids. 

Effective and intelligent use of advanced techniques including objects, recursion, and regular expressions.

• I developed a createAsteroidBelt(numberAsteroids) using recursion to effectively generate multiple asteroids.
• I use advanced dynamically allocated arrays to store instances of my Asteroids and Bullet objects. Using for-loops I populate the arrays, and throughout the game, add new objects to the arrays using .push(), and remove objects from the arrays using splice(). These functions allow me to effectively manage my resources, and mark objects for garbage collection when they are no longer needed. This keeps the game running very smooth.

Well integrated with the HTML and CSS of the site, with good separation of data, process, and presentation.

• The game is expertly integrated with the HTML website, using a dynamic canvas to function on screens of all sizes. The game is meant to be played on the computer, and is thus hidden from mobile devices. 
• The source files for the game are well constructed, consisting of a .HTML, .CSS and Javascript file each in their respective folders. 

Well-commented, well laid-out and maintainable.

• I made excellent use of functions to develop well-structured, easily maintained JavaScript code. The functions separate operations within the code, making it efficient and easy to understand. The functions are written in a way so that the internal implementation can easily change while keeping the interface and arguments the same. 
• I extensively commented my code so that anyone can follow the flow of the program. The comments will make it VERY easy to go back and maintain the program in the future. 

The need for the code is strongly driven by the purposes, personas, and scenarios of Unit 1 and notably enhances the experience of the end user in that context.

• The code notably enhances the user experience and effectively meets the needs of the purposes, personas and scenarios as outlined in Unit 1. Specifically, it meets the needs of demonstrating Jamal's personality, interests and technical experience. 
• As described in Unit 1. The purpose of the website is to "give hiring managers a curated and accurate glimpse into my personality and interests." and "the website itself is intended to be a good example of both my technical and communication abilities." The code does an excellent job of meeting both these purposes. Specifically, the game is highly-technical, and shows off my ability to program. Thus, with this Javascript code, the game, and thus the website itself a good example of my technical abilities. When hiring mangers play the game, they will experience first-hand my technical ability to develop software. 
• The code also does an excellent job of showing off my personality and interests. I have a great interest in game-development and programming, which the Javascript code demonstrates. Additionally, the colours and nature of the game show off my fun and positive personality, something that the website was lacking.
• Dr. Norbain was accessing the website to learn more about me as a person. With the game, she'll be able to discover my technical abilities and also my personality. 
• Sanjay was interested in seeing who I am as a person. This game helps him understand that in addition to all my technical abilites, I am also fun. 
• From Unit 1, Stacy Wice believes it is important to hire someone that will mesh well with the company’s culture. Additionally, she thinks that a personal website is a good indication of both Jamal’s ”vibe” and technical abilities. The Javascript code I have developed gives Stacy a better idea of my "vibe" as a colourful, positive person. This will help her understand if I am a good fit for her company's culture. 

No apparent bugs, logic or run-time errors; any errors or exceptions treated well.

• No apparent bugs, logic or run-time errors. This was tested on all major web browsers, and on different devices.

Good interface design—highly accessible and usable.

• The code is accessible and integrates fluidly with the website. With the press of a button (labeled "fun!") the user is taken to the game, where they can quickly and easily play the game, or navigate back to the home page. 

Works (or fails gracefully) with all browsers.

• No apparent issues on any of the major browsers. HTMLCanvas work with 95% of all devices in use on the internet today. The game is purposefully hidden from mobile devices, as it is meant to be played on the computer.  

Submission: 

SCIS Web Space (working-copy): http://student.athabascau.ca/~jamalha2/

Permanent Location for Unit 5 HTML Files on SCIS: http://student.athabascau.ca/~jamalha2/unit5/

.Zip File:

Github Pages: http://jamalhabash.ca/comp266/