Question

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

我想要做的是根据总分数向用户显示图像作为“徽章”。

例如：

如果总分为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;

希望有所帮助。

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

1 个答案: