Question

我有一个javascript游戏，使用拖放图像来创建单词。目前，如果单词有重复的字母，我必须以不同的方式命名字母：

Example word: Alphabet,
images: a.png, l.png, p.png, h.png, a1.png, b.png, e.png and t.png.

正如您可以想象的那样，当您拖动a.png来拼写单词时，它必须位于自己定义的块上，否则就无法锁定到位。

如何编辑脚本以多次使用同一图像，并能够拖动任何正确的展示位置。

请参阅此小提琴演示：http://jsfiddle.net/Q89Ck/

<script defer="defer">
  function loadImages(sources, callback) {
    var assetDir = 'http://kidnplay.co.uk/spelling/alphabet/';
    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, backImg, text) {
    var canvas = background.getCanvas();
    var context = background.getContext();

    context.drawImage(backImg, 0, 0);
    context.font = '18pt georgia,palatino';
    context.textAlign = 'center';
    context.fillStyle = 'white';
    context.fillText(text, background.getStage().getWidth() / 2, 32);
  }
  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 940,
      height: 600
    });
    var background = new Kinetic.Layer();
    var animalLayer = new Kinetic.Layer();
    var animalShapes = [];
    var score = 0;

    // image positions
    var animals = {
      a: {
        x: 50,
        y: 70
      },
      e: {
        x: 150,
        y: 70
      },
      b: {
        x: 250,
        y: 70
      },
      t: {
        x: 350,
        y: 70
      },
      a2: {
        x: 450,
        y: 70
      },
      p: {
        x: 550,
        y: 70
      },
      l: {
        x: 650,
        y: 70
      },
      h: {
        x: 750,
        y: 70
      },
    };


    var outlines = {
      a_black: {
        x: 30,
        y: 300
      },
      l_black: {
        x: 135,
        y: 300
      },
      p_black: {
        x: 240,
        y: 300
      },
      h_black: {
        x: 345,
        y: 300
      },
      a2_black: {
        x: 450,
        y: 300
      },
      b_black: {
        x: 555,
        y: 300
      },
      e_black: {
        x: 660,
        y: 300
      },
      t_black: {
        x: 765,
        y: 300
      },
    };

    // 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 >= 8) {
              var text = 'Well done! The correct word is alphabet!'
              drawBackground(background, images.back, 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.back, 'Rearrange the letters to spell the word');
  }

  var sources = {
    back: 'back.png',
    a: 'a.png',
    a_glow: 'a-glow.png',
    a_black: 'a-black.png',
    b: 'b.png',
    b_glow: 'b-glow.png',
    b_black: 'b-black.png',
    e: 'e.png',
    e_glow: 'e-glow.png',
    e_black: 'e-black.png',        
    h: 'h.png',
    h_glow: 'h-glow.png',
    h_black: 'h-black.png',
    l: 'l.png',
    l_glow: 'l-glow.png',
    l_black: 'l-black.png', 
    p: 'p.png',
    p_glow: 'p-glow.png',
    p_black: 'p-black.png',
    t: 't.png',
    t_glow: 't-glow.png',
    t_black: 't-black.png',
    a2: 'a2.png',
    a2_glow: 'a2-glow.png',
    a2_black: 'a2-black.png',
  };
  loadImages(sources, initStage);


</script>

Answer 1

对于As：使用相同的图像您需要将图像名称的依赖关系与您使用的密钥分开。一种可能的方法是在数组中添加具有实际字母值的另一个属性，并使用该值从图像数组中获取。这基本上解决了为2个变量使用相同图像的问题。

用于捕捉任何一个可能位置的A： 您可以在评论中使用Barmar的建议：）

Answer 2

要允许将“A”装入轮廓，请同时指定动物并勾勒出“字母”属性。

为每个动物对象添加“letter”属性：

animal.letter=”A”;

为每个大纲对象添加“正确”字母属性：

outline.letter=”A”;

然后你可以检查一个正确的字母是否在指定的轮廓中：

if( outline.letter == animal.letter ) {  

    // a valid animal is in the outline

}

这也允许你在“A-animals”中使用相同的A.png。

按值比较对象

2 个答案: