0
Welcome Guest! Login
0 items Join Now

Javascript ball animation

    • Mrs. SaBe's Avatar
    • Mrs. SaBe
    • Jr. Rocketeer
    • Posts: 48
    • Thanks: 0

    Javascript ball animation

    Posted 4 years 11 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: 3 years 9 months ago by Kat05.
    • Blonde and totally clueless.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20628
    • Thanks: 2924
    • messin' with stuff

    Re: Javascript ball animation

    Posted 4 years 11 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 :woohoo:
    • Mrs. SaBe's Avatar
    • Mrs. SaBe
    • Jr. Rocketeer
    • Posts: 48
    • Thanks: 0

    Re: Javascript ball animation

    Posted 4 years 11 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.
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 20628
    • Thanks: 2924
    • messin' with stuff

    Re: Javascript ball animation

    Posted 4 years 11 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 :woohoo:

Time to create page: 0.112 seconds