javascript - 使用 ASP.NET 和 HTML5 Canvas 创建浏览器游戏

Question

我打算编写一个基于 ASP.NET/C# 的浏览器游戏，它在 ASP.NET 服务器上运行，并使用 HTML 5 Canvas 进行图形（2D 位图，没有 3D 图形）。

是否可以将位图 (png/gif) 和其他数据（二维数组 [int, string] 的字典）发送到 HTML 5 Canvas，并将 MouseClick 坐标发送回 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);
    }
}