1
私はagar.ioクローンを作成していますが、どのように分割メカニズムを処理できるのか分かりません。ブロブを分割するために、私はブロブを引数として取る関数を作った。このような種類のループ（forループ）を処理する方法はありますか？
<html>
<head>
\t <title>Play Agario Clone</title>
\t <style>
\t body {
\t \t margin: 0;
\t \t padding: 0;
\t }
\t </style>
</head>
<body>
\t <canvas id="game">
\t \t kindly update your browser.
\t </canvas>
\t <script>
\t var
\t canvas,
\t ctx,
\t width = innerWidth,
\t height = innerHeight,
\t mouseX = 0,
\t mouseY = 0;
\t var
\t camera = {
\t \t x: 0,
\t \t y: 0,
\t \t // camera
\t \t update: function(obj) {
\t \t \t this.x = (obj.blobsExtent.minx + obj.blobsExtent.maxx)/2;
this.y = (obj.blobsExtent.miny + obj.blobsExtent.maxy)/2;
this.x -= width/2;
this.y -= height/2;
\t \t }
\t },
\t player = {
\t \t defaultMass: 54,
\t \t x: 0,
\t \t y: 0,
\t \t blobs: [],
\t \t blobsExtent : {
minx :0,
miny : 0,
maxx : 0,
maxy : 0,
},
\t \t update: function() {
\t \t \t var be = this.blobsExtent;
\t \t \t for (var i = 0; i < this.blobs.length; i ++) {
\t \t \t \t var x = mouseX + camera.x - this.blobs[i].x;
\t \t \t \t var y = mouseY + camera.y - this.blobs[i].y;
\t \t \t \t var length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
\t \t \t \t var speed = 54/this.blobs[i].mass;
\t \t \t \t
\t \t \t \t this.blobs[i].velX = x/length * speed;
\t \t \t \t this.blobs[i].velY = y/length * speed;
\t \t \t \t this.blobs[i].x += this.blobs[i].velX;
\t \t \t \t this.blobs[i].y += this.blobs[i].velY;
\t \t \t \t //if (this.blobs[i].splitted) {
\t \t \t \t \t //this.blobs[i].x += this.blobs[i].speed;
\t \t \t \t \t //this.blobs[i].y += this.blobs[i].speed;
\t \t \t \t \t //if (this.blobs[i].speed > 0) {
\t \t \t \t \t \t //this.blobs[i].speed--;
\t \t \t \t \t //}
\t \t \t \t //}
\t \t \t \t for (var j = 0; j < this.blobs.length; j ++) {
\t \t \t \t \t if (j != i && this.blobs[i] !== undefined) {
var blob1 = this.blobs[i];
var blob2 = this.blobs[j];
var x = blob2.x - blob1.x;
var y = blob2.y - blob1.y;
var dist = Math.sqrt(x * x + y * y);
if (dist < blob1.mass + blob2.mass) {
x /= dist;
y /= dist;
blob1.x = blob2.x - x * (blob1.mass + blob2.mass);
blob1.y = blob2.y - y * (blob1.mass + blob2.mass);
}
}
\t \t \t \t }
\t \t \t \t if (i === 0) {
be.maxx = be.minx = blob1.x;
be.maxy = be.miny = blob1.y;
} else {
be.maxx = Math.max(be.maxx, blob1.x);
be.maxy = Math.max(be.maxy, blob1.y);
be.minx = Math.min(be.minx, blob1.x);
be.miny = Math.min(be.miny, blob1.y);
}
\t \t \t }
\t \t \t this.x += (mouseX - width/2)/(width/2) * 1;
\t \t \t this.y += (mouseY - height/2)/(height/2) * 1
\t \t },
\t \t split: function (cell) {
\t \t \t if(cell.mass >= this.defaultMass) {
\t \t \t \t cell.mass /= 2;
\t \t \t \t this.blobs.push({
\t \t \t \t \t x: cell.x,
\t \t \t \t \t y: cell.y,
\t \t \t \t \t mass: cell.mass,
\t \t \t \t \t splitted: true,
\t \t \t \t \t speed: 20
\t \t \t \t });
\t \t \t }
\t \t },
\t \t draw: function() {
\t \t \t for (var i = 0; i < this.blobs.length; i ++) {
\t \t \t \t ctx.fillStyle = "red";
\t \t \t \t
\t \t \t \t ctx.beginPath();
\t \t \t \t ctx.arc(-camera.x + this.blobs[i].x, -camera.y + this.blobs[i].y, this.blobs[i].mass, 0, Math.PI*2);
\t \t \t \t ctx.fill();
\t \t \t \t ctx.closePath();
\t \t \t }
\t \t }
\t };
\t function handleMouseMove (e) {
\t \t mouseX = e.clientX;
\t \t mouseY = e.clientY;
\t }
\t function handleKeydown (e) {
\t \t if (e.keyCode == 32) {
\t \t \t for (var i = 0; i < player.blobs.length; i++) {
\t \t \t \t player.split(player.blobs[i]);
\t \t \t }
\t \t }
\t }
\t function setup() {
\t \t canvas = document.getElementById("game");
\t \t ctx = canvas.getContext("2d");
\t \t canvas.width = width;
\t \t canvas.height = height;
\t \t addEventListener("mousemove", handleMouseMove);
\t \t addEventListener("keydown", handleKeydown);
\t \t player.blobs.push({
\t \t \t x: 0,
\t \t \t y: 0,
\t \t \t mass: player.defaultMass
\t \t });
\t \t player.blobs.push({
\t \t \t x: 100,
\t \t \t y: 100,
\t \t \t mass: player.defaultMass/2
\t \t });
\t \t player.blobs.push({
\t \t \t x: 100,
\t \t \t y: 100,
\t \t \t mass: player.defaultMass*2
\t \t });
\t \t var loop = function() {
\t \t \t update();
\t \t \t draw();
\t \t \t requestAnimationFrame(loop);
\t \t }
\t \t requestAnimationFrame(loop);
\t }
\t function update() {
\t \t camera.update(player);
\t \t player.update();
\t }
\t function draw() {
\t \t ctx.fillStyle = "#fff";
\t \t ctx.fillRect(0, 0, width, height);
\t \t player.draw();
\t }
\t setup();
\t </script>
</body>
</html>スペースキー（キーコード== 32）が押されたとき、私は（私はすべての塊が一度に分割される必要があるため）forループ内のsplit関数を呼び出しています。私はそれがスプリットの時に存在するブロブだけを分割し、スプリットの後に来るブロブは分割しないことを望む。しかし、それはすべてを分割しています。
このような完全な例を問題としていただき、ありがとうございます。特に関心のあるコードのセクションをハイライト表示できますか？それは本当に人々がこの問題を助けるのを助けるでしょう。 –