次の JS ファイルがあります。これには、HTML5 キャンバスと JavaScript を使用して作成しているブラウザー ベースのゲームの最初のレベルに必要な要素を描画するために使用している関数が含まれています。
* This function draws the elements for level 1. */
function drawLevelOneElements(){
/*First, clear the canvas */
context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height);
/*This line clears all of the elements that were previously drawn on the canvas. */
/*Then redraw the game elements */
drawGameElements();
/*Create the four description areas, and place them near the bottom of the canvas */
/*Create boxes with rounded corners for the description areas */
CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
if(typeof stroke == "undefined" ){
stroke = true;
}
if(typeof radius === "undefined"){
radius = 5;
}
this.beginPath();
this.moveTo(x + radius, y);
this.lineTo(x + width - radius, y);
this.quadraticCurveTo(x + width, y, x + width, y + radius);
this.lineTo(x + width, y + height - radius);
this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
this.lineTo(x + radius, y + height);
this.quadraticCurveTo(x, y + height, x, y + height - radius);
this.lineTo(x, y + radius);
this.quadraticCurveTo(x, y, x + radius, y);
this.closePath();
if(stroke){
context.stroke();
}
}
context.drawDescriptionArea(70, 400, 120, 70);
context.font = '25pt Calibri';
context.strokeText('Asset', 90, 440);
context.drawDescriptionArea(300, 400, 120, 70);
context.strokeText('Liability', 310, 440);
context.drawDescriptionArea(540, 400, 120, 70);
context.strokeText('Income', 550, 440);
context.drawDescriptionArea(750, 400, 180, 70);
context.strokeText('Expenditure', 760, 440);
/*Now draw the images to the canvas */
/*First, create variables for the x & y coordinates of the image that will be drawn.
the x & y coordinates should hold random numbers, so that the images will be
drawn in random locations on the canvas.*/
var imageX = Math.floor(Math.random()*100);
var imageY = Math.floor(Math.random()*100);
/*Draw all images from assetsImageArray */
/*Use a while loop to loop through the array, get each item and draw it. */
var arrayIteration = 0;
while(arrayIteration < assetsImageArray.length){
context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50);
arrayIteration+1;
}
}
現在、Web ページをブラウザーに読み込むと、キャンバス上にある開始ボタンと共にキャンバスが表示されます。スタートボタンがクリックされると、上記の関数が呼び出されます。
ただし、何らかの理由で、この機能が実行されるまでに時間がかかります。ボタンをクリックすると、ブラウザは数秒間まったく何もしません。その後、応答がないかのように「フェードアウト」し、その後タスクが実際に実行され、関数内の要素がキャンバスに描画されます。
また、応答しないスクリプトに関する警告メッセージが表示され、続行するか、スクリプトをデバッグするか、スクリプトを停止するかを選択できます。スクリプトの停止を選択すると、呼び出された関数が実行され、すべての要素がキャンバスに描画されます。
この警告メッセージが表示されないようにする方法と、要素をキャンバスに描画する機能をより迅速に取得する方法を考えています。
私の最初の考えは、この関数の最後にある while ループに関係があるのではないか、または描画される画像を保持するために使用している配列に関係があるのではないかということです。
現時点では、配列には 1 つの画像しか保持されません。最終的には、合計で約 40 の画像を保持する 3 つまたは 4 つの個別の配列が必要であり、そのすべてがこの関数を使用してキャンバスに描画されますが、そうではありません。読み込み速度を大幅に下げることができるまで、この配列にさらに画像を追加できるとは思いません。
私がやっていることが正しいかどうか誰にもわかりますか？または、そうでない場合、どうすればよいですか？
私が確信していないことの 1 つは、JavaScript がその配列サイズをどのように決定するかです。それらは固定ですか、それとも動的ですか? この配列のサイズをコンソールに出力して確認するにはどうすればよいですか?
キャンバスにロードする必要がある画像の数は変更可能でなければならないため、動的にする必要があるため、配列サイズを指定していません。誰でも助けることができますか？