1

我完全被一些可能非常基本的东西所困扰：

我正在使用构造函数来创建几个游戏项目：

function itemCreator(itemName, itemType, itemPosition) {
            this.itemName = itemName;
            this.itemType = itemType;
            this.itemPosition =itemPosition;
}

 new itemCreator('shootUp001', 'item_up', 108 );

 new itemCreator('shootLeft001', 'item_left', 608);

 new itemCreator('shootLeft002', 'item_left', 40);

后来我为这样的项目分配图像：

function assignImages(item){
    itemObject =item;
    itemType = itemObject.itemType;
    var itemDiv = document.getElementById(itemType); //get the div that has the name of this item
    itemDiv.innerHTML = '<img src="' +itemType +'.png"/><span class="x">x</span><span id="' +itemType +'SpanCount"></span>' //put the picture of this item in there and also a span for the counting
}

这是我卡住的地方：

当我第一次插入某个 itemType 的图像时，如何创建一个设置为“true”的布尔变量？我需要这个来避免两次插入相同类型的图像。

我知道我可以进行简单的 dom 查找，但我正在尝试学习 javascript，并想了解在这种情况下如何避免这种情况。

那么，在将具有匹配 itemType 的对象传递给 assignImage 时，基于 itemType 创建变量并修改该变量的聪明方法是什么？

4

2 回答 2

1

我将您的类 itemType 重命名为 Item 只是为了遵循标准的 Javascript 约定，我们用大写字母命名我们的类以开始名称。下面是我如何使用一个简单的字典来跟踪已经创建的项目类型：

var images = {};//keeping track of images by item types so far

function assignImages(item){
    var type = item.itemType
    if(!images.hasOwnProperty(type)) {
        var itemDiv = document.getElementById(type); //get the div that has the name of this item
        itemDiv.innerHTML = '<img src="' +type +'.png"/><span class="x">x</span><span id="' +type +'SpanCount"></span>' //put the picture of this item in there and also a span for the counting
        images[type] = itemDiv;
    } else {
        console.warn("A image of item type %s already exists", type);
    }
}
于 2013-10-17T12:03:58.313 回答
0

与其将图像分配给项目，不如将其分配给类型。获取所有独特的项目类型，然后将图像分配给这些类型。

function itemCreator(itemName, itemType, itemPosition) {
            this.itemName = itemName;
            this.itemType = itemType;
            this.itemPosition =itemPosition;
}

function assignImages(itemType){
    var itemDiv = document.getElementById(itemType);
    itemDiv.innerHTML = '<img src="' +itemType +'.png"/><span class="x">x</span><span id="' +itemType +'SpanCount"></span>'
}

var list = [
    new itemCreator('shootUp001', 'item_up', 108),
    new itemCreator('shootLeft001', 'item_left', 608),
    new itemCreator('shootLeft002', 'item_left', 40)
];

var unique_types = list.map(function(i) {
        return i.itemType;
    }).reduce(function(p, c) {
        if (p.indexOf(c) < 0) p.push(c);
        return p;
    }, []);

unique_types.forEach(function(itemType){
    assignImages(itemType);
});
于 2013-10-17T12:13:03.170 回答