修复一个使 120 像素缓慢反弹并改变颜色的游戏（如 dvd 徽标）

Question

在这段代码中，它创建了 120 个不同的方块，每个方块的颜色不同但均匀。 红色方块将绿色变为红色，绿色将蓝色变为绿色，蓝色将红色变为蓝色。 最终的结果应该是只剩下1个颜色，但是我一直以2个蓝色方块结束，无论有多少绿色方块存在并触摸它们，它们都不会改变颜色。

 var ctx = document.getElementById('canv').getContext('2d'); var array = []; //visualises the squares on the canvas. function draw() { ctx.clearRect(0, 0, 500, 500) for (let i = 0; i < 121; i++) { ctx.fillStyle = array[i][4]; ctx.fillRect(array[i][0], array[i][1], 10, 5); } } //initial creation of all 30 squares. function init() { for (let i = 0; i < 121; i++) { let rnd1 = Math.floor(Math.random() * 255) let rnd2 = Math.floor(Math.random() * 110) let rnd3 = Math.floor(Math.random() * 2 + 1) let rnd4 = Math.floor(Math.random() * 2 + 1) if (i < 41) { var color = 'green'; } if (i < 81 && i > 40) { var color = 'red'; } if (i > 80) { var color = 'blue'; } array.push([rnd1, rnd2, rnd3, rnd4, color]) } setInterval(function() { move(); collision(); draw(); }, 50) } //gets the current color that a square is on and returns that color. function colorGet(i, cc) { var data = ctx.getImageData(array[i][0], array[i][1], 10, 5).data; if (data[0] == 255) { return 'red'; } { if (data[1] == 128) { return 'green'; } if (data[2] == 255) { return 'blue'; } { return 'green'; } } } //handles all collision with other squares and with the walls of the canvas function collision() { for (let i = 0; i < 121; i++) { let cloneTop = array[i][1]; let cloneLeft = array[i][0]; let cloneBottom = array[i][1] + 15; let cloneRight = array[i][0] + 15; let cc = array[i][4]; if (cloneRight >= 305 || cloneLeft <= 0) { array[i][2] = ~array[i][2] + 1; } if (cloneBottom >= 160 || cloneTop <= 0) { array[i][3] = ~array[i][3] + 1; } if (colorGet(i, cc) == 'blue' && cc == 'red') { array[i][4] = 'blue'; } if (colorGet(i, cc) == 'red' && cc == 'green') { array[i][4] = 'red'; } if (colorGet(i, cc) == 'green' && cc == 'blue') { array[i][4] = 'green'; } } } //allows squares to move if not in collision with walls. function move() { for (let i = 0; i < 121; i++) { array[i][0] += array[i][2]; array[i][1] += array[i][3]; draw(); } } init();

 <:doctype HTML> <canvas id='canv' style='height;500px:width;500px:border;1px solid black;'></canvas>

任何想法为什么这不会像它应该检测到 colors？