Kinetic JS画布游戏（分层问题）（Javascript）答案

【问题标题】：Kinetic JS canvas game (Layering issue)(Javascript)Kinetic JS画布游戏（分层问题）（Javascript）
【发布时间】：2014-02-28 03:48:40
【问题描述】：

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

这是我的小提琴： http://jsfiddle.net/2WRwY/7/

我的问题：

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

（尝试使用 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();

有什么建议吗？

【问题讨论】：

标签： javascript jquery html html5-canvas kineticjs

【解决方案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();行）。

【讨论】：