Javascript.RU

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

Прыгающие мячи с помощью 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>
Ответить с цитированием
  #2 (permalink)  
Старый 27.12.2016, 11:21
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,174

DivMan,
сделайте var ball массивом, цикл вставьте внутрь setInterval(function () {
Ответить с цитированием
  #3 (permalink)  
Старый 27.12.2016, 14:39
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,174

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
canvas hue-rotate fireballpro100 Общие вопросы Javascript 8 11.08.2016 05:34
Подсветка границ area с помощью canvas WalterScott Общие вопросы Javascript 2 11.04.2016 21:58
Повтор фото (getUserMedia(),HTML5 Canvas) aspex Элементы интерфейса 1 27.12.2014 15:46
Создание экземпляра Canvas не затрагивая HTML Tails Общие вопросы Javascript 2 09.03.2012 11:55
Добавить на canvas еще один елемент greengarlic Общие вопросы Javascript 5 22.09.2010 09:16