0

キャンバスを下から上に理解するのを助けるために、JavaScriptで非常に小さなプロジェクトに取り組んでいます。今のところ、HTML5ゲームの基本的な機能を理解できるように、フレームワークなどの使用は避けようとしています。

これは、尾がフェードするかなり基本的な「カーソルムーバー」です。それでおしまい。プレイヤーの入力に基づいて動き回る、1色のシェイプで、尾がフェードします。試してみることをお勧めします。実はかなりきれいです。

とにかく、カーソルは滑らかに見えるので、明らかに円にする方がいいと思います。しかし、そうするたびに、ブラウザはほぼ完全に私をロックします。少なくともある程度は明らかに機能しますが、冷凍ピーナッツバターを駆け抜けるカメよりも遅いです。

JSFiddleだけを含めることは想定されていませんが、コードが多く、全体の実行速度が遅くなっています。

問題は、描画関数にある可能性が最も高いです。

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   //this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

線はアプローチによってラベル付けされています。1は円に対応し、2は長方形に対応します。

プロジェクト全体は次のとおりです。http://jsfiddle.net/w4Rg3/3/

(JSが実行できるすべてのプロジェクトを確認した後)サークルを作成するのが非常に遅く、何か間違ったことをしている可能性があるとは信じがたいです。

4

2 に答える 2

1

みんな!問題を見つけました!それは私のゲームの構造や特に気難しいものとは何の関係もありません。ただのAPIの問題です!

問題は確かに最初の投稿の私の質問のコードサンプルにあります。

Game.draw = function() {
    for (var sn = 0; sn < this.strokes.length; sn++) {
        var s = this.strokes[sn];
/*1*/   this.context.beginPath();  /*THIS IS FIXED*/
/*1*/   this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
/*1*/   this.context.closePath();  /*THIS IS FIXED*/
        this.context.fillStyle = this.bgColor;
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
        this.context.fillStyle = s.getColor();
/*2*/   //this.context.fillRect(s.x, s.y, this.cursorWidth, this.cursorHeight);
/*1*/   this.context.fill();
    }
};

追加した行に「THISISFIXED」というコメントを付けるようにしました。以前は本当に本当に長い弧を描いて何度も描いていたと思いますが、誰が知っていますか?とにかく、問題は解決しました、そしてそれは美しく見えます。

于 2012-11-10T09:25:03.093 に答える
1

ほんの2、3の観察(ああ、いいえ!円を描くことは正方形と比較して「非効率的」ではなく、確かに遅いですが、それでもかなり速いです)残念ながら、あなたの問題はそれよりもはるかに深くなります。

ゲームの実装方法を再考する必要があるように思われます。それはあなたがそれをとても簡潔に置くように走ります、凍ったピーナッツバターを通してカメより遅いです。(へへ、ニース!)

これは、リクエストアニメーションフレームの設定方法と関係があると思いますが、ラップトップが溶けて魔法の青い煙を発することを恐れずに、デバッグにそれほど踏み込むことはできませんでした。

Key変数とkeyupとkeydownのイベントリスナーを追加するための2つの呼び出しを除いて、すべてのjsをコピーからトリミングしました。これは私に次のことを残しました:

<!DOCTYPE HTML>
<html>
<head>
<title>flowing</title>
<script>

var Key = 
{
    _pressed: {},

    SPACE: 32,
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,

    isDown: function(keyCode) {
        return this._pressed[keyCode];
    },

    onKeydown: function(event) {
        this._pressed[event.keyCode] = true;
        console.log(this._pressed[event.keyCode]);
    },

    onKeyup: function(event) {
        delete this._pressed[event.keyCode];
        console.log(this._pressed[event.keyCode]);
    }
};
window.addEventListener('keyup', Key.onKeyup, false);
window.addEventListener('keydown', Key.onKeydown, false);

</script>
<style>
</style>
</head>
 <!-- canvas gets inserted here by js -->
<body >
</body>    
</html>

爆弾だよ!

ご覧のとおり、このようなイベントリスナーをアタッチすると、ハンドラー内にいるときはいつでも、「this」キーワードは実際にはイベントをトリガーしたHTML要素に対応します。それで、それは正確にはどういう意味ですか?

その中の3つの機能は次のように拡張できます。

  1. window._pressed[keyCode]を返します。
  2. window._pressed [event.keyCode] = true;
  3. window._pressed[event.keyCode]を削除します。

唯一の問題は、ウィンドウオブジェクトに_pressed変数がないことです。変数Keyにはあります。

使用しているブラウザの開発ツールコンソールを開く必要があります。Chrome、FF、OperaではCtrl-Shift-I、IEではF12です。

これにより、このようなエラーが即座に強調表示されます。

氷山が見つからないかどうかを確認して、新しいラップトップを購入することを恐れずにテストを続けることができます。

[編集:]Game.drawの新しいコード

Game.draw = function() 
{
    for (var sn = 0; sn < this.strokes.length; sn++) 
    {
        var s = this.strokes[sn]; /*1*/
        this.context.beginPath();
        this.context.arc(s.x, s.y, this.cursorRadius, 0, 2 * Math.PI);
        this.context.fillStyle = s.getColor(); //.bgColor; /*2*/
        this.context.closePath();
        this.context.fill();
    }
};

円弧を描くにはパスが必要です。パスを適切に使用するには、パスの定義を開始したときと、パスの定義が終了したときに、canvas要素に通知する必要があります。ブラウザは「すべてのパスの母」で終わっていたと思いますが、これは当然、描画するのに永遠にかかりました。もちろん、あなたの道は非常に単純で、単純な円です。キャンバスのステートマシンが意図的に適切に更新されているため、円を描いても正方形を描いても、コードの応答性に違いはないようです。それがあなたの問題の根源であることを願っています。:)

于 2012-11-08T05:05:34.240 に答える