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.
Horizontal and vertical layout - JavaScript Tutorial
From the course: Game Development Foundations: Game-Related Math
Horizontal and vertical layout
- [Tutor] For our next example, we're going to look at how to vertically and horizontally lay out a set of boxes. To get started, open up the Chapter 01 folder of the exercise file, Project, navigate to 01_02 and open up the Start folder. Inside of here, you'll see a layout-example.js file. Let's double click on this and open it up in our code editor of choice. We'll select all of the code inside of this file and copy it. Next, let's switch over to Codepen and create a new pen. We'll start by renaming this to Layout Example, then double clicking on the JS tab in order to expand it and paste our code in. Once you see it's rendered, simply drag the center bar over to the right to give yourself some more room to code. As you can see, we have a border for our scene and we have a red box, that's aligned in the upper left hand corner. As you can see on line 24, we're getting a reference to a box, in this case, it's a redBox, which is an object, that's defined at the top of our code and…
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.