<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟热血三国内城安置建筑物</title>
<style>
body {
background: #000;
display: flex;
flex-direction: column;
align-items: center;
}
#many-buildings {
display: flex;
justify-content: center;
margin-top: 200px;
}
.item,
.b-item {
width: 75px;
height: 75px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: move;
border: 1px solid #ccc;
margin: 10px;
color: white;
text-shadow: 1px 1px 1px #090909;
}
.b-civilian-house {
background: #FFD700;
}
.b-barracks {
background: #800000;
}
.b-warehouse {
background: #b59648;
}
.b-market {
background: #32CD32;
}
.b-inn {
background: #4682B4;
}
.b-recruitment {
background: #9ACD32;
}
.b-blacksmith {
background: #FFA07A;
}
.b-workshop {
background: #008080;
}
.b-training {
background: #228B22;
}
.b-academy {
background: #ADD8E6;
}
.b-imperial {
background: #90EE90;
}
.b-stable {
background: #8A2BE2;
}
.b-post {
background: #20B2AA;
}
.b-beacon {
background: #556B2F;
}
#grid-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.g-item-001 {
display: flex;
flex-direction: row;
}
.g-item-01 {
display: grid;
grid-template-columns: repeat(2, 100px);
}
.g-item-3 {
width: 200px;
height: 200px;
display: flex;
font-size: 80px;
font-weight: bold;
justify-content: center;
align-items: center;
background: #808080;
border: 1px solid #ccc;
user-select: none;
}
.g-item-002 {
display: grid;
grid-template-columns: repeat(6, 100px);
}
.g-item {
width: 100px;
height: 100px;
background: #808080;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 1px 1px 1px #090909;
font-size: 14px;
border: 1px solid #ccc;
position: relative;
}
</style>
</head>
<body>
<div id="many-buildings">
<div class="item b-civilian-house" draggable="true">
<b>0</b>民房
</div>
<div class="item b-barracks" draggable="true">
<b>0</b>军营
</div>
<div class="item b-warehouse" draggable="true"><b>0</b>仓库</div>
</div>
<div id="grid-container">
<div class="g-item-001">
<div class="g-item-01">
<div class="g-item g-item-1"></div>
<div class="g-item g-item-2"></div>
<div class="g-item g-item-6"></div>
<div class="g-item g-item-7">
<div class="b-item b-blacksmith" draggable="true">铁匠铺</div>
</div>
</div>
<div class="g-item-3">官府</div>
<div class="g-item-01">
<div class="g-item g-item-4"></div>
<div class="g-item g-item-5"></div>
<div class="g-item g-item-8">
<div class="b-item b-imperial" draggable="true">鸿胪寺</div>
</div>
<div class="g-item g-item-9"></div>
</div>
</div>
<div class="g-item-002">
<div class="g-item g-item-10"></div>
<div class="g-item g-item-11">
<div class="b-item b-workshop" draggable="true">工匠作坊</div>
</div>
<div class="g-item g-item-12">
<div class="b-item b-training" draggable="true">校场</div>
</div>
<div class="g-item g-item-13">
<div class="b-item b-beacon" draggable="true">烽火台</div>
</div>
<div class="g-item g-item-14"></div>
<div class="g-item g-item-15">
<div class="b-item b-academy" draggable="true">书院</div>
</div>
<div class="g-item g-item-16"></div>
<div class="g-item g-item-17"></div>
<div class="g-item g-item-18">
<div class="b-item b-stable" draggable="true">马厩</div>
</div>
<div class="g-item g-item-19"></div>
<div class="g-item g-item-20"></div>
<div class="g-item g-item-21"></div>
<div class="g-item g-item-22"></div>
<div class="g-item g-item-23"></div>
<div class="g-item g-item-24"></div>
<div class="g-item g-item-25">
<div class="b-item b-post" draggable="true">驿站</div>
</div>
<div class="g-item g-item-26"></div>
<div class="g-item g-item-27">
<div class="b-item b-market" draggable="true">市场</div>
</div>
<div class="g-item g-item-28"></div>
<div class="g-item g-item-29"></div>
<div class="g-item g-item-30">
<div class="b-item b-inn" draggable="true">客栈</div>
</div>
<div class="g-item g-item-31"></div>
<div class="g-item g-item-32">
<div class="b-item b-recruitment" draggable="true">招贤馆</div>
</div>
<div class="g-item g-item-33"></div>
</div>
</div>
<script>
const gridContainer = document.getElementById('grid-container');
const manyBuildings = document.getElementById('many-buildings');
let draggedItem = null;
document.querySelectorAll('.item').forEach(item => {
item.addEventListener('dragstart', dragStartItem);
item.addEventListener('dragend', dragEnd);
});
document.querySelectorAll('.b-item').forEach(item => {
item.addEventListener('dragstart', dragStartBItem);
item.addEventListener('dragend', dragEnd);
});
gridContainer.addEventListener('dragover', dragOver);
gridContainer.addEventListener('drop', dragDrop);
manyBuildings.addEventListener('dragover', dragOver);
manyBuildings.addEventListener('drop', dragDrop);
function dragStartItem(e) {
draggedItem = e.target;
e.dataTransfer.setData('text/html', e.target.innerHTML);
// 增加原始 b-item 的数字
const bElement = draggedItem.querySelector('b');
if (bElement) {
bElement.textContent = parseInt(bElement.textContent) + 1;
}
}
function dragStartBItem(e) {
draggedItem = e.target;
e.dataTransfer.setData('text/html', e.target.innerHTML);
}
function dragEnd(e) {
draggedItem = null;
}
function dragOver(e) {
e.preventDefault();
}
function dragDrop(e) {
e.preventDefault();
if (draggedItem) {
if (draggedItem.classList.contains('b-item')) {
// 直接移动 b-item
if (e.target.classList.contains('g-item')) {
// 检查目标 g-item 是否已经包含一个 b-item
if (e.target.querySelector('.b-item') === null) {
e.target.appendChild(draggedItem);
} else {
console.log("目标 g-item 已经包含一个建筑物");
}
} else if (e.target.id === 'many-buildings' && draggedItem.parentElement.parentElement.id !== 'many-buildings') {
manyBuildings.appendChild(draggedItem);
}
} else if (draggedItem.classList.contains('item')) {
// 复制 item
const clone = draggedItem.cloneNode(true);
if (e.target.classList.contains('g-item')) {
// 检查目标 g-item 是否已经包含一个 b-item
if (e.target.querySelector('.b-item') === null) {
e.target.appendChild(clone);
} else {
console.log("目标 g-item 已经包含一个建筑物");
}
} else if (e.target.id === 'many-buildings' && draggedItem.parentElement.parentElement.id !== 'many-buildings') {
manyBuildings.appendChild(clone);
}
}
}
}
</script>
</body>
</html>