Debugging Syntax and Runtime Errors in p5.js

Welcome back. Your dungeon room now has movement, a key state, a locked exit, and walls that keep the player inside the play area. That is already enough code for small typing mistakes to become hard to spot by eye.

This lesson is about responding when the sketch does not run, the canvas is blank, or the console shows an alarming red message. You will learn to distinguish syntax errors from runtime errors, use the p5.js Web Editor’s clues, and repair a short broken dungeon sketch methodically. Plan for about 35–40 minutes.

---

Errors are clues, not a sign that you have failed

A bug is simply a difference between what you expected the program to do and what it actually does. Every programmer creates bugs, especially while changing working code. Debugging is the process of turning the computer’s clues into a specific fix.

In the p5.js Web Editor, start with two places:

1. The line numbers at the left of your code. A red highlight often points to a line near the problem.
2. The Console panel at the bottom. It reports errors and gives a type, a message, and often a line number.

The line number is a clue, not always a perfect accusation. In particular, a missing ) or } on one line can make JavaScript complain when it reaches a later line and finally becomes confused. When an error points to line 20, inspect line 20, then carefully inspect the few lines immediately above it.

---

Two kinds of error you can fix

Syntax errors: JavaScript cannot read the code

Syntax is the set of spelling, punctuation, and structure rules that make JavaScript readable to the computer. A syntax error happens before the game can properly start. Often, the canvas does not appear at all.

Common syntax pieces to check in your p5.js game are:

Code feature	Correct form	Common mistake
Function declaration	function draw() {	Missing () after draw
Function call	background(18, 21, 31);	Missing ) or comma
Conditional	if (playerX < 43) {	Missing a parenthesis or curly bracket
Block ending	}	Forgetting to close draw() or an if block

Suppose you write:

function draw {
  background(18, 21, 31);
}

The { is not truly the original mistake. The missing piece is () after draw. JavaScript expects a function’s parentheses first, sees { instead, and reports something like:

Uncaught SyntaxError: Unexpected token '{'

The repair is:

function draw() {
  background(18, 21, 31);
}

The useful habit is to translate the message into a question:

“What character did JavaScript encounter, and what punctuation should have appeared before it?”

Runtime errors: the code starts, then reaches an impossible instruction

A runtime error occurs after JavaScript has successfully read the code and begins running it. Then it reaches an instruction it cannot carry out.

One common example is a ReferenceError:

ReferenceError: playerx is not defined

This means the program tried to use a name, playerx, that JavaScript does not know.

JavaScript is case-sensitive. These names are all different:

playerX
playerx
PlayerX
PLAYERX

Your dungeon code declared playerX, with a capital X. If you later type playerx, JavaScript does not treat it as a close enough match. It treats it as an entirely different name.

Another runtime-style p5.js message may say that circle() expected three arguments but received two. That message tells you to check the function call against what it needs:

circle(playerX, playerY, 30);

For a circle, the three values are its horizontal position, vertical position, and diameter.

There is a third category, a logic error: the game runs with no red Console message but behaves incorrectly, such as a player moving in the wrong direction. You will encounter those too, but today’s goal is to resolve errors the editor can explicitly report.

---

A reliable debugging routine

When a bug appears, resist the urge to randomly rewrite several lines. That can hide the original issue and create a new one. Use this short routine instead.

1. Keep a working copy. In the p5.js editor, use File > Duplicate if it is available, then experiment in the copy. Your original dungeon remains safe.

2. Read the first red Console message. Find the error type, the named function or variable, and the line number.

3. Classify it.

   • SyntaxError means inspect punctuation and code structure.
   • ReferenceError means inspect spelling, capitalization, and whether the variable was declared.
   • A p5.js message about arguments means inspect how many values a function received.

4. Inspect the reported line and the lines above it. Check paired symbols deliberately: every ( needs ), and every { needs }.

5. Change one thing. Run the sketch immediately after that one change.

6. Read the next result. The error may disappear, move to the next bug, or give you a new clue. That is progress: JavaScript can now read or run more of your code than before.

This approach is much faster than guessing because each run tests one clear idea.

---

Debugging mission: repair a tiny dungeon sketch

First make a duplicate of your project or open a fresh p5.js sketch. Paste in the following program exactly as written. It contains two intentional bugs.

let playerX = 300;
let playerY = 200;
let playerSize = 30;

function setup() {
  createCanvas(600, 400);
}

function draw {
  background(18, 21, 31);

  fill(88, 190, 140);
  circle(playerx, playerY, playerSize);
}

Press Play and work like a debugger.

First run: repair the syntax error

The first problem prevents the program from running at all. The Console should report a SyntaxError, likely mentioning an unexpected { near the draw line.

Look specifically at the structure of setup():

function setup() {

Then compare it to the broken draw declaration. draw is also a function, so it needs the same empty parentheses before its opening curly bracket.

Make this one correction:

function draw() {

Press Play again. Do not alter anything else yet.

Second run: repair the runtime error

Now JavaScript can read the sketch and begins running draw(). The Console should now report that playerx is not defined.

At the top of the code, the declared variable is:

let playerX = 300;

The circle line uses a lowercase x:

circle(playerx, playerY, playerSize);

Correct the name so it matches the declaration exactly:

circle(playerX, playerY, playerSize);

Press Play one final time. You should see a green player circle in the middle of a dark canvas, with no red error message in the Console.

Here is the fully repaired program for comparison:

let playerX = 300;
let playerY = 200;
let playerSize = 30;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(18, 21, 31);

  fill(88, 190, 140);
  circle(playerX, playerY, playerSize);
}

Notice the debugging sequence:

• The syntax error had to be fixed first because the program could not start.
• Only after the sketch started could JavaScript reach the misspelled variable and reveal the runtime error.
• Each correction was small, specific, and tested immediately.

---

Use this on your real dungeon project

Return to your actual dungeon sketch. It should still be working, because you used a copy for the debugging mission.

If it breaks while you add later features, compare the Console message with this quick guide:

Console clue	Meaning	First place to inspect
SyntaxError	JavaScript cannot parse the code	Missing (), {}, commas, or closing punctuation near the reported line
ReferenceError: name is not defined	A variable or function name is unknown	Spelling and capitalization; the variable declaration
circle() was expecting...	A p5.js function did not receive the right kind or number of values	The function call and its comma-separated arguments
No error, but wrong behavior	Likely a logic error	The conditions and variable updates that control the behavior

For example, after the boundary lesson, this typo would cause a runtime error:

if (playerX < wallthickness + playerRadius) {

You declared wallThickness with a capital T, so the corrected condition is:

if (playerX < wallThickness + playerRadius) {

When the game runs but an invisible value seems wrong, the Console can also show you what JavaScript is seeing. You can temporarily add a log inside your D-key movement block:

if (keyIsDown("KeyD")) {
  playerX = playerX + playerSpeed;
  console.log("playerX:", playerX);
}

Hold D briefly and watch the Console values increase. Then remove or comment out the console.log() line. Since draw() runs many times per second, leaving logs in it continuously can flood the Console.

---

Key takeaways

You now have a practical method for repairing short p5.js programs:

• A syntax error means JavaScript cannot read the program’s punctuation or structure.
• A runtime error means the sketch starts but encounters an invalid instruction while running.
• The p5.js Console, red line highlights, error type, and line number are debugging clues.
• Error locations can be slightly after the true cause, so inspect nearby lines above the report too.
• JavaScript treats playerX and playerx as different names.
• Save or duplicate a working version, make one change at a time, and test after every change.

Next, you will begin the combat portion of the game by detecting when two rectangular game objects overlap—the foundation for player-enemy contact, attacks, and pickups.