zoukankan      html  css  js  c++  java
  • 《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公众号:大李日志

    我是bigbigli!!! 更多内容请关注微信公众号:“大李日志”
  • 相关阅读:
    L2-1 功夫传人 (25分)
    7-11 家庭房产(25 分)
    7-11 玩转二叉树 (25分)
    7-10 排座位 (25分)
    7-12 最长对称子串 (25分)
    7-10 树的遍历 (25分)
    STL
    Max Gcd
    水果
    Rails
  • 原文地址:https://www.cnblogs.com/bigbigli/p/13546511.html
Copyright © 2011-2022 走看看