JavaScript Object Literals: Building a Game Character

1. Reference Guide

Key Vocabulary

Term Definition Example
Object literal A way to keep related information together in one value. const player = { name: "Alex" };
Property One piece of information stored in an object. health: 100
Key The name of a property. It comes before the :. health
Value The information stored in a property. It comes after the :. 100
Dot notation Reads or changes a property using a dot. player.health
  • An object literal is written with curly braces { }.
  • Each property is a key: value pair, and properties are separated by commas.
  • Dot notation lets you read a property (player.coins) or change it (player.coins = 20).
  • One object can hold many properties, so you do not need a separate variable for each one.

Object Literal Structure

Part Purpose Example
{ } Starts and ends the object. const player = { };
key: value Stores one property. name: "Alex"
, Separates properties. name: "Alex", health: 100
object.key Reads a property. player.health
object.key = value Changes or adds a property. player.health = 90

Common Object Actions

Action Example Result
Read a property player.name "Alex"
Change a property player.health = player.health - 10 health goes from 100 to 90
Add a new property player.level = 1 player now has a level property
Use two objects together player.coins = player.coins + item.coins The player gets the item’s coins

Using Object Literals

  1. Create an object with const and curly braces { }.
  2. Add properties as key: value pairs, separated by commas.
  3. Read a property with dot notation, such as player.health.
  4. Change a property by giving it a new value, such as player.health = 90.
  5. Use properties from different objects together, such as a player and an item.

2. LxD Cycle

Empathize: When making a game, it can be hard to keep track of all the different variables for one player.

Define:

  • POV: We need an easier way to keep a player’s information together.

  • Learning Goal: Learn how to make an object literal and use it in a simple game.

Ideate:

  • HMW Question: How can object literals make coding a game easier?

  • Activity: Try the character and item activities below.

Prototype & Test: Add notes from your trial run here.

3. CS111 Requirements

This lesson covers introductory data organization concepts from MiraCosta College CS 111. The lesson makes sure students understand how object literals group related data into one value.

The CS 111 concepts covered in this lesson include:

  • Creating object literals: Students learn how to build an object with curly braces and key: value pairs.
  • Understanding properties, keys, and values: Students learn what each part of a property means and how it stores information.
  • Reading data with dot notation: Students use dot notation to get a property’s value from an object.
  • Changing object data: Students update an object’s properties while the program runs, such as lowering health after an attack.
  • Using multiple objects together: Students combine values from two objects, such as adding an item’s coins to a player.
  • Understanding the value of objects: Students see why grouping data in one object is easier than making many separate variables.

These requirements are taught through reference tables, code examples, interactive Popcorn Hack code runners, and a homework exercise.

The lesson is meant to introduce objects before students move on to classes, methods, and arrays of objects.

4. Lesson Plan

Learning Objective: By the end of this lesson, you will be able to create a JavaScript object literal, read its properties with dot notation, and change its properties in a simple game.

Success Criteria: You can create an object literal, name its keys and values, read a property with dot notation, and change a property’s value.

Tech Talk

Imagine you are making a game. Your player has a name, health, and coins. You could make a different variable for everything, but that gets confusing when you add more players.

An object literal lets you put the player’s information in one place. The words name, health, and coins are called properties.

%%js
const player = {
  name: "Alex",
  health: 100,
  coins: 20
};

console.log(player.name);
console.log(player.health);

5. Code Example

A. Creating an Object Literal

Code Runner Challenge

Create an object literal and print its properties.

View IPYNB Source 
%%js
// CODE_RUNNER: Create an object literal and print its properties.
const player = {
  // Each line is a key: value pair.
  name: "Alex",
  health: 100,
  coins: 20
};

// Use dot notation to read each property.
console.log("Name: " + player.name);
console.log("Health: " + player.health);
console.log("Coins: " + player.coins);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

The player object keeps the name, health, and coins together. Dot notation, such as player.name, reads one property at a time.

B. Changing a Property

Code Runner Challenge

Change a property when the player gets hit.

View IPYNB Source 
%%js
// CODE_RUNNER: Change a property when the player gets hit.
const player = {
  name: "Alex",
  health: 100,
  coins: 20
};

console.log("Health before hit: " + player.health);

// The player gets hit by an enemy, so health goes down by 10.
player.health = player.health - 10;

console.log("Health after hit: " + player.health);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

We can change a property while the game is running. Here, player.health goes from 100 to 90, like when a player gets hit by an enemy.

C. Using Two Objects Together

Code Runner Challenge

Use a player object and an item object together.

View IPYNB Source 
%%js
// CODE_RUNNER: Use a player object and an item object together.
const player = {
  name: "Alex",
  coins: 5
};

const item = {
  name: "Coin Bag",
  coins: 10
};

console.log(player.name + " picked up: " + item.name);

// Add the item's coins to the player's coins.
player.coins = player.coins + item.coins;

// Add a brand new property to the player.
player.level = 1;

console.log("Coins now: " + player.coins);
console.log("Level: " + player.level);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

This runner uses properties from two different objects. In games, object literals help you store player health, coins, items, and other information without making lots of separate variables.

6. Hacks & Practice Tasks

Prepare for your IPYNB submission

Submit your work by creating a notebook in VS Code, saving it in your portfolio repository as an .ipynb file, committing it to GitHub, and then submitting the link to your GitHub portfolio repository.

