1. Reference Guide

Key Vocabulary

Term Definition Example
Spline barrier A smooth, open boundary that blocks player movement A winding cave wall
Control point A coordinate that shapes the barrier curve { x: 0.25, y: 0.6 }
Normalized coordinate A position from 0 to 1 relative to the game canvas x: 0 is left; x: 1 is right
Point sequence Control points stored in order along the barrier An array of x/y objects
Spline A smooth curve interpolated through the control points A riverbank-shaped boundary
Collision Runtime behavior that prevents a player crossing the barrier Hidden barriers still block movement

Barrier Structure

A barrier stores its identity, visibility, and ordered points.

Part What it is Example
Name Label used to identify the barrier Riverbank
Visibility Whether the barrier is drawn visible: true
Point One normalized x/y position { x: 0.2, y: 0.4 }
Points Ordered list; at least two points are required [{x: 0.2, y: 0.4}, {x: 0.8, y: 0.7}]
Curve Smooth open spline formed from the points One continuous boundary

Barrier Grammar

Structure What it does
{ x: 0.2, y: 0.4 } Defines one point in normalized canvas coordinates
points: […] Keeps points in curve order
points.push(point) Adds a point to the end of the sequence
points.pop() Removes the most recently added point
visible: false Hides the curve without turning off collision
At least two points Minimum needed to finish an open spline barrier

Choosing a Barrier Setup

Goal What to do
Make a straight-ish boundary Use two points
Follow a winding edge Add more points in order along the curve
Place points on any canvas size Use normalized values from 0 through 1
Temporarily hide a barrier Set visibility off; collision remains active
Undo the last placement Remove the last point from the sequence

Try using some of these

Use the runners in the Code Examples section. Try these one at a time, running the cell after each:

  1. Move one point and predict how the curve changes.
  2. Add a fourth point between the existing middle and end points.
  3. Change a point’s x and y while keeping both between 0 and 1.
  4. Hide the barrier and explain what still happens to player collision.
  5. Remove the last point and compare the curve.

2. LxD Cycle Process

Empathize: Students may see a wall as a shape without understanding how an ordered list of coordinates becomes a smooth game boundary. They can also confuse hiding a barrier with disabling collision, or use pixel values that do not scale with the canvas.

Define:

  • POV: GameBuilder students need to connect normalized control points to a smooth, collidable boundary because the points are data that shape behavior, not just marks on a screen.
  • Learning Goal: Students will explain a spline barrier, create an ordered list of at least two normalized control points, and distinguish visibility from collision.

Ideate:

  • HMW Question: How might we help students predict how moving one point changes a curve?
  • HMW Question: How might we make the difference between hiding a barrier and disabling collision unmistakable?
  • Activity: Read a barrier object, change its points, validate normalized values, and inspect a preview of the point sequence.

Prototype:

  • A reference guide, five code examples, two in-class popcorn hacks, and a self-checking homework barrier.
  • Students adjust points and read PASS/FIX output before submitting.
  • Excellence means explaining how point order, normalized coordinates, visibility, and collision fit together.

Test:

  • Ask peers to finish the point-editing tasks without extra explanation.
  • Check whether they keep coordinates in the 0?1 range and use at least two points.
  • Ask students to explain what happens when a barrier is hidden.
  • Revise any instruction or rubric line that does not guide students clearly.
  • Collect evidence from the code-runner checks and published homework page.
  • After teaching and grading, return to revise the lesson.

3. GameBuilder Course Requirements

GameBuilder lessons connect JavaScript data to objects used by a playable game. The GameBuilder project documentation describes spline barriers as open curves with at least two normalized control points. Points map against the logical game canvas, are smoothed by the shared GameEngine, and are used for player collision.

How this lesson matches: students build and inspect the project barrier data shape: a barrier has a name, visibility, and ordered x/y points. They test the minimum-point and normalized-coordinate rules, then distinguish visibility (whether the curve is drawn) from collision (whether the player is blocked).

4. Lesson Plan

Learning Objective: Create and explain a spline barrier using ordered normalized control points, and distinguish its visibility from its collision behavior.

