Question

我正在制作类似于agar.io的游戏。我已经做了分割功能来分割blob。但是他们的运动存在问题。我希望他们以更快的速度在（mouseX，mouseY）和（blobX，blobY）之间的向量上移动。我不希望它移动到（mouseX，mouseY）。

下面是我的代码和图表。

<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;

				// prblem here
				if (this.blobs[i].splitted) {
					this.blobs[i].x += x/length * this.blobs[i].speed;
					this.blobs[i].y += x/length * 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) {
      var currentLength = player.blobs.length;
      for (var i = 0; i < currentLength; 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>

Answer 1

另一次看到这个并认为它很奇怪但是你想要那样。

this.blobs[i].y += x/length * this.blobs[i].speed;
//.................^    should not be x?

沿着向量移动使用y

this.blobs[i].y += y/length * this.blobs[i].speed;
//.................^ correction now moves along vector

在鼠标和对象（画布）之间的向量上移动对象

1 个答案: