2

シンプルなゲームを作成していますが、データをデバッグするための指示が必要です。HTML ファイルに div があり、ユーザーの操作によって一部の変数が変更されたときに変更されるデータを表示してもらいます。

たとえばvar xPosition、私は を取得しました。データを HTML の div に送信したいので、 の現在の状態を確認できますxPosition。

この機能の作成をどこから始めればよいか本当にわかりません。

私の質問:

  1. このクラス内でイベントを作成し、すべての変更データを表示する要素を登録することは可能ですか?
  2. そのようなことのためにいくつかのタイマーを使用する必要がありますか?

これが「クラス」です。

(function ($) {
    $.Player = function (element) {
        this.element = (element instanceof $) ? element : $(element);
        this.movmentSpeed = 10;
        this.size = $(element).width();
        this.xPos = 0;
        this.yPos = 0;
    };


    $.Player.prototype = {
        //register events
        InitEvents: function () {
            var that = this;
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight(400);
                } else if (key == 37) {
                    that.moveLeft();
                }
            });

            this.element.css({
                left: this.xPos
            });
        },

        //movment functions
        moveRight: function (worldWidth) {
            if ((this.xPos + this.size) <= worldWidth) {
                this.xPos += this.movmentSpeed;
                this.element.css("left", '+=' + this.movmentSpeed);
            }
        },
        moveLeft: function () {
            if (this.xPos > 0) {
                this.xPos -= this.movmentSpeed;
                this.element.css("left", '-=' + this.movmentSpeed);
            }
        }
    };

} (jQuery));

ここにHTML：

<div id="player">
<div id="debugData"> <div>
<script>
var player = new $.Player($("#player"));
        player.InitEvents();

</script>

（私の英語でごめんなさい）

4

1 に答える 1

1

jsFiddle デモ

クラス内に内部関数があると役立つと思います。たぶん、 を実行してログをオンにする設定をしてplayer.logging = true;、デフォルトを false に設定することもできます。

プロトタイプに、 のパブリック プロトタイプ変数logging = falseとプロトタイプ関数を追加するだけlog()です。

使用できる内部関数は、次のような単純なものです。

    logging : false, // our default

    log : function (str) {
        if (this.logging) {
            $('#debugData').html(str);
        }
    },

このようにして、(またはログに記録したいもの) をコード内に残すことができ、クラスをインスタンス化するときにクラスを削除することで、そのコードを元に戻すまで表示されません。log(this.xPos);player.logging = true;

于 2013-01-21T23:07:57.320 に答える