Прыгающие мячи с помощью canvas
Как увеличить количество мячей циклом? Я пытался, у меня не получается, сейчас я их размножаю вручную
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var Ball = function () {
this.x = Math.floor(Math.random() * 400);
this.y = Math.floor(Math.random() * 400);
this.xSpeed = -2;
this.ySpeed = 3;
};
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
}
else {
ctx.stroke();
}
};
Ball.prototype.draw = function () {
circle(this.x, this.y, 3, true);
};
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
};
Ball.prototype.checkCollision = function () {
if (this.x < 0 || this.x > width) {
this.xSpeed = -this.xSpeed;
}
if (this.y < 0 || this.y > height) {
this.ySpeed = -this.ySpeed;
}
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = new Ball();
var ball2 = new Ball();
var ball3 = new Ball();
var width = canvas.width;
var height = canvas.height;
/*
for(var i = 0; i < 1; i++){
var ball = new Ball()
setInterval(function () {
ctx.clearRect(0, 0, width, height);
ball.draw();
ball.move();
ball.checkCollision();
ctx.strokeRect(0, 0, width, height);
}, 30);
}
*/
setInterval(function () {
ctx.clearRect(0, 0, width, height);
ball.draw();
ball.move();
ball.checkCollision();
ball2.draw();
ball2.move();
ball2.checkCollision();
ball3.draw();
ball3.move();
ball3.checkCollision();
ctx.strokeRect(0, 0, width, height);
}, 30);
</script>
</body>
</html>
|
DivMan,
сделайте var ball массивом, цикл вставьте внутрь setInterval(function () { |
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
var Ball = function () {
this.x = Math.floor(Math.random() * 400);
this.y = Math.floor(Math.random() * 400);
this.xSpeed = -2;
this.ySpeed = 3;
};
var circle = function (x, y, radius, fillCircle) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
}
else {
ctx.stroke();
}
};
Ball.prototype.draw = function () {
circle(this.x, this.y, 3, true);
};
Ball.prototype.move = function () {
this.x += this.xSpeed;
this.y += this.ySpeed;
};
Ball.prototype.checkCollision = function () {
if (this.x < 0 || this.x > width) {
this.xSpeed = -this.xSpeed;
}
if (this.y < 0 || this.y > height) {
this.ySpeed = -this.ySpeed;
}
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var ball = []; // сделайте var ball массивом
for(var i = 0; i < 10; i++){
ball[i] = new Ball();
}
var width = canvas.width;
var height = canvas.height;
setInterval(function () {
ctx.clearRect(0, 0, width, height);
for(var i = 0; i < 10; i++){ // цикл вставьте внутрь setInterval(function () {
ball[i].draw();
ball[i].move();
ball[i].checkCollision();
} ;
ctx.strokeRect(0, 0, width, height);
}, 30);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 04:54. |