monopoly

39 2 Games TacoGamer Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Monopoly Prototype</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="game-container">
        
        <div class="controls">
            <h2>Monopoly Bank</h2>
            <button id="roll-btn">Roll Dice</button>
            <div id="dice-result">Dice: -</div>
            <div id="status-panel">Player 1 Turn</div>
        </div>

<div class="monopoly-board">
            
            
            <div class="space corner" id="space-20">Free Parking</div>
            <div class="space corner" id="space-30">Go To Jail</div>
            <div class="space corner" id="space-10">Just Visiting</div>
            <div class="space corner" id="space-0">GO <div id="player-token">🔴</div></div>

<div class="space top-row" id="space-21"><div class="bar red"></div>Kentucky</div>
            <div class="space top-row" id="space-22">Chance</div>
            <div class="space top-row" id="space-23"><div class="bar red"></div>Indiana</div>
            <div class="space top-row" id="space-24"><div class="bar red"></div>Illinois</div>
            <div class="space top-row" id="space-25">B&O Rail</div>
            <div class="space top-row" id="space-26"><div class="bar yellow"></div>Atlantic</div>
            <div class="space top-row" id="space-27"><div class="bar yellow"></div>Ventnor</div>
            <div class="space top-row" id="space-28">Water Wks</div>
            <div class="space top-row" id="space-29"><div class="bar yellow"></div>Marvin</div>

<div class="space left-col" id="space-19"><div class="bar orange"></div>New York</div>
            <div class="space left-col" id="space-18"><div class="bar orange"></div>Tennessee</div>
            <div class="space left-col" id="space-17">Community</div>
            <div class="space left-col" id="space-16"><div class="bar orange"></div>St. James</div>
            <div class="space left-col" id="space-15">Pennsylvania Rail</div>
            <div class="space left-col" id="space-14"><div class="bar magenta"></div>Virginia</div>
            <div class="space left-col" id="space-13"><div class="bar magenta"></div>States</div>
            <div class="space left-col" id="space-12">Electric Co</div>
            <div class="space left-col" id="space-11"><div class="bar magenta"></div>St. Charles</div>

<div class="space right-col" id="space-31"><div class="bar green"></div>Pacific</div>
            <div class="space right-col" id="space-32"><div class="bar green"></div>North Car.</div>
            <div class="space right-col" id="space-33">Community</div>
            <div class="space right-col" id="space-34"><div class="bar green"></div>Pennsylvania</div>
            <div class="space right-col" id="space-35">Short Line</div>
            <div class="space right-col" id="space-36">Chance</div>
            <div class="space right-col" id="space-37"><div class="bar blue"></div>Park Place</div>
            <div class="space right-col" id="space-38">Luxury Tax</div>
            <div class="space right-col" id="space-39"><div class="bar blue"></div>Boardwalk</div>

<div class="space bottom-row" id="space-9"><div class="bar lightblue"></div>Conn.</div>
            <div class="space bottom-row" id="space-8"><div class="bar lightblue"></div>Vermont</div>
            <div class="space bottom-row" id="space-7">Chance</div>
            <div class="space bottom-row" id="space-6"><div class="bar lightblue"></div>Oriental</div>
            <div class="space bottom-row" id="space-5">Reading Rail</div>
            <div class="space bottom-row" id="space-4">Income Tax</div>
            <div class="space bottom-row" id="space-3"><div class="bar brown"></div>Baltic</div>
            <div class="space bottom-row" id="space-2">Community</div>
            <div class="space bottom-row" id="space-1"><div class="bar brown"></div>Mediterranean</div>

<div class="board-center">
                <h1>MONOPOLY</h1>
            </div>

</div>
    </div>

CSS

body {
    background-color: #2c3e50;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.game-container {
    display: flex;
    gap: 30px;
}

.controls {
    background: white;
    padding: 20px;
    border-radius: 8px;
    height: fit-content;
    width: 200px;
    text-align: center;
}

/* 11x11 Grid system for the board */
.monopoly-board {
    display: grid;
    grid-template-columns: 120px repeat(9, 70px) 120px;
    grid-template-rows: 120px repeat(9, 70px) 120px;
    grid-gap: 2px;
    background: #000;
    width: 874px;
    height: 874px;
    background-color: #caf0f8;
}

.space {
    background: #f4f1de;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

/* Explicitly Placing Corners */
#space-20 { grid-column: 1; grid-row: 1; }
#space-30 { grid-column: 11; grid-row: 1; }
#space-10 { grid-column: 1; grid-row: 11; }
#space-0  { grid-column: 11; grid-row: 11; }

/* Explicitly Placing Rows and Columns */
#space-21 { grid-column: 2; grid-row: 1; }
#space-22 { grid-column: 3; grid-row: 1; }
#space-23 { grid-column: 4; grid-row: 1; }
#space-24 { grid-column: 5; grid-row: 1; }
#space-25 { grid-column: 6; grid-row: 1; }
#space-26 { grid-column: 7; grid-row: 1; }
#space-27 { grid-column: 8; grid-row: 1; }
#space-28 { grid-column: 9; grid-row: 1; }
#space-29 { grid-column: 10; grid-row: 1; }

#space-19 { grid-column: 1; grid-row: 2; }
#space-18 { grid-column: 1; grid-row: 3; }
#space-17 { grid-column: 1; grid-row: 4; }
#space-16 { grid-column: 1; grid-row: 5; }
#space-15 { grid-column: 1; grid-row: 6; }
#space-14 { grid-column: 1; grid-row: 7; }
#space-13 { grid-column: 1; grid-row: 8; }
#space-12 { grid-column: 1; grid-row: 9; }
#space-11 { grid-column: 1; grid-row: 10; }

#space-31 { grid-column: 11; grid-row: 2; }
#space-32 { grid-column: 11; grid-row: 3; }
#space-33 { grid-column: 11; grid-row: 4; }
#space-34 { grid-column: 11; grid-row: 5; }
#space-35 { grid-column: 11; grid-row: 6; }
#space-36 { grid-column: 11; grid-row: 7; }
#space-37 { grid-column: 11; grid-row: 8; }
#space-38 { grid-column: 11; grid-row: 9; }
#space-39 { grid-column: 11; grid-row: 10; }

#space-9 { grid-column: 2; grid-row: 11; }
#space-8 { grid-column: 3; grid-row: 11; }
#space-7 { grid-column: 4; grid-row: 11; }
#space-6 { grid-column: 5; grid-row: 11; }
#space-5 { grid-column: 6; grid-row: 11; }
#space-4 { grid-column: 7; grid-row: 11; }
#space-3 { grid-column: 8; grid-row: 11; }
#space-2 { grid-column: 9; grid-row: 11; }
#space-1 { grid-column: 10; grid-row: 11; }

/* Center Display Zone */
.board-center {
    grid-column: 2 / 11;
    grid-row: 2 / 11;
    background: #f4f1de;
    display: flex;
    justify-content: center;
    align-items: center;
}

.board-center h1 {
    font-size: 60px;
    color: #e63946;
    transform: rotate(-45deg);
    letter-spacing: 5px;
}

/* Color Property Bars */
.bar {
    width: 100%;
    height: 15px;
    border-bottom: 2px solid black;
}
.red { background: red; }
.yellow { background: yellow; }
.orange { background: orange; }
.magenta { background: magenta; }
.green { background: green; }
.blue { background: blue; }
.lightblue { background: lightblue; }
.brown { background: #8b5a2b; }

#player-token {
    font-size: 20px;
    position: absolute;
    bottom: 5px;
    z-index: 10;
}

let playerPosition = 0; // Starts at GO (0)

const spacesInfo = {
    0: "GO", 1: "Mediterranean Avenue", 2: "Community Chest", 3: "Baltic Avenue", 4: "Income Tax",
    5: "Reading Railroad", 6: "Oriental Avenue", 7: "Chance", 8: "Vermont Avenue", 9: "Connecticut Avenue",
    10: "Just Visiting", 11: "St. Charles Place", 12: "Electric Company", 13: "States Avenue", 14: "Virginia Avenue",
    15: "Pennsylvania Railroad", 16: "St. James Place", 17: "Community Chest", 18: "Tennessee Avenue", 19: "New York Avenue",
    20: "Free Parking", 21: "Kentucky Avenue", 22: "Chance", 23: "Indiana Avenue", 24: "Illinois Avenue",
    25: "B. & O. Railroad", 26: "Atlantic Avenue", 27: "Ventnor Avenue", 28: "Water Works", 29: "Marvin Gardens",
    30: "Go To Jail", 31: "Pacific Avenue", 32: "North Carolina Avenue", 33: "Community Chest", 34: "Pennsylvania Avenue",
    35: "Short Line Railroad", 36: "Chance", 37: "Park Place", 38: "Luxury Tax", 39: "Boardwalk"
};

// Calculate updated board index position
    playerPosition = (playerPosition + totalRoll) % 40;

// Reposition Token Node inside the DOM
    const token = document.getElementById('player-token');
    const targetSpace = document.getElementById(`space-${playerPosition}`);
    targetSpace.appendChild(token);

// Update Status Screen Text
    document.getElementById('status-panel').innerText = `Landed on: ${spacesInfo[playerPosition]}`;
});

Comments 2

…