欢迎光临
我的个人博客网站

《p5.js创意游戏编程》第一课:跳动的小球

《p5.js创意游戏编程》第一课:跳动的小球

开始

  1. 创建画布,生成一个400*400大小的画布。
function setup() {  	createCanvas(400, 400); } 
  1. 创建背景及小球,首先通过background()函数创建一个天蓝色(87,250,255)的背景,再创建一个20*20大小的小球,生成地点位于(200,200)的位置,使用ellipse()函数创建,ellipse()函数内有四个参数,分别表示生成小球的x,y坐标及宽和高。
var x=200,y=200; function draw() {      background(87,250,255);     ellipse(x,y,20,20); } 

draw()函数会不断地运行(频率为FPS,默认60帧/秒)

  1. 让小球动起来,通过draw()函数不断刷新屏幕可以通过改变小球的x,y坐标让小球运动起来。
var sx=2,sy=3; function draw() {      background(87,250,255);     ellipse(x,y,25,20);     x+=sx;     y+=sy; } 
  1. 让小球来回运动,通过条件判断让小球来回运动,如果小球来到了边缘位置,就让小球的x/y坐标减1
if(x>width||x<0){ 	sx*=-1; } if(y>height||y<0){ 	sy*=-1; } 

最后附上完整代码:

var x=200,y=200; var sx=2,sy=3; function setup() {      createCanvas(400, 400); }  function draw() {      background(87,250,255);     ellipse(x,y,20,20);     x+=sx;     y+=sy;     if(x>width||x<0){         sx*=-1;     }     if(y>height||y<0){         sy*=-1;     } } 

如果想进一步探讨p5.js,可以关注我的vx

赞(0) 打赏
未经允许不得转载:张拓的天空 » 《p5.js创意游戏编程》第一课:跳动的小球
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