Avatar billede RasmusTheR Seniormester
16. november 2019 - 20:08

Hjælp til bouncing ball i HTML5 canvas

Jeg sidder og leger lidt med at lave en animation med en bouncing ball i et HTML5 canvas element.

Jeg har indtil videre fået lavet et script, hvor der er to bolde. Den ene står stille og den anden bevæger sig mod den stillestående. 

Jeg har to udfordringer i mit script:
1: Scriptet register kun kollision, når de rammer direkte mod hinanden.

2: Når de kollidere, vil jeg gerne have en naturlig refleksion. Lige nu bliver den bare afbøjet så den kører lodret ned.

Håber nogle kan hjælpe :-)

<canvas id="canvas" style="background:#000;"></canvas>
   
   
<script type="text/javascript">
      var canvas = document.getElementById('canvas');
          c = canvas.getContext('2d');
         
    var innerWidth = 800,
          innerHeight = 400;
           
    canvas.width = innerWidth;
    canvas.height = innerHeight;

    //collision function
    function collides(a, b){
        return a.x < b.x + b.radius &&
                a.x + a.radius > b.x &&
                a.y < b.y + b.radius &&
                a.y + a.radius > b.y ;
    }

    // draw objects
    function object(x, y, radius, color)  {
        this.x=x;
        this.y=y;
        this.radius=radius;
        this.color=color;
       
        this.update = function(){
            this.draw();
        }
       
        this.draw = function(){
            c.beginPath();
            //c.rect(this.x, this.y, this.width, this.height);
            c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
            c.fillStyle=this.color;
            c.fill();
            c.closePath();
        }
    }
   
      var object_1 = new object(100, 110, 25, '#fff');
    var object_2 = new object(500, 160, 50, '#ff0000');
   
    var object_1_y_pos;
   
    //animate
    function animate(){
        var animation_frame = requestAnimationFrame(animate);
        c.clearRect(0,0,innerWidth,innerHeight);
       
        if( collides(object_1,object_2) ){
            object_1.color = '#00ff06';
            object_1_y_pos = 1;
        }
       
       
        object_1.update();
       
        if(object_1_y_pos == 1){
            object_1.y +=5;
        } else {
            object_1.x +=5;
        }
       
        object_2.update();
    }
   
    animate();
   
    </script>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester