javascript 停止移动眼睛在slither.io克隆与相位器3

ecbunoof  于 2023-04-10  发布在  Java
关注(0)|答案(1)|浏览(145)

我正在使用这个github https://github.com/knagaitsev/slither.io-clone
这里机器人的眼睛一圈又一圈地移动。我想完全移动这个商店。如何解决这个问题?
我尝试改变眼睛图片,也尝试删除一只眼睛(左眼)其删除,但仍然眼睛旋转round.and有2个eye js.一个是eyepair.js和第二个是eyepair.js
这是eyepair.js

EyePair = function(game, head, scale) {
    this.game = game;
    this.head = head;
    this.scale = scale;
    this.eyes = [];

    this.debug = false;

    //create two eyes
    var offset = this.getOffset();
    this.leftEye = new Eye(this.game, this.head, this.scale);
    this.leftEye.updateConstraints([-offset.x, -offset.y]);
    this.eyes.push(this.leftEye);

    this.rightEye = new Eye(this.game, this.head, this.scale);
    this.rightEye.updateConstraints([offset.x, -offset.y]);
    this.eyes.push(this.rightEye);
}

EyePair.prototype = {
    /**
     * Get the offset that eyes should be from the head (based on scale)
     * @return {Object} offset distance with properties x and y
     */
    getOffset: function() {
        var xDim = this.head.width*0.25;
        var yDim = this.head.width*.125;
        return {x: xDim, y: yDim};
    },
    /**
     * Set the scale of the eyes
     * @param  {Number} scale new scale
     */
    setScale: function(scale) {
        this.leftEye.setScale(scale);
        this.rightEye.setScale(scale);
        //update constraints to place them at the right offset
        var offset = this.getOffset();
        this.leftEye.updateConstraints([-offset.x, -offset.y]);
        this.rightEye.updateConstraints([offset.x, -offset.y]);
    },
    /**
     * Call from snake update loop
     */
    update: function() {
        for (var i = 0 ; i < this.eyes.length ; i++) {
            this.eyes[i].update();
        }
    },
    /**
     * Destroy this eye pair
     */
    destroy: function() {
        this.leftEye.destroy();
        this.rightEye.destroy();
    }
};

这是eye.js

/**
 * The black and white parts of a snake eye, with constraints
 * @param  {Phaser.Game} game  game object
 * @param  {Phaser.Sprite} head  snake head sprite
 * @param  {Number} scale scale of the new eye
 */
Eye = function(game, head, scale) {
    this.game = game;
    this.head = head;
    this.scale = scale;
    this.eyeGroup = this.game.add.group();
    this.collisionGroup = this.game.physics.p2.createCollisionGroup();
    this.debug = false;

    //constraints that will hold the circles in place
    //the lock will hold the white circle on the head, and the distance
    //constraint (dist) will keep the black circle within the white one
    this.lock = null;
    this.dist = null;

    //initialize the circle sprites
    this.whiteCircle = this.game.add.sprite(
        this.head.body.x, this.head.body.y, "eye-white"
    );
    this.whiteCircle = this.initCircle(this.whiteCircle);

    this.blackCircle = this.game.add.sprite(
        this.whiteCircle.body.x, this.whiteCircle.body.y, "eye-black"
    );
    this.blackCircle = this.initCircle(this.blackCircle);
    this.blackCircle.body.mass = 0.01;


}

Eye.prototype = {
    /**
     * Initialize a circle, whether it is the black or white one
     * @param  {Phaser.Sprite} circle sprite to initialize
     * @return {Phaser.Sprite}        initialized circle
     */
    initCircle: function(circle) {
        circle.scale.setTo(this.scale);
        this.game.physics.p2.enable(circle, this.debug);
        circle.body.clearShapes();
        //give the circle a circular physics body
        circle.body.addCircle(circle.width*0.5);
        circle.body.setCollisionGroup(this.collisionGroup);
        circle.body.collides([]);
        this.eyeGroup.add(circle);
        return circle;
    },
    /**
     * Ensure that the circles of the eye are constrained to the head
     * @param  {Array} offset Array in the form [x,y] of offset from the snake head
     */
    updateConstraints: function(offset) {
        //change where the lock constraint of the white circle
        //is if it already exists
        if (this.lock) {
            this.lock.localOffsetB = [
                this.game.physics.p2.pxmi(offset[0]),
                this.game.physics.p2.pxmi(Math.abs(offset[1]))
            ];
        }
        //create a lock constraint if it doesn't already exist
        else {
            this.lock = this.game.physics.p2.createLockConstraint(
                this.whiteCircle.body, this.head.body, offset, 0
            );
        }

        //change the distance of the distance constraint for
        //the black circle if it exists already
        if (this.dist) {
            this.dist.distance = this.game.physics.p2.pxm(this.whiteCircle.width*0.25);
        }
        //create a distance constraint if it doesn't exist already
        else {
            this.dist = this.game.physics.p2.createDistanceConstraint(
                this.blackCircle.body, this.whiteCircle.body, this.whiteCircle.width*0.25
            );
        }
    },
    /**
     * Set the eye scale
     * @param  {Number} scale new scale
     */
    setScale: function(scale) {
        this.scale = scale;
        for (var i = 0 ; i < this.eyeGroup.children.length ; i++) {
            var circle = this.eyeGroup.children[i];
            circle.scale.setTo(this.scale);
            //change the radii of the circle bodies using pure p2 physics
            circle.body.data.shapes[0].radius = this.game.physics.p2.pxm(circle.width*0.5);
        }

    },
    /**
     * Call from the update loop
     */
    update: function() {
        var mousePosX = this.game.input.activePointer.worldX;
        var mousePosY = this.game.input.activePointer.worldY;
        var headX = this.head.body.x;
        var headY = this.head.body.y;
        var angle = Math.atan2(mousePosY-headY, mousePosX-headX);
        var force = 300;
        //move the black circle of the eye towards the mouse
        this.blackCircle.body.moveRight(force*Math.cos(angle));
        this.blackCircle.body.moveDown(force*Math.sin(angle));
    },
    /**
     * Destroy this eye
     */
    destroy: function() {
        this.whiteCircle.destroy();
        this.blackCircle.destroy();
        this.game.physics.p2.removeConstraint(this.lock);
        this.game.physics.p2.removeConstraint(this.dist);
    }
};
vlf7wbxs

vlf7wbxs1#

这里有几点,首先也是最重要的一点,这个游戏是建立在相位器2,而不是相位器3。
简单的解决方案是从眼睛中删除整个物理部分并重写eye.js文件。您可以根据需要放置黑眼圈部分。

文件eye.js

  • 我删除了注解,使代码更加简洁。*
Eye = function(game, head, scale) {
    this.game = game;
    this.head = head;
    this.scale = scale;
    this.offset = [0,0];

    this.whiteCircle = this.game.add.sprite(
        this.head.body.x , this.head.body.y, "eye-white"
    );
    this.whiteCircle = this.initCircle(this.whiteCircle);

    this.blackCircle = this.game.add.sprite(
        this.whiteCircle.x , this.whiteCircle.y, "eye-black"
    );
    this.blackCircle = this.initCircle(this.blackCircle);
}

Eye.prototype = {
    initCircle: function(circle) {
        circle.scale.setTo(this.scale);
        return circle;
    },
    setScale: function(scale) {
        this.scale = scale;
        for (var i = 0 ; i < this.eyeGroup.children.length ; i++) {
            var circle = this.eyeGroup.children[i];
            circle.scale.setTo(this.scale);
        }
    },
    updateConstraints: function(offset){
        this.offset = offset;
    },
    update: function() {
        let halfWidth = (this.whiteCircle.width * this.scale) / 2;
        this.whiteCircle.x = this.head.body.x + this.offset[0];
        this.whiteCircle.y = this.head.body.y + this.offset[1];
        this.blackCircle.x = this.whiteCircle.x + halfWidth;
        this.blackCircle.y = this.whiteCircle.y + halfWidth;
    },
    destroy: function() {
        this.whiteCircle.destroy();
        this.blackCircle.destroy();
    }
};

相关问题