阳光种植园 - v4.20可以弄成插件
<!DOCTYPE html><html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>阳光种植园 - v4.20</title>
<style>
:root {
--primary: #4CAF50;
--field-bg: #c9b08c;
--plot-empty: #d2b48c;
--plot-growing: #a8e6a1;
--plot-mature: #ffeb3b;
--plot-wilted: #a9a9a9;
--plot-infested: #ff6b6b;
--warning: #FF9800;
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", sans-serif; }
body { background: #e8f5e9; padding: 10px; color: #333; position: relative; }
.container { max-width: 800px; margin: 0 auto; }
header {
text-align: center; margin-bottom: 10px;
background: white; padding: 8px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 { color: var(--primary); margin-bottom: 5px; font-size: 24px; }
.stats {
display: flex; flex-wrap: wrap; gap: 8px; background: white; padding: 10px;
border-radius: 8px; margin-bottom: 10px; justify-content: space-around; font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.field-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-bottom: 15px;
}
.plot {
aspect-ratio: 1;
border: 1px solid #8b6f4e;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 10px;
text-align: center;
padding: 4px;
position: relative;
overflow: hidden;
}
.plot.empty { background: var(--plot-empty); }
.plot.growing { background: var(--plot-growing); animation: growPulse 2s infinite alternate; }
.plot.mature { background: var(--plot-mature); }
.plot.wilted { background: var(--plot-wilted); color: #555; animation: wiltShake 0.5s infinite; }
.plot.infested { background: var(--plot-infested); color: white; animation: infestBlink 1s infinite; }
.plot.locked {
background: #555;
color: #aaa;
cursor: not-allowed;
opacity: 0.6;
}
@keyframes growPulse {
0% { transform: scale(1); }
100% { transform: scale(1.03); }
}
@keyframes infestBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes wiltShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
.panel {
background: white; padding: 12px; border-radius: 8px;
margin-bottom: 15px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
button {
padding: 6px 10px; margin: 4px 2px; background: var(--primary);
color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;
}
.hidden { display: none; }
.notification {
position: fixed; top: 300px; right: 650px; background: #333; color: white;
padding: 10px 15px; border-radius: 6px; z-index: 1000; box-shadow: 0 4px 8px rgba(0,0,0,0.3);
animation: fadeInOut 4s forwards;
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateX(100%); }
10% { opacity: 1; transform: translateX(0); }
80% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(100%); }
}
#seedInventory {
display: flex; gap: 8px; flex-wrap: wrap;
}
#seedInventory button {
background: #607D8B;
padding: 4px 8px;
font-size: 12px;
}
#seedInventory button.selected {
background: #FF9800;
}
.plot-button-container {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 4px;
width: 100%;
align-items: center;
}
.plot-button {
background: #4CAF50;
color: white;
border: 1px solid #388E3C;
border-radius: 4px;
padding: 4px 8px;
font-size: 12px;
cursor: pointer;
z-index: 10;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
width: 100%;
text-align: center;
}
.plot-button:hover {
background: #388E3C;
}
.plot-button.spray {
background: #F44336;
border-color: #D32F2F;
}
.plot-button.spray:hover {
background: #D32F2F;
}
.plot-button.water {
background: #2196F3;
border-color: #1976D2;
}
.plot-button.water:hover {
background: #1976D2;
}
.plot-button.fertilize {
background: #9C27B0;
border-color: #7B1FA2;
}
.plot-button.fertilize:hover {
background: #7B1FA2;
}
.time-label {
font-size: 9px;
color: #555;
margin-top: 2px;
}
.plot-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: relative;
z-index: 5;
}
.crop-icon-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
}
.crop-icon {
font-size: 22px;
}
.status-icon {
position: absolute;
font-size: 14px;
top: -5px;
right: -5px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ccc;
}
.status-icon.wilted {
background: rgba(169, 169, 169, 0.9);
color: white;
}
.status-icon.infested {
background: rgba(255, 107, 107, 0.9);
color: white;
}
.status-icon.dehydrated {
background: rgba(33, 150, 243, 0.9);
color: white;
}
.yield-info {
font-size: 8px;
color: #666;
margin-top: 2px;
}
.field-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
flex-wrap: wrap;
gap: 6px;
}
.field-title {
font-size: 18px;
font-weight: bold;
color: var(--primary);
}
.field-weather {
background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px;
padding: 4px 8px; font-weight: bold; color: #856404;
font-size: 14px;
}
.field-achievement {
background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 6px;
padding: 4px 8px; font-weight: bold; color: #2e7d32;
font-size: 14px;
}
.unlocked-plot-count {
background: #e8f5e9;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
color: #2e7d32;
margin-top: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>这里是一个完整的HTML文档，一个虚拟的农场游戏——“阳光种植园”。这里使用了HTML、CSS和JavaScript来创建一个互动性的游戏环境，玩家可以在这个环境中进行种植作物、收获、购买种子和道具（如杀虫剂和肥料）、查看天气变化以及解锁成就等操作。此外，游戏还提供了存档和读取功能，允许玩家保存自己的进度。
以下是该游戏的一些核心特点：
作物种植：玩家可以选择不同类型的作物进行种植，并且每种作物都有其特定的生长周期和收益。
天气系统：游戏内设有动态天气系统，包括晴天、雨天、干旱和虫灾，不同的天气会对作物产生不同的影响。
称号系统：根据玩家种植的作物数量和获得的金币数量，游戏设有双称号系统以奖励玩家。
工具和资源管理：玩家需要管理有限的资源（如金币、杀虫剂、肥料）来促进作物的生长和保护作物免受灾害。
互动性：通过点击不同的地块，玩家可以执行种植、浇水、施肥、喷洒杀虫剂和收获等操作。
免责声明：
此内容由本站网友原创或转载自网络公开渠道，仅供学习测试使用，禁止商用，著作权归原作者所有,本站不对此内容担负法律责，请于下载后24小时内删除，如发现内容侵权或违规，请联系本站，我们将在12小时内及时做删除或屏蔽处理！
看过的人
(9)
-
admin
-
Mr.Chen -
land -
bg52 -
JimmyHung -
抽奖助手 -
leo -
倒过来 -
gaohong
