Question

为了学习编码，我着手用Javascript和HTML编写自己的小型idle-clicker-RPG。现在，我的库存管理代码让我头疼不已，因为它没有删除并按1：1添加项目，而是重复了它们（请参阅下文）。但是我不知道为什么。当项目共享相同的“类型”（参见代码）时，这种情况似乎只会发生

我已经缩减了代码，以弄清楚位置。制作变量以让其改变顺序和时间（增加了settimeout），分割了“拼接”功能，并分别用于删除和添加。

HTML

<td><p><div id="Pos1" onclick="equip(Inventory[0], 0)"></div></td>
etc....

JavaScript

var Stick = {
    Type : "MainHand",
};

var Knife = {
    Type : "MainHand",
};

var Inventory = [];

var Equipped = {
    MainHand : {Name : ""},
};

function equip(item, position){
    let LItem = item;
    let LPosition = position;
    let EQItem = Equipped[LItem.Type]
    if (EQItem.Name !== "") {
    Inventory.splice(LPosition, 1, EQItem);
    Object.assign(EQItem, LItem);
    } else {
    Object.assign(EQItem, LItem);
    Inventory.splice(LPosition, 1);
    };
};

当希望通过html在清单中按项目时，我希望函数'equip'执行以下操作：

检查那个地方还没有装备

1.1从库存中删除所选项目

1.2将当前装备的物品添加到库存中

1.3装备选定的物品

如果没有配备任何东西（2.到2.2可以按预期工作）


2.1从库存中删除所选项目

2.2装备选定的物品

在1.1-1.3发生的事情是（我不确定订单）所选择的物品已配备，但是未装备的物品（似乎已添加到库存中）和其余相同的物品键入随机更改为所选项目。并非同一类型的所有项目都发生这种情况-只是某些情况-但是在更改足够的时间后，同一类型的所有项目最终都将是同一项目。

Answer 1

似乎您正在尝试一种面向对象的方法。

我不确定我是否完全理解您的问题。这是实现“设备”和“库存”的另一种方法。也许您喜欢它，它会有所帮助。

但是要小心，这需要ECMAScript 6（Babel转码）。

class Mainhand {
  static type() {
    return "MainHand";
  }
};

class Knife extends Mainhand {};
class Stick extends Mainhand {};

class Inventory {
  constructor(items) {
    this.items = items;
  }
};

class Equipment {
  constructor() {
    this.equipped = {};
  };
  
  equip(item) {
    let type = item.constructor.type();
    
    // this one is used to create a new "equipped" list instead of modifing the previous one.
    let newEquipment = Object.assign({}, this.equipped);
    newEquipment[type] = item;
    
    this.equipped = newEquipment;
  }
};

document.user = {
  inventory: new Inventory([
    new Stick(),
    new Knife(),
  ]),
  equipment: new Equipment(),
};

document.querySelectorAll('.equip').forEach(function(button) {
  button.addEventListener('click', function (e) {
    e.preventDefault();
    
    let item = document.user.inventory.items[e.target.dataset.inventoryKey];    
    document.user.equipment.equip(item);
    
    let currentMainHandName = document.user.equipment.equipped.MainHand.constructor.name;
    
    document.getElementById("currentMainHand").innerHTML = currentMainHandName;
  });
});

<button class="equip" data-inventory-key="0">I want a stick</button>

<button class="equip" data-inventory-key="1">I want a knife</button>

<h2>Current Mainhand</h2>
<p id="currentMainHand" style="color: red;"></p>

Array.splice替换多个值（尽管设置仅替换一个值）

HTML

JavaScript

1 个答案: