2014年4月30日 星期三

Javascript Canvas 示範程式


新同事述職一個月,起初的工作是開發簡單的 Facebook 網頁;現在進一步開發遊戲。為了印證想法是否可行,我希望可以用 Javascript 製作出來,看看玩法有沒有問題。我也順便試試 Javascript Canvas 的開發。
<script type="text/javascript">
   var _particleWidth, _particleHeight;
   var _particleArray = [];
   var _clickX, _clickY;
   var _particleImage;
   var _context;
   var _canvas;
   var _timer;

   function init()  {
      _canvas = document.getElementById("canvas");
      _canvas.addEventListener("mousedown", function(e)  {onMouseDown(e);}, false);
      _canvas.addEventListener("touchstart", function(e)  {onMouseDown(e);}, false);

      _context = _canvas.getContext("2d");

      _particleWidth = 32;
      _particleHeight = 32;
      _particleImage = new Image();
      _particleImage.onload = function()  {
      _particleWidth = _particleImage.width;
      _particleHeight = _particleImage.height;
   }
   _particleImage.src = "http://www.pacess.com/blog_files/icon.png";

   for (var i=0; i<10; i++)  {
      var particleObject = new Particle(300, 300);
      _particleArray[i] = particleObject;
   }

   loopFrame();
   }

   function onMouseDown(e)  {
      var canvasRect = _canvas.getBoundingClientRect();
      _clickX = (e.clientX-canvasRect.left)*(canvasRect.width/canvasRect.width);
      _clickY = (e.clientY-canvasRect.top)*(canvasRect.height/canvasRect.height);

      for (var i=0; i<10; i++)  {
         var particleObject = new Particle(_clickX, _clickY);
         _particleArray.push(particleObject);
      }
   }

   function loopFrame()  {
      for (var i=0; i<_particleArray.length; i++)  {
         var particleObject = _particleArray[i];
         var finished = particleObject.updateFrame();
         if (finished == false)  {continue;}

         _particleArray.splice(i, 1);
         i--;
      }

      clearCanvas();
      for (var i=0; i<_particleArray.length; i++)  {
         var particleObject = _particleArray[i];
         particleObject.drawFrame(_context);
      }

      var count = _particleArray.length;
      _context.fillStyle = "white";
      _context.font = "16px Arial";
      _context.fillText("Particle count: "+count, 10, 20);
      _context.fillText("Please Click on Anywhere", 205, 590);

      window.requestAnimationFrame(loopFrame);
   }

   function clearCanvas()  {
      var width = _canvas.width;
      var height = _canvas.height;

      _context.fillStyle = "#000000";
      _context.fillRect(0, 0, width, height);
   }

   function Particle(x, y)  {
      this.x = x;
      this.y = y;

      this.dx = Math.floor(Math.random()*10)-5;
      this.dy = Math.random()*10;
      this.gravity = 0.2;

      this.angle = Math.random();
      this.rotateSpeed = (Math.floor(Math.random()*5)/20)+0.1;

      //  Type: 0-2
      this.type = Math.floor(Math.random()*3);

      //  Scale
      this.scale = 1/(Math.floor(Math.random()*3));
      this.width = _particleWidth*this.scale;
      this.height = _particleHeight*this.scale;
   }

   Particle.prototype.updateFrame = function()  {
      this.x += this.dx;
      this.dy -= this.gravity;
      this.y -= this.dy;

      this.angle += this.rotateSpeed;

      if (this.x < 0-_particleWidth)  {return true;}
      if (this.x > 600+_particleWidth)  {return true;}
      if (this.y > 600+_particleHeight)  {return true;}
      return false;
   }

   Particle.prototype.drawFrame = function(context)  {
      context.save();
      context.translate(this.x, this.y);
      context.rotate(this.angle);
      context.drawImage(_particleImage, 0, 0, _particleWidth, _particleHeight, -this.width/2, -this.height/2, this.width, this.height);
      context.restore();
   }

   init();
</script>

沒有留言: