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并相应地增加坐标。

解决这个问题的最佳方式是什么，我是否遗漏了某些内容，或者认为这完全错了？

我检查了Drawing a Line in a html5 canvas using EaselJS，但他有静态坐标，他也不需要看到线也在移动。

我期待任何建议/更正，谢谢！

Answer 1

在画架中画一条线

查看我在jsfiddle中创建的rudimentary snake game。 注意：您需要单击右下方窗口以获得焦点并使用箭头键来控制蛇。使用easeljs，您需要订阅使用DisplayObjects构建的模型你的游戏环境。 DisplayObject 是所有UI内容的构建块。在这种情况下，我使用的是 Shape 对象，它是DisplayObject的子类，用于绘制矢量内容。您还需要熟悉画架中的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;
    }
}

最后，在勾选功能中，您将进行绘图调用并根据当前方向更新x / y位置。请记住，每个帧都会调用tick函数，具体取决于您使用this static function设置的当前每秒帧数。

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

使用Ticker的easylJS行

1 个答案:

在画架中画一条线

实时更新舞台