javascript - ASP.NET と HTML5 Canvas を使用したブラウザ ゲームの作成

Question

ASP.NET サーバー上で実行され、グラフィック (2D ビットマップ、3D グラフィックなし) に HTML 5 Canvas を使用する ASP.NET/C# ベースのブラウザー ゲームを作成する予定です。

ビットマップ (png/gif) およびその他のデータ (および 2D 配列 [int, string] の辞書) を HTML 5 Canvas に送信し、MouseClick Coordinates を ASP.NET サーバーに送信することは可能ですか?

Answer 1

単一の画像をキャンバスにロードする

あなたはこのキャンバスを持っています

<canvas id="myCanvas"></canvas>

新しい Image オブジェクトを作成し、画像が読み込まれたらキャンバスに画像を追加して、画像を読み込みます。drawImage() メソッドは、画像オブジェクトをキャンバスにレンダリングします。

<script type="text/javascript">
    var context = $("#myCanvas")[0].getContext("2d");
    var img = new Image();
    img.src = "some-image.jpg";
    img.onload = function() {
        context.drawImage(img, 100, 100);
    }
</script>

ウィンドウ内のマウスの位置を取得し、座標を AJAX 経由で処理ページに送信します。

<script type="text/javascript">
    $(document).bind("click", function () {
        // Add a click-handler to the image.
        $("#myCanvas").bind("click", function (e) {
            var $canvas = $(e.target);
            var offset = $canvas.offset();
            var xpos = e.clientX - offset.left;
            var ypos = e.clientY - offset.top;

            $.post("Process.aspx", { x: xpos, y: ypos } );
        });
    });
</script>

イメージの配列をキャンバスにロードする

画像の配列を読み込み、読み込み時に各画像で関数を呼び出します。

画像はグリッドに表示されます。

// array of images
var imgArray = [
    "image01.jpg", "image02.jpg", "image03.jpg",
    "image04.jpg", "image05.jpg", "image06.jpg",
    "image07.jpg", "image08.jpg", "image09.jpg"
];

var preArray = [];    // array of preload images
var count = 0;    // count of loaded images

for (var i in imgArray) {
    preArray[i] = new Image();
    preArray[i].src = imgArray[i];
    preArray[i].onload = function() {
        count++;
        // when the last image was loaded
        if (count == imgArray.length) {
            // draw preload array to the grid
            imageLoaded(preArray);
        }
    }
}

function imageLoaded(img) {
    // grid for canvas
    var xpos = 100;    // margin-left
    var ypos = 100;    // margin-top
    var offset = 70;    // offset for images
    var cols = 3;    // number of columns in a grid

    //creates a grid
    for(var i in img) {
        var xoffset = xpos +  offset * (i % cols);
        var yoffset = ypos +  offset * Math.floor(i / cols);
        context.drawImage(img[i], xoffset, yoffset);
    }
}