HTML5画布和KineticJS动物在沙滩上游戏

最新推荐文章于 2022-07-15 17:17:09 发布

林戈雅小鸟依然

最新推荐文章于 2022-07-15 17:17:09 发布

阅读量829

点赞数

分类专栏：画布和KineticJS动物在沙滩上游戏文章标签：画布和KineticJS动物在沙滩上游戏

本文链接：https://blog.csdn.net/lingeyass/article/details/17843769

版权

画布和KineticJS动物在沙滩上游戏专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html5里面的一些知识点，我一直都挺喜欢看的，但是，很多原因，一直都没有办法分享而已。呵呵。现在贴出来，大家看下哦。

<!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-v4.7.4.min.js"></script>
    <script defer="defer">
      function loadImages(sources, callback) {
        var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = assetDir + sources[src];
        }
      }
      function isNearOutline(animal, outline) {
        var a = animal;
        var o = outline;
        var ax = a.getX();
        var ay = a.getY();
        
        if(ax > o.x - 20 && ax < o.x + 20 && ay > o.y - 20 && ay < o.y + 20) {
          return true;
        }
        else {
          return false;
        }
      }
      function drawBackground(background, beachImg, text) {
        var context = background.getContext();

        context.drawImage(beachImg, 0, 0);
        context.setAttr('font', '20pt Calibri');
        context.setAttr('textAlign', 'center');
        context.setAttr('fillStyle', 'white');
        context.fillText(text, background.getStage().getWidth() / 2, 40);
      }
      function initStage(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 530
        });
        var background = new Kinetic.Layer();
        var animalLayer = new Kinetic.Layer();
        var animalShapes = [];
        var score = 0;

        // image positions
        var animals = {
          snake: {
            x: 10,
            y: 70
          },
          giraffe: {
            x: 90,
            y: 70
          },
          monkey: {
            x: 275,
            y: 70
          },
          lion: {
            x: 400,
            y: 70
          },
        };

        var outlines = {
          snake_black: {
            x: 275,
            y: 350
          },
          giraffe_black: {
            x: 390,
            y: 250
          },
          monkey_black: {
            x: 300,
            y: 420
          },
          lion_black: {
            x: 100,
            y: 390
          },
        };

        // create draggable animals
        for(var key in animals) {
          // anonymous function to induce scope
          (function() {
            var privKey = key;
            var anim = animals[key];

            var animal = new Kinetic.Image({
              image: images[key],
              x: anim.x,
              y: anim.y,
              draggable: true
            });

            animal.createImageHitRegion();

            animal.on('dragstart', function() {
              this.moveToTop();
              animalLayer.draw();
            });
            /*
             * check if animal is in the right spot and
             * snap into place if it is
             */
            animal.on('dragend', function() {
              var outline = outlines[privKey + '_black'];
              if(!animal.inRightPlace && isNearOutline(animal, outline)) {
                animal.setPosition(outline.x, outline.y);
                animalLayer.draw();
                animal.inRightPlace = true;

                if(++score >= 4) {
                  var text = 'You win! Enjoy your booty!'
                  drawBackground(background, images.beach, text);
                }

                // disable drag and drop
                setTimeout(function() {
                  animal.setDraggable(false);
                }, 50);
              }
            });
            // make animal glow on mouseover
            animal.on('mouseover', function() {
              animal.setImage(images[privKey + '_glow']);
              animalLayer.draw();
              document.body.style.cursor = 'pointer';
            });
            // return animal on mouseout
            animal.on('mouseout', function() {
              animal.setImage(images[privKey]);
              animalLayer.draw();
              document.body.style.cursor = 'default';
            });

            animal.on('dragmove', function() {
              document.body.style.cursor = 'pointer';
            });

            animalLayer.add(animal);
            animalShapes.push(animal);
          })();
        }

        // create animal outlines
        for(var key in outlines) {
          // anonymous function to induce scope
          (function() {
            var imageObj = images[key];
            var out = outlines[key];

            var outline = new Kinetic.Image({
              image: imageObj,
              x: out.x,
              y: out.y
            });

            animalLayer.add(outline);
          })();
        }

        stage.add(background);
        stage.add(animalLayer);

        drawBackground(background, images.beach, 'Ahoy! Put the animals on the beach!');
      }

      var sources = {
        beach: 'beach.png',
        snake: 'snake.png',
        snake_glow: 'snake-glow.png',
        snake_black: 'snake-black.png',
        lion: 'lion.png',
        lion_glow: 'lion-glow.png',
        lion_black: 'lion-black.png',
        monkey: 'monkey.png',
        monkey_glow: 'monkey-glow.png',
        monkey_black: 'monkey-black.png',
        giraffe: 'giraffe.png',
        giraffe_glow: 'giraffe-glow.png',
        giraffe_black: 'giraffe-black.png',
      };
      loadImages(sources, initStage);


    </script>
  </body>
</html>