📅 最后修改于: 2023-12-03 15:18:12.598000 🧑 作者: Mango
P5.js是一个流行的JavaScript库，用于创造交互式、有趣的数字艺术作品，以及基于Web的创意编程。在本文中，我们将介绍如何使用P5.js创建一个简单的游戏，名为“赢老鼠Y”。
游戏规则很简单：玩家需要控制一个图标，用鼠标抓住屏幕上跑动的老鼠Y。每成功捕捉一只老鼠，游戏会为玩家计分。
我们将使用P5.js的强大功能，例如绘制、鼠标事件、计时器和图像加载，来实现我们的游戏。
首先，我们需要创建一个HTML文件，并在其中包含P5.js的引用：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.dom.min.js"></script>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
然后，我们创建一个名为“sketch.js”的JavaScript文件，并开始编写游戏代码。
我们需要定义一些变量，例如分数、老鼠的速度、老鼠的位置等等：
let score = 0;
let mouseSpeed = 3;
let mousePos = {
x: 0,
y: 0,
};
接下来，我们需要使用P5.js的setup()函数来初始化游戏，例如创建画布、加载图像等等：
function setup() {
createCanvas(400, 400);
// 加载老鼠的图像
mouseImg = loadImage('https://i.imgur.com/lOYR1Tb.png');
// 隐藏鼠标样式
noCursor();
}
然后，我们需要在draw()函数中更新并绘制游戏元素，例如玩家图标、老鼠图标等等：
function draw() {
// 绘制背景
background(200, 200, 250);
// 绘制玩家图标
let size = 50;
ellipse(mouseX, mouseY, size);
// 更新老鼠的位置
let dx = mousePos.x - mouseX;
let dy = mousePos.y - mouseY;
let dist = Math.sqrt(dx*dx + dy*dy);
if(dist < size/2 + 25) { // 如果玩家与老鼠相撞
mousePos.x = random(width);
mousePos.y = random(height);
score ++;
}
let angle = atan2(mouseY-mousePos.y, mouseX-mousePos.x);
mousePos.x += cos(angle) * mouseSpeed;
mousePos.y += sin(angle) * mouseSpeed;
// 绘制老鼠
image(mouseImg, mousePos.x, mousePos.y, 50, 50);
// 绘制分数
textSize(32);
textAlign(LEFT);
fill(0);
text(`Score: ${score}`, 10, 40);
}
最后，我们需要添加鼠标事件，以便在点击鼠标时玩家图标会快速移动到鼠标位置：
function mouseClicked() {
let dx = mouseX - width/2;
let dy = mouseY - height/2;
let angle = atan2(dy, dx);
let force = 100;
mouseSpeed = 0;
let timer = setInterval(() => {
mouseSpeed += 0.1;
}, 10);
setTimeout(() => {
clearInterval(timer);
mouseSpeed = 3;
}, 1000);
mousePos.x += cos(angle) * force;
mousePos.y += sin(angle) * force;
}
通过P5.js，我们可以轻松创建交互式的数字艺术作品和有趣的游戏。本文中，我们使用了P5.js的绘图、鼠标事件、计时器和图像加载功能，创建了一个简单而有趣的游戏“赢老鼠Y”。希望这篇文章对您有所启发，如果您对P5.js感兴趣，请继续探索它的更多功能和可能性。