HTMLカスタムマップ - ズームインとポイントインポイント

Question

私は本当に（ゲーム用の）マップを作りたがっています。私はintrest（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/

:)