Показать сообщение отдельно
  #3 (permalink)  
Старый 27.12.2016, 15:39
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<!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>
Ответить с цитированием