在基于 Polymer 的游戏中：如何根据总分显示图像

Question

我正在使用 javascript 和 HTML 以及 Polymer 框架构建游戏。目前，用户在完成任务时获得积分。当回合结束时，屏幕会显示总分。

我想做的是根据总分 "badge" 向用户显示图像。

例如：

如果总分大于或等于 50（但小于 100）显示 badge1.png
如果总分大于或等于 100（但小于 200），则显示 badge2.png
等等

以下代码处理评分系统。我有一个 div 可以在回合结束时显示所有这些信息。我需要添加什么才能根据总分显示图像？我这里有点疑惑，谢谢。

loadScores: function() {
  var pts = 0;
  try {
    this.allScores = JSON.parse(localStorage.getItem('game-scores'));
    if (!this.allScores) {
      this.resetScores();
    } else {
      for (var n in this.allScores) {
        pts += this.sumPts(this.allScores[n]);
      }
      this.user.score = pts;
    }
  } catch (e) {
    this.resetScores();
  }
},

computeScore: function() {
  if (this.user) {
    var pts = 0;
    for (var n in this.allScores) {
      pts += this.sumPts(this.allScores[n]);
    }
    this.user.score = pts;
    localStorage.setItem('game-scores', JSON.stringify(this.allScores));
  }
},

resetScores: function() {
  localStorage.removeItem('game-scores');
  if (this.user) {
    this.user.score = 0;
  }
  this.allScores = {};
},

sumPts: function(s) {
  var pts = 0;
  for (var i = 0; i < s.length; i++) {
    pts += (s[i] || 0);
  }
  return pts;
},

Answer 1

非常简单。为此使用隐藏表达式。首先创建一个徽章组件来处理显示，例如

<polymer-element name="badge" attributes="score">
 <image src="/images/badge1.png" hidden?="{{ score < 50 || score > 100 }}" />
 <image src="/images/badge2.png" hidden?="{{ score < 100 || score > 200 }} " />
</polymer-element>

然后按如下方式包含徽章组件：

<badge id="badge" />

要更新徽章，您只需为其分配用户分数：

this.$.badge.score = this.user.score;

或者，如果您将其保留在数据绑定中，那么您还可以：

<badge score="{{ score }}" />

你组件中的主要代码是这样的：

this.score = 163;

希望对您有所帮助。

在基于 Polymer 的游戏中：如何根据总分显示图像

In a Polymer-based game: how to display an image depending on the total score

html

javascript

web-applications

polymer