帮我生成一个在果园里种东西的网页游戏 - 科学教育

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>果园种植小游戏</title>
<style>
body {
font-family: "微软雅黑", sans-serif;
background-color: #e0f7fa;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
h1 {
color: #00796b;
}
#garden {
display: grid;
grid-template-columns: repeat(5, 80px);
grid-gap: 10px;
margin-top: 20px;
}
.plot {
width: 80px;
height: 80px;
background-color: #a5d6a7;
border: 2px solid #4caf50;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
font-weight: bold;
color: #2e7d32;
user-select: none;
}
.tree-icon {
font-size: 32px;
pointer-events: none;
transition: transform 1s linear;
}
#plantMenu {
margin-top: 15px;
display: flex;
gap: 15px;
}
.plantBtn {
padding: 8px 15px;
background-color: #81c784;
border: none;
border-radius: 6px;
color: white;
font-size: 16px;
cursor: pointer;
user-select: none;
transition: background-color 0.3s;
}
.plantBtn:hover {
background-color: #4caf50;
}
#info {
margin-top: 15px;
min-height: 24px;
color: #00796b;
font-weight: bold;
}
</style>
</head>
<body>
<h1>果园种植小游戏</h1>
<div id="info">点击格子来选择要种植的位置</div>
<div id="garden"></div>
<div id="plantMenu" style="display:none;">
<button class="plantBtn" data-plant="apple">种苹果树 ????</button>
<button class="plantBtn" data-plant="orange">种橙子树 ????</button>
<button class="plantBtn" data-plant="grape">种葡萄藤 ????</button>
<button class="plantBtn" id="cancelBtn" style="background-color:#e57373;">取消</button>
</div>
<script>
const garden = document.getElementById('garden');
const plantMenu = document.getElementById('plantMenu');
const info = document.getElementById('info');
let selectedPlot = null;
// 创建5x5共25个格子
const plotCount = 25;
const plots = [];
for (let i = 0; i < plotCount; i++) {
const plot = document.createElement('div');
plot.classList.add('plot');
plot.dataset.index = i;
plot.textContent = '空地';
garden.appendChild(plot);
plots.push({
element: plot,
plant: null,
growthStage: 0,
growTimer: null,
});
}
function showPlantMenu(plot) {
selectedPlot = plot;
plantMenu.style.display = 'flex';
info.textContent = '请选择要种的植物';
}
function hidePlantMenu() {
plantMenu.style.display = 'none';
selectedPlot = null;
info.textContent = '点击格子来选择要种植的位置';
}
// 植物的表情符号和名称
const plantTypes = {
apple: {name: '苹果树', emoji: '????', maxStage: 3},
orange: {name: '橙子树', emoji: '????', maxStage: 3},
grape: {name: '葡萄藤', emoji: '????', maxStage: 3},
};
// 点击格子，显示选择植物菜单，但如果已经种了植物，不能再种
garden.addEventListener('click', (e) => {
if (!e.target.classList.contains('plot')) return;
const index = e.target.dataset.index;
const plotObj = plots[index];
if (plotObj.plant !== null) {
info.textContent = `这里已经种了${plantTypes[plotObj.plant].name}哦！`;
plantMenu.style.display = 'none';
return;
}
showPlantMenu(plotObj);
});
// 点击选择植物按钮，开始种植
plantMenu.addEventListener('click', (e) => {
if (!e.target.classList.contains('plantBtn')) return;
const plant = e.target.dataset.plant;
if (plant === undefined) {
// 取消按钮
hidePlantMenu();
return;
}
if (selectedPlot) {
plantTree(selectedPlot, plant);
hidePlantMenu();
}
});
// 种植函数，会显示植物，慢慢长大
function plantTree(plotObj, plant) {
plotObj.plant = plant;
plotObj.growthStage = 1;
updatePlotDisplay(plotObj);
// 每2秒生长一级，直到最大阶段停止
plotObj.growTimer = setInterval(() => {
plotObj.growthStage++;
if (plotObj.growthStage > plantTypes[plant].maxStage) {
clearInterval(plotObj.growTimer);
plotObj.growTimer = null;
info.textContent = `${plantTypes[plant].name}长成了，快来收获吧！`;
} else {
updatePlotDisplay(plotObj);
}
}, 2000);
info.textContent = `种下了${plantTypes[plant].name}，正在生长中...`;
}
// 根据生长阶段更新格子显示
function updatePlotDisplay(plotObj) {
const {element, plant, growthStage} = plotObj;
if (plant === null) {
element.textContent = '空地';
element.style.color = '#2e7d32';
element.style.backgroundColor = '#a5d6a7';
element.style.fontSize = '16px';
element.innerHTML = '空地';
} else {
// 显示植物emoji，越大阶段字体越大
let size = 24 + growthStage * 8;
element.style.fontSize = size + 'px';
element.style.color = '#4e342e';
element.style.backgroundColor = '#c8e6c9';
element.innerHTML = plantTypes[plant].emoji;
// 长成后加点动画
if (growthStage === plantTypes[plant].maxStage) {
element.style.animation = 'swing 1s infinite alternate';
} else {
element.style.animation = '';
}
}
}
// 大摇摆动画的CSS
const style = document.createElement('style');
style.textContent = `
@keyframes swing {
0% { transform: rotate(-5deg); }
100% { transform: rotate(5deg); }
}
`;
document.head.appendChild(style);
// 初始化格子显示
plots.forEach(updatePlotDisplay);
</script>
</body>
</html>

复制代码