个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在制作 agar.io 克隆，但我不明白如何处理我的分割机制。为了分割 blob，我创建了一个以 blob 作为参数的函数。
<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>当按下空格键(keycode == 32)时，我在 for 循环内调用 split 函数(因为我需要一次分割所有 blob)。我希望它仅分割分割时存在的 Blob ，而不分割分割后出现的 Blob 。但这正在 split 所有人。
最佳答案
问题出在循环中。
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]);
}
}
关于javascript - 有没有办法处理这种循环(for循环)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43960123/
24
4
0
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
在现代 IDE 中，有一个键盘快捷键可以通过键入文件名称来打开文件，而无需将手放在鼠标上。例如: Eclipse:Cmd|Ctrl + Shift + R -> 打开资源 IntelliJ:Cmd|C
有什么东西会等待事件发生(我正在等待的是 WebBrowser.DocumentCompleted)，然后执行代码吗？像这样: If (WebBrowser.DocumentCompleted) 不会
我使用 PHP Minify，它很棒。但我的问题是，是否有任何 PHP 插件或其他东西可以自动检测 javascript/css 代码并自动缩小它？谢谢。 最佳答案 Javascript 压缩器？ 看
有没有一种语言，类似什么CoffeeScript是JavaScript，编译成windows batch|cmd|command line的语言？ 我指的cmd版本是基于NT的，尤其是XP sp3及以
我知道我可以 ，但是，我真的宁愿有一个任务，我可以从任何可以使用所有(或至少大部分)属性的操作系统调用 copy ，但这并没有消除 unix 上的权限。 我想知道是否已经有解决方案，或者我必须自己编
我正在使用 Vuejs(不使用 jQuery)开发一个项目，该项目需要像 jvectormap 这样的 map 但正如我所说，我没有使用 jQuery，那么是否有任何其他库可以在不使用 jQuery
想要进行一个简单的民意调查，甚至不需要基于 cookie，我不在乎投了多少票。有没有类似的插件或者简单的东西？ 最佳答案 这是一个有用的教程 - 让我知道它是否适合您 using jQuery to
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
var FileBuff: TBytes; Pattern: TBytes; begin FileBuff := filetobytes(filename); Result := Co
我想要一个 vqmod xml 文件来添加一次上传多个图像的功能。身边有这样的事吗？ 编辑:Opencart版本:2.1.0.1 最佳答案 最后我写了一个xml来添加到opencart 2.1.0.1
所以考虑这样的函数: public void setTemperature(double newTemperatureValue, TemperatureUnit unit) 其中Temperatur
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我是 ggplot2 的新手，一直在尝试找到一个全面的美学列表。我想我理解它们的目的，但很难知道哪些可以在各种情况下使用(主要是几何图形？)。 Hadley 的网站偶尔会在各个几何图形的页面上列出可用
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
是否有任何 PHP 函数可以将整数转换为十万和千万？ 900800 -> 9,00,800 500800 -> 5,00,800 最佳答案 由于您已在问题标签中添加了 Yii，因此您可以按照 Yii
使用 Clojure 一段时间后，我积累了一些关于它的惰性的知识。我知道诸如map之类的常用API是否是惰性的。然而，当我开始使用一个不熟悉的API(例如with-open)时，我仍然感到怀疑。 是否
我的项目需要一个像 AvalonDock 这样的对接系统，但它的最后一次更新似乎是在 2013 年 6 月。是否有更多...积极开发的东西可以代替它？ 最佳答案 AvalonDock 实际上相当成熟并
我正在寻找一个可以逆转 clojure 打嗝的函数 所以 turns into [:html] 等等 根据@kotarak的回答，这现在对我有用: (use 'net.cgrand.enliv
我是一名优秀的程序员,十分优秀！