Здравствуйте, подскажите как заставить сталкиваться все создаваемые в коде объекты, что то никак не допру, пример из книги javascript for kids, вот код, в комментариях пример сталкивания двух объектов:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<title>Прыгающий мяч</title>
</head>
<body>
<canvas id = "canvas" width = "500" height = "500"></canvas>
<div top = "400" id = "help"></div>
<div top = "420" id = "help1"></div>
<div top = "440" id = "help2"></div>
<div top = "460" id = "help3"></div>
<script>
var help = document.getElementById("help");
var help1 = document.getElementById("help1");
var help2 = document.getElementById("help2");
var help3 = document.getElementById("help3");
var Ball = function(x, y,isTrue) {
this.x = Math.floor(Math.random() * width);
this.y =Math.floor(Math.random() * height);
this.xSpeed = -1;// Math.floor(Math.random() * 5 - 5);
this.ySpeed = 2; //Math.floor(Math.random() * 5 - 5);
this.is = isTrue;
};
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, this.is);
};
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 width = canvas.width;
var height = canvas.height;
var ctx = canvas.getContext("2d");
var ballArray = [];
for(var i = 0; i < 200; i++){
var ball = new Ball();
ballArray[i] = ball;
}
setInterval(function () {
ctx.clearRect(0, 0, width, height);
for (var i = 0; i <ballArray.length; i++) {
ballArray[i].draw();
ballArray[i].move();
ballArray[i].checkCollision();
}
for (var i = 0; i < ballArray.length; i++) {
var collisionBallX = ballArray[i].x + Math.PI * 3;
var collisionBallY = ballArray[i].y + Math.PI * 3;
for (var j = 0; j < ballArray.length; j++) {
var collisionBallXNext = ballArray[j].x + Math.PI * 3;
var collisionBallYNext = ballArray[j].y + Math.PI * 3;
if(collisionBallX>=ballArray[j].x && ballArray[i].x <= collisionBallXNext) {
if(collisionBallY>=ballArray[j].y && ballArray[i].y <= collisionBallYNext){
collisionBallX.xSpeed = 1;//collisionBallX.xSpeed;
collisionBallY.yspeed = -2; //collisionBallY.ySpeed;
collisionBallXNext.xSpeed = -1;//-collisionBallXNext.xSpeed;
collisionBallYNext.ySpeed = 2;//collisionBallYNext.ySpeed;
}
}
}
}
/*
var ball1 = new Ball(1,-2, true);
var ball2 = new Ball(-1, 2, false);
ball1.draw();
ball1.move();
ball1.checkCollision();
ball2.draw();
ball2.move();
ball2.checkCollision();
if(((ball1.x + Math.PI * 3)>= ball2.x) &&(ball1.x <= (ball2.x + Math.PI * 3))) {
if(((ball1.y + Math.PI * 3) >= ball2.y) &&(ball1.y <= (ball2.y + Math.PI * 3))) {
ball1.xSpeed = 1;
ball1.ySpeed = -2;
ball2.xSpeed = -1;
ball2.ySpeed = 2;
}
}*/
ctx.strokeRect(0, 0, width, height);
}, 30);
</script>
</body>
</html>
