0
Welcome Guest! Login
0 items Join Now

Javascript ball animation

Last Post
Search Topic
    • Mrs. SaBe's Avatar
    • Mrs. SaBe
    • Jr. Rocketeer
    • Posts: 48
    • Thanks: 0

    Javascript ball animation

    Posted 9 years 6 months ago
    • Hi, I fished this code from a website. I like the ball to bounce two times. Anyone knows how to do?
      <html>
<head>
    <title>Simple Animation</title>

	<script type="text/javascript">
        var can, ctx, puzzle,
            x, y, xVec, yVec,
            direc, interval,
            rot = 0,
            gravity = 1,
            left = 150,
            right = 1050,
            bottom = 650,
            centerOffset = -150;
 
        function init() {
            puzzle = document.getElementById("puzzle");
            can = document.getElementById("can");
            ctx = can.getContext("2d");
            ctx.strokeStyle = "black";
            // initialize position, speed, spin direction
            x = 196;
            y = 150;
            xVec = 1.5;
            yVec = 0;
            direc = 1;
            // draw lines for the puzzle to bounce off of
            ctx.moveTo(0, bottom + 75);
            ctx.lineTo(600, bottom+ 75);
            ctx.lineTo(600, 0)
            ctx.stroke();
            // set animation to repeat every 40 ms
            interval = setInterval(animate, 40);
        }
 
        function animate() {
            model();
            // clear canvas except for lines at edge
            ctx.clearRect(0, 0, can.width - 1 , can.height - 1);
            draw();
        }
 
        function model() {
            rot += .1 * direc;
            x += xVec;
            yVec += gravity;
            y += yVec;
            bounceIf();
        }
 
        function bounceIf() {
            if (y >= bottom) {
                y = bottom;
                yVec = -1 * yVec - gravity
            }
           
        }
 
        function draw() {
            ctx.save();
            ctx.translate(x, y);
            ctx.drawImage(puzzle, centerOffset,centerOffset);
            ctx.restore();
        }
    </script>
</head>
<body onload="init()" style="background-color:#ffffff">
    
    <img id="puzzle" src="ball.gif" style="display:none" />
    <canvas id="can" height="800" width="1200" style="position:relative;top:-50">
    </canvas>
</body>
</html>

      Link to the animation: OLD LINK REMOVED
    • Last Edit: 8 years 4 months ago by Kat05.
    • Blonde and totally clueless.
    #1143370
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21565
    • Thanks: 3091
    • messin' with stuff

    Re: Javascript ball animation

    Posted 9 years 6 months ago
    • drop that code in a custom html module... use a Joomla editor like CodeMirror or RokPad, don't use TinyMCE...

      see what happens...
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1143475
    • Mrs. SaBe's Avatar
    • Mrs. SaBe
    • Jr. Rocketeer
    • Posts: 48
    • Thanks: 0

    Re: Javascript ball animation

    Posted 9 years 6 months ago
    • Hi Matt, I am sorry, I was not specific enough; What I need a solution for is not the way to integrate the animation into Joomla! but the javascript code so the ball only bounce two times (now it bounces several times). Thanks :)
    • Blonde and totally clueless.
    #1143780
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 21565
    • Thanks: 3091
    • messin' with stuff

    Re: Javascript ball animation

    Posted 9 years 6 months ago
    • I would reason a guess that'd be on line 33
                  // set animation to repeat every 40 ms
            interval = setInterval(animate, 40);
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1143794

Time to create page: 0.051 seconds