Defining a matrix by creating a video game map - Introduction to matrics [Printable + Code] : Codidactic.com: Play

Test code:

// representation of the map:
	// matrix with tile codes
	let mapMatrix = [ [2, 1, 1, 1, 2],
					  [1, 1, 2, 1, 5],
					  [1, 2, 2, 5, 5],
					  [2, 2, 5, 5, 8],
					  [2, 2, 5, 8, 8]
					];

// ---=== Our renderer starts here ===---

// retrieve canvas
	let canvas = document.getElementById("gameCanvas");

// retrieve context 
	let context = canvas.getContext("2d");

// Create a new image object
	const tileset = new Image();

// Define the image source (your PNG file)
	tileset.src = "tileset.png";

// wait until the tileset is loaded to draw the tiles onto the canvas
	tileset.addEventListener("load", function(){

for (let i = 0; i < mapMatrix.length; i++){

let row = mapMatrix[i]; // retrieve the row with index `i` from mapMatrix

for (let j = 0; j < row.length; j++){

let tileCode = row[j]; // retrieve the element with index `j` from the row

context.drawImage(tileset, tileCode*32, 0, 32, 32, j*32, i*32, 32, 32); // draw tile onto canvas

}
		}
	});

// ---=== Our renderer ends here ===---
</script>

Code executed successfully!

Click the ▶ Run button to execute the code.

Play around by changing and running the code again.

SHOP

PLAY

CREATE

Introduction to matrices: Defining a matrix [Printable + Code]

Printable:

Download printable: "Defining a matrix - Learn to define a matrix by creating a video game map."

Tile codes:

Test code: