优化像素操作
有很多选项可以加快您的代码速度
像素为 32 位整数
以下内容会影响大多数工作量过多的机器。
// I removed fixed 800 and replaced with const size
for(i = 0; i <= size; i++){
for(j = 0; j <= size; j++){
ctx.fillStyle=pixels[i][j].color;
ctx.fillRect(i,j,1,1);
}
}
不要通过矩形写入每个像素。使用您可以通过createImageData 和相关函数从画布 API 获得的像素数据。它使用比数组快一点的类型化数组，并且可以对同一内容有多个视图。
您可以在一次调用中将所有像素写入画布。不是快得令人眼花缭乱，但比你正在做的要快无数倍。
const size = 800;
const imageData = ctx.createImageData(size,size);
// get a 32 bit view
const data32 = new Uint32Array(imageData.data.buffer);
// To set a single pixel
data32[x+y*size] = 0xFF0000FF; // set pixel to red
// to set all pixels
data32.fill(0xFF00FF00); // set all to green
以像素坐标获取像素
const pixel = data32[x + y * imageData.width];
有关使用图像数据的更多信息，请参阅Accessing pixel data。
像素数据在你放到画布上之前不会显示
ctx.putImageData(imageData,0,0);
这会给你带来很大的进步。
更好的数据组织。
当性能至关重要时，您会牺牲内存和简单性，以获得更多的 CPU 周期来做您想做的事情，而不是做很多无所事事。
红色像素随机扩展到场景中，读取每个像素并检查（通过慢速字符串比较）是否为红色。当你找到一个时，你会在它旁边添加一个随机的红色像素。
检查绿色像素是一种浪费，可以避免。扩展完全被其他红色包围的红色像素也是没有意义的。他们什么都不做。
您感兴趣的唯一像素是绿色像素旁边的红色像素。
因此，您可以创建一个缓冲区来保存所有活动红色像素的位置，一个活动红色至少有一个绿色。每一帧你检查所有活跃的红色，如果可以的话，生成新的，如果它们被红色包围，则杀死它们。
我们不需要存储每个红色的 x,y 坐标，只需要存储内存地址，这样我们就可以使用平面数组。
const reds = new Uint32Array(size * size); // max size way over kill but you may need it some time.
您不想在 reds 数组中搜索红色，因此您需要跟踪有多少活跃的红色。您希望所有活动的红色都位于数组的底部。您只需每帧检查一次每个活动的红色。如果红色比上面所有的都死了，它必须向下移动一个数组索引。但是您只想每帧只移动每个红色一次。
气泡数组
我不知道这种类型的阵列叫什么，它就像一个分离罐，死的东西慢慢上移，活的东西下移。或者未使用的物品冒泡使用的物品沉到底部。
我会将它显示为功能性的，因为它更容易理解。但更好地实现为一种蛮力功能
// data32 is the pixel data
const size = 800; // width and height
const red = 0xFF0000FF; // value of a red pixel
const green = 0xFF00FF00; // value of a green pixel
const reds = new Uint32Array(size * size); // max size way over kill but you var count = 0; // total active reds
var head = 0; // index of current red we are processing
var tail = 0; // after a red has been process it is move to the tail
var arrayOfSpawnS = [] // for each neighbor that is green you want
// to select randomly to spawn to. You dont want
// to spend time processing so this is a lookup
// that has all the possible neighbor combinations
for(let i = 0; i < 16; i ++){
let j = 0;
const combo = [];
i & 1 && (combo[j++] = 1); // right
i & 2 && (combo[j++] = -1); // left
i & 4 && (combo[j++] = -size); // top
i & 5 && (combo[j++] = size); // bottom
arrayOfSpawnS.push(combo);
}
function addARed(x,y){ // add a new red
const pixelIndex = x + y * size;
if(data32[pixelIndex] === green) { // check if the red can go there
reds[count++] = pixelIndex; // add the red with the pixel index
data32[pixelIndex] = red; // and set the pixel
}
}
function safeAddRed(pixelIndex) { // you know that some reds are safe at the new pos so a little bit faster
reds[count++] = pixelIndex; // add the red with the pixel index
data32[pixelIndex] = red; // and set the pixel
}
// a frame in the life of a red. Returns false if red is dead
function processARed(indexOfRed) {
// get the pixel index
var pixelIndex = reds[indexOfRed];
// check reds neighbors right left top and bottom
// we fill a bit value with each bit on if there is a green
var n = data32[pixelIndex + 1] === green ? 1 : 0;
n += data32[pixelIndex - 1] === green ? 2 : 0;
n += data32[pixelIndex - size] === green ? 4 : 0;
n += data32[pixelIndex + size] === green ? 8 : 0;
if(n === 0){ // no room to spawn so die
return false;
}
// has room to spawn so pick a random
var nCount = arrayOfSpawnS[n].length;
// if only one spawn point then rather than spawn we move
// this red to the new pos.
if(nCount === 1){
reds[indexOfRed] += arrayOfSpawnS[n][0]; // move to next pos
}else{ // there are several spawn points
safeAddRed(pixelIndex + arrayOfSpawnS[n][(Math.random() * nCount)|0]);
}
// reds frame is done so return still alive to spawn another frame
return true;
}
现在处理所有的红色。
这是气泡阵列的核心。 head 用于索引每个活动的红色。 tail 是移动当前head 的位置的索引，如果没有遇到死亡tail 等于head。但是，如果遇到死项目，head 会向上移动一个，而tail 仍然指向死项目。这会将所有活动项目移至底部。
当head === count 已检查所有活动项目时。 tail 的值现在包含迭代后设置的新 count。
如果您使用的是对象而不是整数，则无需向下移动活动项目，而是交换 head 和 tail 项目。这有效地创建了一个可用对象池，可在添加新项目时使用。这种类型的数组管理不会产生 GC 或分配开销，因此与堆栈和对象池相比非常快。
function doAllReds(){
head = tail = 0; // start at the bottom
while(head < count){
if(processARed(head)){ // is red not dead
reds[tail++] = reds[head++]; // move red down to the tail
}else{ // red is dead so this creates a gap in the array
// Move the head up but dont move the tail,
// The tail is only for alive reds
head++;
}
}
// All reads done. The tail is now the new count
count = tail;
}
演示。
演示将向您展示速度改进。我使用的是功能版，可能还有其他一些调整。
您也可以考虑webWorkers 以加快活动速度。 Web Worker 在单独的 javascript 上下文中运行并提供真正的并发处理。
为了获得终极速度，请使用 WebGL。所有逻辑都可以通过 GPU 上的片段着色器完成。这种类型的任务非常适合 GPU 设计的并行处理。
稍后会回来清理这个答案（有点太长了）
当红色从像素阵列中产生时，我还为像素阵列添加了一个边界。
const size = canvas.width;
canvas.height = canvas.width;
const ctx = canvas.getContext("2d");
const red = 0xFF0000FF;
const green = 0xFF00FF00;
const reds = new Uint32Array(size * size);
const wall = 0xFF000000;
var count = 0;
var head = 0;
var tail = 0;
var arrayOfSpawnS = []
for(let i = 0; i < 16; i ++){
let j = 0;
const combo = [];
i & 1 && (combo[j++] = 1); // right
i & 2 && (combo[j++] = -1); // left
i & 4 && (combo[j++] = -size); // top
i & 5 && (combo[j++] = size); // bottom
arrayOfSpawnS.push(combo);
}
const imageData = ctx.createImageData(size,size);
const data32 = new Uint32Array(imageData.data.buffer);
function createWall(){//need to keep the reds walled up so they dont run free
for(let j = 0; j < size; j ++){
data32[j] = wall;
data32[j * size] = wall;
data32[j * size + size - 1] = wall;
data32[size * (size - 1) +j] = wall;
}
}
function addARed(x,y){
const pixelIndex = x + y * size;
if (data32[pixelIndex] === green) {
reds[count++] = pixelIndex;
data32[pixelIndex] = red;
}
}
function processARed(indexOfRed) {
var pixelIndex = reds[indexOfRed];
var n = data32[pixelIndex + 1] === green ? 1 : 0;
n += data32[pixelIndex - 1] === green ? 2 : 0;
n += data32[pixelIndex - size] === green ? 4 : 0;
n += data32[pixelIndex + size] === green ? 8 : 0;
if(n === 0) { return false }
var nCount = arrayOfSpawnS[n].length;
if (nCount === 1) { reds[indexOfRed] += arrayOfSpawnS[n][0] }
else {
pixelIndex += arrayOfSpawnS[n][(Math.random() * nCount)|0]
reds[count++] = pixelIndex;
data32[pixelIndex] = red;
}
return true;
}
function doAllReds(){
head = tail = 0;
while(head < count) {
if(processARed(head)) { reds[tail++] = reds[head++] }
else { head++ }
}
count = tail;
}
function start(){
data32.fill(green);
createWall();
var startRedCount = (Math.random() * 5 + 1) | 0;
for(let i = 0; i < startRedCount; i ++) { addARed((Math.random() * size-2+1) | 0, (Math.random() * size-2+1) | 0) }
ctx.putImageData(imageData,0,0);
setTimeout(doItTillAllDead,1000);
countSameCount = 0;
}
var countSameCount;
var lastCount;
function doItTillAllDead(){
doAllReds();
ctx.putImageData(imageData,0,0);
if(count === 0 || countSameCount === 100){ // all dead
setTimeout(start,1000);
}else{
countSameCount += count === lastCount ? 1 : 0;
lastCount = count; //
requestAnimationFrame(doItTillAllDead);
}
}
start();
<canvas width="800" height="800" id="canvas"></canvas>