Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course
The "Feed-A-Star-Mole HTML" Lesson is part of the full, Build a Game Project: Feed-A-Star-Mole course featured in this preview video. Here's what you'd learn in this lesson:
Brian begins writing the HTML for the game and introduces the data attribute.
Transcript from the "Feed-A-Star-Mole HTML" Lesson
[00:00:00]
>> Brian Holt: So I'm gonna start up here with a section or you could have it be a div, it doesn't really matter. And I'm just going to call it bg for background. And this is gonna be where I put my background.
>> Brian Holt: In here, I'm gonna have a bunch of what I called whole containers.
[00:00:30]
>> Brian Holt: I gave them each an ID. So let's just do that, an ID of equal to something like, hole-0. Remember from Jen's class that an idea is unique for each one of these, right. So each one of them is going to be hole zero, hole one, hole whatever.
[00:00:58]
And Inside of that, stadium, put that on the whole container, put that on the image. I have multiple divs here, okay. So inside of that I have another div that's going to be the hole, class = "hole".
>> Brian Holt: The id = "hole-0".
>> Brian Holt: And then here inside of that, I'm gonna have an image.
[00:01:37]
>> Brian Holt: So, this is gonna be an image, and right now I'm just gonna put into something like mole-hungry or something like that.
>> Brian Holt: And it's all just gonna be mole.
>> Brian Holt: Okay, now I need 12 of these.
>> Brian Holt: Which is a lot of copying and pasting, right? So I could sit here and copy and paste this a bunch, and then go back and change all the numbers.
[00:02:15]
Let's just go ahead and grab it from, rather than sit here and write all of it out, we have mole.html. I am going to grab it from out of here.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops