使用Ticker的easylJS行

Question

我两天前开始学习html5和easelJS,我正在开发一款游戏.现在我遇到了一些问题当然:)

我知道我可以用代码画一条线:

var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();

但据我所知,你不应该混淆上下文与easelJS的Ticker/Stage!我使用Ticker来更新某个FPS上的阶段(更新会在这种情况下删除这条线路吗？).

现在我想要的是在某些场合(按键)以刻度方法绘制一条线 - 但是我需要慢慢画一条线,这样用户就可以看到它朝着末端移动.当一个键被按下时,会调用一些函数,我可以设置一些全局变量,根据这个变量我会在tick函数中执行线条绘制...

我想我可以在循环中使用moveTo/lineTo并相应地增加坐标.

解决这个问题的最佳方法是什么,我是否遗漏了某些东西,或者认为它完全错了？

我使用EaselJS在html5画布中检查了绘制线条但是他有静态坐标,他也不需要看到线条移动.

我期待着任何建议/更正,谢谢!

Answer 1

在画架中画一条线

看看我在jsfiddle制作的这个基本的蛇游戏.注意:您需要单击右下方的窗口以获得焦点,并使用箭头键来控制蛇.使用easeljs,您需要订阅使用DisplayObjects的模型来构建您的游戏环境.该的DisplayObject是所有UI内容的构建块.在这种情况下,我使用的是一个Shape对象,它是DisplayObject的子类,用于绘制矢量内容.您还需要熟悉easeljs中的Graphics类.每个形状都有一个图形属性,您可以在其上进行所有绘图api调用.

var line = new createjs.Shape();
line.graphics.setStrokeStyle(3);
line.graphics.beginStroke(color);
line.graphics.moveTo(startX, startY);
startY++;
line.graphics.lineTo(startX, startY);
line.graphics.endStroke();

实时更新舞台

为了实现线条移动,您需要收听Ticker对象的"tick"事件.在jsfiddle示例中,我将舞台作为侦听器和窗口范围函数添加,其中将绘制线条图.

createjs.Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", tick);

您还会注意到我已经在窗口中添加了一个onkeydown监听器来设置控制蛇方向的关键修改器.

window.onkeydown = function(e){
    color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
    switch(e.which){
        case 38:
            wPressed = false;
            ePressed = false;
            sPressed = false;
            nPressed = true;
            break;
        case 39:
            nPressed = false;
            sPressed = false;
            wPressed = false;
            ePressed = true;
            break;
        case 40:
            wPressed = false;
            ePressed = false;
            nPressed = false;
            sPressed = true;
            break;
        case 37:
            nPressed = false;
            sPressed = false;
            ePressed = false;
            wPressed = true;
            break;
    }
}

最后,在tick函数中,您将进行绘图调用并根据当前方向更新x/y位置.请记住,每个帧都会调用tick函数,这是基于使用此静态函数设置的当前每秒帧数.

function tick(){
    if(nPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startY--;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(ePressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startX++;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(wPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startX--;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }

    if(sPressed)
    {
        line.graphics.setStrokeStyle(3);
        line.graphics.beginStroke(color);
        line.graphics.moveTo(startX, startY);
        startY++;
        line.graphics.lineTo(startX, startY);
        line.graphics.endStroke();
    }
}