程式1: 彈來彈去的球

吳吉慶發表於2014-12-16

《程式碼本色：用程式設計模擬自然系統》是一本好書，一定要讀一讀。用程式設計模擬自然，是我一直以來都想做的事，也是我程式設計的熱情所在。無奈自己的數學和物理知識越剩越少，所以心有餘而力不足。現在這本書來了，學完這本書一定可以讓自己過夠癮。

此書的紙板和電子版都很貴，但程式碼可以在 圖靈社群 下載。不過程式碼是用很少有人熟悉的 processing 語言寫的，於是決定自己用 html5 都實現一遍，並將程式碼託管在GitHub上。

之所以選擇html5，是因為不需要額外的配置，只要有一個現代的瀏覽器就可以觀看程式的執行。另一個原因，就是趁機學習一下html5。

先來第一個簡單的吧： Bouncing Ball。顧名思義，這是一個彈來彈去的球。

下面是我用html5的實現，拷貝下列程式碼，儲存為字尾為html的網頁檔案，用瀏覽器開啟即可。

<!doctype html>
<html>
  <head>
    <title>random walker</title>
    <meta charset="utf-8" />
    <meta name="author" content="JollyWing(jiqingwu@gmail.com)"/>
    <meta name="create" content="2014-12-16 Tue"/>
    <style type="text/css">
     #screen {border:1px solid #000;}
    </style>
    <script>
     var x = 100;
     var y = 100;
     var xspeed = 11;
     var yspeed = 10;
     var timeOut;
     var scr, width, height, context;

     function initScr(){
       scr = document.getElementById('screen');
       width = scr.width;
       height = scr.height;
       context = scr.getContext('2d');
       context.strokeStyle="red";
     }

     function walk(){

       x = x + xspeed;
       y = y + yspeed;

       if(x > width - 2 || x < 2){
         xspeed = xspeed * -1;
       }
       if(y > height - 2 || y < 2){
         yspeed = yspeed * -1;
       }

       console.log(x + ',' + y);

       context.arc(x, y, 2, 0, 2*Math.PI);
       context.stroke();

       timeOut = setTimeout('walk()', 200);
     }

     function stopWalk(){
       clearTimeout(timeOut);
     }
    </script>
  </head>
  <body onload='initScr()'>
    <p>
    <canvas id="screen" width="640" height="480"></canvas>
    </p>
    <input type="button" value='Start' onclick='walk()'/>
    <input type="button" value='Stop' onclick='stopWalk()' />
  </body>
</html>

下面是一個物件導向的版本：

<!doctype html>
<html>
  <head>
    <title>random walker</title>
    <meta charset="utf-8" />
    <meta name="author" content="JollyWing(jiqingwu@gmail.com)"/>
    <meta name="create" content="2014-12-16 Tue"/>
    <style type="text/css">
     #screen {border:1px solid #000;}
    </style>
    <script>
     var sprite = {
       x:100,
       y:100,
       xspeed:11,
       yspeed:10,
       radius:2,
       move:function(canvasWidth, canvasHeight){
         this.x = this.x + this.xspeed;
         this.y = this.y + this.yspeed;

         if(this.x > canvasWidth - this.radius || this.x < this.radius){
           this.xspeed = this.xspeed * -1;
         }
         if(this.y > canvasHeight - this.radius || this.y < this.radius){
           this.yspeed = this.yspeed * -1;
         }

       },
       draw:function(context){
         context.arc(this.x, this.y, this.radius, 0, 2*Math.PI);
         context.stroke();
       }
     };

     var timeOut;
     var scr, width, height, context;

     function initScr(){
       scr = document.getElementById('screen');
       width = scr.width;
       height = scr.height;
       context = scr.getContext('2d');
       context.strokeStyle="red";
     }

     function walk(){
       sprite.move(width, height);

       sprite.draw(context);

       timeOut = setTimeout('walk()', 200);
     }

     function stopWalk(){
       clearTimeout(timeOut);
     }
    </script>
  </head>
  <body onload='initScr()'>
    <p>
    <canvas id="screen" width="640" height="480"></canvas>
    </p>
    <input type="button" value='Start' onclick='walk()'/>
    <input type="button" value='Stop' onclick='stopWalk()' />
  </body>
</html>

執行效果如圖：

彈來彈去

如果你喜歡我的文章，可以點 這裡 給我打賞，五分一毛也是對我的認同。

相關文章