[Html][p5.js]实现弹跳小球

效果预览

代码

/**
*P5JS实现反弹小球
*/
var canvasWidth = 400;  // 定义画布宽度为400
var canvasHeight = 400;  // 定义画布高度为400
function setup() {
  createCanvas(canvasWidth, canvasHeight);  // 创建画布
}

var x = 0;  // 小球在画布中的初始x坐标
var y = 0;  // 小球在画布中的初始y坐标
var dx = 4.8; // 小球在画布中运动沿x轴方向的分速度
var dy = 4;  // 小球在画布中运动沿y轴方向的分速度

// 循环执行的跳动
function draw() {
  background(0); // 清空背景板
  ellipse(x = x+dx,y = y+dy,30);  // 绘制小球，小球在x和y轴的运动速度分别为dx和dy

  // 如果小球超出画布进行反弹，即速度改为其相反数（x轴大于画布宽度或小于0，y轴大于高度或小于0）
  if(x>400||x<0)dx = dx*(-1);  
  if(y>400||y<0)dy = dy*(-1);
}