Движение объектов по массиву координат
Интересуют примеры реализации движения нескольких объектов по массиву координат (на canvas), подскажите пожалуйста..
|
|
Rise,
Интересует пример движения объектов на 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 = [];
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>
|
Dilettante_Pro,
Нет ли у Вас примера с движением по "ранее сформированным массивам координат"? Спасибо. |
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>
|
canvas Движение объектов по массиву координат
:write:
мысли вслух
<!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>
|
Спасибо.
|
| Часовой пояс GMT +3, время: 12:16. |