他们是如何在游戏中进行实时内容更新的?我们演示

How do they do the live content updating in the famo.us demos?

本文关键字：更新 我们 实时 游戏 他们是      更新时间：2023-09-26

如果您查看famo上的任何演示。我们的网站，他们都让你输入代码，并在正确的输出实时更新。我找遍了所有地方，但我似乎找不到任何关于这是如何实现的文档。

的例子:http://famo.us/examples/0.2.0/core/context/example

我不知道这是不是那个特定的例子是如何实现的，但我能够很快地把一些东西放在一起，至少希望能给你一些指导。

在下面的例子中，我使用了一个FlexibleLayout来划分页面。然后我添加一个TextareaSurface来创建一个编辑器和一个容器表面来呈现结果。我添加了一个RenderNode以及ContainerSurface，这样我就可以保持相同的容器，并冲洗和重用RenderNode。

现在如何改进…

1)我们的演示让您创建自己的上下文并添加到其中。在我的示例中，'outputNode'是输出显示的出口。同样，在我的情况下，这是为了简单起见，但要实现他们所实现的目标，我将自己解析代码并将主上下文替换为我所知道的我希望呈现的节点。

2)我在自己的代码中使用的名称应该使用某种前缀来使其更加独特。现在，编辑器中代码的名称很容易与我用来编写编辑器的变量名称冲突。

无论如何，这是我所做的，希望它帮助!

var Engine              = require("famous/core/Engine");
var Surface             = require("famous/core/Surface");
var RenderNode          = require("famous/core/RenderNode");
var FlexibleLayout      = require("famous/views/FlexibleLayout");
var ContainerSurface    = require("famous/surfaces/ContainerSurface");
var TextareaSurface     = require("famous/surfaces/TextareaSurface");
var context             = Engine.createContext();
var layout = new FlexibleLayout({ratios:[0.5,0.5]});
var layoutCells = [];
layout.sequenceFrom(layoutCells);
var editor = new TextareaSurface({
  size:[undefined,undefined],
  properties:{
    fontSize:'18px',
    fontFamily:'courier',
    padding:'10px'
  }
});
var code = ""
code += "var surface = new Surface({      " + "'n";
code += "  size:[200,200],                " + "'n";
code += "  content:'Hello',               " + "'n";
code += "  properties:{                   " + "'n";
code += "    backgroundColor:'green',     " + "'n";
code += "    lineHeight:'200px',          " + "'n";
code += "    textAlign:'center'           " + "'n";
code += "  }                              " + "'n";
code += "});                              " + "'n";
code += "                                 " + "'n";
code += "outputNode.add(surface);         " + "'n";
editor.setValue(code);
var outputNode;
var evalCode = function(code){
  try {
    outputNode.render = function(){return null};
    makeOutput();
    outputContainer.add(outputNode);
    eval(code);
  }
  catch (err) {
    console.log("Error: "+err);
  }
}
editor.on('keyup',function(){
  var code = editor.getValue();
  evalCode(code);
})
layoutCells.push(editor);
var makeOutput = function(){
  outputNode = new RenderNode({
    size:[undefined,undefined],
    backgroundColor:'white'
  })
}
outputContainer = new ContainerSurface({
  size:[undefined,undefined],
  backgroundColor:'white'
})
outputContainer.add(outputNode);
makeOutput();
evalCode(code);
layoutCells.push(outputContainer);
context.add(layout);
相关文章：