Форум

Negotiant · #1 (**permalink**) 04.07.2017, 12:19

Интересуют примеры реализации движения нескольких объектов по массиву координат (на canvas), подскажите пожалуйста..

Luca · #2 (**permalink**) 04.07.2017, 15:30

Rise · #3 (**permalink**) 05.07.2017, 08:18

Negotiant,
Как минимум нужны две абстракции анимационный цикл и движущийся объект.

Negotiant · #4 (**permalink**) 05.07.2017, 12:34

Rise,
Интересует пример движения объектов на canvas не рандомного, а по определённому "узору", или массиву векторов, возможно Вы сможете подсказать? Спасибо.

Dilettante_Pro · #5 (**permalink**) 05.07.2017, 13:27

Здесь координаты вычисляются на каждом шагу, но точно так же могут использоваться ранее сформированные массивы координат

<!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 = [];         
                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++){      
                        ball[i].draw();
                        ball[i].move();
                        ball[i].checkCollision();
                    } ;
  		    ctx.strokeRect(0, 0, width, height);
		}, 30);
   </script>
  </body>

</html>

Negotiant · #6 (**permalink**) 05.07.2017, 14:21

Dilettante_Pro,
Нет ли у Вас примера с движением по "ранее сформированным массивам координат"? Спасибо.

Dilettante_Pro · #7 (**permalink**) 05.07.2017, 15:21

Negotiant,
как-то так... Предварительно сформированный массив, конечно, не очень...

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

  <body>
   <canvas id="canvas" width="400" height="400"></canvas>
   
   <script>
     var coord = [];
     for(var i = 0; i < 10; i++){
         coord[i] = [];
         for(var j = 0; j < 10; j++){
            coord[i][j]= {};
            coord[i][j].x = (i + 1) *(j + 1) * 10;
            coord[i][j].y = i * 15 + j * 10;
         }
     }
     alert(JSON.stringify(coord));
     var Ball = function (i) {
			this.x = coord[i][0].x;
			this.y = coord[i][0].y;;

		};


		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 (i,j) {
			this.x = coord[i][j].x;
			this.y = coord[i][j].y;
		};

		Ball.prototype.checkCollision = function (i,j) {
		    if(i==9 && j==9) clearInterval(loop);	
		};

		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

		
                var ball = [];         
                for(var i = 0; i < 10; i++){
                         ball[i] = new Ball(i);	
                }
                var width = canvas.width;
                var height = canvas.height;	
		var j = 0;
		var loop = setInterval(function () {
		    ctx.clearRect(0, 0, width, height);
		    for(var i = 0; i < 10; i++){      
                        ball[i].draw();
                        ball[i].move(i,j);
                        ball[i].checkCollision(i,j);
                    } ;
  		    ctx.strokeRect(0, 0, width, height);
                    j++;
		}, 100);
   </script>
  </body>

</html>

рони · #8 (**permalink**) 05.07.2017, 16:08

мысли вслух

<!DOCTYPE html>
<html>

  <head>
 <script>
     if (!Object.assign) {
  Object.defineProperty(Object, 'assign', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: function(target, firstSource) {
      'use strict';
      if (target === undefined || target === null) {
        throw new TypeError('Cannot convert first argument to object');
      }

      var to = Object(target);
      for (var i = 1; i < arguments.length; i++) {
        var nextSource = arguments[i];
        if (nextSource === undefined || nextSource === null) {
          continue;
        }

        var keysArray = Object.keys(Object(nextSource));
        for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
          var nextKey = keysArray[nextIndex];
          var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
          if (desc !== undefined && desc.enumerable) {
            to[nextKey] = nextSource[nextKey];
          }
        }
      }
      return to;
    }
  });
}
 </script>
  </head>

  <body>
   <canvas id="canvas" width="400" height="400"></canvas>

   <script>
 var Ball = function(data) {
    this.opt = {
        index: -1,
        queue: [],
        loop: false,
        startTime: 0,
        timer: null
    };
    this.init(data);
    this.x, this.y
};
Ball.prototype.init = function(data) {
    var opt = Object.assign(this.opt, data || {});
    opt.startTime = performance.now();
    opt.index++;
    opt.loop && (opt.index %= opt.queue.length);
};
Ball.prototype.move = function() {

    var d = this.opt.startTime;
    var data = this.opt.queue[this.opt.index];
    if(!data) return;
    var b = (performance.now() - d) / data.duration;
        1 <= b && (b = 1);
        this.x = data.from.x + (data.to.x - data.from.x) * b | 0;
        this.y = data.from.y + (data.to.y - data.from.y) * b | 0;
        1 == b && this.init();


};
var circle = function(x, y, radius, fillCircle) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.fillStyle = "green";
    if (fillCircle) ctx.fill();
    else ctx.stroke()
};
Ball.prototype.draw = function() {
    circle(this.x, this.y, 10, true)
};
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var obj = {
    queue: [{
        from: {
            x: 100,
            y: 100
        },
        to: {
            x: 150,
            y: 200
        },
        duration: 1000
    }, {
        from: {
            x: 150,
            y: 200
        },
        to: {
            x: 200,
            y: 100
        },
        duration: 3E3
    }, {
        from: {
            x: 200,
            y: 100
        },
        to: {
            x: 250,
            y: 200
        },
        duration: 1000
    }, {
        from: {
            x: 250,
            y: 200
        },
        to: {
            x: 300,
            y: 100
        },
        duration: 3000
    }],
    loop: true
};
var ball = [];
var i = 0;
(function x() {
    ball[i] = new Ball(obj);
    ++i < 50 && window.setTimeout(x, 500)
})();
var width = canvas.width;
var height = canvas.height;
requestAnimationFrame(function test() {
    ctx.clearRect(0, 0, width, height);
    for (var i = 0; i < ball.length; i++) {
    ball[i].move();
    ball[i].draw();
    }
    ctx.strokeRect(0, 0, width, height);
    requestAnimationFrame(test)
});
   </script>
  </body>

</html>

Negotiant · #9 (**permalink**) 05.07.2017, 16:41

Спасибо.

Форум

Справочник

Discord чат

Курсы javascript