设计一个群体运动的JS程序,类似喂鱼,投食鱼群抢食
时间: 2024-06-11 08:11:15 浏览: 7
这里是一个简单的群体运动JS程序,实现的功能是让用户投食鱼群,鱼群会抢食。程序使用了HTML5的Canvas元素来绘制鱼和食物,使用了requestAnimationFrame()函数来实现帧动画。
HTML代码:
```html
<canvas id="canvas"></canvas>
```
CSS代码:
```css
#canvas {
border: 1px solid #ccc;
}
```
JS代码:
```javascript
// 获取Canvas元素和上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// 鱼群数组
var fishes = [];
// 食物数组
var foods = [];
// 食物数量
var foodCount = 10;
// 食物颜色
var foodColor = "red";
// 食物大小
var foodSize = 10;
// 鱼群数量
var fishCount = 50;
// 鱼群颜色
var fishColor = "blue";
// 鱼群大小
var fishSize = 20;
// 食物投放范围
var foodRange = {
x: 0,
y: 0,
width: canvas.width,
height: canvas.height
};
// 随机生成食物
function generateFood() {
for (var i = 0; i < foodCount; i++) {
var food = {
x: Math.random() * (foodRange.width - foodSize),
y: Math.random() * (foodRange.height - foodSize),
size: foodSize,
color: foodColor
};
foods.push(food);
}
}
// 随机生成鱼群
function generateFish() {
for (var i = 0; i < fishCount; i++) {
var fish = {
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx: Math.random() * 2 - 1,
vy: Math.random() * 2 - 1,
size: fishSize,
color: fishColor
};
fishes.push(fish);
}
}
// 绘制食物
function drawFood(food) {
ctx.beginPath();
ctx.fillStyle = food.color;
ctx.arc(food.x + food.size / 2, food.y + food.size / 2, food.size / 2, 0, Math.PI * 2, true);
ctx.fill();
}
// 绘制鱼群
function drawFish(fish) {
ctx.beginPath();
ctx.fillStyle = fish.color;
ctx.arc(fish.x + fish.size / 2, fish.y + fish.size / 2, fish.size / 2, 0, Math.PI * 2, true);
ctx.fill();
}
// 移动鱼群
function moveFish(fish) {
fish.x += fish.vx;
fish.y += fish.vy;
if (fish.x < 0 || fish.x > canvas.width) {
fish.vx = -fish.vx;
}
if (fish.y < 0 || fish.y > canvas.height) {
fish.vy = -fish.vy;
}
}
// 检测鱼群是否吃到了食物
function checkFishEatFood() {
for (var i = 0; i < fishes.length; i++) {
var fish = fishes[i];
for (var j = 0; j < foods.length; j++) {
var food = foods[j];
if (fish.x < food.x + food.size && fish.x + fish.size > food.x &&
fish.y < food.y + food.size && fish.y + fish.size > food.y) {
foods.splice(j, 1); // 从食物数组中删除食物
fish.size += 1; // 鱼的大小加1
break;
}
}
}
}
// 清空Canvas
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// 绘制所有元素
function drawAll() {
clearCanvas();
for (var i = 0; i < foods.length; i++) {
drawFood(foods[i]);
}
for (var i = 0; i < fishes.length; i++) {
drawFish(fishes[i]);
}
}
// 移动所有元素
function moveAll() {
for (var i = 0; i < fishes.length; i++) {
moveFish(fishes[i]);
}
}
// 循环执行动画
function animate() {
drawAll();
moveAll();
checkFishEatFood();
requestAnimationFrame(animate);
}
// 初始化程序
function init() {
generateFood();
generateFish();
animate();
}
// 启动程序
init();
```
程序的核心是animate()函数,该函数使用requestAnimationFrame()函数来实现帧动画。在每一帧中,程序会先清空Canvas,然后绘制所有的食物和鱼群。接着,程序移动所有的鱼群,检测鱼群是否吃到了食物,最后再次调用requestAnimationFrame()函数,循环执行动画。程序还提供了generateFood()和generateFish()函数来随机生成食物和鱼群。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)