JSON Objects Popcorn Hacks

A guide on simple parallax background animations using Javascript, and how to implement them into games

Define the purpose of the files in the RPG games. Using the Anatomy section, describe the RPG Game files in your own words:

  • rpg.md: Defines … and starts …
  • GameControl.js: Manages …
  • GameEnv.js: Defines …
  • Background.js: Handles …
  • Player.js: Handles …

Hack

rpg.md is defines data for all assests in the game/renders<canvas></canvas> and starts the game.

GameControl.js manages – as the name suggests – the game. That is, it manages the start, game loop, and resizing of the game.

GameEnv.js manages the game environment: creation of the canvas, sizing of the canvas + properties of the canvas.

Background.js handles creation of the background.

Player.js handles the creation of the player.

Data Definition > Key-Value Definition

A JSON Object is a very common “Data Structure” used to represent data.

A JSON Object is a formation of key-valure pair.

As a popcord hack replace the code in two cells with “your name” and other vitals as the values in the key-value pairs.

Hack

%%js

const name = {name: 'Lucas M'} // Added my name
console.log(name.name)

element.append(name.name)

%%js

// Updated with my data
const person = {
    firstName: "Lucas",
    lastName: "M",
    age: 14,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};

// Display data from the object to the console
console.log(person.firstName)
console.log(person.lastName)
console.log(person.fullName());
// Display data from the object to jupyter notebook 
element.append(person.fullName());

Background

A guide to OOP using Javascript using the Background.js code.

Popcorn Hack

Find your own background for the game, get it running.

Done! You can view this on the game page.