Question

我一直想制作一张地图（用于游戏）。我想添加趣味点（Clickables）并允许用户放大部分。但我不知道我将如何或在何处开始？

我已经编写了很多简单的HTML / PHP网站，但是大部分时间都忽略了JS。

由于

Answer 1

为了做到这一点，你需要额外的火力是必要的，因为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/

：）

HTML自定义地图 - 缩放和兴趣点

1 个答案: