小编Dan*_*nce的帖子

地图

我正在使用Javascript制作基于图块的RPG,使用perlin噪声高度图,然后根据噪声的高度指定一个图块类型.

地图最终看起来像这样(在迷你地图视图中).

我有一个相当简单的算法,它从图像上的每个像素中提取颜色值,并根据其在(0-255)之间的位置将其转换为整数(0-5),该位置对应于图块字典中的图块.然后将此200x200阵列传递给客户端.

然后,引擎根据数组中的值确定切片并将其绘制到画布.所以,我最终得到了具有现实主义特征的有趣世界:山脉,海洋等.

现在我要做的下一件事就是应用某种混合算法,如果邻居不是同一类型的话,会使得瓷砖无缝地融合到它们的邻居中.上面的示例地图是玩家在小地图中看到的内容.屏幕上他们看到标有白色矩形的部分的渲染版本; 使用图像而不是单色像素渲染切片的位置.

这是用户在地图中看到的内容的示例,但它与上面显示的视口的位置不同!

在这种观点中,我希望过渡发生.

算法

我想出了一个简单的算法,它将遍历视口中的地图,并在每个图块的顶部渲染另一个图像,前提是它位于不同类型的图块旁边.(不改变地图!只是渲染一些额外的图像.)算法的想法是分析当前tile的邻居:

这是引擎可能必须呈现的示例场景,其中当前图块是标记为X的图块.

创建一个3x3数组,并读入它周围的值.所以对于这个例子,数组看起来像.

[
    [1,2,2]
    [1,2,2]
    [1,1,2]
];

我的想法是为可能的瓷砖配置制定一系列案例.在一个非常简单的层面上:

if(profile[0][1] != profile[1][1]){
     //draw a tile which is half sand and half transparent
     //Over the current tile -> profile[1][1]
     ...
}

这给出了这个结果:

其工作方式的转变,从[0][1]到[1][1],但不能从[1][1]到[2][1],其中硬边仍然存在.所以我认为在那种情况下必须使用角落瓷砖.我创建了两个3x3精灵表,我认为它可以容纳所有可能需要的拼贴组合.然后我为游戏中的所有瓷砖复制了这个(白色区域是透明的).对于每种类型的瓷砖,最终会有16个瓷砖(不使用每个spritesheet上的中心瓷砖.)

理想的结果

因此,使用这些新的磁贴和正确的算法,示例部分将如下所示:

尽管如此,我所做的每一次尝试都失败了,算法总会有一些缺陷,模式最终会变得奇怪.我似乎无法让所有案例都正确,总体而言,这似乎是一种糟糕的做法.

一个办法？

那么,如果有人能提供一个替代解决方案,我将如何创建这种效果,或者编写分析算法的方向,那么我将非常感激!

当我浏览某些页面的HTML时,我注意到其中一些使用了这个属性"data-reactid",如:

 <a data-reactid="......" ></a>

那个属性是什么,它的功能是什么？

如何使用参数数组调用Function.prototype.bind,而不是硬编码参数？(不使用ECMA6,因此没有传播运营商).

我试图在使用回调的模块周围放置一个promises包装器,我想绑定传递给我的包装器方法的所有参数并绑定它们.然后我想用我自己的回调调用部分应用的绑定函数,它将解析或拒绝一个promise.

var find = function() {
  var deferred, bound;
  deferred = Q.defer();
  bound = db.find.bind(null, arguments);
  bound(function(err, docs) {
    if(err) {
      deferred.fail(err);
    } else {
      deferred.resolve(docs);
    }
  });
  return deferred.promise;
}

但显然这不起作用,因为bind需要参数而不是参数数组.我知道我可以通过将我的回调插入到arguments数组的末尾并使用apply来做到这一点:

arguments[arguments.length] = function(err, docs) { ... }
db.find.apply(null, arguments);

或者通过遍历arguments数组并为每个参数重新绑定函数:

var bound, context;
for(var i = 0; i < arguments.length; i++) {
   context = bound ? bound : db.find;
   bound = context.bind(null, arguments[i]);
}
bound(function(err, docs) { ... })

但这两种方法都很脏.有任何想法吗？

是否可以检查指令中是否存在给定属性,理想情况下使用隔离范围,或者在最坏情况下是属性对象.

使用看起来像这样的指令<project status></project>,我想有条件地呈现状态图标,但仅当status属性存在时.

return {
  restrict: 'AE',
  scope: {
    status: '@'
  },
  link: function(scope, element, attrs) {
    scope.status === 'undefined'
  }
}

理想情况下,它将直接绑定到范围,以便可以在模板中使用它.但是,绑定变量的值未定义.这同样适用于& 只读和= 双向绑定.

