Question

我正在制作一个agar.io克隆，我不知道如何处理我的分裂机制。为了分割blob，我创建了一个以blob作为参数的函数。

＆＃13;

<html>
<head>
	<title>Play Agario Clone</title>

	<style>
	body {
		margin: 0;
		padding: 0;
	}
	</style>
</head>
<body>
	<canvas id="game">
		kindly update your browser.
	</canvas>

	<script>
	var 
	canvas, 
	ctx, 
	width = innerWidth, 
	height = innerHeight,
	mouseX = 0,
	mouseY = 0;

	var

	camera = {
		x: 0,
		y: 0,

		// camera
		update: function(obj) {
			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;
		}
	},

	player = {
		defaultMass: 54,
		x: 0,
		y: 0,
		blobs: [],

		blobsExtent : {
      minx :0,
      miny : 0,
      maxx : 0,
      maxy : 0,
    },

		update: function () {
			var be = this.blobsExtent;
			for (var i = 0; i < this.blobs.length; i ++) {
				var x = mouseX + camera.x - this.blobs[i].x;
				var y = mouseY + camera.y - this.blobs[i].y;
				var length = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
				var speed = 54/this.blobs[i].mass;
				
				this.blobs[i].velX = x/length * speed;
				this.blobs[i].velY = y/length * speed;

				this.blobs[i].x += this.blobs[i].velX;
				this.blobs[i].y += this.blobs[i].velY;

				//if (this.blobs[i].splitted) {
					//this.blobs[i].x += this.blobs[i].speed;
					//this.blobs[i].y += this.blobs[i].speed;

					//if (this.blobs[i].speed > 0) {
						//this.blobs[i].speed--;
					//}
				//}

				for (var j = 0; j < this.blobs.length; j ++) {
					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);
            }
          }
				}

				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);
        }
			}

			this.x += (mouseX - width/2)/(width/2) * 1;
			this.y += (mouseY - height/2)/(height/2) * 1
		},

		split: function (cell) {
			if(cell.mass >= this.defaultMass) {
				cell.mass /= 2;

				this.blobs.push({
					x: cell.x,
					y: cell.y,
					mass: cell.mass,
					splitted: true,
					speed: 20
				});
			}
		},

		draw: function () {
			for (var i = 0; i < this.blobs.length; i ++) {
				ctx.fillStyle = "red";
				
				ctx.beginPath();
				ctx.arc(-camera.x + this.blobs[i].x, -camera.y + this.blobs[i].y, this.blobs[i].mass, 0, Math.PI*2);
				ctx.fill();
				ctx.closePath();
			}
		}
	};

	function handleMouseMove (e) {
		mouseX = e.clientX;
		mouseY = e.clientY;
	}

	function handleKeydown (e) {
		if (e.keyCode == 32) {
			for (var i = 0; i < player.blobs.length; i++) {
				player.split(player.blobs[i]);
			}
		}
	}

	function setup () {
		canvas = document.getElementById("game");
		ctx = canvas.getContext("2d");
		canvas.width = width;
		canvas.height = height;

		addEventListener("mousemove", handleMouseMove);
		addEventListener("keydown", handleKeydown);

		player.blobs.push({
			x: 0,
			y: 0,
			mass: player.defaultMass
		});
		player.blobs.push({
			x: 100,
			y: 100,
			mass: player.defaultMass/2
		});
		player.blobs.push({
			x: 100,
			y: 100,
			mass: player.defaultMass*2
		});

		var loop = function () {
			update();
			draw();
			requestAnimationFrame(loop);
		}
		requestAnimationFrame(loop);
	}

	function update () {
		camera.update(player);
		player.update();
	}

	function draw () {
		ctx.fillStyle = "#fff";
		ctx.fillRect(0, 0, width, height);

		player.draw();
	}

	setup();
	</script>
</body>
</html>

＆＃13;

当按下空格键（keycode == 32）时，我在for循环中调用split函数（因为我需要立即拆分所有blob）。我希望它只拆分拆分时出现的blob而不是拆分后出现的blob。但它正在分裂所有这些。

Answer 1

问题在于循环。

    if (e.keyCode == 32) {
        for (var i = 0; i < player.blobs.length; i++) {
            player.split(player.blobs[i]);
        }
    }

每次添加blob时，都会增加数组的长度。由于该长度用于结束for循环，因此您可以循环遍历您添加的循环。

要修复，只需在循环之前获取长度。

    if (e.keyCode == 32) {
        var currentLength = player.blobs.length;
        for (var i = 0; i < currentLength; i++) {
            player.split(player.blobs[i]);
        }
    }

有没有办法处理这种循环（for循环）

1 个答案: