Код:
<!--HTML--><style>
.main_game {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
background-color: transparent;
position: relative;
}
.board {
display: grid;
grid-template-columns: repeat(8, 80px);
grid-template-rows: repeat(8, 80px);
gap: 2px;
background: url(https://i.pinimg.com/736x/46/ee/50/46ee50f177f6355e5627830b7364834e.jpg);
padding: 10px;
border-radius: 20px;
position: relative;
}
.cell {
width: 75px;
height: 75px;
border: 2px solid #fff;
border-radius: 50%;
position: relative;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
background-color: white;
margin: 4px;
z-index: 1;
}
.cell:hover .popup {
display: block;
}
.popup {
display: none;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px;
border-radius: 5px;
font-size: 12px;
white-space: normal;
width: 150px;
z-index: 25;
}
.token {
width: 40px;
height: 40px;
background-size: cover;
/*border-radius: 50%;*/
background-color: transparent;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: white;
text-align: center;
overflow: hidden;
z-index: 4;
}
.token img {
width: 100%;
height: 100%;
/*border-radius: 50%;*/
}
.arrow {
position: absolute;
width: 6px;
height: 35px;
background-color: #929292;
z-index: 5;
}
.arrow::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
border-right: 6px solid #929292;
border-bottom: 6px solid #929292;
}
.number_one{
margin-top: -480px;
margin-left: -570px;
}
.number_two {
margin-top: -320px;
margin-left: 580px;
}
.number_three {
margin-top: -160px;
margin-left: -570px;
}
.number_four {
margin-top: 10px;
margin-left: 580px;
}
.number_five {
margin-top: 170px;
margin-left: -570px;
}
.number_six {
margin-top: 330px;
margin-left: 580px;
}
.number_seven {
margin-top: 500px;
margin-left: -570px;
}
.from_38_to_43 {
margin-top: 170px;
margin-left: -240px;
background: transparent;
height: 50px;
width: 6px;
}
.green {
/*background-image: linear-gradient(transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(rgba(60, 179, 0, 1) 45%, rgba(19, 64, 135, 1)
94%);*/
border: none;
background-color: #d4f088;
/*background-size: 20px 3px, 100% 3px;*/
}
.green::after {
border-right: 6px solid #d4f088;
border-bottom: 6px solid #d4f088;
}
.from_34_to_18 {
margin-top: -75px;
margin-left: 450px;
background: transparent;
height: 130px;
width: 6px;
}
.red{
/*background-image: linear-gradient(transparent, transparent 50%, #fff 50%, #fff 100%), linear-gradient(rgba(179,0,0,1) 45%, rgba(135,19,119,1)
94%);*/
border: none;
/*background-size: 20px 3px, 100% 3px;*/
background-color: #f08888;
}
.red::after{
content: '';
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(225deg);
border-right: 6px solid #f08888;
border-bottom: 6px solid #f08888;
}
.from_14_to_27 {
margin-top: -250px;
margin-left: 10px;
height: 250px;
width: 6px;
transform: rotate(55deg);
}
.from_26_to_23 {
margin-top: -150px;
margin-left: -400px;
height: 50px;
width: 6px;
}
.from_22_to_12 {
margin-top: -320px;
margin-left: -150px;
height: 80px;
width: 6px;
transform: rotate(55deg);
}
.from_30_to_37 {
margin-top: 10px;
margin-left: 100px;
height: 150px;
width: 6px;
transform: rotate(55deg);
}
.from_52_to_61 {
margin-top: 490px;
margin-left: 90px;
height: 50px;
width: 6px;
}
.from_58_to_45 {
margin-top: 410px;
margin-left: -160px;
height: 255px;
transform: rotate(55deg);
}
.from_56_to_42 {
margin-top: 340px;
margin-left: -500px;
height: 80px;
transform: rotate(55deg);
}
.lion{
background-image: url(https://i.imgur.com/rkYki6Q.png);
margin-top: -700px;
margin-left: 580px;
}
.bear{
background-image: url(https://i.imgur.com/h0XbuP1.png);
margin-top: -700px;
margin-left: 670px;
}
.tiger{
background-image: url(https://i.imgur.com/SxRSjru.png);
margin-top: -620px;
margin-left: 670px;
}
.panda{
background-image: url(https://i.imgur.com/xQm9Gmz.png);
margin-top: -620px;
margin-left: 580px;
}
.gyraff{
background-image: url(https://i.imgur.com/7UFZxeS.png);
margin-top: -540px;
margin-left: 580px;
}
.fox{
background-image: url(https://i.imgur.com/c8kTdtO.png);
margin-top: -540px;
margin-left: 670px;
}
</style>
<div class="main_game">
<div class="board" id="board"></div>
<div class="arrow number_one"></div>
<div class="arrow number_two"></div>
<div class="arrow number_three"></div>
<div class="arrow number_four"></div>
<div class="arrow number_five"></div>
<div class="arrow number_six"></div>
<div class="arrow number_seven"></div>
<div class="arrow from_38_to_43 green"></div>
<div class="arrow from_34_to_18 red"></div>
<div class="arrow from_14_to_27 green"></div>
<div class="arrow from_26_to_23 red"></div>
<div class="arrow from_22_to_12 red"></div>
<div class="arrow from_56_to_42 red"></div>
<div class="arrow from_58_to_45 red"></div>
<div class="arrow from_52_to_61 green"></div>
<div class="arrow from_30_to_37 green"></div>
<div class="token lion"></div>
<div class="token bear"></div>
<div class="token tiger"></div>
<div class="token panda"></div>
<div class="token gyraff"></div>
<div class="token fox"></div>
</div>
<script>
const board = document.getElementById("board");
const rows = 8;
const cols = 8;
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
let index = row % 2 === 0 ? (row * cols) + (cols - col - 1) : (row * cols) + col;
const cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.index = index;
cell.innerText = index == 0 ? "СТАРТ" : index == 63 ? "ФИНИШ" : index + 1;
const popup = document.createElement("div");
popup.classList.add("popup");
popup.innerText = `Клетка ${index+1}`;
cell.appendChild(popup);
board.appendChild(cell);
}
}
function setCellInfo(cellIndex, info, styles) {
const cell = document.querySelector(`.cell[data-index='${cellIndex}']`);
if (cell) {
cell.querySelector('.popup').innerText = info;
cell.style.cssText = styles;
}
}
setCellInfo(0, "СТАРТ", "background: url(https://i.imgur.com/diO4j3n.png); color: #bb5c93; border: 2px dashed white;");
setCellInfo(63, "ФИНИШ", "background: url(https://i.imgur.com/diO4j3n.png); color: #bb5c93; border: 2px dashed white;");
setCellInfo(62, "Специальная зона: графическая", "background: url(https://i.imgur.com/LdwHIhI.png); color: black; border: 2px dashed white;");
setCellInfo(59, "Специальная зона: игровая", "background: url(https://i.imgur.com/FoWxFoC.png); color: black; border: 2px dashed white;");
setCellInfo(48, "Специальная зона: эстетичная", "background: url(https://i.imgur.com/Cp7HgdA.png); color: black; border: 2px dashed white;");
setCellInfo(43, "Специальная зона: о тебе", "background: url(https://i.imgur.com/GgahslX.png); color: black; border: 2px dashed white;");
setCellInfo(32, "Специальная зона: графическая", "background: url(https://i.imgur.com/LdwHIhI.png); color: black; border: 2px dashed white;");
setCellInfo(16, "Специальная зона: графическая", "background: url(https://i.imgur.com/LdwHIhI.png); color: black; border: 2px dashed white;");
setCellInfo(28, "Специальная зона: игровая", "background: url(https://i.imgur.com/FoWxFoC.png); color: black; border: 2px dashed white;");
setCellInfo(14, "Специальная зона: игровая", "background: url(https://i.imgur.com/FoWxFoC.png); color: black; border: 2px dashed white;");
setCellInfo(24, "Специальная зона: эстетичная", "background: url(https://i.imgur.com/Cp7HgdA.png); color: black; border: 2px dashed white;");
setCellInfo(8, "Специальная зона: эстетичная", "background: url(https://i.imgur.com/Cp7HgdA.png); color: black; border: 2px dashed white;");
setCellInfo(20, "Специальная зона: о тебе", "background: url(https://i.imgur.com/GgahslX.png); color: black; border: 2px dashed white;");
setCellInfo(38, "Специальная зона: о тебе", "background: url(https://i.imgur.com/GgahslX.png); color: black; border: 2px dashed white;");
setCellInfo(5, "Специальная зона: игровая", "background: url(https://i.imgur.com/FoWxFoC.png); color: black; border: 2px dashed white;");
setCellInfo(12, "Дополнительный бросок кубика", "background: url(https://i.imgur.com/GHN4JCH.png); color: black; border: 2px dashed white;");
setCellInfo(45, "Дополнительный бросок кубика", "background: url(https://i.imgur.com/GHN4JCH.png); color: black; border: 2px dashed white;");
setCellInfo(27, "Дополнительный бросок кубика", "background: url(https://i.imgur.com/GHN4JCH.png); color: black; border: 2px dashed white;");
setCellInfo(2, "Дополнительный бросок кубика", "background: url(https://i.imgur.com/GHN4JCH.png); color: black; border: 2px dashed white;");
setCellInfo(35, "Пропуск хода", "background: url(https://i.imgur.com/NIOCfAS.png); color: black; border: 2px dashed white;");
setCellInfo(18, "Пропуск хода", "background: url(https://i.imgur.com/NIOCfAS.png); color: black; border: 2px dashed white;");
setCellInfo(58, "Пропуск хода", "background: url(https://i.imgur.com/NIOCfAS.png); color: black; border: 2px dashed white;");
setCellInfo(9, "Пропуск хода", "background: url(https://i.imgur.com/NIOCfAS.png); color: black; border: 2px dashed white;");
setCellInfo(54, "Пропуск хода", "background: url(https://i.imgur.com/NIOCfAS.png); color: black; border: 2px dashed white;");
</script>СПЕЦИАЛЬНЫЕ КЛЕТКИ
|
|
|
|
|
|
доп. кубик | пропуск хода | игровая | эстетичная | о тебе | графическая |
собственно, идём в чат и бросаем ещё один кубик! | один день ничего не делаем, кубик не кидаем | каждый должен написать по посту от 3к | каждый должен сделать по 2 аэстетики партнёру | пишем друг другу благодарности (не менее 300 символов) | сделать по 3 подборки друг другу |
БОНУСЫ | |||||
результат броска умножается на 3 | право перебросить кубик и выбрать один из двух результатов | от 1 до 4 дополнительных шагов к любому результату кубика (сколько добавить выбираете сами, можно не брать вообще) | + 2 или -2 к результату броска кубика (можно не брать вообще) | ||
УЧАСТНИКИ
|
|
|
|
|
| ||
участник 1 | участник 1 | участник 1 | участник 1 | участник 1 | участник 1 |
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
