1.2 HTML Basics: Building Super Mario's Game World
Welcome, young adventurers! Today, we're going to embark on an exciting journey into the world of HTML. We'll be using our coding skills to build the foundation of our very own Super Mario game. Are you ready to bring Mario's colorful universe to life? Let's dive in!
What is HTML?
Before we start building our game world, let's understand what HTML is. HTML stands for HyperText Markup Language. It's like the skeleton of a webpage, giving it structure and meaning. Imagine you're building a house - HTML would be the walls, roof, and rooms that make up the basic structure.
Want to learn more about HTML? Check out the MDN Web Docs introduction to HTML.
Setting Up Our Workspace
First things first, we need a place to write our code. We'll be using a program called Visual Studio Code (VS Code). It's like a digital notebook specially designed for writing code.
- Download and install Visual Studio Code.
- Open VS Code and create a new file.
- Save this file as
index.htmlin a new folder called "SuperMarioBros".
VS Code is a powerful tool for coding. If you want to explore more about it, check out the VS Code documentation.
The Basic Structure of an HTML Document
Now, let's start building our game world! We'll begin with the basic structure of an HTML document. Think of this as the foundation of our Mario universe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
</head>
<body>
<!-- Our game content will go here -->
</body>
</html>
Let's break this down:
- Line 1:
<!DOCTYPE html>tells the browser that this is an HTML5 document. - Line 2:
<html lang="en">is the root element of the HTML page. Thelang="en"attribute specifies that the language of the document is English. - Lines 3-7: The
<head>element contains meta information about the document.- The
<meta charset="UTF-8">tag specifies the character encoding for the document. - The
<meta name="viewport">tag ensures that the page renders well on all devices. - The
<title>tag specifies a title for the document, which appears in the browser's title bar.
- The
- Lines 8-10: The
<body>element defines the document's body, which will contain all the visible contents of our game.
Building the Game Container
Now that we have our basic structure, let's create a container for our game world. We'll use a <div> element with a class of "game-container". This will be like the canvas where we'll paint our Mario world.
<!DOCTYPE html>
<html lang="born">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
</head>
<body>
<div class="game-container">
<!-- Our game elements will go here -->
</div>
</body>
</html>
The <div> element is like a container that helps us group and structure our content. Learn more about <div> in the MDN Web Docs.
Adding Game Elements
Now, let's start populating our game world with some elements. We'll add a scoreboard, title, copyright notice, and some game objects like Mario, blocks, and a Goomba.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
</head>
<body>
<div class="game-container">
<div class="stats">
<span>
SCORE <br />
0
</span>
<span>
COINS <br />
0
</span>
<span> WORLD <br />1-1</span>
<span>TIME <br />378</span>
<span>LIVES <br />3</span>
</div>
<div class="title">SUPER<br />MARIO BROS.</div>
<div class="copyright">©1985 NINTENDO</div>
<div class="cloud"></div>
<div class="block block1"></div>
<div class="block block2">?</div>
<div class="block block3"></div>
<div class="block block4">?</div>
<div class="block block5"></div>
<div class="mario"></div>
<div class="goomba"></div>
<div class="hill hill1"></div>
<div class="hill hill2"></div>
<div class="ground"></div>
</div>
</body>
</html>
Let's break down what we've added:
- The
<div class="stats">element contains the game stats (score, coins, world, time, and lives). <div class="title">displays the game title.<div class="copyright">shows the copyright information.- We've added various game elements like clouds, blocks, Mario, a Goomba, hills, and ground using
<div>elements with specific classes.
The <span> element is used for inline organization and styling of text. Learn more about <span> in the MDN Web Docs.
Adding Styles
To make our game world look more like Super Mario Bros., we need to add some styles. We'll do this using CSS (Cascading Style Sheets), which we'll cover in more detail in the next lesson. For now, we'll add these styles in the <head> section of our HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<style>
/* CSS styles will go here */
</style>
</head>
<body>
<!-- ... (rest of the body content) ... -->
</body>
</html>
We've added a link to a custom font that will give our game a retro look. The <style> tag is where we'll put our CSS code in the next lesson.
Bringing Mario to Life
Finally, let's add a small JavaScript script to make Mario move. We'll add this at the end of our <body> section:
<body>
<!-- ... (previous body content) ... -->
<script>
const mario = document.querySelector(".mario");
let position = 50;
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") {
position += 10;
mario.style.left = `${position}px`;
} else if (e.key === "ArrowLeft") {
position -= 10;
mario.style.left = `${position}px`;
}
});
</script>
</body>
This script allows you to move Mario left and right using the arrow keys. We'll dive deeper into JavaScript in future lessons.
The Complete HTML Code
Here's the complete HTML code for our Super Mario Bros. game world:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Mario Bros.</title>
<link
href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: "Press Start 2P", cursive;
}
.game-container {
width: 100%;
height: 100%;
background-color: #5c94fc;
position: relative;
overflow: hidden;
}
.stats {
display: flex;
justify-content: space-around;
padding: 8px;
color: white;
font-size: 22px;
font-weight: bold;
text-align: center;
}
.title {
position: absolute;
top: 200px;
left: 100px;
background-color: #e86a17;
color: #ffd8d8;
padding: 16px;
font-size: 52px;
font-weight: bold;
text-align: left;
line-height: 70px;
border-radius: 8px;
text-shadow: 8px 8px #000;
box-shadow: 4px 4px #000;
}
.copyright {
position: absolute;
top: 382px;
left: 426px;
color: #ffd8d8;
font-size: 20px;
}
.cloud {
position: absolute;
top: 200px;
right: 200px;
width: 60px;
height: 30px;
background-color: white;
border-radius: 15px;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background-color: white;
border-radius: 50%;
}
.cloud::before {
width: 25px;
height: 25px;
top: -10px;
left: 10px;
}
.cloud::after {
width: 35px;
height: 35px;
top: -15px;
right: 10px;
}
.block {
position: absolute;
width: 40px;
height: 40px;
background-color: #d87f33;
border: 1px solid #000;
color: #d87f33;
text-align: center;
line-height: 40px;
}
.block1 {
bottom: 300px;
right: 320px;
}
.block2 {
bottom: 300px;
right: 280px;
background-color: #a34100;
}
.block3 {
bottom: 300px;
right: 240px;
}
.block4 {
bottom: 300px;
right: 200px;
background-color: #a34100;
}
.block5 {
bottom: 300px;
right: 160px;
}
.mario {
position: absolute;
z-index: 1;
bottom: 150px;
left: 50px;
width: 35px;
height: 40px;
background-color: red;
}
.goomba {
position: absolute;
z-index: 1;
bottom: 150px;
left: 500px;
width: 40px;
height: 40px;
background-color: rgb(255, 111, 0);
}
.hill {
position: absolute;
bottom: 150px;
width: 200px;
height: 150px;
background-color: #00a800;
border-radius: 50% 50% 0 0;
}
.hill1 {
left: 0px;
}
.hill2 {
right: 200px;
width: 150px;
height: 100px;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 150px;
background-color: #a34100;
}
</style>
</head>
<body>
<div class="game-container">
<div class="stats">
<span>
SCORE
<br />
0
</span>
<span>
COINS
<br />
0
</span>
<span> WORLD <br />1-1</span>
<span>TIME <br />378</span>
<span>LIVES <br />3</span>
</div>
<div class="title">SUPER<br />MARIO BROS.</div>
<div class="copyright">©1985 NINTENDO</div>
<div class="cloud"></div>
<div class="block block1"></div>
<div class="block block2">?</div>
<div class="block block3"></div>
<div class="block block4">?</div>
<div class="block block5"></div>
<div class="mario"></div>
<div class="goomba"></div>
<div class="hill hill1"></div>
<div class="hill hill2"></div>
<div class="ground"></div>
</div>
<script>
const mario = document.querySelector(".mario");
let position = 50;
document.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") {
position += 10;
mario.style.left = `${position}px`;
} else if (e.key === "ArrowLeft") {
position -= 10;
mario.style.left = `${position}px`;
}
});
</script>
</body>
</html>
Conclusion
Congratulations! You've just created the foundation of a Super Mario Bros. game using HTML. We've learned about the basic structure of an HTML document, how to add elements to create our game world, and even added some basic interactivity with JavaScript.
Additional Resources
For further reading and to deepen your understanding of HTML, check out these resources:
In the next lesson, we'll dive deeper into CSS to make our game world look even more like the classic Super Mario Bros. We'll learn how to style our elements, create animations, and make our game responsive to different screen sizes.
Remember, coding is all about practice and creativity. Don't be afraid to experiment with the code, change colors, add new elements, or try to make Mario jump! The more you play around with the code, the better you'll understand how it works.
Happy coding, and see you in the next lesson!