如何使用JS和HTML5每隔几秒将数字添加到起始值数字

Question

我正在构建一个基于浏览器实时文本的游戏。 我是 js 的新手，一切都很好。 我有一个功能，玩家需要资源来升级建筑物或建造某个单位。 对于我的问题，我有一个金属矿，里面有 100 种金属，我想让它每 3 秒向现有的 100 种金属中添加 10 种金属，然后在达到设定上限时停止添加 10 种金属。 500金属。 我知道我必须使用 JS 才能做到这一点，但我不知道如何对其进行编码并将其实现到客户端。

我没有任何 JS 示例，但基本上有这个 html 代码。

<h3><span class="color-1">Metal: 100</span> | <span class="color-2">Gas: 100</span> | <span class="color-3">Oil: 100</span> | <span class="color-4">Power: 470</span></h3>

好的，然后我想添加一个函数，当玩家建造一些花费 50 金属的东西时，我希望该函数从它的总数中减去 50，然后开始每 3 秒添加 10 金属。

Answer 1

科比的另一种方法可能是创建一些即发即忘的对象。

考虑类 MetalMine

class MetalMine {
  constructor () {
    this.amount = 100
    this.timer = setInterval(this.frame.bind(this), this.framePeriod)
  }
  frame () {
    this.amount = Math.min(this.amount + this.frameQuantity, this.maxQuantity)
    if (this.amount === this.maxQuantity) {
      clearInterval(this.timer)
    }
  }
  framePeriod = 3000
  frameQuantity = 10
  maxQuantity = 500
}

你可以实例化一些地雷并忘记它们。

let mine1 = new MetalMine()
let mine2 = new MetalMine()
let mine3 = new MetalMine()

可能你可以给他们每个人一个 dom 节点，而 mine1, ..., mine3 将填充 dom 节点的 html 本身。

class MetalMine{
  constructor (el) {
    this.$el = el
    ...
  }
  frame () {
    this.amount = ...
    this.$el.textContent = this.amount
    ...
  }
  ...
}
let mine1 = new MetalMine(document.querySelector('#somemine'))
let mine2 = new MetalMine(document.querySelector('#somemine1'))
let mine3 = new MetalMine(document.querySelector('#somemine2'))

或者你可以更时髦一些并扩展一些 dom 节点：

 class MetalMine extends HTMLElement{ constructor () { super() this.attachShadow({ mode: 'open' }) this.span = document.createElement('span') this.amount = 100 this.timer = setInterval(this.frame.bind(this), this.framePeriod) this.frame() this.shadowRoot.append(this.span) } frame () { // check yourself that frame is not called anymore once clearInterval // has been called console.log('called') this.amount = Math.min(this.amount + this.frameQuantity, this.maxQuantity) this.span.textContent = `metal ${this.amount}` if (this.amount === this.maxQuantity) { clearInterval(this.timer) } } //set the constants to the prototype framePeriod = 3000 frameQuantity = 10 maxQuantity = 130 } customElements.define('my-metalmine', MetalMine) //create some mine with delay let body = document.querySelector('body') body.append(document.createElement('my-metalmine')) setTimeout( _ => { body.append(document.createElement('my-metalmine')) setTimeout(_ => { body.append(document.createElement('my-metalmine')) }, 1000) }, 1000)

 <body></body>

Answer 2

这是您使用setInterval的我的一个小例子：

 const mEl = document.getElementById('metal') const user = { resources: { metal: 100 }, caps: { // ... metal: 500 } } const modifyMetal = m => { if (!typeof newMetal === 'number') { throw new Error('Invalid paramater type passed to modifyMetal') } if (user.resources.metal + m < 0 || user.resources.metal === user.caps.metal) { return null } if (user.resources.metal + m >= user.caps.metal) { return mEl.textContent = user.resources.metal = user.caps.metal } return mEl.textContent = user.resources.metal += m } const mine = setInterval(() => { modifyMetal(3) }, 300) const build = () => { modifyMetal(-50) ? console.log('Build Action') : console.log('Not enough metal') }

 <span id="metal">100</span> metal <br> <button onclick="build()">Build</button>

如何使用JS和HTML5每隔几秒将数字添加到起始值数字

问题描述

2 个解决方案

解决方案1
0 2019-11-25 15:25:54

解决方案2
-1 已采纳 2019-11-25 11:51:07

如何使用JS和HTML5每隔几秒将数字添加到起始值数字

问题描述

2 个解决方案

解决方案1 0 2019-11-25 15:25:54

解决方案2 -1 已采纳 2019-11-25 11:51:07

解决方案1
0 2019-11-25 15:25:54

解决方案2
-1 已采纳 2019-11-25 11:51:07