Learn how to create a captivating Monopoly board UI using HTML, CSS and JavaScript. Step-by-step guide for game developers and web designers.
Table of Contents
Welcome to our comprehensive tutorial on creating a Monopoly board user interface using HTML, CSS, and JavaScript. Whether you're a seasoned game developer or a budding web designer, this step-by-step guide will walk you through the process of crafting an engaging and visually appealing Monopoly game interface from scratch.
In this tutorial, you'll learn how to structure the game board, design property spaces, implement player tokens, add interactive game controls, and apply stylish CSS animations to bring your Monopoly UI to life. By the end of this guide, you'll have the skills and knowledge to create a captivating digital version of the classic Monopoly game that you can proudly showcase to your audience.
So, without further ado, let's dive into the exciting world of game development and web design as we embark on the journey of building your very own Monopoly board UI using HTML, CSS, and JavaScript. Let's roll the dice and get started!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Credit: Simone Giannangeli
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Monopoly board.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This declares the document type and version of the HTML being used, which is HTML5 in this case.
2. <html lang="en">: This opening tag defines the start of the HTML document, with the lang attribute set to "en" indicating that the content is in English.
3. <head>: The head section of the HTML document contains meta information about the page, such as the title, character encoding, and external resources.
- <title>Monopoly Board</title>: Sets the webpage's title, which typically appears in the browser's title bar or tab.
- <meta charset="UTF-8" />: Specifies the character encoding of the document, which is UTF-8 (Unicode).
- <meta name="viewport" content="width=device-width" />: Defines the viewport settings for responsive design, ensuring that the webpage adapts to different screen widths.
- <link href="https://fonts.googleapis.com/css?family=Hammersmith+One&display=swap" rel="stylesheet">: Imports the "Hammersmith One" font from Google Fonts to be used on the webpage.
- <link rel="stylesheet" href="styles.css" />: Links an external CSS file named "styles.css" to apply styling to the HTML elements.
4. <body>: The body section contains the visible content of the webpage.
5. <main>: A semantic HTML5 element indicating the main content of the page.
- Inside the main element, there is a <div> element with the class table stop. This seems to represent the Monopoly board.
- Within the board, there is a <div> element with the class frame, which contains various <div> elements representing different corners and sections of the Monopoly board.
- Each corner of the board is represented by a <div> element with a unique class (corner tl, corner tr, corner bl, corner br). These corners contain text and emoji symbols to represent Monopoly board features.
- The style attribute with --order custom property is used to control the positioning of these corner elements on the board.
- The center of the board has a <div> element with the class center, containing the Monopoly logo and card placeholders for "community chest" and "chance."
6. <script>: This section references external JavaScript libraries and script files.
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>: Imports the jQuery library from a Content Delivery Network (CDN). jQuery is a JavaScript library that simplifies working with HTML documents and handling events.
- <script src="script.js"></script>: Links an external JavaScript file named "script.js," which likely contains custom JavaScript code for interactivity and functionality on the Monopoly board.
This is the basic structure of our Monopoly board using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the Monopoly board is in place, the next step is to add styling to the board using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our board.
Let's break down the code section by section:
1. @charset "UTF-8";: Specifies the character encoding for the CSS file.
2. * {...}: Applies the following CSS rules to all elements in the HTML document. It sets the box-sizing property to border-box, which ensures that padding and border are included in the element's total width and height calculations. It also removes the default outline when an element is clicked.
3. main {...}: Styles the <main> element. It positions the main content block absolutely within the viewport, with specific dimensions and padding. The background color is set, and a 3D perspective is added.
4. main:before {...}: Creates a pseudo-element that displays the text "click me!" below the main content.
5. .table {...}: Styles an element with the class table. It defines positioning, dimensions, transitions, and cursor style. It's likely representing a table-like element in the UI.
6. .table.hide {...}: Applies additional styles to the element with the class table to make it hidden by setting its opacity to 0.
7. .table.start {...}: Represents the initial state of the .table element with a modified transform and box-shadow.
8. .table.rotation {...}: Defines an animation called rotate with specified keyframes, which gradually changes the transform and box shadow of the .table element to create a rotation effect.
9. @keyframes rotate {...}: Specifies the keyframes for the rotate animation, transitioning the element's properties from the starting state to the ending state.
10. .frame {...}: Styles an element with the class frame, which likely represents a grid of elements. It defines grid layout, dimensions, padding, and background color.
11. .frame > div {...}: Styles the child div elements within the .frame. These likely represent individual cells or sections within the grid.
12. .frame > div .inside {...}: Styles an inner container within the .frame > div elements. It specifies positioning, dimensions, padding, and text alignment.
13. .frame > div .inside h2, .frame > div .inside strong {...}: Styles the h2 and strong elements within the .frame > div .inside elements.
14. .frame > div .inside strong {...}: Further styles the strong element within .frame > div .inside.
15. .frame > div .inside span {...}: Styles a span element within .frame > div .inside.
16. .frame > div .inside:before {...}: Creates a pseudo-element before the content of .frame > div .inside.
17. .frame > div.corner {...}: Styles corner elements within the .frame grid, likely representing special sections.
18. @keyframes spin45 {...} to @keyframes spin-135 {...}: Define keyframe animations for rotating certain elements.
This will give our Monopoly board an upgraded presentation. Create a CSS file with the name styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@charset "UTF-8";
* {
box-sizing: border-box;
outline: 0px;
}
main {
display: block;
position: absolute;
width: calc(100% - 40px);
height: calc(100% - 40px);
top: 20px;
left: 20px;
bottom: 40px;
right: 40px;
font-family: "Hammersmith One";
color: #2e464d;
border-radius: 20px;
background: #c0e3e2;
perspective: 1000px;
}
main:before {
content: "click me!";
display: block;
position: absolute;
width: 100%;
bottom: 60px;
left: 0px;
text-align: center;
text-transform: uppercase;
color: rgba(46, 70, 77, 0.2);
}
main .table {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 868px;
height: 868px;
border-radius: 14px;
transition: 2s;
cursor: pointer;
}
main .table.hide {
opacity: 0;
}
main .table.start {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -60%) scale(0.6) rotateX(60deg) rotateZ(55deg);
width: 868px;
height: 868px;
box-shadow: 4px 2px 10px 0px rgba(46, 70, 77, 0.2);
}
main .table.rotation {
animation-duration: 20s;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {
transform: translate(-50%, -60%) scale(0.6) rotateX(60deg) rotateZ(55deg);
box-shadow: 4px 2px 10px 0px rgba(46, 70, 77, 0.2);
}
to {
transform: translate(-50%, -60%) scale(0.6) rotateX(60deg) rotateZ(415deg);
box-shadow: -4px 2px 10px 0px rgba(46, 70, 77, 0.2);
}
}
.frame {
display: grid;
grid: 100px repeat(9, 68px) 100px/100px repeat(9, 68px) 100px;
position: relative;
width: 100%;
height: 100%;
padding: 8px;
grid-gap: 4px;
border-radius: 14px;
background: #2e464d;
}
.frame > div {
display: block;
position: relative;
grid-column: span 1;
order: var(--order);
background: #b2e0c8;
}
.frame > div .inside {
position: absolute;
top: 0px;
left: 0px;
width: 68px;
height: 100px;
padding: 4px;
text-align: center;
}
.frame > div .inside h2, .frame > div .inside strong {
width: 58px;
margin: 6px auto 12px auto;
text-align: center;
font-size: 8.5px;
line-height: 10px;
text-transform: uppercase;
font-weight: bold;
}
.frame > div .inside strong {
position: absolute;
left: 0px;
bottom: 8px;
width: 100%;
margin: 0px;
}
.frame > div .inside span {
display: block;
width: 100%;
font-size: 34px;
line-height: 38px;
}
.frame > div .inside:before {
content: "";
display: block;
width: 100%;
height: 20px;
border-radius: 2px 2px 1px 1px;
}
.frame > div.brown .inside:before {
background: #894c4b;
}
.frame > div.sky .inside:before {
background: #46bfff;
}
.frame > div.pink .inside:before {
background: #f89aa9;
}
.frame > div.orange .inside:before {
background: #eda13d;
}
.frame > div.red .inside:before {
background: #d05858;
}
.frame > div.green .inside:before {
background: #079a97;
}
.frame > div.yellow .inside:before {
background: #e9c33d;
}
.frame > div.blue .inside:before {
background: #4b5c99;
}
.frame > div.none .inside:before {
display: none;
}
.frame > div.center {
grid-row: span 9;
grid-column: span 9;
}
.frame > div.top {
border-radius: 1px 1px 4px 4px;
}
.frame > div.top .inside {
transform: rotate(180deg);
transform-origin: 34px 50px;
}
.frame > div.left {
border-radius: 1px 4px 4px 1px;
}
.frame > div.left .inside {
transform: rotate(90deg);
transform-origin: 50px 50px;
}
.frame > div.right {
border-radius: 4px 1px 1px 4px;
}
.frame > div.right .inside {
transform: rotate(-90deg);
transform-origin: 34px 34px;
}
.frame > div.bottom {
border-radius: 4px 4px 1px 1px;
}
.frame > div.center {
position: relative;
border-radius: 4px;
background: #95cfad;
}
.frame > div.center .logo {
display: block;
position: absolute;
top: calc(50% - 60px);
left: calc(50% - 250px);
width: 500px;
height: 120px;
text-align: center;
line-height: 120px;
font-size: 86px;
text-transform: uppercase;
color: #fff;
animation: spin-45 1ms;
animation-play-state: paused;
transform-origin: 50% 50%;
border: 4px solid #d05858;
border-radius: 10px;
background: #d05858;
}
.frame > div.center .logo:before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 6px);
height: calc(100% - 6px);
border: 3px solid #fff;
border-radius: 7px;
}
.frame > div.center .logo:after {
content: "🎩";
display: block;
position: absolute;
top: -40px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
transform-origin: 50% 50%;
font-size: 40px;
line-height: 80px;
}
.frame > div.center .cards {
display: block;
position: absolute;
width: 200px;
height: 120px;
text-align: center;
line-height: 120px;
text-transform: uppercase;
color: rgba(46, 70, 77, 0.5);
border: 4px dotted rgba(46, 70, 77, 0.5);
}
.frame > div.center .cards.community {
top: 125px;
left: 266px;
transform: rotate(135deg);
transform-origin: 0px 0px;
}
.frame > div.center .cards.chance {
bottom: 182px;
right: 40px;
transform: rotate(-45deg);
transform-origin: 100% 100%;
}
.frame > div.corner div {
position: relative;
width: 100%;
height: 100%;
transform-origin: 50% 50%;
text-align: center;
text-transform: uppercase;
}
.frame > div.corner div span {
display: block;
font-size: 30px;
}
.frame > div.corner.tl {
border-radius: 8px 1px 4px 1px;
}
.frame > div.corner.tl div {
top: -5px;
right: 5px;
animation: spin135 1ms;
animation-play-state: paused;
}
.frame > div.corner.tr {
border-radius: 1px 8px 1px 4px;
}
.frame > div.corner.tr div {
top: -5px;
left: 5px;
animation: spin-135 1ms;
animation-play-state: paused;
}
.frame > div.corner.bl {
border-radius: 1px 4px 1px 8px;
}
.frame > div.corner.bl div {
top: 5px;
right: 5px;
animation: spin45 1ms;
animation-play-state: paused;
}
.frame > div.corner.br {
border-radius: 4px 1px 8px 1px;
}
.frame > div.corner.br div {
top: 5px;
left: 5px;
font-size: 30px;
animation: spin-45 1ms;
animation-play-state: paused;
}
.frame > div.corner.br div em {
display: block;
font-size: 7px;
width: 70%;
margin: 0px auto;
font-style: normal;
}
@keyframes spin45 {
0% {
transform: rotate(45deg);
}
}
@keyframes spin-45 {
0% {
transform: rotate(-45deg);
}
}
@keyframes spin135 {
0% {
transform: rotate(135deg);
}
}
@keyframes spin-135 {
0% {
transform: rotate(-135deg);
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. It defines a set of properties for different tiles on the game board, generates the visual representation of these tiles, and adds interactivity to the game table. Here's a breakdown of what the code does:
1. Defining Tiles Data: The Tiles variable contains an array of objects, each representing a tile on the game board. Each object has properties like the label (name of the tile), price (property price), icon (icon displayed on the tile), color (color of the tile), order (display order), and pos (position of the tile: top, left, right, or bottom).
2. Generating Tiles HTML: The code uses a loop (for loop) to iterate through the Tiles.List array. It constructs an HTML string for each tile by combining the tile properties. This HTML includes a div element for each tile with appropriate classes and inline styles based on the tile properties.
3. Appending Tiles to Game Board: The generated HTML for the tiles is added to a DOM element with the class frame using the jQuery selector $(".frame").append(tiles);. This effectively adds tiles to the game board.
4. Adding Table Click Event: The code sets up a click event handler for elements with the class table. When a table element is clicked, the handler function is executed. If the clicked element has the class stop, it transitions the table from a stopped state to a rotating state. If it doesn't have the stop class, it hides the table temporarily, then removes the classes hide, start, and rotation to reset the table state.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
var Tiles = { "List" : [
{"label":"strand", "price":"£220", "icon":"", "color":"red", "order": "2", "pos":"top"},
{"label":"chance", "price":"", "icon":"❓", "color":"none", "order": "3", "pos":"top"},
{"label":"fleet street", "price":"£220", "icon":"", "color":"red", "order": "4", "pos":"top"},
{"label":"trafalgar square", "price":"£240", "icon":"", "color":"none", "order": "5", "pos":"top"},
{"label":"fenchurch st. station", "price":"£200", "icon":"🚂", "color":"none", "order": "6", "pos":"top"},
{"label":"leicester square", "price":"£260", "icon":"", "color":"yellow", "order": "7", "pos":"top"},
{"label":"ceventry street", "price":"£200", "icon":"", "color":"yellow", "order": "8", "pos":"top"},
{"label":"water<br>works", "price":"£150", "icon":"🚰", "color":"none", "order": "9", "pos":"top"},
{"label":"piccadilly", "price":"£280", "icon":"", "color":"yellow", "order": "10", "pos":"top"},
{"label":"vine street", "price":"£200", "icon":"", "color":"orange", "order": "12", "pos":"left"},
{"label":"marlborog'h street", "price":"£200", "icon":"", "color":"orange", "order": "15", "pos":"left"},
{"label":"community chest", "price":"", "icon":"💰", "color":"none", "order": "17", "pos":"left"},
{"label":"bow street", "price":"£180", "icon":"", "color":"orange", "order": "19", "pos":"left"},
{"label":"marylebone station", "price":"£200", "icon":"🚂", "color":"none", "order": "21", "pos":"left"},
{"label":"northumrl'd avenue", "price":"£160", "icon":"", "color":"pink", "order": "23", "pos":"left"},
{"label":"whitehall", "price":"£140", "icon":"", "color":"pink", "order": "25", "pos":"left"},
{"label":"electric company", "price":"£150", "icon":"💡", "color":"none", "order":" 27", "pos":"left"},
{"label":"pall mall", "price":"£140", "icon":"", "color":"pink", "order": "29", "pos":"left"},
{"label":"regent street", "price":"£300", "icon":"", "color":"green", "order": "14", "pos":"right"},
{"label":"oxford street", "price":"£300", "icon":"", "color":"green", "order": "16", "pos":"right"},
{"label":"community chest", "price":"", "icon":"💰", "color":"none", "order": "18", "pos":"right"},
{"label":"bond street", "price":"£320", "icon":"", "color":"green", "order": "20", "pos":"right"},
{"label":"liverpool st. station", "price":"£320", "icon":"🚂", "color":"none", "order": "22", "pos":"right"},
{"label":"chance", "price":"", "icon":"", "color":"none", "order": "24", "pos":"right"},
{"label":"park lane", "price":"£350", "icon":"", "color":"blue", "order": "26", "pos":"right"},
{"label":"super<br />tax", "price":"£100", "icon":"💍", "color":"none", "order": "28", "pos":"right"},
{"label":"mayfair", "price":"£400", "icon":"", "color":"blue", "order": "30", "pos":"right"},
{"label":"pentonville road", "price":"£120", "icon":"", "color":"sky", "order": "32", "pos":"bottom"},
{"label":"euston road", "price":"£100", "icon":"", "color":"sky", "order": "33", "pos":"bottom"},
{"label":"chance", "price":"", "icon":"❓", "color":"none", "order": "34", "pos":"bottom"},
{"label":"the angel, islington", "price":"£100", "icon":"", "color":"sky", "order": "35", "pos":"bottom"},
{"label":"kings cross station", "price":"£200", "icon":"🚂", "color":"none", "order": "36", "pos":"bottom"},
{"label":"income<br />tax", "price":"£200", "icon":"🔸", "color":"none", "order": "37", "pos":"bottom"},
{"label":"whitechapel road", "price":"£60", "icon":"", "color":"brown", "order": "38", "pos":"bottom"},
{"label":"community chest", "price":"", "icon":"💰", "color":"none", "order": "39", "pos":"bottom"},
{"label":"old kent road", "price":"£60", "icon":"", "color":"brown", "order": "40", "pos":"bottom"}
]};
var tiles = "";
for (var t = 0; t < Tiles.List.length; t++){
tiles += "<div class=\"" + Tiles.List[t].pos + " " + Tiles.List[t].color + "\" style=\"--order:" + Tiles.List[t].order + ";\"><div class=\"inside\"><h2>" + Tiles.List[t].label + "</h2> <span>" + Tiles.List[t].icon + "</span> <strong>" + Tiles.List[t].price + "</strong></div></div>"
}
$(".frame").append(tiles);
$(".table").click(function(){
if ($(this).hasClass("stop")) {
$(this).removeClass("stop");
$(this).addClass("start");
setTimeout(function(){
$(".table").addClass("rotation");
},2000);
} else if (!$(this).hasClass("stop")) {
$(this).addClass("hide");
$(this).addClass("stop");
setTimeout(function(){
$(".table").removeClass("hide");
$(".table").removeClass("start");
$(".table").removeClass("rotation");
},2000);
}
}); Final Output:
Conclusion:
Congratulations! You've successfully built a Monopoly board UI using HTML, CSS, and JavaScript. This tutorial covered the essential steps to creating a captivating game interface. Feel free to explore further customization and additional features.
By following this guide, you'll be well on your way to creating an impressive Monopoly game UI using HTML, CSS, and JavaScript. Experiment with different styles and interactions to make your game truly stand out. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
