JavaScript Two Dimensional Arrays¶

Think of 2d arrays as rows and columns of a spreadsheet.

To create an two dimensional array:

let stuff = [[5, 10], ["thing", true, 42], [6, 3, 8, "happy"]];

To access a value in the array:

stuff[0]    // [5, 10]
stuff[0][1] // 10
stuff[2]    // [6, 3, 8, "happy"]
stuff[2][3] // "happy"

To add a value at the end of the array:

stuff.push([5, 2, "other"])
// stuff now equals [[5, 10], ["thing", true, 42], [6, 3, 8, "happy"], [5, 2, "other"]]

To add a value inside one level of the array:

stuff[0].push("great")
// stuff now equals [[5, 10, "great"], ["thing", true, 42], [6, 3, 8, "happy"], [5, 2, "other"]]

To remove a value from end of array:

let last = stuff.pop()
// last now equals [5, 2, "other"]
// stuff now equals [[5, 10, "great"], ["thing", true, 42], [6, 3, 8, "happy"]]

To add/remove from the front of the array, use unshift("something") and shift() respectively.

To create a 10x10 2d array, all filled with 0s.

let emptyArray = [];
for (let i=0; i<10; i++) {
    emptyArray.push([])
    for (let j=0; j<10; j++) {
        emptyArray[i].push(0);
    }
}

A handy function that will create a two dimensional array, all filled with 0s.

function create2dArray(cols, rows) {
    let emptyArray = [];
    for (let i = 0; i < cols; i++) {
        emptyArray.push([])
        for (let j = 0; j < rows; j++) {
            emptyArray[i].push(0);
        }
    }
    return emptyArray;
}

let myArray = create2dArray(20, 20);

p5js Array Examples¶

Draw Grid¶

Generate a 2d array. Make every entry either a 0 or a 1. Loop through the cols and rows to draw a grid based on the size of the array. If the current location in the array is a 0, fill with black. If it is a 0, fill with white. Generate a new grid each time the mouse is pressed.

Grid Neighbors¶

Create a grid. Store color data for the grid in a 2 dimensional array. When you click on a square, swap the colors of the current cell, and any cell orthogonally adjacent to it (NESW neighbors). It should be something like this former student project , but just a static number of rows and columns.

To talk about/include:

const variables (for number of rows/columns)
using functions to improve the readability of your code

Conway’s Game of Life¶

Introduce the Game of Life (presentation and handout. Find some stable shapes. Be sure you completely understand how the game works before we attempt to code anything.

After everyone can determine the “next state” of the game, given a scenario, it’s time to code it up.

Moving Character in Grid¶

Move a character around a 2d grid using the arrow keys. Display the cells as terrain – opengameart is good for this.

Platformer Example¶

Load starting grid from a text file. Put images in the appropriate spots, based on which character was in the text file grid.

Sudoku Example¶

Hard code a 2d array sudoku initial grid, putting in 0’s wherever you want a blank. Also make a 2d array containing the completed grid. Adapt the game of life code (or just start over) to display the sudoku grid.

2D Array CodingJS Practice Questions¶

2-D Arrays Practice Quiz¶

To confirm that you understand 2d arrays, you should try the 2-D Arrays Practice Quiz.

Next Section - JavaScript Maps