Success Criteria: You meet this goal when you can do all four of these. Each one is practiced in a task on this page and is worth points in the grading plan.

You can… Where you practice it Where it is graded
Identify a barrier’s name, visibility, and point sequence Tech Talk, Example A Homework checks
Explain normalized x/y coordinates and keep them in the 0?1 range Examples B and D Homework checks
Add and remove control points while keeping their order Example C, Popcorn Hacks 1 and 2 Popcorn 1, Popcorn 2
Explain why a hidden barrier still blocks movement Example E, Homework Hack Homework explanation

Tech Talk (5 minutes)

A spline barrier is an open, smooth curve that blocks player movement. The game stores an ordered list of control points instead of many separate wall segments.

  • The Rule: Use at least two points, keep each x/y value between 0 and 1, and list points in order along the boundary.
  • Do this: Use three ordered normalized points to form a winding boundary.
  • Don’t do this: store screen-pixel coordinates such as { x: 400, y: 160 } when the project expects normalized coordinates.

Why? Normalized positions scale with the logical canvas. The game smooths the points into a curve for drawing and collision. Setting visible to false hides the drawing but does not remove the collision boundary.

const barrier = {
  name: "Riverbank",
  visible: true,
  points: [
    { x: 0.1, y: 0.3 },
    { x: 0.5, y: 0.7 },
    { x: 0.9, y: 0.3 }
  ]
};

Read the point list from one end to the other. Moving one point changes the curve; it does not create a separate wall.

5. Code Examples

A. Simple: A Barrier Object

A barrier groups its name, visibility, and points in one object. Each point is an object with normalized x and y values.

Try it: change the barrier name and move the middle control point.

Code Runner Challenge

Change the barrier name and move the middle point, then run

View IPYNB Source 
%%js
// CODE_RUNNER: Change the barrier name and move the middle point, then run

const barrier = {
  name: "Riverbank",
  visible: true,
  points: [
    { x: 0.1, y: 0.3 },
    { x: 0.5, y: 0.7 },
    { x: 0.9, y: 0.3 }
  ]
};

console.log(barrier.name);
console.log(barrier.points);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

B. Simple: Normalized Coordinates

Normalized positions use the logical canvas rather than fixed screen pixels. A value of 0 starts at the left or top edge; 1 reaches the right or bottom edge.

Try it: change the values but keep every coordinate between 0 and 1.

Code Runner Challenge

Change the point positions while keeping coordinates from 0 to 1

View IPYNB Source 
%%js
// CODE_RUNNER: Change the point positions while keeping coordinates from 0 to 1

const points = [
  { x: 0.15, y: 0.2 },
  { x: 0.5, y: 0.75 },
  { x: 0.85, y: 0.35 }
];

