按值對比對象

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

對於使用同一張圖片既是： 您需要分離出圖像名稱的依賴與你使用的關鍵。 一種可能的方法是在數組中添加具有實際字母表值的另一個屬性，並使用該值從圖像數組中獲取數據。這基本上解決了使用2個變量的相同圖像的問題。

抓拍或爲A無論是在可能的位置： 您可以在評論:)使用建議從Barmar

Answer 2

要允許安裝或者「A」爲綱要，同時將與動物和大綱一個「字母」屬性。

一個「信」屬性添加到每個動物對象：

animal.letter=」A」; 

一個「正確」的信屬性添加到每個大綱對象：

outline.letter=」A」; 

然後你就可以檢查是否有正確的字母是在指定的大綱中：

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

    // a valid animal is in the outline 

} 

這也允許你在「Aa中使用相同的A.png nimals」。