Javascript 小精灵重新编织子弹_Javascript_Html_Pixi.js

Javascript 小精灵重新编织子弹

javascript html

Javascript 小精灵重新编织子弹,javascript,html,pixi.js,Javascript,Html,Pixi.js,我正在使用html5、画布、javascript-pixijs构建一个射击游戏。下面是项目符号代码。它将覆盖一个子弹-它被限制在屏幕上最多只允许20个子弹，以节省资源子弹然后在重置功能中循环使用。总的来说，它工作得很好。但现在的问题是——我有两种子弹类型——标准型和导弹型。基本上，当子弹被重置时，我需要确保它的蒙皮正确。我曾尝试清空交叉部分阵列并重建它，但它几乎就像克隆了子弹一样，我最终得到了更多的对象 var TestProjectileVector = (function (_super)

我正在使用html5、画布、javascript-pixijs构建一个射击游戏。下面是项目符号代码。它将覆盖一个子弹-它被限制在屏幕上最多只允许20个子弹，以节省资源

子弹然后在重置功能中循环使用。总的来说，它工作得很好。但现在的问题是——我有两种子弹类型——标准型和导弹型。基本上，当子弹被重置时，我需要确保它的蒙皮正确。我曾尝试清空交叉部分阵列并重建它，但它几乎就像克隆了子弹一样，我最终得到了更多的对象

var TestProjectileVector = (function (_super) {
    __extends(TestProjectileVector, _super);
    function TestProjectileVector(parentScene, x, y, z, localScale, velocity, gravity, vector, projectiletype) {
        if (typeof x === "undefined") { x = 0; }
        if (typeof y === "undefined") { y = 0; }
        if (typeof z === "undefined") { z = 0; }
        if (typeof localScale === "undefined") { localScale = 1; }
        if (typeof velocity === "undefined") { velocity = 100; }
        if (typeof gravity === "undefined") { gravity = 0; }
        if (typeof vector === "undefined") { vector = MathK.Vector3.zero; }
        if (typeof projectiletype === "undefined") { projectiletype = "bullet"; }
        _super.call(this, parentScene, x, y, z, .13);
        this.verticalAngle = 0;
        this.horizontalAngle = 0;
        this.drag = .99;
        this.isDead = false;
        this.isRebounding = false;
        this.doCollisions = true;
        this.numberOfCrossSections = 6;
        this.crossSections = [];
        this.crossSectionSpacing = 7;
        this.parentScene = parentScene;

        console.log("BUILD A BULLET");

        this.bulletTip = "img/bullet-tip.png";
        this.bulletBase = "img/bullet-end.png";

        if(projectiletype == "grenade"){
            this.bulletTip = "img/bullet-grenade-tip.png";
            this.bulletBase = "img/bullet-grenade-end.png";
        }

        this.spr = PIXI.Sprite.fromImage(this.bulletTip);
        this.spr.anchor.x = this.spr.anchor.y = .5;
        this.gravity = gravity;
        this.velocity = velocity;
        this.alpha = 0;
        this.xVel = this.velocity * vector.x;
        this.zVel = this.velocity * vector.z;
        this.yVel = this.velocity * vector.y;
        var tipSection0 = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
        tipSection0.addChild(this.spr);
        this.parentScene.addPerspectiveObject(tipSection0);
        this.crossSections.push(tipSection0);
        var tipSection = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
        var sprTip = PIXI.Sprite.fromImage(this.bulletTip);
        sprTip.anchor.x = sprTip.anchor.y = .5;
        tipSection.addChild(sprTip);
        this.parentScene.addPerspectiveObject(tipSection);
        this.crossSections.push(tipSection);
        for(var i = 0; i < this.numberOfCrossSections; i++) {
            var crossSection = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
            this.spr = PIXI.Sprite.fromImage(this.bulletBase);
            this.spr.anchor.x = this.spr.anchor.y = .5;
            crossSection.addChild(this.spr);
            this.parentScene.addPerspectiveObject(crossSection);
            this.crossSections.push(crossSection);
        }
    }
    TestProjectileVector.prototype.getPosition = function () {
        return new MathK.Vector3(this.xPos, this.yPos, this.zPos);
    };
    TestProjectileVector.prototype.getNextPosition = function () {
        return new MathK.Vector3(this.xPos + this.xVel * 3, this.yPos + this.yVel * 3, this.zPos + this.zVel * 3);
    };
    TestProjectileVector.prototype.reset = function (x, y, z, localScale, velocity, gravity, vector, projectiletype) {
        if (typeof x === "undefined") { x = 0; }
        if (typeof y === "undefined") { y = 0; }
        if (typeof z === "undefined") { z = 0; }
        if (typeof localScale === "undefined") { localScale = 1; }
        if (typeof velocity === "undefined") { velocity = 100; }
        if (typeof gravity === "undefined") { gravity = 0; }
        if (typeof vector === "undefined") { vector = MathK.Vector3.zero; }
        this.isDead = false;
        this.isRebounding = false;
        this.xPos = x;
        this.yPos = y;
        this.zPos = z;
        this.velocity = velocity;
        this.gravity = gravity;
        this.xVel = this.velocity * vector.x;
        this.zVel = this.velocity * vector.z;
        this.yVel = this.velocity * vector.y;

    };
    TestProjectileVector.prototype.positionCrossSections = function () {
        var velVectorMagnitude = Math.sqrt(this.xVel * this.xVel + this.yVel * this.yVel + this.zVel * this.zVel);
        var offsetVelX = this.isRebounding ? this.reboundingVelX : this.xVel / velVectorMagnitude;
        var offsetVelZ = this.isRebounding ? this.reboundingVelZ : this.zVel / velVectorMagnitude;
        for(var i = 1; i <= this.crossSections.length; i++) {
            var crossSection = this.crossSections[i - 1];
            crossSection.xPos = this.xPos + this.crossSectionSpacing * i * -(offsetVelX);
            crossSection.yPos = this.yPos - this.crossSectionSpacing * i * (this.yVel / velVectorMagnitude);
            crossSection.zPos = this.zPos + this.crossSectionSpacing * i * (-Math.abs(offsetVelZ));
            if(crossSection.yPos > 0) {
                crossSection.yPos = 0;
            }
        }
    };
    TestProjectileVector.prototype.rebound = function () {
        if(!this.isRebounding) {
            this.isRebounding = true;
            var velVectorMagnitude = Math.sqrt(this.xVel * this.xVel + this.yVel * this.yVel + this.zVel * this.zVel);
            this.reboundingVelX = this.xVel / velVectorMagnitude;
            this.reboundingVelZ = this.zVel / velVectorMagnitude;
        }
    };
    TestProjectileVector.prototype.die = function () {
        if(!this.isDead) {
            this.isDead = true;
        }
    };
    TestProjectileVector.prototype.hitBarrier = function () {
        this.xVel *= -.1;
        this.zVel *= -.1;
        this.rebound();
        this.die();
    };
    TestProjectileVector.prototype.update = function () {
        _super.prototype.update.call(this);
        if(this.zPos > 2000) {
            this.zPos = 2000;
            this.hitBarrier();
        }
        this.yVel += this.gravity;
        this.xPos += this.xVel;
        this.yPos += this.yVel;
        this.zPos += this.zVel;
        if(this.yPos > 0) {
            this.yPos = 0;
            if(!this.isRebounding && this.xPos < 1500) {
                this.yVel *= -.5;
                this.xVel *= .5;
                this.zVel *= .5;
            } else {
                this.yVel *= -.3;
                this.xVel *= -.1;
                this.zVel *= -.1;
                this.rebound();
            }
            if(Math.abs(this.yVel) < .001) {
                this.die();
                return;
            }
        }
        this.positionCrossSections();
        this.velocity *= this.drag;
        this.positionCrossSections();
    };
    return TestProjectileVector;
})(perspective.EditablePerspectiveObject);

这是一段抛射代码，它处理一个构造函数来创建子弹，这是一个重置函数，它将x、y、z坐标放回枪尖，准备再次回收子弹

我还没有看到任何可以用来制造无限多的子弹的东西——因此它们被正确地剥皮了——但是可以摧毁旧的子弹。所以保留最后20颗子弹。我尝试在重置时重新扭结项目符号-这将是理想的，但我无法在构造函数中对代码进行反向工程以正确执行此操作

var TestProjectileVector = (function (_super) {
    __extends(TestProjectileVector, _super);
    function TestProjectileVector(parentScene, x, y, z, localScale, velocity, gravity, vector, projectiletype) {
        if (typeof x === "undefined") { x = 0; }
        if (typeof y === "undefined") { y = 0; }
        if (typeof z === "undefined") { z = 0; }
        if (typeof localScale === "undefined") { localScale = 1; }
        if (typeof velocity === "undefined") { velocity = 100; }
        if (typeof gravity === "undefined") { gravity = 0; }
        if (typeof vector === "undefined") { vector = MathK.Vector3.zero; }
        if (typeof projectiletype === "undefined") { projectiletype = "bullet"; }
        _super.call(this, parentScene, x, y, z, .13);
        this.verticalAngle = 0;
        this.horizontalAngle = 0;
        this.drag = .99;
        this.isDead = false;
        this.isRebounding = false;
        this.doCollisions = true;
        this.numberOfCrossSections = 6;
        this.crossSections = [];
        this.crossSectionSpacing = 7;
        this.parentScene = parentScene;

        console.log("BUILD A BULLET");

        this.bulletTip = "img/bullet-tip.png";
        this.bulletBase = "img/bullet-end.png";

        if(projectiletype == "grenade"){
            this.bulletTip = "img/bullet-grenade-tip.png";
            this.bulletBase = "img/bullet-grenade-end.png";
        }

        this.spr = PIXI.Sprite.fromImage(this.bulletTip);
        this.spr.anchor.x = this.spr.anchor.y = .5;
        this.gravity = gravity;
        this.velocity = velocity;
        this.alpha = 0;
        this.xVel = this.velocity * vector.x;
        this.zVel = this.velocity * vector.z;
        this.yVel = this.velocity * vector.y;
        var tipSection0 = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
        tipSection0.addChild(this.spr);
        this.parentScene.addPerspectiveObject(tipSection0);
        this.crossSections.push(tipSection0);
        var tipSection = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
        var sprTip = PIXI.Sprite.fromImage(this.bulletTip);
        sprTip.anchor.x = sprTip.anchor.y = .5;
        tipSection.addChild(sprTip);
        this.parentScene.addPerspectiveObject(tipSection);
        this.crossSections.push(tipSection);
        for(var i = 0; i < this.numberOfCrossSections; i++) {
            var crossSection = new perspective.EditablePerspectiveObject(parentScene, x, y, z, .16);
            this.spr = PIXI.Sprite.fromImage(this.bulletBase);
            this.spr.anchor.x = this.spr.anchor.y = .5;
            crossSection.addChild(this.spr);
            this.parentScene.addPerspectiveObject(crossSection);
            this.crossSections.push(crossSection);
        }
    }
    TestProjectileVector.prototype.getPosition = function () {
        return new MathK.Vector3(this.xPos, this.yPos, this.zPos);
    };
    TestProjectileVector.prototype.getNextPosition = function () {
        return new MathK.Vector3(this.xPos + this.xVel * 3, this.yPos + this.yVel * 3, this.zPos + this.zVel * 3);
    }; 

    TestProjectileVector.prototype.reset = function (x, y, z, localScale, velocity, gravity, vector, projectiletype) {
        if (typeof x === "undefined") { x = 0; }
        if (typeof y === "undefined") { y = 0; }
        if (typeof z === "undefined") { z = 0; }
        if (typeof localScale === "undefined") { localScale = 1; }
        if (typeof velocity === "undefined") { velocity = 100; }
        if (typeof gravity === "undefined") { gravity = 0; }
        if (typeof vector === "undefined") { vector = MathK.Vector3.zero; }
        this.isDead = false;
        this.isRebounding = false;
        this.xPos = x;
        this.yPos = y;
        this.zPos = z;
        this.velocity = velocity;
        this.gravity = gravity;
        this.xVel = this.velocity * vector.x;
        this.zVel = this.velocity * vector.z;
        this.yVel = this.velocity * vector.y;

    };
    TestProjectileVector.prototype.positionCrossSections = function () {
        var velVectorMagnitude = Math.sqrt(this.xVel * this.xVel + this.yVel * this.yVel + this.zVel * this.zVel);
        var offsetVelX = this.isRebounding ? this.reboundingVelX : this.xVel / velVectorMagnitude;
        var offsetVelZ = this.isRebounding ? this.reboundingVelZ : this.zVel / velVectorMagnitude;
        for(var i = 1; i <= this.crossSections.length; i++) {
            var crossSection = this.crossSections[i - 1];
            crossSection.xPos = this.xPos + this.crossSectionSpacing * i * -(offsetVelX);
            crossSection.yPos = this.yPos - this.crossSectionSpacing * i * (this.yVel / velVectorMagnitude);
            crossSection.zPos = this.zPos + this.crossSectionSpacing * i * (-Math.abs(offsetVelZ));
            if(crossSection.yPos > 0) {
                crossSection.yPos = 0;
            }
        }
    };
    TestProjectileVector.prototype.rebound = function () {
        if(!this.isRebounding) {
            this.isRebounding = true;
            var velVectorMagnitude = Math.sqrt(this.xVel * this.xVel + this.yVel * this.yVel + this.zVel * this.zVel);
            this.reboundingVelX = this.xVel / velVectorMagnitude;
            this.reboundingVelZ = this.zVel / velVectorMagnitude;
        }
    };
    TestProjectileVector.prototype.die = function () {
        if(!this.isDead) {
            this.isDead = true;

            /*
            var that = this;
            setTimeout(function(){
                that.zPos = -999;
            }, 12000);*/
        }
    };
    TestProjectileVector.prototype.hitBarrier = function () {
        this.xVel *= -.1;
        this.zVel *= -.1;
        this.rebound();
        this.die();
    };
    TestProjectileVector.prototype.update = function () {
        _super.prototype.update.call(this);
        if(this.zPos > 2000) {
            this.zPos = 2000;
            this.hitBarrier();
        }
        this.yVel += this.gravity;
        this.xPos += this.xVel;
        this.yPos += this.yVel;
        this.zPos += this.zVel;
        if(this.yPos > 0) {
            this.yPos = 0;
            if(!this.isRebounding && this.xPos < 1500) {
                this.yVel *= -.5;
                this.xVel *= .5;
                this.zVel *= .5;
            } else {
                this.yVel *= -.3;
                this.xVel *= -.1;
                this.zVel *= -.1;
                this.rebound();
            }
            if(Math.abs(this.yVel) < .001) {
                this.die();
                return;
            }
        }
        this.positionCrossSections();
        this.velocity *= this.drag;
        this.positionCrossSections();
    };
    return TestProjectileVector;
})(perspective.EditablePerspectiveObject);

我设法解决了这个问题——通过拾取当前横截面的长度——然后将它们从阵列和透视图中移除

然后重新应用纹理

//__remove last skins
var lastBulletSpriteObjs = this.crossSections;
if(lastBulletSpriteObjs.length > 0){
    console.log("lastBulletSpriteObjs", lastBulletSpriteObjs);
    console.log("lastBulletSpriteObjs.length", lastBulletSpriteObjs.length);

    for(var i = 0; i < lastBulletSpriteObjs.length; i++) {
        this.parentScene.removePerspectiveObject(lastBulletSpriteObjs[i]);
    }
}

this.crossSections = [];//nulify the crossSections array

如果有一种方法可以摧毁已经存在10秒钟的子弹呢。如何从视图中删除项目符号？我尝试了很多方法-但我没有找到一种方法来销毁预先存在的项目符号对象或从阶段中删除纹理我尝试了使用当前的横截面数组-循环通过它，然后尝试使用此找到的函数-var从透视图中删除这些元素lastBulletSpriteObjs=this.crossSections；forvar i=0；i

[html]相关文章推荐

随机文章推荐