在鼠标和对象（画布）之间的矢量上移动对象
[英]Move object on the vector between mouse and object (canvas)
问题描述
我正在制作类似于agar.io的游戏。 我已经做了一个分割功能来分割斑点。 但是他们的运动有问题。 我希望它们以更快的速度在（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>
1 个解决方案
解决方案1
0 2017-05-14 10:00:54
另一次看到这个，觉得很奇怪，但以为你想要那样。
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
在鼠标移动事件发生后如何缓动画布对象？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.