gpt4 book ai didi

javascript - 尝试在有丝 split 模拟中模拟细胞的 split

转载 作者:行者123 更新时间:2023-12-03 02:39:30 25 4
gpt4 key购买 nike

我正在制作一个有丝 split 模拟器,我希望它在细胞足够大并 split 时运行有丝 split 功能。当它分割时,我希望它能够将分割从初始 x 值(前一个单元格的 x)动画化为新的 x 值(右侧的 x+10)。我尝试过使用循环和 setTimeout() 来看看是否可以延迟添加 x 来尝试为其设置动画,但我似乎无法让它工作。我以前从未在 JS 中使用过动画,因此我们将不胜感激。

    <html>
<head>
<title>Mitosis</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
let c = document.getElementById("canvas");
let ctx = c.getContext("2d");
let cells = [];
cells.push(new Cell(100,100,5));
function Cell(x,y,r) {
this.x = x;
this.y = y;
this.r = r;
}
function update() {

move();

draw();
if(cells.length < 50) {
grow();
}
}
setInterval(update,100);
function draw() {
ctx.clearRect(0,0,500,500)
for(let i = 0, len = cells.length; i < len; i++) {
ctx.beginPath();
ctx.arc(cells[i].x,cells[i].y,cells[i].r,0,2*Math.PI);
ctx.stroke();
}
}
function move() {
for(let i = 0, len = cells.length; i < len; i++) {

cells[i].x += Math.random()*3;
cells[i].x -= Math.random()*2;
cells[i].y += Math.random()*3;
cells[i].y -= Math.random()*2;
}
}
function grow() {
for(let i = 0, len = cells.length; i < len; i++) {
if(cells[i].r > 10){
mitosis();
}
else {
cells[i].r+=0.25;
}
}
}
function mitosis() {
for(let i = cells.length-1; i >= 0; i--) {
cells.push(new Cell(cells[i].x,cells[i].y,5))
cells.push(new Cell(cells[i].x,cells[i].y,5))
cells.splice(i,1);
}
}
</script>
</body>
</html>

最佳答案

如果我正确理解了这个问题,当你的大细胞即将 split 时,你可以创建并显示一个“快照”列表,显示两个新细胞在再次开始生长之前移动到新位置的情况。

在这种情况下,如果您想要/被允许使用 ES2017 功能,这是一个可能的解决方案,它使用真正的 sleep (暂停执行),而不是超时。 (我让您创建快照列表和 displaySnapshot 函数,该函数会删除并绘制每个快照。这几乎是微不足道的)

  function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function displaySnapshots(snapshots, timeLapse) {
for (let snap of snapshots) {
displaySnapshot(snap);
await sleep(timeLapse);
}
}

但不确定你是否想做这样的事情(我认为不是):

     function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function evolve(timeLapse, iterations) {
for (let i = 0; i < iterations; i++) {
update();
await sleep(timeLapse);
}
}
evolve(500, 100);

关于javascript - 尝试在有丝 split 模拟中模拟细胞的 split ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48393211/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com