Question

请帮助解决问题。

我为几个级别的游戏上课。

var Game = function() {
  self = this;

  this.myMove = false;
  this.level = 1;

  this.Start();
};

Game.prototype = {

  Start: function() {
    this.levelInfo();

    $(document).keypress(function(){
      self.level++;
      // game body
      self.Start();
    });
  },     

  levelInfo: function() {
    this.clearScreen();
    this.levelDisplay();    
  },        

  levelDisplay: function() {  
    $('<div class="level_label" id="levelLabel">Level: </div> \
      <div class="level_value" id="levelValue">' + self.level + '</div>').appendTo('#game');
  },  

  clearScreen: function() {
    $('#game').html('');
  } 

};

但是在运行游戏并按屏幕上的任何键后输出下一级序列：

1,2,4,16,32等......

但我需要遵循以下顺序：

1,2,3,4,5等......

小提琴：https://jsfiddle.net/6wyu8soj/

Answer 1

您已在Start中定义了按键处理程序，这将继续创建新的按键事件。试试这个：

var Game = function() {
  self = this;

  this.myMove = false;
  this.level = 1;

  $(document).keypress(function(){
      self.level++;
      // game body
      self.Start();
  });

  this.Start();
};

Game.prototype = {

  Start: function() {
    this.levelInfo();
  },     

  levelInfo: function() {
    this.clearScreen();
    this.levelDisplay();    
  },        

  levelDisplay: function() {  
    $('<div class="level_label" id="levelLabel">Level: </div> \
      <div class="level_value" id="levelValue">' + self.level + '</div>').appendTo('#game');
  },  

  clearScreen: function() {
    $('#game').html('');
  } 

};

Answer 2

您正在使用可变数据结构（self.level++;）并在每个keypress上添加新的keypress事件，这会导致O（n ^ 2）性能以及此奇怪的错误。

首先，你应该摆脱对Start

的递归异步调用

Start: function() {
    this.levelInfo();

    $(document).keypress(function(){
      self.level++;
      // game body
      this.levelInfo();
    }.bind(this));
},

这将解决您当前的问题，因为您可以看到here

为避免将来出现类似问题，您可以查看一些不可变数据结构，例如immutable.js。

为什么对象变量没有增加？

2 个答案: