程式3：有重力加速度的球

吳吉慶發表於2015-01-06

程式3：有重力加速度的球

這個程式對應於 NOC_2_1_forces.pde，

我們繪製了一個有重力加速度的球。越下落速度越快，但接觸地面時會反彈，由於重力作用，越上升速度越慢。

enter image description here

點選按鈕 West Wind 對球施加從左吹來的風力作用。

可以從 https://github.com/jollywing/nature_of_code_examples_html5/blob/master/chp2_forces/wind_gravity_forces.html 下載該程式，用瀏覽器開啟即可執行。

程式程式碼如下：

<!doctype html>
<html>
  <head>
    <title>Wind and Gravity force</title>
    <meta charset="utf-8" />
    <meta name="author" content="JollyWing(jiqingwu@gmail.com)"/>
    <meta name="create" content="2015-01-06 Tue"/>
    <style type="text/css">
     #screen {border:1px solid #000; margin-left:auto; margin-right:auto;}
     p.Scr {text-align:center;}
    </style>
    <script>
     // get context
     var scr;
     var ctx;
     var timeOut;

     var position = new Object();
     position.x = 5;
     position.y = 5;

     var velocity = new Object();
     velocity.x = 0;
     velocity.y = 0;

     var gravityAccel = new Object();
     gravityAccel.x = 0;
     gravityAccel.y = 1;

     var windAccel = new Object();
     windAccel.x = 1;
     windAccel.y = 0;

     var ball = {
       pos: position,
       radius: 5,
       vel: velocity,

       erase: function(){
         var top, left;
         //caculate the topleft
         left = this.pos.x - this.radius - 1;
         top = this.pos.y - this.radius - 1;
         // clear rect
         ctx.clearRect(left, top, this.radius*2 + 2, this.radius*2 + 2);
       },

       draw: function(){
         // set context property
         ctx.strokeStyle="red";
         ctx.fillStyle="yellow";
         // draw
         ctx.beginPath();
         ctx.arc(this.pos.x, this.pos.y, this.radius, 0, 2*Math.PI);
         ctx.stroke();
         ctx.fill();
       },

       checkEdge: function(){
         if(this.pos.x < 0){
           this.pos.x = this.radius;
           this.vel.x *= -1;
         }
         if(this.pos.x > scr.width){
           this.pos.x = scr.width - this.radius;
           this.vel.x *= -1;
         }
         if(this.pos.y < 0){
           this.pos.y = this.radius;
           this.vel.y *= -1;
         }
         if(this.pos.y > scr.height){
           this.pos.y = scr.height - this.radius;
           this.vel.y *= -1;
         }
       },

       addForce: function(accel){
         this.vel.x += accel.x;
         this.vel.y += accel.y;
       },

       move: function(){
         this.pos.x += this.vel.x;
         this.pos.y += this.vel.y;
       },
     };

     function initScr(){
       scr = document.getElementById('screen');
       ctx = scr.getContext('2d');
       ball.draw();
     }

     function updateScr()
     {
       // erase ball
       ball.erase();
       // add gravity force
       ball.addForce(gravityAccel);
       // update ball position
       ball.move();
       // check edges
       ball.checkEdge();
       // draw ball
       ball.draw();

       timeOut = setTimeout('updateScr()', 100);
     }

     function startWalk()
     {
       updateScr();
     }

     function stopWalk()
     {
       clearTimeout(timeOut);
     }

     function westWind()
     {
       // add wind force to velocity
       ball.addForce(windAccel);
     }
    </script>
  </head>
  <body onload="initScr()">
    <p class="Scr">
      <canvas id="screen" width="640" height="640"></canvas>
      <br/>
      <input type="button" value='Start' onclick='startWalk()'/>
      <input type="button" value='Stop' onclick='stopWalk()' />
      <input type="button" value="West Wind" onclick='westWind()'/>
    </p>
  </body>
</html>

相關文章