Circle Translation with HTML5

โดย สมโภชน์ กุลธารารมณ์

<head>    <title>SVG Animation – Circle Translation</title>
<script>  var timer;    var delay = 16;
function s2d(s)
{  return (s / 1000) * delay;   }

function init()
{   svgElement = document.getElementById(“svgElement”);
circle0 = document.getElementById(“circle0″);
timer = setInterval(doAnim, delay);
circle0.vx = 150;       circle0.vy = 80;    }
function doAnim()
{            var r = circle0.r.baseVal.value;
var boxWidth = svgElement.width.baseVal.value;
var boxHeight = svgElement.height.baseVal.value;
circle0.cx.baseVal.value += s2d(circle0.vx);
circle0.cy.baseVal.value += s2d(circle0.vy);
if (circle0.cx.baseVal.value >= (boxWidth – r))
circle0.vx *=-1;
if (circle0.cy.baseVal.value >= (boxHeight – r))
circle0.vY *=-1;
//clearInterval(timer);
}
</script>
</head>
<body onload=”init();”>
<svg id=”svgElement” width=”800px” height=”600px” viewBox=”0 0 800 600″>
<rect x=”0″ y=”0″ width=”100%” height=”100%” rx=”10″ ry=”10″ style=”fill: white; stroke: black;” />
<circle id=”circle0″ cx=”40″ cy=”40″ r=”40″ style=”fill: orange; stroke: black; stroke-width: 1;” />
</svg>
</body>
</html>

ลูกบอลชนข้างแล้วจะเด้งกลับ