我一直在努力使这个球弹跳一天.为什么不起作用? [英] I have been trying to make this ball bounce for a day. Why doesnt it work?

查看:65
本文介绍了我一直在努力使这个球弹跳一天.为什么不起作用?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在上一堂球,在那堂课中,我想让球从墙上弹起,但它仍然卡住.

I am making a ball class, and in that class i want to make the ball bounce off the wall, but it remains stuck.

我曾尝试在平局功能中使球弹跳,但后来它甚至没有停在墙壁上.我尝试将this.x和this.y设置为远离限制,因此它不会循环播放,但是没有成功.我一无所有.我不知道该怎么办.我只是刚开始,我很喜欢编码,但这让我头疼.

I have tried making the ball bounce in the draw function, but then it didnt even stopped at the wall. I tried setting the this.x and this.y away from the limit so it doesnt loop, but no succes. I am left without choises. I dont know what to do. I am just starting out and im quite enjoying coding, but this is giving me a headache.

let r;
let g;
let b;

let xpos;
let ypos;

let size;

let xlimit;
let ylimit;
let x_limit;
let y_limit;

let xspeeddir;
let yspeeddir;

function setup() {
    
    createCanvas(800, 450);
    xpos = random(20, width);
    ypos = random(20, height);
    ball = new Ball(xpos, ypos);
    
    xlimit = width-15;
    ylimit = height-15;
    x_limit = 15;
    y_limit = 15;
    
    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);
    
    xspeeddir = random(-5,5);
    yspeeddir = random(-5,5);
    
}

function draw() {
    
    background(255, 238, 112);
    
    ball.appear(r, g, b);
    ball.move(xspeeddir, yspeeddir);
}

class Ball {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.size = 30;
    }
    
    appear(r, g, b) {
        this.r = r;
        this.g = g;
        this.b  = b;
        fill(this.r, this.g, this.b);
        noStroke();
        ellipse(this.x, this.y, this.size, this.size);
    }
    
    move(xspeed, yspeed) {
        this.speedx = xspeed;
        this.speedy = yspeed;
        
        if (this.x > xlimit) {
            this.speedx = -Math.abs(this.speedx);
            this.x = xlimit-1;
        }
        if (this.x < x_limit) {
            this.speedx = Math.abs(this.speedx);            
            this.x = x_limit + 1;
        }
        if (this.y > ylimit) {
            this.speedy = -Math.abs(this.speedy);
            this.y = ylimit - 1;
        }
        if (this.y < y_limit) {
            this.speedy = Math.abs(this.speedy);
            this.y = ylimit + 1;
        }
        
        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
        
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

控制台中没有错误

推荐答案

调用.move()时,球的速度不断重置".在构造函数中设置速度,并在.move()中使用属性this.speedxthis.speedy:

The speed of the ball is continuously "reset", when .move() is called. Set the speed in the constructor and use the attributes this.speedx and this.speedy in .move():

xspeeddir = random(-5,5);
yspeeddir = random(-5,5);
ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);

function draw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

仅仅反转速度还不够,您还必须将球的位置限制在窗口的范围内.如果球超出限制,则将位置限制在边界内.

It is not sufficient to invert the speed, you've to limit the position of the ball to the bounds of the window, too. If the ball exceeds the limit, then clamp the position in bounds.

move() {
    if(this.x >= xlimit) {
        this.x = xlimit; // limit to xlimit
        this.speedx = -(this.speedx)
    }

    if (this.x <= this.size/2) {
        this.x = this.size/2; // limit to this.size/2
        this.speedx = -(this.speedx)
    }

    if (this.y >= ylimit) {
        this.y = ylimit; // limit to ylimit
        this.speedy = -(this.speedy)
    }

    if (this.y <= this.size/2) {
        this.y = this.size/2; // limit to this.size/2
        this.speedy = -(this.speedy)
    }

    this.x = this.x + this.speedx;
    this.y = this.y + this.speedy;
}

let r, g, b;
let xpos, ypos;
let size;
let xlimit, ylimit;
let x_limit, y_limit;
let xspeeddir, yspeeddir;

function setup() {

    createCanvas(500, 250);
    xpos = random(20, width);
    ypos = random(20, height);

    xlimit = width-15;
    ylimit = height-15;
    x_limit = 15;
    y_limit = 15;

    r = random(0, 255);
    g = random(0, 255);
    b = random(0, 255);

    xspeeddir = random(-5,5);
    yspeeddir = random(-5,5);
    ball = new Ball(xpos, ypos, xspeeddir, yspeeddir);
}

function draw() {

    background(255, 238, 112);

    ball.appear(r, g, b);
    ball.move();
}

class Ball {
    constructor(x, y, xspeed, yspeed) {
        this.x = x;
        this.y = y;
        this.size = 30;
        this.speedx = xspeed;
        this.speedy = yspeed;
    }

    appear(r, g, b) {
        this.r = r;
        this.g = g;
        this.b  = b;
        fill(this.r, this.g, this.b);
        noStroke();
        ellipse(this.x, this.y, this.size, this.size);
    }

    move() {
        if(this.x >= xlimit) {
            this.x = xlimit; // limit to xlimit
            this.speedx = -(this.speedx)
        }

        if (this.x <= this.size/2) {
            this.x = this.size/2; // limit to this.size/2
            this.speedx = -(this.speedx)
        }

        if (this.y >= ylimit) {
            this.y = ylimit; // limit to ylimit
            this.speedy = -(this.speedy)
        }

        if (this.y <= this.size/2) {
            this.y = this.size/2; // limit to this.size/2
            this.speedy = -(this.speedy)
        }

        this.x = this.x + this.speedx;
        this.y = this.y + this.speedy;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>

这篇关于我一直在努力使这个球弹跳一天.为什么不起作用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