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>

參考網站:

http://www.html5canvastutorials.com/

http://www.w3schools.com/html5/html5_reference.asp

iammic 發表在 痞客邦 PIXNET 留言(0) 人氣()