Question

我正在尝试重新创建游戏http://www.sinuousgame.com/并研究html5 canvas和kineticJS。

我的问题：

小提琴演奏者的尾部似乎没有缩回。
红色球对象应出现在玩家对象上。

（尝试使用layer.removeChildren（）运行小提琴;没有它。）

现在，我评论过“layer.removeChildren（）;”在小提琴..（基本上导致我的问题）

这是我的html：

<!DOCTYPE html>
<html>
    <head>
        <title>Collision Detection-player</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <div id="container" style="width: auto; height: auto; background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script src="../js/main_kinetic_combined.js"></script>
    </body>
</html>

这是我的javascript：

//The working player code
var LimitedArray = function(upperLimit) {
    var storage = [];

    // default limit on length if none/invalid supplied;
    upperLimit = +upperLimit > 0 ? upperLimit : 100;

    this.push = function(item) {
        storage.push(item);
        if (storage.length > upperLimit) {
            storage.shift();
        }
        return storage.length;
    };

    this.get = function(flag) {
        return storage[flag];
    };

    this.iterateItems = function(iterator) {
        var flag, l = storage.length;
        if (typeof iterator !== 'function') {
            return;
        }
        for (flag = 0; flag < l; flag++) {
            iterator(storage[flag]);
        }
    };
};

    var tail = new LimitedArray(50);

    var flag = 0, jincr = 0;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        listening: true
    });
    var layer = new Kinetic.Layer({
        listening: true
    });
    stage.add(layer);
    var player = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 6,
        fill: 'cyan',
        stroke: 'black',
        draggable: true
    });

    layer.add(player);

    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        <!--layer.removeChildren();  -->
        layer.add(player);
        player.setPosition(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        };

        tail.push(obj);
        var arr = [];
        tail.iterateItems(function(p) {
            arr.push(p.x, p.y);
        });
        var line = new Kinetic.Line({
            points: arr,
            stroke: 'white',
            strokeWidth: 2,
            lineCap: 'round',
            lineJoin: 'round'
        });
        layer.add(line);
//        layer.draw();
    });

    var x = 0;
    var y = 0;
    var noOfEnemies = 150;
    var enemyArmada = new Array();

    createEnemy();

    function createEnemy() {
        for (var i = 0; i < noOfEnemies; i++) {
            var enemy = new Kinetic.Circle({
                x: Math.random() * window.innerWidth,
                y: Math.random() * window.innerHeight,
                radius: 4.5 + 1.5 * Math.random(),
                fill: 'red',
                stroke: 'black',
            });
            enemy.speedX = enemy.speedY = (0.3 + Math.random() * 50);
            enemyArmada.push(enemy);
            layer.add(enemy);
        }
    }

    var anim = new Kinetic.Animation(function(frame) {
        for (var i = 0; i < noOfEnemies; i++) {
            var e = enemyArmada[i];
            e.position({
                x: e.position().x - e.speedX * frame.timeDiff / 500,
                y: e.position().y + e.speedY * frame.timeDiff / 500
            });
            if (e.position().y < 0 || e.position().x < 0) {
                e.position({
                    x: (Math.random() * (window.innerWidth + 600)),
                    y: -(Math.random() * window.innerHeight)
                });
            }
        }
    }, layer);
    anim.start();

有什么建议吗？

Answer 1

问题在于，在你添加敌人之后，你又将玩家和线条添加到了图层，这样他们就可以登顶了。此外，在每次鼠标移动时，您都会一遍又一遍地创建该行。因此，您应该只更新线点（并且根本不需要layer.removeChildren();行），如下所示：

var line = new Kinetic.Line({
            points: [],
            stroke: 'white',
            strokeWidth: 2,
            lineCap: 'round',
            lineJoin: 'round'
        });
layer.add(line);
layer.add(player);

// move the circle with the mouse
stage.getContent().addEventListener('mousemove', function() {
    player.position(stage.getPointerPosition());
    var obj = {
        x: stage.getPointerPosition().x,
        y: stage.getPointerPosition().y
    };

    tail.push(obj);
    var arr = [];
    tail.iterateItems(function(p) {
        arr.push(p.x, p.y);
    });
    line.points(arr);
 });

请参阅小提琴：http://jsfiddle.net/Kunstmord/p9fnq/2/ 这样，您只需创建一次该行。这似乎也解决了不消失的踪迹。

另外，请注意： 1）使用position而不是setPosition和getPosition（参见KineticJS 5.0 docs） 2）添加不会在Javascript（layer.removeChildren();行）中注释掉一行。

Kinetic JS帆布游戏（分层问题）（Javascript）

1 个答案: