0

想要将此 JavaScript 转换为咖啡脚本：

function tileMap(tileSet, map, inPicSize, tileSize) {
    this.draw = function(context) {
        for (var i = 0; i < map.length; i++) {
            for (var j = 0; j < map[i].length; j++) {
                context.drawImage(tileSet, (map[i][j][0] - 1) * inPicSize, (map[i][j][1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize);
            }
        }
    };
}

// initialization
function init() {
    var pic = new Image(); // Create image
    pic.src = 'http://dl.dropbox.com/u/8307275/p/set.png';
    var mapArr = [
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 1], [2, 1], [3, 1], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 2], [2, 2], [3, 2], [1, 4], [1, 3], [1, 3], [1, 3]],
        [[1, 4], [3, 4], [2, 3], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [3, 4], [2, 4], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 3], [1, 3], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]]
        ];
    var map = new tileMap(pic, mapArr, 32, 32);
    var canvas = document.getElementById("preview_canvas");
    canvas.width = 480;
    canvas.height = 320;
    var context = canvas.getContext("2d");
    pic.onload = function() // When image loads
        {
        map.draw(context); // draw map
    };
}

$(document).ready(function() {
    init();
})

这段代码工作正常。接下来我将其转换为咖啡脚本：

tileMap = (tileSet, map, inPicSize, tileSize) ->
    this.draw = (context) ->
        for i in [0..map.length]
            for j in [0..map[i].length]
                context.drawImage(tileSet, (map[i][j][0] - 1) * inPicSize, (map[i][j][1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize)

init = () ->
    pic = new Image()
    pic.src = 'http://dl.dropbox.com/u/8307275/p/set.png'
    mapArr = [
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 1], [2, 1], [3, 1], [1, 4], [1, 4], [1, 4], [1, 4]],
        [[1, 4], [1, 2], [2, 2], [3, 2], [1, 4], [1, 3], [1, 3], [1, 3]],
        [[1, 4], [3, 4], [2, 3], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [3, 4], [2, 4], [3, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 4], [1, 4], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 3], [1, 3], [1, 3], [1, 3], [1, 4], [1, 4]],
        [[1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4], [1, 4]]
        ]
    map = new tileMap(pic, mapArr, 32, 32)
    canvas = document.getElementById("preview_canvas")
    canvas.width = 480
    canvas.height = 320
    context = canvas.getContext("2d")
    pic.onload = () ->
        map.draw(context)

$(document).ready ->
    init()

我得到错误'没有方法“Draw”'导致字符串

map.draw(context)

被执行。我做错了什么？

4

1 回答 1

2

如果您查看编译后的 javascript，tilemap函数如下所示：

var tileMap;
tileMap = function(tileSet, map, inPicSize, tileSize) {
  return this.draw = function(context) {
    …
  };
};

等等，什么？是的，它确实返回draw函数而不是实例。总而言之，代码中有很多不必要的return语句……要解决这种特殊情况，您要么必须return this在代码末尾添加显式语句，要么使用以下class语法：

class tileMap
    constructor: (tileSet, map, inPicSize, tileSize) ->
        @draw = (context) ->
            for row, i in map
                for pic, j in row
                    context.drawImage(tileSet, (pic[0] - 1) * inPicSize, (pic[1] - 1) * inPicSize, inPicSize, inPicSize, j * tileSize, i * tileSize, tileSize, tileSize)
            return
于 2013-07-03T01:13:52.367 回答