Follow these steps:

  1. Open VS Code and create a new notebook file in your portfolio repository under the “notebook” folder. (We recommend creating a new folder called “homework” under the notebook folder for organization.)
  2. Give the notebook a clear name such as YYYY-MM-DD-object-literals-hw.ipynb.
  3. Add one raw cell at the top with the frontmatter:
layout: post
codemirror: true
title: Object Literals HW
categories: [JavaScript]
lesson_language: JavaScript
lesson_topic: Object-Literals HW
lesson_part: interactive
lesson_type: lesson
permalink: /javascript/object-literals/hw
author: yourGithubID
  1. Finish the popcorn hacks and homework section inside your notebook with code cells.
  2. Save the file and commit it to your portfolio repository on GitHub.
  3. Submit your deployed portfolio link when you are done.

Important:

  • The notebook must be an .ipynb file.
  • The notebook should be stored inside your portfolio repository.
  • Make sure your portfolio is deployed.

Submit Your Homework:

  • You should submit your homework through Open Coding Society.

Popcorn Hack 1: Make a Game Character

You are making a game character. The starter code below is unfinished. Complete all three TODOs:

  1. Change name to a name you want.
  2. Replace the 0 for health with 100.
  3. Add a line that prints how many coins the player has using player.coins.

Predict the output before running your code.

Code Runner Challenge

Finish the game character and print its properties.

View IPYNB Source 
%%js
// CODE_RUNNER: Finish the game character and print its properties.
const player = {
  name: "Alex", // TODO 1: Change this name
  health: 0,    // TODO 2: Set health to 100
  coins: 10
};

console.log(player.name);
console.log(player.health);

// TODO 3: Print the number of coins here using player.coins

// Change the health when the player gets hit
player.health = player.health - 20;
console.log("Health after getting hit: " + player.health);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Popcorn Hack 2: Pick Up a Game Item

In games, players can pick up items like coins or potions. An object can store the item’s name and what it does. Complete the TODOs below before running it.

  1. Change the item name to something you would put in a game.
  2. Change how many coins it gives the player.
  3. Change the coin calculation so the player gets the coins from the item.

Use Code Example C as a model. Predict the output before running your code.

Code Runner Challenge

Pick up an item and add its coins to the player.

View IPYNB Source 
%%js
// CODE_RUNNER: Pick up an item and add its coins to the player.
const player = {
  name: "Alex",
  coins: 5
};

const item = {
  name: "Coin Bag", // TODO 1: Change this item name
  coins: 10         // TODO 2: Change this number
};

console.log("Picked up: " + item.name);

// TODO 3: Add the coins from the item to the player.
// Use player.coins and item.coins
player.coins = player.coins + 0; // <- replace this line

console.log("Coins now: " + player.coins);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Homework Hack: Make Your Own Game Character

Make a character for a game you would want to play. This could be a fighting game, adventure game, or any other type of game.

Your code must include:

  1. An object literal called player with a name, health, and coins.
  2. Another object literal called enemy with a name and damage.
  3. Dot notation that subtracts the enemy’s damage from the player’s health.
  4. A print of the player’s name and health after the attack.
  5. One more property of your choice on the player (like level or speed), printed at the end.

Example output:

Alex is fighting Slime
Health left: 85
Level: 1

Code Runner Challenge

Make your own game character and enemy with object literals.

View IPYNB Source 
%%js
// CODE_RUNNER: Make your own game character and enemy with object literals.
// Change the names and numbers to make it your own game.

// Make your player below
const player = {
  name: "Alex",
  health: 100,
  coins: 5,
  // Add another property, like level or speed
};

// Make your enemy below
const enemy = {
  name: "Slime",
  damage: 15
};

console.log(player.name + " is fighting " + enemy.name);

// Take away the enemy damage from the player health
player.health = player.health - 0;

console.log("Health left: " + player.health);

// Print the new property you added to the player
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Grading Plan

This assignment is worth 1.0 point total:

  • 0.5 pts: Popcorn Hacks 1 and 2 are fully completed and the code runs.
  • 0.5 pts: Homework Hack is fully completed and the code runs.

To get credit, finish the activities and show that your code runs.

7. Lesson Revisions

Revision Made:

8. Feedback Evidence

Feedback Received:

9. References

MiraCosta College. (2026). CS 111: Introduction to Computer Science I. MiraCosta College Catalog. https://catalog.miracosta.edu/disciplines/computerscience/#courseinventory

Mozilla. (2026). Working with objects - JavaScript. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects

Submit Assignment

Self-Assessment

Rate your work on this assignment, then add a short reflection. All 5 fields are required before you can submit.

Technical Excellence

Rate the technical quality of your work on this assignment — your use of tools, problem-solving, and technical growth.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend
Communication

Rate how clearly you communicated your work and process — explanations, documentation, and collaboration or help-seeking.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
Work Habits

Rate your work habits on this assignment — time management, persistence, responsibility, and follow-through.

1 Beginning · 2 Developing · 3 Consistent · 4 Strong · 5 Model
AI Orchestration

Rate how effectively you used AI tools to support your work — prompting, verifying, extending, or accelerating your development process.

1 Explore · 2 Understand · 3 Apply · 4 Analyze/Evaluate · 5 Create/Extend

This submits the code from this lesson's code runner(s) below as a Gist for automatic review. Save each runner with its 💾 button before submitting.

    Need to update a submission later? Open the submissions dashboard.