How do I fix 'Uncaught TypeError: Cannot read property 'call' of undefined' in Crafty.js?

Question

所以对于我们的项目，我和我的团队正在尝试编写游戏。游戏的objective是改变对方船的颜色。

例如：如果玩家 1 的船为红色，而玩家 2 的船为绿色，则玩家 1 击中玩家 2 的每颗子弹都会慢慢地将玩家 2 从红色变为绿色。这是借助位移位完成的，下文将对此进行说明。所以大部分时间我们遇到的都是Uncaught Type Error，我们找不到问题所在。此文件使用：https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js 和 http://craftyjs.com/release/0.4.2/crafty.js 作为帮助 运行 程序的依赖项。

$(document).ready(function() { 

Crafty.init(); 
Crafty.canvas(); 



Crafty.load(["player.png"], function() {
    //splice the spritemap
    Crafty.sprite(1, "player.png", 
    {
        ship: [0,0]
    });

    //start the main scene when loaded
    Crafty.scene("main");
});

    //player entity for player 1
   var player1 = Crafty.e("2D, Canvas, Controls, Collision, Color, ship, player")
        .attr({move: {left: false, right: false, up: false, down: false}, xspeed: 0, yspeed: 0, decay: 0.9, h: 50, w: 50, radius: 50, start_time: 0, x: Crafty.viewport.width / 2, y: Crafty.viewport.height / 2 })
        .color('red')
        .bind("keydown", function(e) {
            //on keydown, set the move booleans
            if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
                this.move.right = true;
            } else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
                this.move.left = true;
            } else if(e.keyCode === Crafty.keys.UP_ARROW) {
                this.move.up = true;
            } else if(e.keyCode === Crafty.keys.SPACE) {
                var d = new Date();
                this.start_time = d.getTime();
            }
        }).bind("keyup", function(e) {
            //on key up, set the move booleans to false
            if(e.keyCode === Crafty.keys.RIGHT_ARROW) {
                this.move.right = false;
            } else if(e.keyCode === Crafty.keys.LEFT_ARROW) {
                this.move.left = false;
            } else if(e.keyCode === Crafty.keys.UP_ARROW) {
                this.move.up = false;
            } else if(e.keyCode === Crafty.keys.SPACE) {
                var time = new Date().getTime();
                if((time - this.start_time) >= 5000)
                    var charge = 5;

                //else
                //var charge = (time - this.start_time)/1000;

                Crafty.e("2D, DOM, Color, bullet")
                    .attr({
                        x: this._x, 
                        y: this._y, 
                        w: 1.5, 
                        h: 1.5,

                        rotation: this._rotation, 
                        xspeed: 20 * Math.sin(this._rotation / 57.3), 
                        yspeed: 20 * Math.cos(this._rotation / 57.3),



                    })
                    .color('red')
                    .bind("enterframe", function() {    
                        this.x += this.xspeed;
                        this.y -= this.yspeed;

                        //destroy if it goes out of bounds
                        if(this._x > Crafty.viewport.width || this._x < 0 || this._y > Crafty.viewport.height || this._y < 0) {
                            this.destroy();
                        }
                    });
            }


        }).bind("enterframe", function() {
            if(this.move.right) this.rotation += 5;
            if(this.move.left) this.rotation -= 5;

            //acceleration and movement vector
            var vx = Math.sin(this._rotation * Math.PI / 180) * 0.3,
                vy = Math.cos(this._rotation * Math.PI / 180) * 0.3;

            //if the move up is true, increment the y/xspeeds
            if(this.move.up) {
                this.yspeed -= vy;
                this.xspeed += vx;
            } else {
                //if released, slow down the ship
                this.xspeed *= this.decay;
                this.yspeed *= this.decay;
            }

            //move the ship by the x and y speeds or movement vector
            this.x += this.xspeed;
            this.y += this.yspeed;

            //if ship goes out of bounds, put him back
            if(this._x > Crafty.viewport.width) {
                this.x = -64;
            }
            if(this._x < -64) {
                this.x =  Crafty.viewport.width;
            }
            if(this._y > Crafty.viewport.height) {
                this.y = -64;
            }
            if(this._y < -64) {
                this.y = Crafty.viewport.height;
            }

        }).collision()
        .onHit("bullet", function(e) {
        //basically the bullet is color A and hits ship B and changes the color to ship A
        //bullets are based on ship A 
        //red to green
            if(e.color() != 'red'){
                /*
            if(e.color() === "#FF0000" && this.start_color === "#00FF00") 
            {
                this.color = this.color + ("#010000" - "#000001") * e.radius;

                    //red to blue
            } else if(e.color === "#FF0000" && this.color === "#0000FF") 
            {
                this.color = this.color + ("#010000" - "#000001") * e.radius;

            }
            */
            //green to red
            if(e.color() === "#00FF00") 
            {
                this.color(this.color() + ("#010000" - "#000001") * e.radius);

            }
            /*
            //green to blue
            else if(e.color === "#00FF00" && this.color === "#0000FF") 
            {
                this.color = this.color + ("#010000" - "#000001") * e.radius;

            }
            */
            //blue to red
            else if(e.color() === "#0000FF") 
            {
                this.color(this.color() + ("#010000" - "#000001") * e.radius);
            }
            /*
            //blue to green
            else (e.color === "#0000FF" && this.color === "#00FF00") 
            { 
                this.color = this.color + ("#010000" - "#000001") * e.radius;
            }
            */
            if(this.color() === e.color()){
                   Crafty.scene("end");
            }

            this.xspeed = this.xspeed - .1*e.xspeed;
            this.yspeed = this.yspeed - .1*e.yspeed;
            e[0].obj.destroy();
        }

        }).onHit("player", function(e) {

                var diff = "#ff" - (this.color()>>4);
                this.color(this.color() + (.2*diff) << 4);
                if(e.color() === "green") {
                    this.color(this.color() - (.2*diff) << 2);
                }
                else {
                    this.color(this.color() - .2*diff);
                }


            this.xspeed = this.xspeed - e.xspeed;
            this.yspeed = this.yspeed - e.yspeed;
        });

});

编辑：我设法删除了评论和一些不相关的代码

Answer 1

我基本上通过重新读取 html 文件中的 main 并删除 $(document) 提示来修复错误。感谢你的帮助！