在EaselJS中单击时如何更改图像？

Question

我正在尝试用EaselJS写一个简单的“战舰”游戏。我开始调整Drag and Drop的例子。我无法弄清楚当有人点击“打开”图像时，如何绘制我的“未命中”图像而不是“打开”图像。

这是我的代码：

<script id="editable">
        var canvas, stage;    
        var update = true;
        var miss_image;

        function hit( i, j ) {
                return false;
        }

        function init() {
                var div = document.querySelector("div canvas").parentNode;
                div.className += " loading";
                // create stage and point it to the canvas:
                canvas = document.getElementById("testCanvas");
                stage = new createjs.Stage(canvas);

                // enable touch interactions if supported on the current device:
                createjs.Touch.enable(stage);

                // enabled mouse over / out events
                stage.enableMouseOver(10);
                stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

                // load the source image:
                var open_image = new Image();
                open_image.src = "../_assets/art/open.png";
                open_image.onload = handleImageLoad;
                miss_image = new Image();
                miss_image.src = "../_assets/art/miss.png";
                miss_image.onload = handleMissImageLoad;
        }
        ...


function handleMissImageLoad(event) {
        // what do I do here? Do I even need this?
        console.log( 'handleMissImageLoad() event is:');
        console.log( event );
}

function handleImageLoad(event) {
        // this draws the board … I guess.
        var image = event.target;
        var bitmap;
        var container = new createjs.Container();
        stage.addChild(container);

        // create and populate the screen with random daisies:
        for (var i = 0; i < 12; i++) {
                for (var j = 0; j < 12; j++) {
                        bitmap = new createjs.Bitmap(image);
                        container.addChild(bitmap);
                        bitmap.x = i * bitmap.image.width;
                        bitmap.y = j * bitmap.image.height;
                        bitmap.name = "open_" + i + "_" + j;
                        bitmap.cursor = "pointer";

                        // using "on" binds the listener to the scope of the currentTarget by default
                        // in this case that means it executes in the scope of the button.
                        bitmap.on("mousedown", function (evt) {
                                console.log('mousedown evt is:');
                                console.log(evt.target.name);
                                miss_bitmap = new createjs.Bitmap(miss_image);
                                container.addChild(miss_bitmap);
                                miss_bitmap.x = i * miss_bitmap.image.width;
                                miss_bitmap.y = j * miss_bitmap.image.height;
                                miss_bitmap.name = "miss_" + i + "_" + j;
                                this.parent.addChild(this);
                                // why doesn't my miss image show?
                                // this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY};
                        });
                }
        }

        examples.hideDistractor();
        createjs.Ticker.addEventListener("tick", tick);
}

Answer 1

好的，我从这里找到答案：https://groups.google.com/forum/#!msg/createjs-discussion/8aph_-U01uU/l-o2OA4dQ-UJ

所以我将代码更改为如下所示：

function handleImageLoad(event) {
        var image = event.target;
        var bitmap;
        var container = new createjs.Container();
        stage.addChild(container);

        // create and populate the screen with random daisies:
        for (var i = 0; i < 12; i++) {
                for (var j = 0; j < 12; j++) {
                        bitmap = new createjs.Bitmap(image);
                        container.addChild(bitmap);
                        bitmap.x = i * bitmap.image.width;
                        bitmap.y = j * bitmap.image.height;
                        bitmap.name = "open_" + i + "_" + j;
                        bitmap.cursor = "pointer";

                        // using "on" binds the listener to the scope of the currentTarget by default
                        // in this case that means it executes in the scope of the button.
                        bitmap.on("mousedown", function (evt) {
                                console.log('mousedown evt is:');
                                console.log(evt.target.name);
                                console.log('this is :');
                                console.log(this);
                                this.image = miss_image;
                                stage.update();
                        });
                }
        }

        examples.hideDistractor();
        createjs.Ticker.addEventListener("tick", tick);
}