HTML5 կտավի ֆիզիկա

Դուք կարող եք պարզապես զննել, և եթե որևէ գնդակ կտրվում է (այն տարածվում է պատի կողքով), ապա պարզապես այն տեղափոխեք պատի մոտ կամ տեղափոխեք գնդակը պատից այնքան հեռու այն ուղղությամբ, որով այն պետք է գնա:

Այսպիսով, եթե գնդակը պատից 3 պիքսել է, ապա դուք կարող եք պարզապես տեղադրել այն պատից 3 պիքսել հեռավորության վրա, նոր ուղղությամբ:

Սա կօգնի, որ եթե ձեր ժամանակաշրջանը շատ փոքր է, և գնդակները շատ արագ են շարժվում, կարող եք ուղղել այն:

ԹԱՐՄԱՑՆԵԼ՝

Ձեր կոդը նայելուց հետո, ինչ-ինչ պատճառներով ես չեմ տեսնում, որ այն շարժվում է Chrome-ում և այն չի նկարում Firefox 4b7-ի վրա, բայց ձեր կոդը նայելով այս տողը կարող է խնդիր առաջանալ.

Balls[i].x += Balls[i].vx;

Եթե ​​x + vx < 0, ապա այն դեռ կլինի պատից ձախ:

Անջատված լինելու պատճառն այն է, որ դուք ունեք այս կոդը՝ Balls[i].vx *= 0.99;, որը կշարունակի նվազել vx նախքան ստուգումը կատարելը: Դուք կարող եք սա դնել վերջում՝ ճշգրտումներ կատարելուց հետո:

Բացի այդ, դուք ունեք և՛ ձախ, և՛ աջ պատի ծածկագիրը նույն if քաղվածքի բլոկում, որը ես ակնկալում եմ, որ պետք է առանձին մշակվի:

Այս խնդիրը լուծելու համար ձեր լավագույն խաղադրույքն է օգտագործել Firebug-ը Firefox-ում մեկ գնդակով և տեղադրել ընդմիջման հայտարարություն, երբ այն անցնում է պատի կողքով, և հետո տեսնել, թե ինչ արժեքներ են յուրաքանչյուր քայլում:

Դուք նաև ենթադրում եք, որ գնդակները շարժվում են ուղիղ գծով, երբ հարմարվում եք, քանի որ ուղղում եք միայն մեկ ուղղությամբ, կախված նրանից, թե որ if հայտարարությունը ձախողվում է, թեև անկյունների դեպքում հնարավոր է, որ երկուսն էլ ձախողվեն: Դա ձախողում է ձեր ֆիզիկայի մոդելում, եթե ես գնում եմ 45 աստիճանի անկյան տակ և հարվածում եմ պատին, ապա պետք է ետ շրջվեմ 45 աստիճանի անկյան տակ, եթե, օրինակ, պատը իդեալական է:

Սովորեք օգտագործել վրիպազերծիչները, Chrome-ը, IE-ն և Firefox-ը լավն ունեն, բայց ես հակված եմ նախընտրում եմ օգտագործել Firebug-ը, հավանաբար դրա հետ կապված փորձի պատճառով:

Ահա ուղղումը

if (ball[i].x - ball[i].r <= 0 || ball[i].x + ball[i].r >= cwidth) {
    ball[i].vx = -ball[i].vx;
    ball[i].x += ball[i].vx;
}

if (ball[i].y - ball[i].r <= 0 || ball[i].y + ball[i].r >= cheight) {
    ball[i].vy = -ball[i].vy;
    ball[i].y += ball[i].vy;
}

Դուք սիրելու եք Mozilla Developer Network-ի հոդվածը՝ Հիմնական անիմացիաներ:

Որքան ես կարող եմ ասել, դուք պետք է թարմացնեք կտավը, երբ այն փոխվում է canvas.restore() ֆունկցիայի միջոցով:

Դուք կարող եք օգտագործել Box2D ֆիզիկայի համար:

Դուք խնդիր ունեիք ձեր շարահյուսության հետ

vX ոչ vx. vY ոչ vy.

Բացի այդ, ձեզ անհրաժեշտ էր ֆունկցիա, որը պետք է զանգահարեք՝ ցուցադրելու համար: Տեղադրեք ձեր վերջնական արդյունքները jsdo.it կայքում (երբ ավարտեք ֆիզիկան): Իրոք հիանալի տեսք ունի:

window.onload=App 
function App() {
    var pool = document.getElementById('pool');
    var canvas = pool.getContext('2d');
    var cwidth = pool.width = window.innerWidth;
    var cheight = pool.height = window.innerHeight;
    var ctop = pool.offsetTop;
    var cleft = pool.offsetLeft;
    var size = [5, 10, 15, 20, 25, 30];
    var numBalls = 100;
    // CREATES THE BALL
    function Ball(x, y, vx, vy, r, s) {
        this.color = rgb();
        this.x = x;
        this.y = y;
        this.vX = vx;
        this.vY = vy;
        this.r = r;
        this.size = s;
    } 
    // GIVES EACH BALL A RANDOM COLOR
    function rgb() {
        var color = 'rgb(';
        for (var i = 0; i < 3; i++) {
            color += Math.floor(Math.random() * 255) + ',';
        }
        return color.replace(/\,$/, ')');
    }
     var Balls = [],
        x, y, vx, vy, r, s;


for (var i = 0; i < numBalls; i++) {
    x = Math.random() * cwidth >> 0;
    y = Math.random() * cheight >> 0;
    vx = Math.random() * 20 - 6;
    vy = Math.random() * 20 - 6;
    r = Math.random() * 15 + 30;
    s = size[~~(Math.random() * size.length >> 0)];

    // CREATES THE BALLS
    Balls.push(new Ball(x, y, vx, vy, r, s));
}
function render(){
// DRAWS THE CANVAS AND BALLS


// ՖԻԶԻԿԱ Balls.map(function(item){ // BALLS SHOULD BOUNCE OFF CANVAS EDGE
item.vX *= 0.99; item.vY *= 0.99;

    item.x += item.vX;
    item.y += item.vY;

    if (item.x < item.r ){
        item.vX *= -.99;
        item.x += item.vX;
    }
     if(item.x > pool.width - item.r) {
         item.vX *= -.99;
        item.x += item.vX;
    }
    if (item.y < item.r ){
        item.vY *= -.99;
        item.y += item.vY;
    }
     if( item.y > pool.height - item.r) {
        item.vY *= -1;
        item.y += item.vY;
    }


}) // END PHYSICS canvas.clearRect(0, 0, canvas.canvas.width, canvas.canvas.height);

for (var i in Balls) {
    var b = Balls[i];

        var grad = canvas.createRadialGradient(b.x + b.r / 4 ,  b.y - b.r / 4 ,  b.r / 5 , b.x, b.y, b.r);
        grad.addColorStop(0, '#fff');
        grad.addColorStop(.85, b.color);
        grad.addColorStop(1, '#222');
        canvas.beginPath();
        canvas.fillStyle = grad;
        canvas.arc(b.x, b.y, b.r, 0, Math.PI * 2, 0);
        canvas.fill();
 }


}

// END FOR
// MOUSE MOVEMENT - BALLS SHOULD MOVE AWAY FROM MOUSE CURSOR
pool.onmousemove = function(e) {
    x = e.pageX - this.offsetLeft;
    y = e.pageY - this.offsetTop;

    for (i = 0; i < numBalls; i++) {
        if (Math.abs(x - Balls[i].x) < 20 && Math.abs(y - Balls[i].y) < 20 ) {
            Balls[i].vX = (x - Balls[i].x)  ;
            Balls[i].vY = (y - Balls[i].y)  ;

        }
    }
};


setInterval(render,50);

// END APP

};