Reflection on Ball Animation

You can find this project here

Since the beginning of the 2D development toolkit unit, I have encountered programming techniques both familiar and new. Some of the programming techniques I used during this project were:

  • overlap detection
  • drawing API
  • basic 2D physics
  • random number generation
  • random colour generation
  • event listeners
  • recursion
  • objects

In the past, I have used a lot of random number generation as well as recursion to create game loops and random encounters. I found the random colour generation a logical step up from generating random numbers.

function generate_hex() {       //generates a random hexadecimal colour value and returns it
    var str = "0123456789ABCDEF";
    var random_int = 0;
    var result = "#";
    //loops to generate 6 random values between 0-15 to use to pick a hex value
    for (var i = 0; i < 6; i++) {
        random_int = Math.floor((Math.random() * 16));
        result += str[random_int];
    return result               //returns the hexadecimal colour value

Despite coding for the past four years, I have never created a program with a graphical user interface, so I haven’t needed to create random hex values before. I was surprised at how easy it was to take a basic loop and Math functions and get a value back which can be used for visual objects.

function render() {
    for (var i = 0; i < total_balls; i++) {

Creating a drawing API from scratch was shockingly easy, and the steps we followed to create it were logical. To continually update the image on-screen, we utilised recursion, a technique in which a function makes a call to itself. Without an exit case or a limit on resources, these can theoretically loop forever.

The render() function operates by looping through each ball on-screen and updating its position by calling the update() function and passing a ball from the balls array to it. The balls array stores objects which contain information about each individual ball on-screen at any time.

Once it has looped through each ball on-screen, the is_overlapped() function is called to check if any balls are overlapping one another, so that they can change colour if they are. draw_ball() is called so that all the balls are now redrawn in their new positions as calculated by the update() function. requestAnimationFrame(render) works by calling the render() function every time the screen refreshes, ensuring that the visuals are always up-to-date.

In conclusion, I found this animation section very useful, as it opened me up to the ease with which visuals can be created and displayed to the user on a webpage. In the past, I have been intimidated by the idea of creating a program with graphics, thinking that it was more complex than it has proven to be. I am pleased to say that I am excited about seeing what else I can create in the future using 2D animation.

Two Design Principles In Rogue Legacy

Core Gameplay Loops

A core gameplay loop consists of the player performing an action, the player’s reaction to what happens as a result and the need to repeat the initial action to progress.

Rogue Legacy is a Rogue-like game created by Cellar Door Games. It demonstrates this principle in the way that it utilises player character death. Whenever your character is killed, you are returned to the title screen, where you are prompted to “choose an heir”. They are the next character that you play with, and each has different attributes, which range from useful such as perfect memory to the ridiculous like alektorophobia (fear of chickens).

Once you have chosen your heir, you may then purchase upgrades, abilities and equipment that you can use for the rest of the game. If you never died, then you would be unable to upgrade your character, making further progression difficult.


Imperfect Information

Imperfect Information occurs when some part of a game is hidden from the player. This can range from locations to enemies and clues. Rogue Legacy utilises imperfect information throughout the game to keep it challenging.

As you explore the castle, you reveal rooms on the castle map. There is only one rule to the castle layout, the Maya is to the north, the Darkness below and the Gardens to the right. Otherwise, the player has no idea what room they are going to encounter next, or where they need to go to reach the next boss.

Another way Rogue Legacy implements imperfect information is through the character traits. Some characters are near or far-sighted, while others are insane and see enemies that aren’t actually there and cannot be defeated but do not cause damage. As a player, you can try to avoid characters that provide imperfect information, but there are occasions where it is a choice between how well you can see, and playing the run upside-down.


Despain, W. et al. (2012) 100 Principles of Game Design. San Francisco: New Riders.