javascript - HTML自定义 map -缩放和兴趣点

我一直很想制作一张地图（用于游戏）。我想添加有趣的点（Clickables）并允许用户放大零件。但是我不知道如何或从哪里开始？

很久以来，我一直在编写简单的HTML / PHP网站代码，但是在大多数情况下，我总是忽略JS。

谢谢

最佳答案

为此，您需要额外的火力，因为html / php并不完全适合制作游戏。

尽管它们每个都可能在用户界面（html5）以及服务器端逻辑和数据持久性（php + msql）方面发挥某些作用，但是通常您需要混合使用多种不同的颜色来实现它。

例如，为了使游戏的地图更简单有效，我知道使用矩阵来绘制所有兴趣点以及您可能想要显示的所有其他东西。

var map = [
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
  [1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0,0,0,0,0,0,0,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,1],
  [1,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
  [1,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1],
  [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1],
  [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
];

上面的示例使用二进制数据来表示这个想法，其中0表示字面上没有任何内容，而1表示其他内容（可能是岩石，墙壁或其他任何东西）。

当然，您可以创建尽可能多的数字和符号来表示更多的东西，包括您的兴趣点。

要完全渲染它，您必须遍历此矩阵，用其对应的图像或精灵替换每个数字。

draw: function(){
  var self = this;
  this.context.clearRect(0, 0, this.w, this.h);
    this.context.fillStyle = "rgba(255,0,0,0.6)";
  _(this.map).each(function(row,i){
    _(row).each(function(tile,j){
      if(tile !== 0){ //if tile is not walkable
        self.drawTile(j,i); //draw a rectangle at j,i
      }
    });
  });
},

我强烈建议您逐步学习有关JQuery和HTML5的知识，以扩展您的当前知识，因为在不了解基础知识的情况下，游戏编程可能会成倍地复杂化。

现在，关于放大和缩小功能，我找到了一个由GOK（HTML5 Canvas: Zooming）在此处发布的简洁代码段，并且设法从该线程中提取了它，以使您更轻松地研究它。

效果很好。请在以下位置查找：

https://jsfiddle.net/caiubyfreitas/boyr68vg/

:)

关于javascript - HTML自定义 map -缩放和兴趣点，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46698228/