Skip to content

Instantly share code, notes, and snippets.

@AEgamesNi

AEgamesNi/index.html

Created June 9, 2025 21:09
Show Gist options
  • Save AEgamesNi/c1ee11f92892658366dfc6aaff259262 to your computer and use it in GitHub Desktop.
Save AEgamesNi/c1ee11f92892658366dfc6aaff259262 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>4‑Player Board Game 🎲</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: radial-gradient(circle at top, #f0f4ff, #dbe4ff);
margin: 0; padding: 20px;
text-align: center;
color: #333;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #1e3a8a;
}
#board {
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
gap: 20px;
}
.step {
width: 100px;
height: 100px;
background: #fff;
border: 4px solid #4a4a4a;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: bold;
position: relative;
transition: transform 0.2s;
}
.step:hover {
transform: scale(1.05);
}
.center {
background: #f9f5ff;
border-radius: 50%;
font-size: 2em;
border: 5px dashed #6c757d;
}
.player1::after, .player2::after, .player3::after, .player4::after {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
position: absolute;
bottom: 8px;
}
.player1::after { background: red; left: 8px; }
.player2::after { background: gold; left: 32px; }
.player3::after { background: blue; right: 32px; }
.player4::after { background: green; right: 8px; }#dice {
font-size: 3em;
margin-top: 10px;
animation: shake 0.3s;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
#rollBtn {
margin-top: 20px;
padding: 14px 30px;
background-color: #1e3a8a;
color: #fff;
font-size: 1.1em;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
}
#rollBtn:hover {
background-color: #162f6a;
}
#message {
margin-top: 20px;
font-size: 1.3em;
}
.winner {
color: #d63384;
font-weight: bold;
font-size: 1.6em;
}
</style>
</head>
<body>
<h1>4‑Player Board Game 🎲</h1>
<div id="board">
<div class="step" id="step0">Start</div>
<div class="step" id="step1">1</div>
<div class="step" id="step2">2</div>
<div class="step" id="step3">3</div>
<div class="step" id="step4">4</div>
<div class="step" id="step5">5</div>
<div class="step center" id="step6">🏁</div>
</div> <div id="dice">🎲</div>
<button id="rollBtn">Roll Dice</button>
<div id="message">👤 <span id="player-name">Ama</span>'s turn</div><audio id="dice-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio> <audio id="win-sound" src="https://www.soundjay.com/h
Raw
script.js
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>4‑Player Board Game 🎲</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: radial-gradient(circle at top, #f0f4ff, #dbe4ff);
margin: 0; padding: 20px;
text-align: center;
color: #333;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #1e3a8a;
}
#board {
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
gap: 20px;
}
.step {
width: 100px;
height: 100px;
background: #fff;
border: 4px solid #4a4a4a;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: bold;
position: relative;
transition: transform 0.2s;
}
.step:hover {
transform: scale(1.05);
}
.center {
background: #f9f5ff;
border-radius: 50%;
font-size: 2em;
border: 5px dashed #6c757d;
}
.player1::after, .player2::after, .player3::after, .player4::after {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
position: absolute;
bottom: 8px;
}
.player1::after { background: red; left: 8px; }
.player2::after { background: gold; left: 32px; }
.player3::after { background: blue; right: 32px; }
.player4::after { background: green; right: 8px; }#dice {
font-size: 3em;
margin-top: 10px;
animation: shake 0.3s;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
#rollBtn {
margin-top: 20px;
padding: 14px 30px;
background-color: #1e3a8a;
color: #fff;
font-size: 1.1em;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
}
#rollBtn:hover {
background-color: #162f6a;
}
#message {
margin-top: 20px;
font-size: 1.3em;
}
.winner {
color: #d63384;
font-weight: bold;
font-size: 1.6em;
}
</style>
</head>
<body>
<h1>4‑Player Board Game 🎲</h1>
<div id="board">
<div class="step" id="step0">Start</div>
<div class="step" id="step1">1</div>
<div class="step" id="step2">2</div>
<div class="step" id="step3">3</div>
<div class="step" id="step4">4</div>
<div class="step" id="step5">5</div>
<div class="step center" id="step6">🏁</div>
</div> <div id="dice">🎲</div>
<button id="rollBtn">Roll Dice</button>
<div id="message">👤 <span id="player-name">Ama</span>'s turn</div><audio id="dice-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio> <audio id="win-sound" src="https://www.soundjay.com/h
Raw
style.css
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>4‑Player Board Game 🎲</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: radial-gradient(circle at top, #f0f4ff, #dbe4ff);
margin: 0; padding: 20px;
text-align: center;
color: #333;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #1e3a8a;
}
#board {
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 600px;
gap: 20px;
}
.step {
width: 100px;
height: 100px;
background: #fff;
border: 4px solid #4a4a4a;
border-radius: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5em;
font-weight: bold;
position: relative;
transition: transform 0.2s;
}
.step:hover {
transform: scale(1.05);
}
.center {
background: #f9f5ff;
border-radius: 50%;
font-size: 2em;
border: 5px dashed #6c757d;
}
.player1::after, .player2::after, .player3::after, .player4::after {
content: '';
width: 18px; height: 18px;
border-radius: 50%;
position: absolute;
bottom: 8px;
}
.player1::after { background: red; left: 8px; }
.player2::after { background: gold; left: 32px; }
.player3::after { background: blue; right: 32px; }
.player4::after { background: green; right: 8px; }#dice {
font-size: 3em;
margin-top: 10px;
animation: shake 0.3s;
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(15deg); }
50% { transform: rotate(-15deg); }
75% { transform: rotate(10deg); }
100% { transform: rotate(0deg); }
}
#rollBtn {
margin-top: 20px;
padding: 14px 30px;
background-color: #1e3a8a;
color: #fff;
font-size: 1.1em;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s;
}
#rollBtn:hover {
background-color: #162f6a;
}
#message {
margin-top: 20px;
font-size: 1.3em;
}
.winner {
color: #d63384;
font-weight: bold;
font-size: 1.6em;
}
</style>
</head>
<body>
<h1>4‑Player Board Game 🎲</h1>
<div id="board">
<div class="step" id="step0">Start</div>
<div class="step" id="step1">1</div>
<div class="step" id="step2">2</div>
<div class="step" id="step3">3</div>
<div class="step" id="step4">4</div>
<div class="step" id="step5">5</div>
<div class="step center" id="step6">🏁</div>
</div> <div id="dice">🎲</div>
<button id="rollBtn">Roll Dice</button>
<div id="message">👤 <span id="player-name">Ama</span>'s turn</div><audio id="dice-sound" src="https://www.soundjay.com/buttons/sounds/button-16.mp3" preload="auto"></audio> <audio id="win-sound" src="https://www.soundjay.com/h
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment