ゲームが速く起動し、数秒後に著しく遅くなるという問題がゲームにあり、コードの一部を取り出して一度に 1 つずつ追加し、何が遅くなっているのかを確認しました。ブロックの配列を作成し、それらを画面に出力して遅延を引き起こしているときです。
//ブロックセクション
-1 から 10 までのループ -形状オブジェクトの作成 -配列へのプッシュ -終了
- 配列をループする - シェイプを画面にペイントする
ゲームには多くのバグがありますが、まだ完成途中です :) :)
var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 460;
var y = 480;
var a = 500;
var b = 570;
var WIDTH = 1000;
var HEIGHT = 600;
var x1 = 0,
y1 = 0;
var dx1 = 5,
dy1 = 5;
var myblocks = [];
ball = new setcircle(x, y, 10, "purple");
//paddel = new square(x,y,100,20,"purple");
//initate
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
//creates an array of blocks and prints to screen
function block() {
var p = 40;
for (var i = 0; i < 10; i++) {
myblocks.push(new Shape(p, 10, 90, 20, "#333"))
p = p + 91;
}
for (i in myblocks) {
oblock = myblocks[i];
ctx.fillStyle = oblock.fill1;
ctx.fillRect(oblock.a, oblock.b, oblock.w, oblock.h);
}
}
//draws and moves ball
function movecircle(ball) {
ball.x += dx;
ball.y += dy;
if (ball.x <= 0) dx = 5;
else if (ball.x >= 980) dx = -5;
if (ball.y <= 0) dy = 5;
else if (ball.y >= 590) dy = -5;
ctx.beginPath();
ctx.fillStyle = ball.fill;
ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2, true);
ctx.fill();
}
// checks if collides
function isCollide(r, c) {
// copyed from stackoverflow
var cx = Math.abs(c.x - r.a - r.w / 2);
var xDist = r.w / 2 + c.r;
if (cx > xDist) return false;
var cy = Math.abs(c.y - r.b - r.h / 2);
var yDist = r.h / 2 + c.r;
if (cy > yDist) return false;
if (cx <= r.w / 2 || cy <= r.w / 2) return true;
var xCornerDist = cx - r.w / 2;
var yCornerDist = cy - r.h / 2;
var xCornerDistSq = xCornerDist * xCornerDist;
var yCornerDistSq = yCornerDist * yCornerDist;
var maxCornerDistSq = c.r * c.r;
return xCornerDistSq + yCornerDistSq <= maxCornerDistSq;
}
//ball object
function setcircle(x, y, r, fill) {
this.x = x;
this.y = y;
this.r = r;
this.fill = fill;
}
//shape object
function Shape(a, b, w, h, fill) {
this.a = a;
this.b = b;
this.w = w;
this.h = h;
this.fill1 = fill;
}
//keyboard inout
function doKeyDown(evt) {
switch (evt.keyCode) {
case 38:
/* Up arrow was pressed */
if (b - dy > 0) {
b -= dy;
}
break;
case 40:
/* Down arrow was pressed */
if (b + dy < HEIGHT) {
b += dy;
}
break;
case 37:
/* Left arrow was pressed */
if (a - dx > 0) {
a -= dx;
}
break;
case 39:
/* Right arrow was pressed */
if (a + dx < WIDTH) {
a += dx;
}
break;
}
}
function changedirection(ball) {
dy = -dy;
}
function update() {
//check if ball hits paddle
if (isCollide(paddel, ball)) {
changedirection(ball);
ctx.fillStyle = "purple";
ctx.fillRect(200, 200, 100, 100);
}
//check if ball hits block
for (i in myblocks) {
if (isCollide(myblocks[i], ball)) {
changedirection(ball);
ctx.fillStyle = "purple";
ctx.fillRect(200, 200, 100, 100);
}
}
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
movecircle(ball);
block();
paddel = new Shape(a, b, 100, 20, "purple");
ctx.fillStyle = paddel.fill1;
ctx.fillRect(paddel.a, paddel.b, paddel.w, paddel.h);
update();
}
init();
window.addEventListener('keydown', doKeyDown, true);
//アップデート：
ブロックの初期化を削除し、init メソッドに配置しました。これにより、ゲームが大幅に高速化されました。