for (let i = 0; i < points.length; i++) {
  console.log("Point " + (i + 1) + ":", points[i].x, points[i].y);
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

C. Intermediate: Add and Undo Points

Points are stored in order. Adding one appends it to the end; undo removes the most recently added point. A finished barrier must keep at least two points.

Try it: add one point, run the code, then use pop() to undo the last point.

Code Runner Challenge

Add a point, then undo the last point with pop()

View IPYNB Source 
%%js
// CODE_RUNNER: Add a point, then undo the last point with pop()

const points = [
  { x: 0.1, y: 0.3 },
  { x: 0.5, y: 0.7 }
];

points.push({ x: 0.9, y: 0.4 });
console.log("After adding:", points);

points.pop();
console.log("After undo:", points);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

D. Intermediate: Visibility and Collision

Visibility controls whether the curve is drawn. It is separate from collision, so a hidden barrier can still block the player.

Try it: set visible to false. The last line should still report that the barrier blocks movement.

Code Runner Challenge

Hide the barrier and observe that collision remains enabled

View IPYNB Source 
%%js
// CODE_RUNNER: Hide the barrier and observe that collision remains enabled

const barrier = {
  name: "Garden Edge",
  visible: false,
  points: [
    { x: 0.2, y: 0.2 },
    { x: 0.5, y: 0.6 },
    { x: 0.8, y: 0.3 }
  ]
};

console.log("Drawn:", barrier.visible);
console.log("Collision boundary exists:", barrier.points.length >= 2);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

E. Complex: Validate a Barrier

Before finishing a barrier, confirm it has a name, at least two points, and normalized coordinates.

Try it: make one coordinate larger than 1, run the check, then correct it.

Code Runner Challenge

Edit the barrier, then run its validation checks

View IPYNB Source 
%%js
// CODE_RUNNER: Edit the barrier, then run its validation checks

const barrier = {
  name: "Forest Path",
  visible: true,
  points: [
    { x: 0.1, y: 0.2 },
    { x: 0.5, y: 0.7 },
    { x: 0.9, y: 0.3 }
  ]
};

const hasName = barrier.name.length > 0;
const hasEnoughPoints = barrier.points.length >= 2;
const normalized = barrier.points.every(point =>
  point.x >= 0 && point.x <= 1 && point.y >= 0 && point.y <= 1
);

console.log((hasName ? "PASS" : "FIX") + "  barrier has a name");
console.log((hasEnoughPoints ? "PASS" : "FIX") + "  barrier has at least two points");
console.log((normalized ? "PASS" : "FIX") + "  every x/y value is from 0 to 1");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

6. Hacks & Practice Tasks

Submit Details

  1. Create a notebook in your portfolio homework area: _notebooks/homework.
  2. Add a raw cell at the top with the frontmatter below.
  3. Add code cells for both Popcorn Hacks and the Homework Hack.
  4. Keep %%js and the CODE_RUNNER comment in each code cell.
  5. Run each cell and verify the checks show the expected output before submitting.
---
layout: post
codemirror: true
title: Spline Barriers HW
categories: [GameBuilder]
lesson_language: JavaScript
lesson_topic: Spline Barriers HW
lesson_part: interactive
lesson_type: lesson
permalink: /gamebuilder/spline-barriers-hw
author: githubID
---

How to Submit

This lesson is submitted as a link to your own published portfolio/blog page.

  • Commit and push the notebook so the page builds.
  • Open the published page and confirm every cell shows output.
  • Copy the full published URL, not the GitHub editor or repository URL.
  • Paste that URL into the built-in Link Submission form directly below this lesson.
  • Include both Popcorn Hack results and the Homework PASS/FIX results.

Submission Safety Rules (Read First)

  • Use normalized coordinates from 0 to 1 for both x and y.
  • Include at least two points in the finished barrier.
  • Keep points in the order they should shape the open curve.
  • Explain why hidden barriers can still block movement.
  • Keep %%js and the CODE_RUNNER comment in each notebook submission cell.
  • Use ## headings or smaller on your page.

Popcorn Hack 1 (In-Class): Shape a Riverbank

2-minute challenge: create a named barrier with at least three ordered points to follow a winding riverbank.

Goal: show that you can describe one smooth boundary with an ordered point list.

Hint: place points from one end to the other and keep each coordinate between 0 and 1.

Show answer const points = [{ x: 0.1, y: 0.3 }, { x: 0.5, y: 0.7 }, { x: 0.9, y: 0.3 }];

Code Runner Challenge

Finish the barrier object with at least three ordered normalized points

View IPYNB Source 
%%js
// CODE_RUNNER: Finish the barrier object with at least three ordered normalized points

const riverbank = {
  name: "Riverbank",
  visible: true,
  points: [
    // Add at least three { x, y } points from 0 to 1
  ]
};

console.log(riverbank);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Popcorn Hack 2 (In-Class): Undo the Last Point

Task: add one control point to the list, then remove only the last point with pop().

Goal: show that point order matters and undo removes the most recent placement.

Hint: push() appends; pop() removes from the end.

Show answer points.push({ x: 0.8, y: 0.4 }); points.pop();

Code Runner Challenge

Add a point to this sequence, then undo the last point

View IPYNB Source 
%%js
// CODE_RUNNER: Add a point to this sequence, then undo the last point

const points = [
  { x: 0.2, y: 0.4 },
  { x: 0.5, y: 0.7 }
];

// Add a control point, then remove the last point

console.log(points);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Homework Hack: Build and Check a Barrier

Task: create a barrier object with a name, visibility, and at least three control points. Test it with your own shape, then change one point and run it again.

Goal: bring the lesson together: choose the point order, use normalized coordinates, and explain the difference between drawing and collision.

Hint: a curve that looks smooth still needs valid data: at least two points and every coordinate between 0 and 1.

Edit the code and press Run. The check lines mark each rule PASS or FIX. Keep going until every line says PASS.

Code Runner Challenge

Build a barrier and edit it until every check says PASS

View IPYNB Source 
%%js
// CODE_RUNNER: Build a barrier and edit it until every check says PASS

const wall = {
  name: "Castle Wall",
  visible: true,
  points: [
    { x: 0.15, y: 0.25 },
    { x: 0.5, y: 0.65 },
    { x: 0.85, y: 0.3 }
  ]
};

const hasName = wall.name.trim().length > 0;
const enoughPoints = wall.points.length >= 3;
const normalized = wall.points.every(point =>
  Number.isFinite(point.x) && Number.isFinite(point.y) &&
  point.x >= 0 && point.x <= 1 && point.y >= 0 && point.y <= 1
);

console.log("Barrier:", wall.name);
console.log((hasName ? "PASS" : "FIX") + "  barrier has a name");
console.log((enoughPoints ? "PASS" : "FIX") + "  barrier has at least three points");
console.log((normalized ? "PASS" : "FIX") + "  every coordinate is normalized from 0 to 1");
console.log((wall.visible === false || wall.visible === true ? "PASS" : "FIX") + "  visibility is a boolean");
console.log("Hidden barriers still participate in collision.");
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Grading Plan (0.8 Point Total)

Part Points What earns the points
Popcorn 1 0.2 A named barrier has at least three ordered normalized points.
Popcorn 2 0.2 Adds a point and removes the most recently added point.
Homework: barrier 0.3 Includes a name, visibility setting, and at least three points.
Homework: checks 0.3 Every check shows PASS and the visibility/collision distinction is explained.
Total 1.0  

Quick Validation Checklist

  • Every point uses normalized coordinates from 0 to 1.
  • The point list has at least three points and preserves the intended order.
  • The Homework runner shows PASS on every line.
  • Every cell runs and shows output.
  • Hidden-barrier collision explanation is in your submission notes.

7. Lesson Revisions

Revision Made: The first draft was a short sequence of spline definitions, data-type notes, a DOM example, and a homework prompt. It did not follow the full lesson structure used by the Iterations lesson and had no reference tables, success-criteria table, practice sequence, knowledge check, or grading plan. This revision reorganizes the material into the same nine sections, adds the missing tables and guided examples, and makes normalized-coordinate, minimum-point, and visibility-versus-collision rules explicit. Practice and self-checks now use the barrier data students are learning about.

8. Feedback Evidence

Feedback to collect: During a practice run, ask peers whether they can predict how moving a control point changes the curve, keep coordinates in the normalized range, and explain why a hidden barrier still collides. Record confusing directions, which examples helped, and where students needed extra support.

Evidence of learning: Review both Popcorn Hack outputs, the Homework PASS/FIX checks, and each student’s explanation of visibility versus collision. Use peer and student feedback after teaching to revise the lesson; no classroom feedback is claimed here before it is collected.

9. References

Open Coding Society. (2026). GameBuilder system README (_projects/systems/gamebuilder/README.md). GameBuilder source

Open Coding Society. (2026). GameBuilder v2 documentation (_projects/systems/gamebuilder/docs/GameBuilderDocV2.md). GameBuilder documentation

Mozilla. (2026). Array.prototype.push(). MDN Web Docs. developer.mozilla.org

Mozilla. (2026). Array.prototype.pop(). MDN Web Docs. developer.mozilla.org

Mozilla. (2026). Array.prototype.every(). MDN Web Docs. developer.mozilla.org

Submit Assignment

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.