キャンバスを下から上に理解するのを助けるために、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が実行できるすべてのプロジェクトを確認した後)サークルを作成するのが非常に遅く、何か間違ったことをしている可能性があるとは信じがたいです。