与KineticJS HTML5画布上跳跃的兔子

最新推荐文章于 2022-12-31 16:46:16 发布

limeiyans

最新推荐文章于 2022-12-31 16:46:16 发布

阅读量1.2k

点赞数

分类专栏：与KineticJS HTML5画布上跳跃的兔子文章标签：与KineticJS HTML5画布上跳

本文链接：https://blog.csdn.net/limeiyans/article/details/19759299

版权

与KineticJS HTML5画布上跳跃的兔子专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这个实验中,我们将创建一个群与KineticJS跳跃的兔子。
产品说明:mousedown在画布上添加大量更多的兔子。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      
    </style>
  </head>
  <body>
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://www.html5canvastutorials.com/lib/stats/stats.js"></script>
    <script defer="defer">
      $(document).ready(function() {
        // wait 2 seconds before starting
        setTimeout(onReady, 2000);
      });
      
      $(window).resize(resize)
      window.onorientationchange = resize;
      
      var lastTime = 0;
      var vendors = ['ms', 'moz', 'webkit', 'o'];
      for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
          window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
          window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                     || window[vendors[x]+'CancelRequestAnimationFrame'];
      }
      if (!window.requestAnimationFrame)
          window.requestAnimationFrame = function(callback, element) {
              var currTime = new Date().getTime();
              var timeToCall = Math.max(0, 16 - (currTime - lastTime));
              var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
                timeToCall);
              lastTime = currTime + timeToCall;
              return id;
          };
      window.requestAnimFrame = window.requestAnimationFrame;
      
      var width = 480;
      var height = 400;
      
      var wabbitTexture;
      var pirateTexture;
      
      var bunnys = [];
      var gravity = 0.75//1.5 ;
      
      var maxX = width;
      var minX = 0;
      var maxY = height;
      var minY = 0;
      
      var startBunnyCount = 10;
      var isAdding = false;
      var count = 0;
      var container;
      var layer;
      var easelLogo;
      var clickImage;
      
      var amount = 10;
      
      function onReady()
      {
          stage = new Kinetic.Stage({
              container: "container",
              width: $(window).width(),
              height: height,
          });
          layer = new Kinetic.Layer();
          stage.add(layer);
          stats = new Stats();
          
          wabbitTexture = new Image();
          wabbitTexture.onload = function() {
              _handleTextureLoaded();
          }
          wabbitTexture.src = "http://www.html5canvastutorials.com/content/labs/html5-canvas-bouncing-bunnies/bunny.png";
          
          document.body.appendChild( stats.domElement );
          stats.domElement.style.position = "absolute";
          stats.domElement.style.top = "0px";
          
          requestAnimationFrame(update);
      
          counter = document.createElement("div");
          counter.className = "counter";
          document.body.appendChild( counter);
          
          count = startBunnyCount;
          counter.innerHTML = 10 + " BUNNIES";
          
          container = stage;
          // stage.addChild(container);
          
          $(stage.getContainer()).mousedown(function(){
              isAdding = true;
          });
          
          $(stage.getContainer()).mouseup(function(){
              isAdding = false;
          })
          
          document.addEventListener("touchstart", onTouchStart, true);
          document.addEventListener("touchend", onTouchEnd, true);
          resize();
      }
      
      function _handleTextureLoaded (event) {
          for (var i = 0; i < startBunnyCount; i++) 
          {
              var bunny = new Kinetic.Image({
                  image: wabbitTexture,
                  transformsEnabled: 'position',
                  hitGraphEnabled: false
              });
      
              bunny.speedX = Math.random() * 10;
              bunny.speedY = (Math.random() * 10) - 5;
              
              bunny.regX = bunny.width*0.5;
              bunny.regY = bunny.height;
              bunnys.push(bunny);
              
              layer.add(bunny);
          }
      }
      
      function onTouchStart(event)
      {
          isAdding = true;
      }
      
      function onTouchEnd(event)
      {
          isAdding = false;
      }
      
      function resize()
      {
      
          var windowWidth = $(window).width(),
              width = windowWidth;
      
          if(width  > 800) width  = 800;
          
          maxX = width;
          minX = 0;

      }
      
      function update()
      {
          stats.begin();
          
          if(isAdding)
          {
              // add 10 at a time :)
              
              for (var i = 0; i < amount; i++) 
              {
                  var bunny = new Kinetic.Image({
                  image: wabbitTexture,
                  transformsEnabled: 'position',
                  hitGraphEnabled: false
              });
                  bunny.speedX = Math.random() * 10;
                  bunny.speedY = (Math.random() * 10) - 5;
                  
                  bunny.regX = bunny.width/2;
                  bunny.regY = bunny.height;
                  //bunny.alpha = 0.3 + Math.random() * 0.7;
                  bunnys.push(bunny);
                  
                  //bunny.rotation = Math.random() - 0.5;
                  var random = Math.random() *  (container.children.length-2);
                  layer.add(bunny)//, random);
                  
                  count++;
              }    
              counter.innerHTML = count + " BUNNIES";
          }
          
          for (var i = 0; i < bunnys.length; i++) 
          {
              var bunny = bunnys[i];
              
              bunny.setX(bunny.getX() + bunny.speedX);
              bunny.setY(bunny.getY() + bunny.speedY);
              bunny.speedY += gravity;
              
              if (bunny.getX() > maxX)
              {
                  bunny.speedX *= -1;
                  bunny.setX(maxX);
              }
              else if (bunny.getX() < minX)
              {
                  bunny.speedX *= -1;
                  bunny.setX(minX);
              }
              
              if (bunny.getY() > maxY)
              {
                  bunny.speedY *= -0.85;
                  bunny.setY(maxY);
                  if (Math.random() > 0.5)
                  {
                      bunny.speedY -= Math.random() * 6;
                  }
              } 
              else if (bunny.getY() < minY)
              {
                  bunny.speedY = 0;
                  bunny.setY(minY);
              }
              
          }
      
          layer.drawScene();
          requestAnimFrame(update);
          stats.end();
      }
    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
与KineticJS HTML5画布上跳跃的兔子

在这个实验中,我们将创建一个群与KineticJS跳跃的兔子。产品说明:mousedown在画布上添加大量更多的兔子。 body { margin: 0px; padding: 0px; } $(document).rea
复制链接

扫一扫