HTML5 彈球程式－簡單過生活

iammic 一直想試試號稱是 Flash 殺手的 HTML 5，今天特地寫了一個簡單的彈球程式，但比較可惜的

是 iammic 寫的 HTML5 彈球程式在 IE8 跑不起來，或許換成支援更多 HTML5 特性的 IE9 會好很

多，iammic 就沒去多測，程式在 Firefox 4 與 Chrome 11 則都跑得蠻順暢的，程式主要利用

HTML5 中的 Canvas Element 特性撰寫而成。

程式畫面：

程式碼：

<!DOCTYPE HTML><html><head> <style> body {    margin: 0px;    padding: 0px;}           #myCanvas {    border: 1px solid #9C9898;}</style> <script type="text/javascript">         var canvas=null;    var context=null;    var ballX=0;    var ballY=0;    var numX=1;    var numY=1;         window.onload = function(){       canvas=document.getElementById("myCanvas");       context = canvas.getContext("2d");       setInterval(drawBall, 10);       };       function drawBall(){                      if (ballX<=0){           numX=1.5;       }              if (ballX>=canvas.height){           numX=-1.5;       }                      if (ballY<=0){           numY=1.5;       }              if (ballY>=canvas.width){           numY=-1.5;       }                  ballX+=numX;       ballY+=numY;              context.clearRect(0,0,canvas.width, canvas.height);       context.beginPath();       context.arc(ballY, ballX, 10, 0, 2 * Math.PI, false);       context.fillStyle = "#02A817";       context.closePath();       context.fill();   }</script></head><body><canvas id="myCanvas"  width="300" height="240"></canvas></body></html>