前言
前两天刷视频，看到一个沙盒视频，感觉挺有趣，自己也想实现一下。
在线体验
游戏已经写好，在线版本：
设定
帮我用 html 实现一个 生态沙盒之狼、羊、草。
狼吃羊，羊吃草。
引入时间系统，一年 365 天，四季春夏秋冬。一年一个轮回，每天的天气可以随机模拟现实。
春夏多雨水，有助于草生长，冬天会下雪。
草会每天定时更新生成，生成后不会移动。春天生成速率为4，夏天为3，秋天为2，冬天为1。
羊会成群移动，看到狼会分散逃跑。羊分为公母两种性别，公母遇到一起会产生新的小羊。遇到草会吃掉草。
狼也会随机移动，碰到羊会吃掉羊。狼分性别：公母。公母遇到一起会产生新小狼。狼也是。
羊吃不到草会衰弱，狼吃不到羊也会衰弱。衰弱后移动速度越来越慢，吃到食物后恢复，超过7天没有食物则会死亡消失。
生物的尸体会滋润土地，让草长的速率大幅度提高。
实现
[html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>狼、羊、草 沙盒模拟</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: space-between;
margin: 0;
}
.left-panel {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sandbox {
display: grid;
grid-template-columns: repeat(50, 15px);
grid-template-rows: repeat(50, 15px);
gap: 1px;
margin-top: 20px;
}
.cell {
width: 15px;
height: 15px;
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
font-size: 12px;
font-family: "Segoe UI Emoji", sans-serif;
}
.wolf {
color: red;
}
.sheep {
color: lightgreen;
}
.grass {
color: green;
}
.empty {
background-color: white;
}
.right-panel {
width: 250px;
margin-top: 20px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
font-size: 16px;
text-align: left;
}
.right-panel div {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="left-panel">
<div class="sandbox" id="sandbox"></div>
</div>
<div class="right-panel">
<h3>统计信息</h3>
<div>当前天气: <span id="weather"></span></div>
<div>当前季节: <span id="season"></span></div>
<div>时间: <span id="time"></span></div>
<div>狼的数量: <span id="wolfCount"></span></div>
<div>羊的数量: <span id="sheepCount"></span></div>
<div>草的数量: <span id="grassCount"></span></div>
<div>模拟时间: <span id="simTime"></span> 秒</div>
</div>
<button onclick="startSimulation()">开始模拟</button>
<script>
const sandboxSize = 50;
const seasons = ['春', '夏', '秋', '冬'];
let grid = [];
let animals = {
wolf: [],
sheep: []
};
let grass = [];
let seasonIndex = 0;
let weather = '晴天';
let simTime = 0;
let simInterval;
function createSandbox() {
const sandbox = document.getElementById('sandbox');
for (let i = 0; i < sandboxSize; i++) {
const row = [];
for (let j = 0; j < sandboxSize; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.dataset.row = i;
cell.dataset.col = j;
sandbox.appendChild(cell);
row.push(cell);
}
grid.push(row);
}
}
function randomPosition() {
return {
row: Math.floor(Math.random() * sandboxSize),
col: Math.floor(Math.random() * sandboxSize)
};
}
function initializeEntities() {
// 初始化草
for (let i = 0; i < 500; i++) {
const pos = randomPosition();
if (!grass.some(g => g.row === pos.row && g.col === pos.col)) {
grass.push(pos);
grid[pos.row][pos.col].innerText = '🌿';
}
}
// 初始化羊
for (let i = 0; i < 20; i++) {
const pos = randomPosition();
animals.sheep.push(pos);
grid[pos.row][pos.col].innerText = '🐑';
}
// 初始化狼
for (let i = 0; i < 10; i++) {
const pos = randomPosition();
animals.wolf.push(pos);
grid[pos.row][pos.col].innerText = '🐺';
}
}
function nextSeason() {
seasonIndex = (seasonIndex + 1) % 4;
updateWeather();
}
function updateWeather() {
// 简单的天气变化逻辑
const weatherConditions = ['晴天', '雨天', '暴风雪'];
weather = weatherConditions[Math.floor(Math.random() * 3)];
document.getElementById('weather').textContent = weather;
}
function moveAnimals() {
// 移动狼
animals.wolf.forEach(wolf => {
// 计算新位置
const direction = Math.random() > 0.5 ? 1 : -1;
const newRow = wolf.row + direction * (Math.random() > 0.5 ? 1 : 0);
const newCol = wolf.col + direction * (Math.random() > 0.5 ? 1 : 0);
// 判断新位置是否越界
if (newRow >= 0 && newRow < sandboxSize && newCol >= 0 && newCol < sandboxSize) {
// 清空原位置
grid[wolf.row][wolf.col].innerText = ' ';
// 更新狼的位置
wolf.row = newRow;
wolf.col = newCol;
const cell = grid[wolf.row][wolf.col];
// 狼碰到羊，吃掉羊
if (cell.innerText === '🐑') {
animals.sheep = animals.sheep.filter(s => s.row !== wolf.row || s.col !== wolf.col);
cell.innerText = '🐺';
// 羊的数量减少
sheepCount--;
} else {
cell.innerText = '🐺';
}
}
});
// 移动羊
animals.sheep.forEach(sheep => {
// 计算新位置
const direction = Math.random() > 0.5 ? 1 : -1;
const newRow = sheep.row + direction * (Math.random() > 0.5 ? 1 : 0);
const newCol = sheep.col + direction * (Math.random() > 0.5 ? 1 : 0);
// 判断新位置是否越界
if (newRow >= 0 && newRow < sandboxSize && newCol >= 0 && newCol < sandboxSize) {
// 清空原位置
grid[sheep.row][sheep.col].innerText = ' ';
// 更新羊的位置
sheep.row = newRow;
sheep.col = newCol;
const cell = grid[sheep.row][sheep.col];
// 羊碰到草，吃掉草
if (cell.innerText === '🌿') {
grass = grass.filter(g => g.row !== sheep.row || g.col !== sheep.col);
cell.innerText = '🐑';
// 草的数量减少
grassCount--;
} else {
cell.innerText = '🐑';
}
}
});
}
function growGrass() {
if (weather === '晴天' && seasonIndex === 0) {
// 春天晴天草快速生长
if (grass.length < 1000) {
const pos = randomPosition();
if (!grass.some(g => g.row === pos.row && g.col === pos.col)) {
grass.push(pos);
grid[pos.row][pos.col].innerText = '🌿';
}
}
}
}
function updateStats() {
document.getElementById('season').textContent = seasons[seasonIndex];
document.getElementById('time').textContent = new Date().toLocaleTimeString();
document.getElementById('wolfCount').textContent = animals.wolf.length;
document.getElementById('sheepCount').textContent = animals.sheep.length;
document.getElementById('grassCount').textContent = grass.length;
document.getElementById('simTime').textContent = simTime;
}
function resetInfo() {
grid = [];
animals = {
wolf: [],
sheep: []
};
grass = [];
seasonIndex = 0;
weather = '晴天';
simTime = 0;
}
createSandbox();
initializeEntities();
function startSimulation() {
simInterval = setInterval(() => {
moveAnimals();
growGrass();
nextSeason();
simTime++;
updateStats();
}, 1000); // 现实 1 分钟对应沙盒 1 小时
}
</script>
</body>
</html>
OPT1: 移动优化
需求
1）羊每次更新移动1步，优先向距离草最近的方向移动。如果目标位置有羊，则不做移动
2）狼每次更新，移动2步，优先向距离羊最近的方向移动。如果目标位置有狼，则不做移动
核心代码
[js]
1
2
3
4
5
6
7
8
9
10
11
12
13function findClosestEntity(entity, entityType) {
const entityPositions = entityType === 'sheep' ? animals.sheep : grass;
let closestEntity = null;
let minDistance = Infinity;
entityPositions.forEach(pos => {
const distance = Math.abs(entity.row - pos.row) + Math.abs(entity.col - pos.col);
if (distance < minDistance) {
minDistance = distance;
closestEntity = pos;
}
});
return closestEntity;
}
OPT2: 新生机制
需求
1）草每次更新，在空格的位置定时更新 10 个。
2）羊每吃一次草，产生一只新羊
3）狼每吃一次羊，产生一只新狼
OPT3: 死亡机制
需求
1）如果一只羊，连续30次更新没有吃到草，则衰老死亡。如果一只狼，连续30次更新没有吃到草，则衰老死亡。
2）一只狼超过 100 次，一只羊超过 100 次，则衰老死亡。
v2-鬼畜版移动
[html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生态沙盒 - 狼、羊与草</title>
<style>
canvas {
background-color: #f0f0f0;
}
.info {
font-family: Arial, sans-serif;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>生态沙盒 - 狼、羊与草</h1>
<canvas id="canvas" width="800" height="600"></canvas>
<div class="info">
<p><strong>按键说明:</strong></p>
<p>按下 "Start" 开始模拟，按下 "Pause" 停止模拟。</p>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 初始参数
const maxSheep = 20; // 羊的数量
const maxWolves = 5; // 狼的数量
const maxGrass = 100; // 草的数量
const sheepArray = [];
const wolfArray = [];
const grassArray = [];
// 构造草对象
class Grass {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 5;
}
grow() {
// 草有几率变大
if (Math.random() < 0.01) {
this.size = 5 + Math.random() * 3; // 随机变大
}
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "green";
ctx.fillText("🌿", this.x, this.y);
}
}
// 构造羊对象
class Sheep {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 20;
this.energy = 100; // 羊的能量
this.speed = 2;
}
move() {
this.x += Math.random() * this.speed * 2 - this.speed;
this.y += Math.random() * this.speed * 2 - this.speed;
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
}
eat(grass) {
const dist = Math.sqrt(Math.pow(this.x - grass.x, 2) + Math.pow(this.y - grass.y, 2));
if (dist < this.size + grass.size) {
grass.size = 0; // 羊吃掉草
this.energy += 20; // 羊增加能量
return true;
}
return false;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "white";
ctx.fillText("🐑", this.x, this.y);
}
}
// 构造狼对象
class Wolf {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 25;
this.energy = 200; // 狼的能量
this.speed = 3;
}
move() {
this.x += Math.random() * this.speed * 2 - this.speed;
this.y += Math.random() * this.speed * 2 - this.speed;
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
}
hunt(sheep) {
const dist = Math.sqrt(Math.pow(this.x - sheep.x, 2) + Math.pow(this.y - sheep.y, 2));
if (dist < this.size + sheep.size) {
this.energy += 50; // 吃掉羊获得能量
sheep.energy = 0; // 羊被吃掉
return true;
}
return false;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "gray";
ctx.fillText("🐺", this.x, this.y);
}
}
// 初始化生态系统
function init() {
// 创建草
for (let i = 0; i < maxGrass; i++) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建羊
for (let i = 0; i < maxSheep; i++) {
sheepArray.push(new Sheep(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建狼
for (let i = 0; i < maxWolves; i++) {
wolfArray.push(new Wolf(Math.random() * canvas.width, Math.random() * canvas.height));
}
}
// 更新和绘制生态系统
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新草的状态
grassArray.forEach(grass => {
grass.grow();
grass.draw();
});
// 更新羊的状态
sheepArray.forEach(sheep => {
sheep.move();
// 羊吃草
grassArray.forEach(grass => {
if (sheep.eat(grass)) {
grassArray.splice(grassArray.indexOf(grass), 1);
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
});
sheep.draw();
});
// 更新狼的状态
wolfArray.forEach(wolf => {
wolf.move();
// 狼捕食羊
sheepArray.forEach(sheep => {
if (wolf.hunt(sheep)) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
wolf.draw();
});
// 移除死去的羊
sheepArray.forEach(sheep => {
if (sheep.energy <= 0) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
// 移除死去的狼
wolfArray.forEach(wolf => {
if (wolf.energy <= 0) {
wolfArray.splice(wolfArray.indexOf(wolf), 1);
}
});
// 更新草数量
if (grassArray.length < maxGrass) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
}
// 启动模拟
let running = true;
function animate() {
if (running) {
update();
}
requestAnimationFrame(animate);
}
// 按钮操作
window.onload = () => {
init();
animate();
};
</script>
</body>
</html>
v3-疯狂移动版本
[html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生态沙盒 - 狼、羊与草</title>
<style>
canvas {
background-color: #f0f0f0;
}
.info {
font-family: Arial, sans-serif;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>生态沙盒 - 狼、羊与草</h1>
<canvas id="canvas" width="800" height="600"></canvas>
<div class="info">
<p><strong>按键说明:</strong></p>
<p>按下 "Start" 开始模拟，按下 "Pause" 停止模拟。</p>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 初始参数
const maxSheep = 20; // 羊的数量
const maxWolves = 5; // 狼的数量
const maxGrass = 100; // 草的数量
const sheepArray = [];
const wolfArray = [];
const grassArray = [];
// 构造草对象
class Grass {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 5;
}
grow() {
// 草有几率变大
if (Math.random() < 0.01) {
this.size = 5 + Math.random() * 3; // 随机变大
}
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "green";
ctx.fillText("🌿", this.x, this.y);
}
}
// 构造羊对象
class Sheep {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 20;
this.energy = 100; // 羊的能量
this.speed = 2;
this.isScattering = false;
this.targetX = this.x;
this.targetY = this.y;
}
move() {
// 羊群行为：优先向草移动
const closestGrass = this.findClosestGrass();
if (closestGrass) {
let angle = Math.atan2(closestGrass.y - this.y, closestGrass.x - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
} else {
// 如果没有草可吃，羊进行随机移动或群体行为
if (this.isScattering) {
this.x += Math.random() * this.speed * 2 - this.speed;
this.y += Math.random() * this.speed * 2 - this.speed;
if (Math.random() < 0.05) this.isScattering = false; // 停止散开
} else {
let angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
}
}
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
}
findClosestGrass() {
let closestGrass = null;
let minDist = Infinity;
grassArray.forEach(grass => {
const dist = Math.sqrt(Math.pow(this.x - grass.x, 2) + Math.pow(this.y - grass.y, 2));
if (dist < minDist) {
minDist = dist;
closestGrass = grass;
}
});
return closestGrass;
}
eat(grass) {
const dist = Math.sqrt(Math.pow(this.x - grass.x, 2) + Math.pow(this.y - grass.y, 2));
if (dist < this.size + grass.size) {
grass.size = 0; // 羊吃掉草
this.energy += 20; // 羊增加能量
return true;
}
return false;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "white";
ctx.fillText("🐑", this.x, this.y);
}
}
// 构造狼对象
class Wolf {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 25;
this.energy = 200; // 狼的能量
this.speed = 2;
this.targetX = this.x;
this.targetY = this.y;
}
move() {
// 向羊群移动
const closestSheep = this.findClosestSheep();
if (closestSheep) {
let angle = Math.atan2(closestSheep.y - this.y, closestSheep.x - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
}
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
}
hunt(sheep) {
const dist = Math.sqrt(Math.pow(this.x - sheep.x, 2) + Math.pow(this.y - sheep.y, 2));
if (dist < this.size + sheep.size) {
this.energy += 50; // 吃掉羊获得能量
sheep.energy = 0; // 羊被吃掉
return true;
}
return false;
}
findClosestSheep() {
let closestSheep = null;
let minDist = Infinity;
sheepArray.forEach(sheep => {
const dist = Math.sqrt(Math.pow(this.x - sheep.x, 2) + Math.pow(this.y - sheep.y, 2));
if (dist < minDist) {
minDist = dist;
closestSheep = sheep;
}
});
return closestSheep;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "gray";
ctx.fillText("🐺", this.x, this.y);
}
}
// 初始化生态系统
function init() {
// 创建草
for (let i = 0; i < maxGrass; i++) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建羊
for (let i = 0; i < maxSheep; i++) {
sheepArray.push(new Sheep(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建狼
for (let i = 0; i < maxWolves; i++) {
wolfArray.push(new Wolf(Math.random() * canvas.width, Math.random() * canvas.height));
}
}
// 更新和绘制生态系统
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新草的状态
grassArray.forEach(grass => {
grass.grow();
grass.draw();
});
// 更新羊的状态
sheepArray.forEach(sheep => {
sheep.move();
// 羊吃草
grassArray.forEach(grass => {
if (sheep.eat(grass)) {
grassArray.splice(grassArray.indexOf(grass), 1);
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
});
sheep.draw();
});
// 更新狼的状态
wolfArray.forEach(wolf => {
wolf.move();
// 狼捕食羊
sheepArray.forEach(sheep => {
if (wolf.hunt(sheep)) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
wolf.draw();
});
// 移除死去的羊
sheepArray.forEach(sheep => {
if (sheep.energy <= 0) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
// 移除死去的狼
wolfArray.forEach(wolf => {
if (wolf.energy <= 0) {
wolfArray.splice(wolfArray.indexOf(wolf), 1);
}
});
// 更新草数量
if (grassArray.length < maxGrass) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 显示统计信息
document.querySelector('.info').innerHTML = `
<p>羊数量: ${sheepArray.length}</p>
<p>狼数量: ${wolfArray.length}</p>
<p>草数量: ${grassArray.length}</p>
`;
}
// 启动模拟
init();
setInterval(update, 1000 / 60); // 60 FPS
</script>
</body>
</html>
会发现一个问题，很快狼就把羊吃完了。
v3-引入羊群的繁衍
当然 这里还是缺少了狼群的繁衍机制，但是相对比较平衡。
[html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生态沙盒 - 狼、羊与草</title>
<style>
canvas {
background-color: #f0f0f0;
}
.info {
font-family: Arial, sans-serif;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>生态沙盒 - 狼、羊与草</h1>
<canvas id="canvas" width="1600" height="800"></canvas>
<div class="info">
<p><strong>按键说明:</strong></p>
<p>按下 "Start" 开始模拟，按下 "Pause" 停止模拟。</p>
</div>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 初始参数
const maxSheep = 20; // 羊的数量
const maxWolves = 5; // 狼的数量
const maxGrass = 100; // 草的数量
const sheepArray = [];
const wolfArray = [];
const grassArray = [];
// 构造草对象
class Grass {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 5;
}
grow() {
// 草有几率变大
if (Math.random() < 0.05) { // 草生长的概率提高
this.size = 5 + Math.random() * 3; // 随机变大
}
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "green";
ctx.fillText("🌿", this.x, this.y);
}
}
// 构造羊对象
class Sheep {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 20;
this.energy = 100; // 羊的能量
this.speed = 1;
this.isScattering = false;
this.targetX = this.x;
this.targetY = this.y;
}
move() {
// 羊群行为：优先向草移动
const closestGrass = this.findClosestGrass();
if (closestGrass) {
let angle = Math.atan2(closestGrass.y - this.y, closestGrass.x - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
} else {
// 如果没有草可吃，羊进行随机移动或群体行为
if (this.isScattering) {
this.x += Math.random() * this.speed * 2 - this.speed;
this.y += Math.random() * this.speed * 2 - this.speed;
if (Math.random() < 0.05) this.isScattering = false; // 停止散开
} else {
let angle = Math.atan2(this.targetY - this.y, this.targetX - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
}
}
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
this.energy -= 0.1; // 移动消耗能量
}
findClosestGrass() {
let closestGrass = null;
let minDist = Infinity;
grassArray.forEach(grass => {
const dist = Math.sqrt(Math.pow(this.x - grass.x, 2) + Math.pow(this.y - grass.y, 2));
if (dist < minDist) {
minDist = dist;
closestGrass = grass;
}
});
return closestGrass;
}
eat(grass) {
const dist = Math.sqrt(Math.pow(this.x - grass.x, 2) + Math.pow(this.y - grass.y, 2));
if (dist < this.size + grass.size) {
grass.size = 0; // 羊吃掉草
this.energy += 30; // 羊增加能量
return true;
}
return false;
}
breed() {
// 避免羊群膨胀
if (this.energy >= 200 && sheepArray.length < 100) {
this.energy -= 100; // 繁殖消耗能量
return new Sheep(Math.random() * canvas.width, Math.random() * canvas.height); // 新羊出生
}
return null;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "white";
ctx.fillText("🐑", this.x, this.y);
}
}
// 构造狼对象
class Wolf {
constructor(x, y) {
this.x = x;
this.y = y;
this.size = 25;
this.energy = 200; // 狼的能量
this.speed = 2;
this.targetX = this.x;
this.targetY = this.y;
}
move() {
// 向羊群移动
const closestSheep = this.findClosestSheep();
if (closestSheep) {
let angle = Math.atan2(closestSheep.y - this.y, closestSheep.x - this.x);
this.x += this.speed * Math.cos(angle);
this.y += this.speed * Math.sin(angle);
}
this.x = Math.max(0, Math.min(canvas.width, this.x)); // 保持在画布内
this.y = Math.max(0, Math.min(canvas.height, this.y)); // 保持在画布内
this.energy -= 0.5; // 狼每次移动消耗能量
}
hunt(sheep) {
const dist = Math.sqrt(Math.pow(this.x - sheep.x, 2) + Math.pow(this.y - sheep.y, 2));
if (dist < this.size + sheep.size) {
this.energy += 50; // 吃掉羊获得能量
sheep.energy = 0; // 羊被吃掉
return true;
}
return false;
}
findClosestSheep() {
let closestSheep = null;
let minDist = Infinity;
sheepArray.forEach(sheep => {
const dist = Math.sqrt(Math.pow(this.x - sheep.x, 2) + Math.pow(this.y - sheep.y, 2));
if (dist < minDist) {
minDist = dist;
closestSheep = sheep;
}
});
return closestSheep;
}
draw() {
ctx.font = `${this.size}px sans-serif`;
ctx.fillStyle = "gray";
ctx.fillText("🐺", this.x, this.y);
}
}
// 初始化生态系统
function init() {
// 创建草
for (let i = 0; i < maxGrass; i++) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建羊
for (let i = 0; i < maxSheep; i++) {
sheepArray.push(new Sheep(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 创建狼
for (let i = 0; i < maxWolves; i++) {
wolfArray.push(new Wolf(Math.random() * canvas.width, Math.random() * canvas.height));
}
}
// 更新和绘制生态系统
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新草的状态
grassArray.forEach(grass => {
grass.grow();
grass.draw();
});
// 更新羊的状态
let newSheep = [];
sheepArray.forEach(sheep => {
sheep.move();
// 羊吃草
grassArray.forEach(grass => {
if (sheep.eat(grass)) {
grassArray.splice(grassArray.indexOf(grass), 1);
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
});
// 羊繁殖
let babySheep = sheep.breed();
if (babySheep) {
newSheep.push(babySheep);
}
sheep.draw();
});
sheepArray.push(...newSheep);
// 更新狼的状态
wolfArray.forEach(wolf => {
wolf.move();
// 狼捕食羊
sheepArray.forEach(sheep => {
if (wolf.hunt(sheep)) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
wolf.draw();
});
// 移除死去的羊
sheepArray.forEach(sheep => {
if (sheep.energy <= 0) {
sheepArray.splice(sheepArray.indexOf(sheep), 1);
}
});
// 移除死去的狼
wolfArray.forEach(wolf => {
if (wolf.energy <= 0) {
wolfArray.splice(wolfArray.indexOf(wolf), 1);
}
});
// 更新草数量
if (grassArray.length < maxGrass) {
grassArray.push(new Grass(Math.random() * canvas.width, Math.random() * canvas.height));
}
// 显示统计信息
document.querySelector('.info').innerHTML = `
<p>羊数量: ${sheepArray.length}</p>
<p>狼数量: ${wolfArray.length}</p>
<p>草数量: ${grassArray.length}</p>
`;
}
// 启动模拟
init();
setInterval(update, 1000 / 60); // 60 FPS
</script>
</body>
</html>
让其更加有趣的一些方式
为了让这个沙盒更加真实和有趣，可以从以下几个方面进行改进：
1. 增加生态平衡与互动
- 食物链关系：狼和羊之间的互动可以变得更具生动性。例如，狼可以捕食羊，羊可以吃草，草在被吃掉后需要一定时间才能重新生长。
- 捕食与繁殖机制：狼吃掉羊后可以繁殖出新的狼，而羊被吃掉会影响羊群的数量。这样可以模拟食物链和生态平衡的动态变化。
- 羊的繁殖：羊在食物丰富的情况下会繁殖，数量增多。草的生长速度和羊的数量相关。草短缺时，羊的繁殖速度会变慢。
2. 天气与季节影响
- 天气变化：可以加入天气变化机制，例如晴天、雨天、雪天等，不同天气对动物行为和草的生长速度产生影响。
- 下雨：雨天可以加速草的生长，但狼和羊的移动速度减慢。
- 寒冷天气：冬季可能导致草的生长停止，狼和羊的活动减少，羊可能需要更多的食物来维持生存。
- 季节变化：在不同的季节，草的生长和动物的活动有所不同。例如，冬季草可能不再生长，动物也可能会寻找更多的食物，甚至进入冬眠状态。
3. 随机事件与突发情况
- 疾病或灾难：引入一些随机事件，例如突然爆发的疾病或自然灾害，可能会影响动物的数量。比如，草可能因病害无法生长，狼和羊的数量减少。
- 动物行为改变：狼和羊可能有某些时段进入“警戒模式”或休息模式，改变它们的移动和捕食行为。
4. 更智能的行为模型
- 群体行为：狼和羊不仅可以根据单独的目标（如最近的羊或草）做出反应，还可以形成群体行为。例如，狼群可以合作围捕羊群，羊群可以相互保护避免被狼捕捉。
- 羊群中的羊可以通过彼此靠近来提高逃脱的几率。
- 狼群的协同捕猎可以在猎物数量多时更有效地捕捉羊。
5. 环境影响
- 地形和障碍物：加入不同的地形（如山脉、河流、树林）可以让动物的移动变得更加复杂。有些地形可能会阻碍狼和羊的移动，增加策略性。
- 有限的空间：设定特定的区域作为动物的栖息地，动物在栖息地附近活动，并且在一定范围内寻找食物和伙伴。
6. 时间与事件的关联
- 昼夜循环：引入昼夜循环，不同时间段动物的活动有所不同。比如白天狼更加活跃，羊也容易找到草，而夜间它们会寻找避难所休息。
- 繁殖周期：动物的繁殖不应是瞬间的，而应基于一定的生命周期。每种动物都有自己的生命周期和繁殖季节。
7. 增强统计数据与图形
- 可视化统计：增加更详细的统计图表，比如狼和羊的生存曲线、草的覆盖率、环境温度等。
- 动态反馈：通过图形和文字形式更直观地显示游戏内生态变化，例如通过图标或颜色变化表示草的生长、动物数量的变化等。
8. 玩家互动
- 玩家控制的元素：允许玩家对环境进行一些干预，如播种草、驱赶狼群、引入新的物种等，增加策略性和玩家的参与感。
- 任务与目标：设定任务或目标（如维持一定数量的羊，控制狼群数量等），增加游戏性和挑战。
9. 动物的感知与智能
- 感知机制：动物可以感知周围的环境，做出更灵活的反应。例如，狼能够感知羊的移动，羊也能够感知狼的接近，从而采取不同的策略（逃跑、集结、隐匿）。
- 嗅觉与视觉：加入更复杂的行为模型，例如狼可以依赖嗅觉追踪羊，而羊则更多依赖视觉来躲避天敌。
10. 优化沙盒界面
- 动态展示：随着动物的移动，沙盒画面应该动态更新，以便玩家观察到更真实的变化。例如，狼和羊之间的追逐，草的生长，或者环境的变化。
- 音效与动画：加上一些简单的音效和动画，比如狼的叫声，羊的走动，草的生长声等，使得沙盒更加生动和有趣。
11. 更多种类的物种
- 引入其他动物和植物：除了狼和羊，还可以引入其他动物（如狐狸、兔子等）和植物（如花朵、灌木等），让生态系统更丰富。
- 竞争与合作：不同物种之间也可以有竞争关系或共生关系，例如兔子和羊可以共享草，而狼与狐狸可能竞争捕猎机会。
12. 更加复杂的进化机制
- 进化与适应：引入基因变异机制，使得狼和羊在一定条件下可以进化，适应不同的环境挑战，例如变得更加耐寒、速度更快或有更强的繁殖能力。
通过这些改进，沙盒不仅能够更具真实性，还能增强其趣味性和挑战性，让玩家更加沉浸在动态变化的生态系统中，同时体验到更复杂的策略和互动。
chat
经典沙盒
类似的经典生态沙盒模拟（或称为“生命模拟”）涉及到模拟生物、生态系统及其交互。
这些沙盒通过模拟个体与环境之间的关系，展现了自然界的一些规则，通常是基于生物行为、资源分配、繁殖、死亡等原则。
以下是一些经典的生态沙盒或生命模拟系统：
1. Conway’s Game of Life (康威生命游戏)
- 类型: 细胞自动机
- 概述: 这是一个经典的二维离散生命模拟，基于简单的规则：细胞根据周围的细胞数量变化状态（生与死）。这个模型虽然简单，但却能模拟出复杂的生命行为（如自复制、滑翔模式等）。它通常用于模拟自组织行为和复杂系统。
- 链接: Conway’s Game of Life
2. SimLife
- 类型: 生态系统模拟
- 概述: 由Maxis公司开发，玩家在其中创建和管理一个虚拟的生态系统。模拟的对象包括不同种类的生物，它们会繁衍生息、竞争资源、捕食和被捕食。玩家可以控制生态环境的条件，并观察物种如何生存和演化。
- 链接: SimLife (Wikipedia)
3. Spore
- 类型: 生物进化模拟
- 概述: 由Maxis开发，Spore允许玩家从微生物开始，逐渐进化到空间文明的层面。玩家可以自定义生命体，并操控它们在不同的生态系统中生存和发展。游戏结合了角色扮演、模拟、战略和策略元素，玩家可以创建并管理生物的进化过程。
- 链接: Spore (Wikipedia)
4. SimEarth
- 类型: 行星生态系统模拟
- 概述: 另一款Maxis的经典游戏，玩家在其中控制一个行星的生态系统，从最初的原始条件到进化成复杂的生态系统。玩家需要控制气候、地理条件、物种的多样性以及灾难等因素，以维持行星的平衡。
- 链接: SimEarth (Wikipedia)
5. Ecosystem (Ecosystem Simulation)
- 类型: 生态系统与物种相互作用模拟
- 概述: 这类游戏通常模拟复杂的生态系统，其中包含多种物种的相互作用，玩家需要管理生物、资源和环境等因素，使得生态系统健康运作。游戏的重点是模拟不同物种的生命周期、繁殖、捕食、合作和竞争。
- 示例: Ecosystem Simulator
6. Noita
- 类型: 物理沙盒，液体与物质交互
- 概述: 虽然Noita更侧重于基于物理引擎的沙盒玩法，但它提供了一个复杂的模拟环境，在这个环境中不同物质之间相互作用，产生有趣的效果。游戏的一个独特方面是每个像素都可以被视为一个独立的物质单位，可以与周围环境进行交互。这种物理模拟环境可以用来模拟化学反应、火灾、爆炸等自然现象。
- 链接: Noita
7. Aquarium Simulation (水族馆模拟)
- 类型: 水族馆生态模拟
- 概述: 在这些游戏中，玩家设计并管理一个虚拟的水族馆，安排鱼类、植物和其他水生生物的相互关系。这些游戏强调物种的平衡与维持生态健康。
- 示例: Fish Tycoon
8. The Endless Forest
- 类型: 虚拟生物生态互动
- 概述: 这是一款多玩家的虚拟世界游戏，玩家在其中扮演一种名为“心灵鹿”的动物，在一片森林中与其他玩家互动。游戏强调生态环境与物种之间的交流和互动，允许玩家探索生物的社会行为、繁殖和环境适应等方面。
- 链接: The Endless Forest
9. Planet Coaster & Planet Zoo
- 类型: 主题公园与动物园模拟
- 概述: 这些游戏由Frontier Developments开发，尽管它们主要是关于管理主题公园或动物园，但它们也具有模拟生态系统和动物行为的功能。在《Planet Zoo》中，玩家需要管理动物栖息地，确保物种繁衍生息并保持生态平衡。
- 链接: Planet Zoo (Wikipedia)
10. Oxygen Not Included
- 类型: 生存与生态模拟
- 概述: 这是一款以空间站为背景的生态模拟游戏，玩家需要在一个封闭的环境中为一群幸存者提供氧气、水、食物等资源，并维持生态系统的平衡。游戏的核心机制是模拟物理、热量、气体和水的循环等复杂过程，要求玩家解决与生态系统相关的各种问题。
- 链接: Oxygen Not Included (Wikipedia)
11. Species: Artificial Life, Real Evolution
- 类型: 人工生命与进化模拟
- 概述: 这是一个模拟进化过程的沙盒游戏，玩家创建和观察不同的生物体（种群），并根据环境的压力和选择规则，生物体会进化出各种特性。游戏强调遗传学、自然选择以及如何通过模拟改变生物的形态和行为。
- 链接: Species: Artificial Life, Real Evolution
12. Eco
- 类型: 生态学与资源管理
- 概述: 《Eco》是一款多人合作沙盒游戏，玩家必须通过建立生态系统来维护地球的生物多样性，并避免由于过度开发资源而导致生态崩溃。游戏模拟了生态学、环境科学、资源管理和社会合作等方面的内容。
- 链接: Eco (Wikipedia)
总结：
这些经典的生态沙盒游戏涵盖了从简单的生命游戏（如康威生命游戏）到复杂的生物进化和生态管理模拟（如《Spore》与《Eco》）。它们为玩家提供了一个虚拟的实验环境，可以探索不同物种之间的关系、生态平衡、资源竞争和生物演化等过程。每个游戏都提供了独特的玩法和挑战，是理解生态学和自然规律的一个有趣途径。
