js小球与边框碰撞反弹_p5.js实现一个简单的网球小游戏

前言

越来越觉得p5.js挺有意思的，虽然这个项目是由国外几个博士生还是硕士生在维护，但是做的很棒。

p5.js可以说是我接触过的最容易入手的编程语言了。我主要是学习p5.js的同时，顺手练一下老早之前摸过的JavaScript。

线条

这个是之前尝试p5.js的几个线条，拿了两条塞在了游戏里。

function setup() {
  // put setup code here
    createCanvas(800, 600);
    background(220,220,220)
}
let x = 0
function draw() {
    fill(255);
    rect(-1,-1,width+2,height+2);
    //line1
    line1(75,35,80,50)
    //line2
    line2(75,80)
    //line3
    line3(0,0)
    //line4
    line4(70,250,850,250,0.2*mouseY,0.2*mouseX,300);
    //line5
    line5(80,400,70,500)
}
function line1(x0,y0,x1,y1) {
     for (var i = 0; i <= mouseX*0.1; i++) {
         line(x0+10 + i*5 , y1, x0+5 + i*5 , y0)
         line(x0 + i*5  , y1, x0+5 + i*5  , y0)
         line(x0+5 + i*5 , y1, x0+10 + i*5  , y0)
         line(x0+5 + i*5 , y1, x0 + i*5  , y0)
     }
     line(x0, y0, x0+mouseX*0.5 , y0)
     line(x0, (y0+y1)/2, x0+mouseX*0.5 , (y0+y1)/2)
     line(x0, y1, x0+mouseX*0.5 , y1)
}

function line2(x0,y0)
{
    for(var l=1;l<=mouseX*0.5;l++) {
        for (var i = 0; i < 14; i++) {
            noStroke();//指定没有边框
            ecolor = 255 - i * 17;
            constrain(ecolor, 0, 255);//限制范围
            fill(ecolor);
            rect(i + x0 + l, i + y0, i, i);
        }
    }
}

function line3(x0,y0)
{
    fill(255, 51, 102)
    stroke(255, 51, 102)
    strokeWeight(1)
    beginShape()
    for(var i=0;i<=mouseX*0.01;i++) {
        vertex(80+i*60+x0, 160+y0)
        vertex(80+i*60+x0, 150+y0)
        vertex(90+i*60+x0, 130+y0)
        vertex(95+i*60+x0, 150+y0)
        vertex(92+i*60+x0, 148+y0)
        vertex(100+i*60+x0, 145+y0)
        vertex(110+i*60+x0, 139+y0)
        vertex(115+i*60+x0, 128+y0)
        vertex(120+i*60+x0, 130+y0)
        vertex(140+i*60+x0, 146+y0)
        vertex(140+i*60+x0, 160+y0)
        endShape()
    }
}

function line4(x0,y0,x1,y1,radius,Freq,res)
{
    var theta = 0;
    var xp = x0 + radius * sin(0.25*theta);
    var yp = y0 + radius * sin(0.25*theta);


    for(var i=1;i<res;i++)
    {
        var t = i/res;
        var xt = lerpAB(x0,x1,t);
        var yt = lerpAB(y0,y1,t);

        theta = t*Freq;
        var x = xt + radius * sin(0.25*theta);
        var y = yt + radius * sin(0.25*theta);
        line(xp,yp,x,y);
        xp = x;
        yp = y;
    }
}
function line5(x0,y0,x1,y1)
{
    var k=(y1-y0)/(x1-x0)
    var b=k*x0-y0
    for(var i=0;i<=mouseX*0.01;i++)
    {

        fill(60, 51, 102)
        circle(x0+i*55,y0,random(5,50))
    }
}
function lerpAB(a,b,t)
{
    return a + t*(b-a);
}

游戏实现

挺简单的一个游戏，按上下键控制人物移动，接住球后球会反弹，没接住球飞出去后会从网飞回。

人物的模型是调用的图片：

function preload() {
  tennisManRedOne = loadImage('https://res.cloudinary.com/dkw0kkkgd/image/upload/v1550623424/tennisManRedOne_zaszr5.png');
  tennisManRedTwo = loadImage('https://res.cloudinary.com/dkw0kkkgd/image/upload/v1550623420/tennisManRedTwo_mz3skr.png');
  tennisManBlueOne = loadImage('https://res.cloudinary.com/dkw0kkkgd/image/upload/v1550623406/tennisManBlueOne_jo7ppq.png');
  tennisManBlueTwo = loadImage('https://res.cloudinary.com/dkw0kkkgd/image/upload/v1550623416/tennisManBlueTwo_ac6ppw.png');
}

主要部分：

function setup() {
  setupCanvas();
  leftPlayerScore = 0;
  rightPlayerScore = 0; // setup scoreboard
  setupCourtCoordinates();
  setupNetCoordinates();
  setupPaddles();
  ball = new Ball(width * 0.5, height * 0.5, width * 0.021); // setup ball
}

function setupCanvas() {
  height = min(window.innerHeight, window.innerWidth / 2);
  // keep court dimensions nice
  width = min(window.innerWidth, height * 2);
  createCanvas(width, height);
}
function draw() {
  paddleOne.move(); // move player according to keyboard inputs
  paddleTwo.autoMove(ball.y); // computer player moves on its own relative to the ball's position
  updateBall();
  isColliding(); // check if ball is colliding with players
  didHitWall(); // check if ball is colliding with walls
  didScore(); // check if a player has scored
  background(255); // draw background
  drawCourt();
  drawCourtLines();
  paddleOne.render(); // draw player
  paddleTwo.render(); // draw computer player
  drawNet();
  ball.render(); // draw ball
}

设置键盘上下键控制人物移动：

function keyReleased() {
  if (keyCode === UP_ARR