本入门级教程将引导您使用JavaScript库p5.js构建单人乒乓游戏。
乒乓球游戏所需的只是一个矩形，一个椭圆和一个小动画。 p5.js提供了所有这些功能！ 通过一些额外的代码来使球从墙壁和球拍反弹，我们可以制作一个单人乒乓球游戏。
- 在线临场的十诫
- Mana Engine：使用组件
- 最好的独立游戏开发商会问同样的问题……
- SpriteKit ile OyunGeliştirme| 奥云拉达（Oyunlarda Fiziksel Kurallar）
- 纸上拼图设计
**如果您随时遇到困难，请查看解决方案代码。
p5.js快速入门
打开p5.js编辑器。 您将看到以下代码：
函数setup（）{
createCanvas（400，400）;
}
函数draw（）{
背景（220）;
}
如果您熟悉JavaScript，那么您会发现这里有两个功能： setup和draw 。 如果您不熟悉JavaScript，请不用担心！ 函数只是很少的代码包。
在代码的顶部， setup函数在程序的开头运行一次，在这里它只是为我们创建了一个400×400的画布。
draw功能反复运行，使屏幕动画。 通过在draw函数中连续更新对象的x和y坐标，可以对其进行动画处理。
重要的语法说明：首先，当我们向这些函数添加自己的代码时，请确保将其添加在大括号内： {和} ，而不是括号内！ 关于这一点，请确保每个function和if语句都具有一个大括号{和一个大括号} 。 最后，确保以分号结束每行：
改变我们的背景
我们的背景目前是浅灰色。 如果按下“播放”按钮（形状像一个三角形），您会看到它出现：
让我们改变背景。 我要使我的黑色，因为我打算为我的乒乓球游戏制作一个霓虹色的桨和球。
您可以在background功能中仅填写0（黑色）至255（白色）之间的一个值以创建灰色阴影。 这是黑色背景的代码，重要地放在draw函数的第一行：
函数draw（）{
背景（0）;
}
但是，您也可以将三个值添加到背景函数以使用RGB颜色（例如，蓝色的background(0, 0, 255) ）。 十六进制颜色也是一个选项（例如，相同的蓝色为background('#0000ff') ）。 该颜色选择器提供许多颜色的RGB和十六进制值。
400×400画布有一些限制，因此我还将更新setup功能以覆盖整个窗口：
函数setup（）{
createCanvas（windowWidth，windowHeight）;
}
当windowWidth和windowHeight变为粉红色时，不要惊慌-这只是计算机的一种表达方式，它知道您在说什么。
现在，如果刷新，我们的画布将占据整个预览屏幕！
加一个球
我们的球将只是一个椭圆，其坐标点会不断地更新，以使其移动。
我们可以通过在draw函数底部（在background ）添加以下代码来在屏幕上创建一个球：
fill（255，0，255）;
noStroke（）;
椭圆（100，100，50，50）;
fill功能设置下一个对象的颜色，您可以将RGB值更改为当前洋红色以外的其他值（所有值必须在0到255之间）。 noStroke可以确保球没有难看的轮廓。 ellipse函数中的代码将圆放置在点（100，100）上，并将宽度和高度都设置为50（使其成为圆）。
但是，我们将不断更改球的x和y坐标以对其进行动画处理，因此最好将它们存储在变量中。 我们还将对球的宽度和高度（=直径）进行一些计算，因此也可以将其存储起来。
在代码的最顶部，设置函数之前，创建以下变量：
var xBall = Math.floor（Math.random（）* 300）+ 50;
var yBall = 50;
var直径= 50;
xBall以50到350之间的随机x坐标开始球yBall以默认y坐标50开始球。直径也设置为50。
现在，我们可以在draw函数中将ellipse更新为：
椭圆（xBall，yBall，直径，直径）;
球将移动到顶部附近的随机位置，但其他所有位置都应相同。 现在，我们准备为球制作动画！
使其反弹
首先，我们需要跟踪球改变x和y坐标的速度。 将这两个变量添加到顶部的列表中：
var xBallChange = 5;
var yBallChange = 5;
现在，在draw函数中设置背景后，添加以下两行代码以连续更改球的位置，并通过xBallChange和yBallChange值增加其x和y坐标：
xBall + = xBallChange;
yBall + = yBallChange;
你的球移动了吗？
好极了！ …除了它也直接从屏幕上消失。
我们需要使用windowWidth和windowHeight变量以及我们对球的直径的了解来使球检测到它撞到墙壁的时间。
下面的代码检查球的x坐标是否在0和windowWidth之间，以及球的y坐标是否在0和windowHeight之间。 如果坐标超出了这些范围，则表示球已击中墙壁。 在更改球的坐标之后，立即将此代码放置在draw函数中：
如果（xBall <直径/ 2 ||
xBall> windowWidth-0.5 * diameter）{
xBallChange * = -1;
}
如果（yBall <直径/ 2 ||
yBall> windowHeight-直径）{
yBallChange * = -1;
}
由于球的x坐标和y坐标基于其正中心，因此直径在这些计算中也起作用。
当球与墙碰撞时，如果使坐标从正变到负，反之亦然，则球可以朝相反的方向运动。 您可以看到xBallChange和yBallChange乘以-1即可达到此效果。 数学！
现在，您的球应该从墙壁反弹了！
添加桨
桨只是一个矩形。 但是，在让我们兴奋不已并抢先为场景添加矩形之前，让我们为桨定义一些变量。 将这些以及与球相关的变量添加到代码的顶部：
var xPaddle;
var yPaddle;
var paddleWidth = 100;
var paddleHeight = 25;
这使我们可以在代码中的任何位置更改桨的x和y坐标，并准备定义100×25桨。
我想使用内置的windowWidth和windowHeight函数为桨定义默认的x坐标和y坐标，以便可以将桨放置在屏幕中间，靠近底部。 但是，我不能在setup和draw之外使用那些内置变量！
相反，我们将需要发挥创造力。 我将在我们的冗长列表中添加另一个变量：
var starts = false;
现在，当我进入draw功能时，我可以检查游戏是否已经开始。 如果还没有（如果started为false ），那么我可以使用那些内置变量将桨准确地放在我想要的位置。
将此代码添加到draw功能的底部：
如果（！开始）{
xPaddle = windowWidth / 2;
yPaddle = windowHeight-100;
开始=真;
}
如果游戏尚未开始，则将球拍放置在窗口中间，位于屏幕底部上方约100像素处。 由于started被声明为true ，因此该代码不再运行。
将以下代码添加到draw函数中以创建桨。 确保它在上述if语句之后发生！
fill（0，255，255）;
noStroke（）;
rect（xPaddle，yPaddle，paddleWidth，paddleHeight）;
这段代码使用我们上面预定义的变量绘制了一个桨。 与往常一样，您可以更改fill的RGB颜色。
现在测试一下！ 桨出现了吗？
使用箭头键控制桨
显然，如果桨不能移动，游戏就会很无聊。 要使操纵杆由左右箭头键控制，我们只需在draw下方添加第三个功能。
通过keyPressed函数，我们可以通过增加或减少xPaddle变量来调整桨叶的x坐标。 在draw函数结束后，将此代码添加到程序的底部：
功能keyPressed（）{
如果（keyCode === LEFT_ARROW）{
xPaddle-= 50;
}否则，如果（keyCode === RIGHT_ARROW）{
xPaddle + = 50;
}
}
现在，您应该可以使用左右箭头键来控制您的桨！
检测与桨的碰撞
但是，球完全忽略了桨，只是在其中航行！ 这是因为我们需要检查球是否与桨碰撞。
具体来说，我们需要检查球的x坐标是否在球拍的左右两端之间，并且它的y坐标是否在球拍的顶部。
这就是下面的代码所做的。 将其粘贴到在draw函数中使球从墙壁弹回的代码之后：
如果（（xBall> xPaddle &&
xBall <xPaddle + paddleWidth）&&
（yBall +（diameter / 2）> = yPaddle））{
xBallChange * = -1;
yBallChange * = -1;
}
再次注意，如何使球从正方向变为负方向，使球朝相反的方向运动（反之亦然-乘以-1将使球做相反的事情）。
现在，您的球应该从球拍上反弹了！
保持得分
到目前为止，您已经拥有功能齐全的乒乓球游戏。 恭喜你！ 但是，为了使其更加出色，我们可以添加一种机制来保持得分。
首先，让我们向列表添加另一个变量：
var score = 0;
每次球与桨碰撞时，我们都可以将得分提高一个。 在draw函数中找到if语句，以检测球桨碰撞。 在其中添加以下代码行：
分数++;
++是一种简写，表示“加一！”
最后，让我们在屏幕上显示分数。 在draw功能的底部，添加以下代码：
fill（0，255，255）;
textSize（24）;
text（“ Score：” + score，10，25）;
现在，只要您成功弹跳球，该程序就应该奖励您积分！
恭喜您构建了单人乒乓球游戏！
扩展名
是否渴望其他p5.js挑战？ 试试看…
- 使用文本文档来更改文本的字体，颜色和位置。
- 更改球或球拍的颜色。
- 使球反弹时改变颜色。 （提示：制作颜色数组，然后在每次反弹时随机选择一种颜色。）
- 使背景渐变。 （提示：请参见setGradient函数或在日落教程的一部分中向您展示如何制作渐变背景。）
- 检测球何时击中地面。 完成后，停下球，并在其顶部打印“ Game Over”。 （提示：您将要检查球的y坐标是否已超过
windowHeight。）
对于更多p5.js ，我还编写了Instagram过滤器教程和Sunset Scene教程。 该文档也是很棒的资源。 如果您喜欢有关代码的书，则首选p5.js入门。 最后，如果您在纽约或洛杉矶，请参加CC Fest！
