From the course: Game Development Foundations: Game-Related Math
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Grid layout - JavaScript Tutorial
From the course: Game Development Foundations: Game-Related Math
Grid layout
- [Instructor] In this example, we're going to learn how to lay out boxes in a grid. This is useful when you're trying to render a tile map or if you're trying to build an inventory UI. To get started, go into the exercise file project and open up chapter one. Next, go to the 01_03 folder and then into the Start folder. From here you'll find the grid-example.js file. Open this up in your code editor of choice, and then select all the code and copy it. Once you've done that, switch over to CodePen and create a New Pen. We'll call this Grid Example, and then double-click on the JS tab in order to expand it and then paste our code in. Once you've done this, grab the center bar and slide it over the right to give yourself some more room to code. In this example, we have the boundary of our game screen and in the upper left-hand corner, we have a red box. Just like in the previous example where we laid out boxes horizontally and vertically, all of our boxes that are being drawn in our loop…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.