HTML自定义地图 - 缩放和内置点

Question

我一直非常想制作一个地图（游戏）。我想添加intrest点（可点击），并允许用户放大部分。但我不知道如何或从哪里开始？

我一直在编码简单的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/

:)