2

スキルセットを向上させるためだけに、キャンバスでゲームを構築しようとしています。アイデアは、プレイヤーが制御する 2 つのオブジェクトが画面上にあるということです。プレーヤーでゲームを初期化し、プレーヤーの入力をリッスンするゲーム ループを開始します。

現時点では、キャンバス上に選手を描くことができます (この段階では単に長方形です)。しかし、ゲーム ループの各「ティック」でこれらのオブジェクトを移動するのに問題があります。現時点では、長方形は前のフレームの長方形の上に描画されています。キャンバスをクリアして、各ティックで「プレーヤー」を再描画したいと思います。

これについてどうすればいいですか？そして、それは最善の方法ですか、それともより良いアプローチがありますか?

コード サンプルを投稿したいと思いますが、私の JavaScript ファイルは非常に冗長であり、上記の説明で十分であることを願っています。

4

3 に答える 3

0

これは、基本的なゲーム ループを含む優れたチュートリアルです。背景、モンスター、プレイヤーをレンダリングします。

http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/

    // The main game loop
    var main = function () {
       var now = Date.now();
       var delta = now - then;

       update(delta / 1000);
       render();

       then = now;
    };

update でオブジェクトの位置を更新してから、render を呼び出します。

于 2013-07-27T23:38:57.347 に答える
0

申し訳ありませんが、別のユーザーが提案したように、シーン内の要素ごとに個別のキャンバスを用意するのはひどい考えです. そして、それはとにかくあなたのスキルセットを改善しません.

はい、あるフレームから別のフレームに変換されないオブジェクトであっても、1 つのキャンバスですべてを再描画する必要があります。キャンバスをクリアするのは簡単です。context.clearRect(0, 0, canvas.width, canvas.height)またはを使用しfillRectて背景を色でペイントするか、キャンバス全体に画像を描画して静的な背景を作成します。キャンバス全体を覆うものであれば何でもかまいません。

したがって、オブジェクトを更新し、キャンバスをクリアしてから、すべてを再描画します。2 つの rect しかなく、変更されるのはそれらの位置だけなので、これは非常に簡単に実装できます。

より複雑なものを作成し始めると、よりオブジェクト指向のアプローチが必要になる場合があります。つまり、シーン内の各オブジェクトは、次のように「自分自身を描画する方法を知る」必要があります。

var player1 = new PlayerRect(position);
player1.draw(context);

このようにして、ループ内の位置を次のように更新します。

player.position.x += 10;

何百ものオブジェクトになってしまった場合、これらのオブジェクトを追加/削除できるリストと、描画メソッドを呼び出すループを作成するだけで済みます。

つまり、それが私のやり方です。

于 2013-07-28T19:54:39.180 に答える