创建Javascript游戏教程

Question

我在脸书上有一款游戏叫“穿越欧洲的铁路”。它是用PHP/MySQL/Facebook Javascript编写的。我的游戏中缺少的一个大功能是交互式用户教程。我有一个录像带，但我不认为它有足够的帮助。我注意到，大多数开始玩游戏的用户在放弃之前只玩了一两个回合。这是一个复杂的游戏，它将从交互式教程中受益良多。

问题是我不知道如何创建这样的教程。这个游戏由一张欧洲地图组成，其中包含欧洲城市、铁路线(例如铁轨)和城市供应的商品。玩家应该建造连接城市的赛道，沿着赛道导航他的火车，在一个城市提货，然后把它们送到另一个对商品有需求的城市，然后他就会得到报酬。

游戏包含许多不同的事件处理程序，如建造轨道，移动火车，在城市装卸货物，以及其他事情。

我正在努力解决如何组织本教程，使其与用户的操作保持同步(反之亦然)，以及如何确定用户是否采取了正确的操作，从而允许教程进入下一步，以及如何知道下一步是什么。

以下是我的前端js代码的示例：

var openCargoHolds = 0;
var cargoHoldsUsed = 0;
var loadCargoDialog = null;
var isIE = false;
function setBrowserIsIE(value) {
  isIE = value;
}
function moveTrainAuto() {
//debugger;
//consoleTime('moveTrainAuto');
consoleLog('moveTrainAuto');
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
//consoleTime('moveTrainAuto::move-trains-auto');
  ajax.ondone = function(data) {
//consoleTimeEnd('moveTrainAuto::move-trains-auto');
//consoleTimeEnd('moveTrainAuto::get-track-data');
//debugger;
    var trackColor = (data.route_owned) ? '#FF0' : '#888';
    var trains = [];
    trains[0] = data.train;
    removeTrain(trains);
    drawTrack(data.y1, data.x1, data.y2, data.x2, trackColor, trains);
//debugger;
    if(data.code == 'UNLOAD_CARGO') {
consoleLog('moveTrainAuto::unloadCargo');
      //unloadCargo();
      //myEventMoveTrainManual(null); //continue moving train until final destination is reached
      moveTrainManual();
    } else if (data.code == 'MOVE_TRAIN_AUTO') { // || data.code == 'TURN_END') {
      moveTrainAuto();
    } else if (data.code == 'TURN_END') {
consoleLog('moveTrainAuto::turnEnd');
      turnEnd();
    } else {
      /* handle error */
    }
  }
  ajax.post(baseURL + '/turn/move-train-auto-track-data');
//consoleTimeEnd('moveTrainAuto');
}
function moveTrainAutoEvent(evt) {
//debugger;
  //moveTrainAuto();
  //myEventMoveTrainManual(null, false);
  moveTrainManual();
}
function moveTrainManual() {
//consoleTime('moveTrainManual');
consoleLog('moveTrainManual');
//debugger;
  state = MOVE_TRAIN_MANUAL;
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;

  if(!trainInTransit) {
    var actionPrompt = document.getElementById('action-prompt');
    actionPrompt.setInnerXHTML('<span><div id="action-text">'+
      'Move Train: Select destination'+
      '</div>'+
      '<div id="action-end">'+
      '<form method="POST">'+
      '<input type="button" value="Replace Demands" id="replace-demands-btn" style="width: 130px;" />'+
      '<input type="button" value="Upgrade Train" disabled="disabled" id="upgrade-train-btn" class="btn" />'+
      '<input type="button" value="Build Track" id="build-track-btn" class="btn" />'+
      '<input type="button" value="Manage Cargo" id="manage-cargo-btn" class="btn" />'+
      '</form>'+
      '</div></span>');
    var actionButton = document.getElementById('build-track-btn');
    actionButton.addEventListener('click', moveTrainEventHandler);
    actionButton = document.getElementById('replace-demands-btn');
    actionButton.addEventListener('click', moveTrainEventHandler);
    actionButton = document.getElementById('upgrade-train-btn');
    actionButton.addEventListener('click', moveTrainEventHandler);
    var loadCargoButton = document.getElementById('manage-cargo-btn');
    loadCargoButton.addEventListener('click', moveTrainEventHandler);
  } else {
    var actionPrompt = document.getElementById('action-prompt');
    actionPrompt.setInnerXHTML('<span><div id="action-text">'+
      'Train in-transit to final destination...</div></span>');
  }
  ajax.ondone = function(data) {
consoleLog('ajax.moveTrainManual');
    if(data.code == 'TURN_END') {
consoleLog('moveTrainManual::turnEnd');
      turnEnd();
    } else {
//debugger;
      //myEventMoveTrainManual(null);
    }
  }
  ajax.post(baseURL + '/turn/move-train-manual');
//consoleTimeEnd('moveTrainManual');
}
function unloadCargo() {
//debugger;
consoleLog('unloadCargo');
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Unloading cargo...');
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//debugger;
    if(data.unloadableCargo.length == 0) {
consoleLog('unloadableCargo == 0');
      moveTrainManual();
      //loadCargo();
    } else {
consoleLog('unloadable cargo='+dump(data.unloadableCargo));
      var i = 0;
      var j = 0;
      var ucCount = data.unloadableCargo.length;
      for(i = 0; i < ucCount; i++) {
        var cargoDialog = new Dialog();
        cargoDialog.showChoice('Unload Cargo', 'Unload  ' + data.unloadableCargo[i].goods_name + ' at ' + data.unloadableCargo[i].city_name + ' for ' + data.unloadableCargo[i].payoff + 'M euros?');
        cargoDialog.iVal = i;
        cargoDialog.onconfirm = function() {
//consoleLog('iVal='+this.iVal);
//consoleLog('unloadable cargo onconfirm='+dump(data.unloadableCargo));
          var ajax = new Ajax();
          ajax.responseType = Ajax.JSON;
          var param = {"city_id": data.unloadableCargo[this.iVal].city_id, "goods_id": data.unloadableCargo[this.iVal].goods_id, "payoff": data.unloadableCargo[this.iVal].payoff};
          ajax.ondone = function(demandData) {
            refreshDemands();
            // update balance
            setHtmlBalance(demandData.balance);
            if(demandData.post_to_wall) {
              Facebook.streamPublish('', demandData.attachment, demandData.action_links);
            }

            ajax.responseType = Ajax.JSON;
          //debugger;
            ajax.ondone = function(data) {
              if(!data.already_won && data.funds >= data.winning_balance) {
                var dialog = new Dialog().showMessage('Congratulations!', 'You have earned over '+data.winning_balance+'M euros. You have won! You may continue playing or start a new game.');
                dialog.onconfirm = function() {
                  moveTrainManual();
                }
              }
              moveTrainManual();
            }
            ajax.post(baseURL + '/turn/get-player-stats');
          }
          ajax.post(baseURL + "/turn/do-unload-cargo", param);
        }
        cargoDialog.oncancel = function() { moveTrainManual(); }
      }
    }
  }
  ajax.onerror = function() {
    var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
  }
  ajax.post(baseURL + '/turn/unload-cargo');
}
function loadCargo() {
//consoleLog('Entering loadCargo()');
  var actionPrompt = document.getElementById('action-prompt');
  actionPrompt.setTextValue('Loading cargo...');
  var ajax = new Ajax();
  ajax.responseType = Ajax.JSON;
  ajax.ondone = function(data) {
//consoleLog('Entering ondone for load-cargo');
//debugger;
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(fbjsData) {
//consoleLog('Entering ondone for load-cargo-dialog-fbjs');
//debugger;
      if(data.loadableCargo.length == 0) {
//consoleLog('Calling moveTrainManual()');
        moveTrainManual();
      } else {
//consoleLog('Instantiating loadCargoDialog');
        if(loadCargoDialog == null) {
          loadCargoDialog = new Dialog();
          //if browser is IE, move dialog up 50px to compensate for bug that causes it to shift down the screen
          if(isIE) {
            //loadCargoDialog.setStyle('position', 'relative');
            //loadCargoDialog.setStyle('top', '-50px');
          }
          loadCargoDialog.showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
        } else {
          if(isIE) {
            //loadCargoDialog.setStyle('position', 'relative');
            //loadCargoDialog.setStyle('top', '-50px');
          }
          loadCargoDialog.showChoice('Load Cargo', fbjsData, 'Minimize', 'Pass');
        }
        var dlgPrefixString = document.getElementById('dlg-prefix-string').getValue();
        //var dlgPrefixString = dlgPrefixElem.getValue();
//consoleLog('Setting dlgBtnNew');
        var dlgBtnNew = document.getElementById(dlgPrefixString+'-load-new-submit');
        dlgBtnNew.cityId = data.loadableCargo.city_id;
        dlgBtnNew.trainId = data.loadableCargo.train_id;
        dlgBtnNew.prefixString = dlgPrefixString;
        dlgBtnNew.loadCargoDialog = loadCargoDialog;
        dlgBtnNew.addEventListener('click', cargoEventHandler); //loadNewCargo);
//consoleLog('Setting dlgBtnDiscard');
        var dlgBtnDiscard = document.getElementById(dlgPrefixString+'-discard-existing-submit');
        dlgBtnDiscard.cityId = data.loadableCargo.city_id;
        dlgBtnDiscard.trainId = data.loadableCargo.train_id;
        dlgBtnDiscard.prefixString = dlgPrefixString;
        dlgBtnDiscard.loadCargoDialog = loadCargoDialog;
        dlgBtnDiscard.addEventListener('click', discardExistingCargo);
        loadCargoDialog.onconfirm = function() {
//consoleLog('Entering loadCargoDialog.onconfirm');
          // Submit the form if it exists, then hide the dialog.
          loadCargoDialog.hide();
          actionPrompt = document.getElementById('action-prompt');
          actionPrompt.setInnerXHTML('<span><div id="action-text">'+
            'The "Load cargo" dialog has been minimized'+
            '</div>'+
            '<div id="action-end">'+
            '<form action="" method="POST">'+
            '<input type="button" value="Maximize" id="next-phase" onclick="loadCargo();" />'+
            '</form>'+
            '</div></span>');
          actionButton = document.getElementById('next-phase');
          actionButton.setValue('Maximize');
          actionButton.addEventListener('click', loadCargoEventHandler);
//consoleLog('Exiting loadCargoDialog.onconfirm');
        };
        loadCargoDialog.oncancel = function() {
//consoleLog('Entering loadCargoDialog.oncancel');
          moveTrainManual();
//consoleLog('Exiting loadCargoDialog.oncancel');
        }
      }
//consoleLog('Exiting ondone for load-cargo-dialog-fbjs');
    }
    ajax.onerror = function() {
      var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
    }
    ajax.post(baseURL + '/turn/load-cargo-dialog-fbjs', data);
//consoleLog('Exiting ondone for load-cargo');
  }
  ajax.onerror = function() {
    var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
  }
  ajax.post(baseURL + '/turn/load-cargo');
//consoleLog('Exiting loadCargo');
}
function loadCargoEventHandler(evt) {
  if(evt.type == 'click') {
    loadCargo();
  }
}
function trackEventHandler(evt) {
  var x1 = evt.target.x1;
  var x2 = evt.target.x2;
  var y1 = evt.target.y1;
  var y2 = evt.target.y2;
  var cost = evt.target.cost;
  var prefixString = evt.target.prefixString;

  evt.target.payDialog.hide();

  ajax = new Ajax();
  ajax.responseType = Ajax.JSON;

  switch(evt.target.getId()) {
    case prefixString + '-confirm-pay-submit':
      ajax.ondone = function() {
        var empty = [];
        drawTrack(parseInt(y1), parseInt(x1), parseInt(y2), parseInt(x2), '#FF0', empty);
//new Dialog().showMessage('test', 'balance='+balance);
        balance = balance - parseInt(cost);
        setHtmlBalance(balance);
        saveCityStartElem.setSrc(publicURL + '/images/city_marker.gif');
        saveCityStartElem = null;
        var actionPrompt = document.getElementById('action-prompt');
        var innerHtml = '<span><div id="action-text">Build Track: Select a city where track building should begin</div>'+
                        '<div id="action-end">'+
                        '<form action="">'+
                        '<input type="button" value="End Track Building" id="next-phase" onClick="moveTrainAuto()" />'+
                        '</form>'+
                        '</div></span>';
        actionPrompt.setInnerXHTML(innerHtml);
        var btn = document.getElementById('next-phase');
        btn.addEventListener('click', moveTrainAutoEvent);
        state = TRACK_CITY_START;
      }
      ajax.onerror = function() {
        new Dialog().showMessage('Track Building Error', 'An error occured while building this track. Please try again.');
      }
      ajax.post(baseURL + '/turn/build-track-confirmed', {"europass_used": 0});
      break;

    case prefixString + '-cancel-pay-submit':
      saveCityStartElem.setSrc(publicURL + '/images/city_marker.gif');
      saveCityStartElem = null;
      var actionPrompt = document.getElementById('action-prompt');
      var innerHtml = '<span><div id="action-text">Build Track: Select a city where track building should begin</div>'+
                      '<div id="action-end">'+
                      '<form action="">'+
                      '<input type="button" value="End Track Building" id="next-phase" onClick="moveTrainAuto()" />'+
                      '</form>'+
                      '</div></span>';
      actionPrompt.setInnerXHTML(innerHtml);
      var btn = document.getElementById('next-phase');
      btn.addEventListener('click', moveTrainAutoEvent);
      state = TRACK_CITY_START;
      ajax.post(baseURL + '/turn/build-track-resume');
      break;

    case prefixString + '-europass-pay-submit':
      ajax.ondone = function() {
        var empty = [];
        drawTrack(parseInt(y1), parseInt(x1), parseInt(y2), parseInt(x2), '#FF0', empty);
//new Dialog().showMessage('test', 'balance='+balance);
        saveCityStartElem.setSrc(publicURL + '/images/city_marker.gif');
        saveCityStartElem = null;
        var actionPrompt = document.getElementById('action-prompt');
        var innerHtml = '<span><div id="action-text">Build Track: Select a city where track building should begin</div>'+
                        '<div id="action-end">'+
                        '<form action="">'+
                        '<input type="button" value="End Track Building" id="next-phase" onClick="moveTrainAuto()" />'+
                        '</form>'+
                        '</div></span>';
        actionPrompt.setInnerXHTML(innerHtml);
        var btn = document.getElementById('next-phase');
        btn.addEventListener('click', moveTrainAutoEvent);
        state = TRACK_CITY_START;
      }
      ajax.onerror = function() {
        new Dialog().showMessage('Track Building Error', 'An error occured while building this track. Please try again.');
      }
      ajax.post(baseURL + '/turn/build-track-confirmed', {"europass_used": 1});
      break;
  }
}
function cargoEventHandler(evt) {
  //new Dialog().showMessage('loadNewCargo', 'city id='+cityId+', train id='+trainId);
//debugger;
  var cityId = evt.target.cityId;
  var trainId = evt.target.trainId;
  var prefixString = evt.target.prefixString;

  evt.target.loadCargoDialog.hide();

  switch(evt.target.getId()) {
    case prefixString + '-load-new-submit':
//debugger;
      ajax = new Ajax();
      ajax.responseType = Ajax.JSON;
      param = { 'load-cargo-submit': "Load new goods", 'city-id': cityId, 'train-id': trainId };
      ajax.ondone = function(data) {
        openCargoHolds = data.openCargoHolds;
        cargoHoldsUsed = 0;
        ajax.responseType = Ajax.FBML;
        param = { 'openCargoHolds': data.openCargoHolds, 'cityGoods': data.cityGoods, 'trainId': data.trainId };
        ajax.ondone = function(fbjsData) {
    //debugger;
          var dialog = new Dialog().showChoice('Load Cargo', fbjsData, 'Load cargo', 'Cancel');
          var numGoods = data.cityGoods.length;
          for(var i = 1; i <= numGoods; i++) {
            var decrementGoodsArrow = document.getElementById('goods-decrement-' + i);
            decrementGoodsArrow.addEventListener('click', goodsAdjustmentHandler);
            var incrementGoodsArrow = document.getElementById('goods-increment-' + i);
            incrementGoodsArrow.addEventListener('click', goodsAdjustmentHandler);
          }
          dialog.onconfirm = function() {
//debugger;
            var goods = [];
            var goodsIds = [];
            numGoods = document.getElementById('goods-count').getValue();
            for(var i = 0; i < numGoods; i++) {
              j = i + 1;
              goods[i] = document.getElementById('goods-' + j).getValue();
              goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
            }
            var trainId = document.getElementById('train-id').getValue();
            param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
            ajax.responseType = Ajax.JSON;
            ajax.ondone = function(data) {
              loadCargo();
            }
            ajax.onerror = function() {
              var dialog = new Dialog().showMessage('Request taking too long', 'The system is taking too long to process this request. Please try refreshing the page. If this does not work, please Contact Us with a description of your problem. We are sorry for the inconvenience.');
            }
            ajax.post(baseURL + '/turn/do-load-cargo-new', param);
            //dialog.hide();
          };
          dialog.oncancel = function() {
            loadCargo();
          }
        }
        ajax.post(baseURL + '/turn/load-cargo-new-dialog-fbjs', param);
      }
      ajax.post(baseURL + '/turn/load-cargo-select', param);
      break;
    case prefixString + '-discard-existing-submit':
      ajax = new Ajax();
      ajax.responseType = Ajax.JSON;
      param = { 'load-cargo-submit': "Discard existing goods", 'city-id': cityId, 'train-id': trainId };
      ajax.ondone = function(data) {
        ajax.responseType = Ajax.FBML;
        param = { 'openCargoHolds': data.openCargoHolds, 'trainGoods': data.trainGoods, 'trainId': data.trainId };
        ajax.ondone = function(fbjsData) {
          var dialog = new Dialog().showChoice('Discard Cargo', fbjsData, 'Discard cargo', 'Cancel');
          dialog.onconfirm = function() {
//debugger;
            var goods = [];
            var goodsIds = [];
            numGoods = document.getElementById('goods-count').getValue();
            for(var i = 0; i < numGoods; i++) {
              j = i + 1;
              goods[i] = document.getElementById('goods-' + j).getValue();
              goodsIds[i] = document.getElementById('goods-id-' + j).getValue();
            }
            var trainId = document.getElementById('train-id').getValue();
            param = { "goods": goods, "goods-id": goodsIds, "train-id": trainId };
            ajax.responseType = Ajax.JSON;
            ajax.ondone = function(data) {
              loadCargo();
            }
            ajax.post(baseURL + '/turn/do-load-cargo-discard', param);
            //dialog.hide();
          };
          dialog.oncancel = function() {
            loadCargo();
          }
        }
        ajax.post(baseURL + '/turn/load-cargo-discard-dialog-fbjs', param);
      }
      ajax.post(baseURL + '/turn/load-cargo-select', param);
      break;
  }
  return true;
}

Answer 1

任何人都需要一段时间才能理解你的代码，所以我认为很难为你的具体情况提供准确的代码示例，但对于一些一般的想法……

例如，教程中的每个步骤都可能有一组要求。单击此按钮，执行此操作。因此，要知道用户何时执行了某项操作，您需要在这些操作上添加事件侦听器，并让它们更改当前“步骤”的状态。

一旦你的步骤的要求得到满足，它就会被下一步所取代。此时，将更新事件处理程序等，以跟踪新步骤的需求。

例如，假设你有一个步骤，用户必须建立一个从A到B的轨道，然后运行一列火车通过它。在这样的情况下，您可能要求火车必须到达A，然后到达B。因此，您的游戏应该在到达指定车站的火车上有某种类型的事件，并且您将跟踪该事件。

希望这能有所帮助。