乒乓球游戏
点击上方「processing之旅」可快速关注我们
之前制作的乒乓球游戏，比较简单。在这个版本中，设置了一些随机的障碍物来增加可玩性。有了随机性，才会更有意思。
在这个版本中创建了一些板子作为障碍物。并且让它们可以向下移动。
1.先定义一个存储板子的数组，再定义一些相关的变量。
1var boards = []; //定义板子的数组
2var boardSpeed = 2; //定义和设置板子向下移动的速度
3var boardInterval = 5000; //定义和设置前后两个板子之间间隔的时间
4var lastAddTime = 0; //定义记录上次增加板子时间的变量，并且设置初值为0
5var minGapWidth = 200; //定义板子间隙最小值的变量
6var maxGapWidth = 300; //定义板子间隙最大值的变量
7var boardHeight = 30; //定义板子高度的变量
8var boardColor; //定义板子颜色的变量2.然后定义一个增加板子的方法，隔一段时间就增加一个新的板子，板子的宽度和板子的间隙都使随机的。然后把这些板子的参数都存储在板子的数组中。
1function boardAdder() { //定义添加板子的方法
2 if (millis()-lastAddTime > boardInterval) { //如果当前时间与上次添加板子的时间，相差一个间隔，就增加一个新的板子
3 var randWidth = round(random(minGapWidth, maxGapWidth)); //定义板子空隙的宽度的变量，设置为一个随机数，范围是从最小值到最大值
4 var randX = round(random(0, width-randWidth)); //定义左边板子的宽度的变量，设置为一个随机数，范围是从0到画布的宽度减去间隙的宽度
5 // [左边板子的横坐标, 左边板子的纵坐标, 板子间隙的宽度, 板子间隙的高度, 通过板子的得分情况]
6 var randBoard = [randX/2, -boardHeight/2, randWidth, boardHeight, 0]; //定义一个记录这个新的板子参数的数组，并设置数组的值
7 boards.push(randBoard); //将这个新的板子的参数添加到板子数组中，板子数组中存储着所有没有被删除的板子
8 lastAddTime = millis(); //设置上次添加板子的时间为当前的时间
9 }
10}
3.接下来就可以根据这些参数来绘制板子了，定义一个绘制板子的方法
1function boardDrawer(index) { //定义绘制板子的方法
2 var board = boards[index]; //定义一个数组，并将板子数组中的一个板子取出来，把它的参数赋值给该数组
3
4 var boardLeftX = board[0]; //定义左边板子的横坐标，并把板子的横坐标赋值给它
5 var boardLeftY = board[1]; //定义左边板子的纵坐标，并把板子的纵坐标赋值给它
6 var gapBoardWidth = board[2]; //定义板子间隙的宽度，并给板子间隙的宽度赋值给它
7 var gapBoardHeight = board[3];
8 var boardLeftWidth = 2*boardLeftX; //定义左边板子的宽度，并给它赋值
9 var boardRightX = width-(width-(boardLeftWidth+gapBoardWidth))/2; //定义右边板子的横坐标，并给它赋值
10 var boardRightY = boardLeftY; //定义右边板子的纵坐标，并给它赋值
11 var boardRightWidth =width-(boardLeftWidth+gapBoardWidth) ; //定义右边板子的宽度，并给它赋值
12
13 // rectMode(CORNER); //设置矩形的模式为居中模式，前两个参数为中心的坐标，后两个参数是矩形的长宽
14 rectMode(CENTER); //设置矩形的模式为居中模式，前两个参数为矩形中心的坐标，后两个参数是矩形的长宽
15 fill(boardColor); //填充板子的颜色
16 rect(boardLeftX, boardLeftY, boardLeftWidth, boardHeight, 0, 15, 15, 0); //绘制左边的板子，并设置它的右上角和右下角为圆角，圆角的半径为15
17 rect(boardRightX, boardRightY,boardRightWidth, boardHeight, 15, 0, 0, 15); //绘制右边的板子，并设置它的左上角和左下角为圆角，圆角的半径为15
18}
4.想要这些板子向下移动，我们需要定义一个板子移动的方法，并且在板子向下移动到画布的下边缘时，要将这个板子删除，还要定义一个删除板子的方法。
1function boardMover(index) { //定义板子移动的方法
2 var board = boards[index]; //定义一个数组，并将板子数组中的一个板子取出来，把它的参数赋值给该数组
3 board[1]+= boardSpeed; //使这个数组的第二个元素，即板子的纵坐标，加上板子的速度，这样就可以使板子向下移动
4}
5function boardRemover(index) { //定义板子删除的方法
6 var board = boards[index]; //定义一个数组，并将板子数组中的一个板子取出来，把它的参数赋值给该数组
7 if (board[1]> height+boardHeight/2) { //如果板子向下移动是，它的纵坐标超过了画布的高度，即画布的最下边
8 boards.splice(index,1); //使用删除数组元素的方法，将这个板子从板子数组中删除
9 }
10}
5.下面就要让球在碰到板子时，板子可以使球反弹。我们定义一个反弹球的方法。在球碰到板子的下面时，使球向下反弹；在球碰到板子的上面时，使球向上反弹。并且在球通过板子的间隙时，可以得分，每通过一个间隙得10分。
1function watchBoardCollision(index) { //定义板子碰撞的方法
2 var board = boards[index]; //定义一个数组，并将板子数组中的一个板子取出来，把它的参数赋值给该数组
3
4 var boardLeftX = board[0]; //定义左边板子的横坐标，并把板子的横坐标赋值给它
5 var boardLeftY= board[1]; //定义左边板子的纵坐标，并把板子的纵坐标赋值给它
6 var gapBoardWidth = board[2]; //定义板子间隙的宽度，并给板子的宽度赋值给它
7 var gapBoardHeight = board[3];
8 var boardScored = board[4]; //定义通过板子的得分情况，得分为1，未得分为0
9 var boardLeftWidth = 2*boardLeftX; //定义左边板子的宽度，并给它赋值
10 var boardRightX = width-(width-(boardLeftWidth+gapBoardWidth))/2; //定义右边板子的横坐标，并给它赋值
11 var boardRightY = boardLeftY; //定义右边板子的纵坐标，并给它赋值
12 var boardRightWidth =width-(boardLeftWidth+gapBoardWidth) ; //定义右边板子的宽度，并给它赋值
13 var gapBoardY = boardLeftY; //定义板子间隙的纵坐标，并给它赋值
14 var boardMoveDistance = boardSpeed; //定义板子在两个帧之间移动的距离
15
16 //左边板子向下反弹球
17 if (
18 (ballY>boardLeftY)&& //如果球在板子的下方
19 (ballX-(ballSize/2)<boardLeftX+boardLeftWidth/2) && //并且球没有超出板子的右边缘
20 (ballX+(ballSize/2)>boardLeftX-boardLeftWidth/2) //并且球没有超出板子的左边缘
21 ){
22 if(dist(ballX, ballY, ballX, boardLeftY)<=(ballSize/2+boardMoveDistance+boardHeight/2)){ //继续判断，如果球与板子相接触
23
24 makeBounceTop(boardLeftY+boardHeight/2); //调用上边反弹方法并将板子下表面的纵坐标传回去，使球向下反弹
25 ballY+=boardMoveDistance; //设置球的位置，使球增加一段向下的移动距离
26 ballSpeedVert+= boardSpeed; //设置球的垂直速度，使球在垂直速度上增加板子的移动速度
27 }
28 }
29 //右边板子向下反弹球
30 if (
31 (ballY> boardRightY)&& //如果球在板子的下方
32 (ballX-(ballSize/2)<boardRightX+boardRightWidth/2) && //并且球没有超出板子的右边缘
33 (ballX+(ballSize/2)>boardRightX-boardRightWidth/2) //并且球没有超出板子的左边缘
34 ){
35 if(dist(ballX, ballY, ballX, boardRightY)<=(ballSize/2+boardMoveDistance+boardHeight/2)){ //继续判断，如果球与板子相接触
36
37 makeBounceTop(boardRightY+boardHeight/2); //调用上边反弹方法并将板子下表面的纵坐标传回去，使球向下反弹
38 ballY+=boardMoveDistance; //设置球的位置，使球增加一段向下的移动距离
39 ballSpeedVert+= boardSpeed; //设置球的垂直速度，使球在垂直速度上增加板子的移动速度
40 }
41 }
42 //左边板子向上反弹球
43 if (
44 (ballY<boardLeftY)&& //如果球在板子的上方
45 (ballX-(ballSize/2)<boardLeftX+boardLeftWidth/2) && //并且球没有超出板子的右边缘
46 (ballX+(ballSize/2)>boardLeftX-boardLeftWidth/2) //并且球没有超出板子的左边缘
47 ){
48 if(dist(ballX, ballY, ballX, boardLeftY)<=(ballSize/2-boardMoveDistance+boardHeight/2)){ //继续判断，如果球与板子相接触
49
50 makeBounceBottom(boardRightY-boardHeight/2); //调用下边反弹方法并将板子上表面的纵坐标传回去，使球向上反弹
51 ballY-=boardMoveDistance; //设置球的位置，使球减少一段向下的移动距离
52 }
53 }
54 //右边板子向上反弹球
55
56 if (
57 (ballY< boardRightY)&& //如果球在板子的上方
58 (ballX-(ballSize/2)<boardRightX+boardRightWidth/2) && //并且球没有超出板子的右边缘
59 (ballX+(ballSize/2)>boardRightX-boardRightWidth/2) //并且球没有超出板子的左边缘
60 ){
61 if(dist(ballX, ballY, ballX, boardRightY)<=(ballSize/2-boardMoveDistance+boardHeight/2)){ //继续判断，如果球与板子相接触
62
63 makeBounceBottom(boardRightY-boardHeight/2); //调用下边反弹方法并将板子上表面的纵坐标传回去，使球向上反弹
64 ballY-=boardMoveDistance; //设置球的位置，使球减少一段向下的移动距离
65 }
66 }
67
68if (ballY < gapBoardY-(boardHeight/2) && boardScored==0) { //如果球通过了板子，并且是第一次通过，则得分
69 board[4]=1; //设置通过板子得分的情况为1，表示已经通过了，这样再一次通过将不再得分
70 score+=10; //通过一个板子，加10分
71 }
72}
6. 最后定义一个控制板子的方法，来控制每个板子的删除，移动，绘制和碰撞。
1function boardHandler() { //定义控制板子的方法
2 for (var i = 0; i < boards.length; i++) { //使用for循环，将数组的里每个板子都进行控制
3 boardRemover(i); //调用移动板子的方法，将板子从数组中删除
4 boardMover(i); //调用清除板子的方法，使板子可以向下移动
5 boardDrawer(i); //调用绘制板子的方法，将板子在画布中显示出来
6 watchBoardCollision(i); //调用板子碰撞的方法，来控制球的运动与得分
7 }
8}
7.将生成板子的方法和控制板子的方法，放到游戏界面中。这样游戏开始时，板子就会出现。
1 function gameplayScreen() { //游戏界面
2 …
3 boardAdder(); //调用增加板子的方法，来增加板子
4 boardHandler(); //调用控制板子的方法，来控制板子
5 }
8.在游戏重新开始的方法中，增加两行代码，使记录增加板子的时间归零，也使板子的数组清空。
1 function restart() { //游戏重新开始的方法
2 …
3 lastAddTime = 0; //重置增加上一个板子的时间
4 boards = []; //初始化板子的数组，将原来存储的数据清空
5 }
运行的结果如下：
游戏开始
重新开始
点击阅读原文就可以玩了
全部的代码可以在下面的链接查看到
https://editor.p5js.org/jack3279/sketches/wBLJQSaLC
参考内容：
Ultimate Guide to the Processing Language Part II: Building a Simple Game
OGUZ GELAL，https://www.toptal.com/game/ultimate-guide-to-processing-simple-game
推荐阅读
超详细教程，做一个乒乓球游戏（上）
超详细教程，做一个乒乓球游戏（下）
End
版权声明：文章内容欢迎转发，但请注明出处，并且不得对原始内容做任何修改，请尊重我们的劳动成果。
点击“阅读原文”，就可以开始玩了。