我知道通过添加a来解决这个问题很简单<project status='true'></project>,但对于我经常使用的指令,我宁愿不必这样做.(XHTML有效性,不是问题).

有时减速器会变得混乱:

const initialState = {
    notificationBar: {
        open: false,
    },
};

export default function (state = initialState, action) {
  switch (action.type) {
    case actions.LAYOUT_NOTIFICATIONBAR_OPEN:
      return Object.assign({}, state, {
        // TODO: Find a cleaner way to do this!
        notificationBar: Object.assign({}, state.notificationBar, {
          open: true,
        }),
      });
    default:
      return state;
  }
}

是否有更简洁的方法来做到这一点？

我正在尝试创建一个可以选择下一个选项的按钮.

所以,我有一个select(id = selectionChamp)有几个选项,一个输入接下来(id = fieldNext),我尝试这样做:

$('#fieldNext').click(function() {
    $('#selectionChamp option:selected', 'select').removeAttr('selected')
          .next('option').attr('selected', 'selected');

    alert($('#selectionChamp option:selected').val());      
});

但我无法选择下一个选项..谢谢!

当Angular插入标记并将范围变量插入{{post}}样式模板时,它会转义HTML.

我正在构建的应用程序要求用户创建模板,使用大括号表示法插入变量名称,我不想通过引入某些变量的指令和其他的curlies来使其复杂化.

有没有办法通过卷曲模板呈现非转义HTML？

我唯一的选择是在用户尝试渲染时渲染代理元素{{post}},然后我可以使用jQLite抓取并手动插入HTML,但这是所有混乱的阴影.有任何想法吗？

我很清楚在我的应用程序中使用不可变数据的好处,我对在简单的同步编程环境中使用这些不可变结构的想法非常满意.

Stack Overflow上有一个很好的例子,描述了通过在一系列递归调用中传递状态来管理游戏的状态,如下所示:

function update(state) {
  sleep(100)

  return update({
    ticks: state.ticks + 1,
    player: player
  })
}

我们可以在函数体中做一些任意的,无副作用的自由工作,然后我们返回一个新状态,而不是改变旧状态.

将它转换为简单的异步模型似乎相当容易,比如说Javascript.

function update(state) {
  const newState = {
    player,
    ticks: state.ticks + 1
  };

  setTimeout(update.bind(this, newState), 100);
}

但是,只要我们有更多的异步事件源,管理保持状态不可变和函数纯净似乎变得更加困难.

如果我们在示例中添加click事件,我们最终得到的代码如下所示.

window.addEventListener('click', function() {
  // I have no idea what the state is
  // because only our update loop knows about it
});

显然,我不想在这个方法中改变状态,但我需要访问状态才能创建一个新的状态,就像这样.

window.addEventListener('click', function() {
  const state = getState();

  createState({
    player,
    clicks: clicks + 1
  });
});

但似乎这需要某种可变的状态管理器？

或者,我想我可以将click事件添加到要在更新循环中处理的操作队列,例如:

window.addEventListener('click', function() …

我正在使用客户端less.js. 有没有办法从我的较少的文件中获取所有变量.我知道如何修改变量:

less.modifyVars({
  "@var": "#fff"
});

但我希望得到所有这些,如(不工作):

var variables = less.getVars();

最初这个错误消息很少出现,但开始出现更频繁,现在出现了我运行应用程序的4/5次.

我正在使用Mongo处理我的会话存储,据我了解,TTL索引用于使会话数据到期.

/home/dan/dev/audio-wave/node_modules/connect-mongo/lib/connect-mongo.js:161
            throw new Error('Error setting TTL index on collection : ' + s
                  ^
Error: Error setting TTL index on collection : sessions
at /home/dan/dev/audio-wave/node_modules/connect-mongo/lib/connect-mongo.js:161:23
at /home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/db.js:1404:28
at /home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/db.js:1542:30
at /home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/cursor.js:159:22
at commandHandler (/home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/cursor.js:678:48)
at Db._executeQueryCommand (/home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/db.js:1802:12)
at Cursor.nextObject (/home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/cursor.js:729:13)
at Cursor.toArray (/home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/cursor.js:158:10)
at Cursor.toArray (/home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/scope.js:10:20)
at /home/dan/dev/audio-wave/node_modules/connect-mongo/node_modules/mongodb/lib/mongodb/db.js:1541:65

这是将它们联系在一起的代码

var sessionStore = new MongoStore({ db: 'audio-drop' })
  , cookieParser = express.cookieParser('waytoblue')
  , SessionSockets = require('session.socket.io')
  , sockets = new SessionSockets(io, sessionStore, cookieParser);

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname …