Home/ Questions/Q 7971489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:39:07+00:00

I am facing this problem whereby during the animation, i want the fish image

  • 0

I am facing this problem whereby during the animation, i want the fish image to be moving ard in the background image (pond) and it will bounce off whenever it hit the wall or border ard the image..

Using the svg method and javascript method..

Many thanks to anyone who can help it out.. Once again, thanks for taking the time to read and help to solve this problem..

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <style type="text/css">

    body {
    font:76% normal verdana,arial,tahoma;
    }

    h1, h2 {
    margin:0px;
    font-size:1.2em;
    }

   p {
   margin:0px 0px 1em 0px;
   padding:0px;
   }

  .balls img {
  position:absolute;
  width:50px;
  height:50px;
  }

  </style>
  <script type="text/javascript">

  var balls = [];
  var canvasX = 485;
  var canvasY = 520;
  var timer = null;
  var m_lastX = 0;
  var m_lastY = 0;
  var M_SPACE = 24;
  var B_VMIN = 5;
  var B_VMAX = 5;
  var B_WIDTH = 13;
  var B_HEIGHT = 10;

  function rnd(n) {
    return Math.random()*n;
  }

  function rndI(n) {
    return parseInt(rnd(n));
  }

  function initBall(oBall) {
    oBall._x = rnd(canvasX);
    oBall._y = rnd(canvasY);
    oBall._vX = B_VMIN+rnd(B_VMAX)*(Math.random()>0.5?1:-1);
    oBall._vY = B_VMIN+rnd(B_VMAX);
  }

  function moveBall(oBall) {
    oBall._x += oBall._vX;
    oBall._y += oBall._vY;
    oBall.style.left = oBall._x+'px';
    oBall.style.top = oBall._y+'px';
    if ((oBall._vX>0 && oBall._x+oBall._vX+B_WIDTH>canvasX) || (oBall._vX<1 &&                           oBall._x+oBall._vX<0)) oBall._vX *= -1;
      if ((oBall._vY>0 && oBall._y+oBall._vY+B_HEIGHT>canvasY) || (oBall._vY<0 &&         oBall._y+oBall._vY<0)) oBall._vY *= -1;
    }

    function animateStuff() {
      for (var i=balls.length; i--;) {
        moveBall(balls[i]);
      }
    }

    function startAnimation() {
      if (!timer) timer = setInterval(animateStuff,20);
    }

    function stopAnimation() {
      if (!timer) return false;
      clearInterval(timer);
      timer = null;
    }

    function init() {
      balls = document.getElementById('ball-container').getElementsByTagName('img');
      for (var i=balls.length; i--;) {
        initBall(balls[i]);
      }
      //getWindowCoords();
      startAnimation();
      //document.onmousedown = mouseDown;
    }

    getWindowCoords =                 (navigator.userAgent.toLowerCase().indexOf('opera')>0||navigator.appVersion.toLowerCase().in        dexOf('safari')!=-1)?function() {
      canvasX = innerWidth;
      canvasY = innerHeight;
    }:function() {
      canvasX;
      canvasY;
    }

    </script>
    </head>
    <body>

    <h1>Interval-based animation</h1>

    <p>
     Click and drag to create more.
    </p>

    <p>
     <button onclick="startAnimation(); init();">Start</button>
     <button onclick="stopAnimation()">Stop</button>
    </p>



    <div id="ball-container" class="balls">
    <SVG xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" id="ball-container" style="border:solid         1px #000000;width:515;height:474;">
            <image xlink:href="pond.png" x="0" y="0" width="513" height="474" />
    </SVG>
     <img src="anchovies.png" alt="" width="8" height="70" />
    </div>

    </body>
    </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an example from David Dailey showing how to do bouncing off walls in SVG.

    • 0