Sau khi học cách vẽ hình theo theo SXG và cách làm hình di chuyển theo SMIL, chúng ta áp dụng kiến thức để viết program như sau gọi là “Phong Thủ Chống Đạn Địch “.
Program
gồm có 5 phần.
1-Vẽ đạn hinh tron của địch màu xanh va làm di
chuyển tới mục tiêu theo animate attributeName của SMIL.
2-Vẻ radar hình ellipse có mãu vàng và làm
ellipse rung chuyển (rotate) từ zero tỡi 360 độ.
3-Vẽ cần phát sóng radar maù đỏ quay tử zero
tới 360 độ.
4-Viết tọa đế của nut START và STOP.
5-Vẽ sau cùng hinh võng tròn có mảu đỏ làm đạn chận đạn địch
ĐÂY
PROGRAM RẤT DỄ DÀNG.
Copy, post vào Notepad, mở với Google
<html
xmlns="http://www.w3.org/1999/xhtml">
<svg xmlns=http://www.w3.org/2000/svg
width="5000" height="3000">
//1-vẽ đạn của địch mau xanh
<g
id="bullet" transform="translate(250,150)">
<circle cx="0" cy="30"
r="15" stroke="green" fill="blue">
<animate attributeName="cx"
dur="2" from="290" to ="50"
begin="B.click" end="S.click"
repeatCount="indefinite"/>
</circle>
</g>
// 2-vẽ radar màu vang hinh ellipse chuyển động.
<g
id="radar" transform="translate(175,150)">
<ellipse
cx="0" cy="0" rx="40" ry="35"
stroke="red" fill="yellow">
<animateTransform
attributeName="transform" type="rotate"
dur="1" from="0" to ="360"
begin="B.click" end="S.click"
repeatCount="indefinite"/>
</ellipse>
//3-vẽ cần phát sóng của radar.
<line
x1="0" y1="0" x2="150" y2="0"
stroke="red" stroke-width="2">
<animateTransform attributeName="transform"
type="rotate"
dur="2" from="0" to ="360"
begin="B.click" end="S.click" repeatCount="indefinite"/>
</line>
// 4-chọn toạ độ cho Start va Stop
<g
id="B">
<text
x="-40" y="10" font-size="20">START</g>
<g
id="S">
<text
x="35" y="15"
font-size="20">STOP</g>
// 5-vẽ đạn ngăn chận địch
<circle
cx="0" cy="40" r="12" stroke="blue"
fill="red">
<animateMotion dur="4" from ="60,100" to
="150,-120" begin="B.click" end="S.click"
repeatCount="indefinite"/>
</circle>
</g></svg></html>
Chú Ý.
Nhớ điều chỉnh thời gian duration và tọa độ của đạn bẵn lên
chận đạn của địch.
