Question

想要将此JavaScript转换为coffeescript：

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();
})

此代码工作正常。接下来我将其转换为coffeescript：

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()

我得到错误＆＃39;没有方法＆＃34;画＆＃34;＆＃39;字符串

时引起的

map.draw(context)

已执行。我做错了什么？

Answer 1

如果您查看已编译的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

在coffeescript中看不到命名函数内的匿名函数

1 个答案: