Показать сообщение отдельно
  #1 (permalink)  
Старый 27.12.2016, 12:15
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Прыгающие мячи с помощью 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>
Ответить с цитированием