Disappear disappear happy (ask big guy to help change JS)
The initial images
Click on the green circle in row 4, column 1
The CSS code is as follows
#mycanvas {
background-color: white;
}
Copy the codeThe HTML code is as follows
<canvas id="mycanvas" width="500" height="500"></canvas>
Copy the codeJs code
- You store colors in an array, and the last color is white, which is the same as the background color, so it will disappear
var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); / var/color array colorArry = [' blue ', 'green', 'black', 'purple', 'yellow', 'red', 'white'].Copy the code- Create three two-dimensional arrays to store colors,X coordinates and y coordinates
Var array1 = new Array(10); for (let i = 0; i < 10; I ++) {// Array1 [I] = new Array(10); } var array2 = new Array(10); for (let i = 0; i < 10; I ++) {// Array2 [I] = new Array(10); } var array3 = new Array(10); for (let i = 0; i < 10; I ++) {// Array3 [I] = new Array(10); }Copy the code- Generates the color and position of the circle
Function makeAll() {// let x = 0; let y = 20; for (let i = 0; i < 10; i++) { x = 20; for (let j = 0; j < 10; J++) {let index = math.floor (math.random () * 6); array1[i][j] = index; array2[i][j] = x; array3[i][j] = y; x = x + 50; } y = y + 50; }}Copy the code- Draw the garden on your drawing board
Function drowCircle(index, x, y) {ctx.save(); ctx.beginPath(); ctx.arc(x, y, 18, 0, 2 * Math.PI); ctx.fillStyle = colorArry[index]; ctx.fill(); ctx.closePath(); ctx.restore(); }Copy the code- Loop through all the circles
Function drowAll() {for (let I = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { drowCircle(array1[i][j], array2[i][j], array3[i][j]) } } }Copy the code- Initialize the
Function init() {// Initialize makeAll(); drowAll(); } init(); / / initializationCopy the code- Create a click event
Onclick = function () {let x = event.clientx; // let y = event.clienty; Var mousej = 0; Var mousei = 0; // mousej = coordinate(y); Mousei = coordinate(x); Var color = array1[mousej][mousei]; If ((mousej + 1) < 10 && color == array1[mousej + 1][mousei]) If ((mousej-1) >= 0 && color == array1[mousej-1][mousei]) set2(mousej, mousei, color); If ((mousej + 1) < 10 && color == array1[mousej][mousei + 1]) set3(mousej, mousei, color); If ((mouse-1) >= 0 && color == array1[mousej][mouse-1]) set4(mousej, mousei, color); // Call stack does not overflow changeAll(); // Change the layout of the circle changeAll(); ctx.clearRect(0, 0, 600, 600); // Empty artboard drowAll(); }Copy the code- Recursively find the same color in four directions and change its color to white
Function set1(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousej + 1) < 10 && color == array1[mousej + 1][mousei]) { set1(mousej + 1, mousei, Function set2(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousej - 1) >= 0 && color == array1[mousej - 1][mousei]) { set2(mousej - 1, mousei, Array1 [mousej][mousei] = 6;}} function set3(mousej, mousei, color) {array1[mousej] = 6; if ((mousei + 1) < 10 && color == array1[mousej][mousei + 1]) { set3(mousej, mousei + 1, Function set4(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousei - 1) >= 0 && color == array1[mousej][mousei - 1]) { set4(mousej, mousei - 1, color) } }Copy the code- Get coordinates (poorly written)
Function coordinate(x) {let mouse; if (x < 50) { mouse = 0 } if (x > 50 && x < 100) { mouse = 1 } if (x > 100 && x < 150) { mouse = 2 } if (x > 150 && x < 200) { mouse = 3 } if (x > 200 && x < 250) { mouse = 4 } if (x > 250 && x < 300) { mouse = 5 } if (x > 300 && x < 350) { mouse = 6 } if (x > 350 && x < 400) { mouse = 7 } if (x > 400 && x < 450) { mouse = 8 } if (x > 450 && x < 500) { mouse = 9 } return mouse; }Copy the code- Float all white gardens to the top
Function changeAll() {let col; let row; for (col = 0; col < 10; col++) { for (row = array1.length - 1; row > 0; row--) { if (array1[row][col] == 6) { for (let k = row; k > 0; k--) { array1[k][col] = array1[k - 1][col]; } array1[0][col] = 6; }}}Copy the code- Complete js
var canvas = document.getElementById('mycanvas'); var ctx = canvas.getContext('2d'); Var colorArry = ['blue', 'green', 'black', 'purple', 'yellow', 'red', 'white']; Var array1 = new Array(10); for (let i = 0; i < 10; I ++) {// Array1 [I] = new Array(10); } var array2 = new Array(10); for (let i = 0; i < 10; I ++) {// Array2 [I] = new Array(10); } var array3 = new Array(10); for (let i = 0; i < 10; I ++) {// Array3 [I] = new Array(10); Function drowCircle(index, x, y) {ctx.save(); ctx.beginPath(); ctx.arc(x, y, 18, 0, 2 * Math.PI); ctx.fillStyle = colorArry[index]; ctx.fill(); ctx.closePath(); ctx.restore(); } function makeAll() {// let x = 0; let y = 20; for (let i = 0; i < 10; i++) { x = 20; for (let j = 0; j < 10; J++) {let index = math.floor (math.random () * 6); array1[i][j] = index; array2[i][j] = x; array3[i][j] = y; x = x + 50; } y = y + 50; Function drowAll() {for (let I = 0; i < 10; i++) { for (let j = 0; j < 10; J++) {drowCircle (array1 [I] [j], array2 [I] [j], array3 [I] [j])}}} function init () {/ / initialization makeAll (); drowAll(); } init(); Onclick = function () {let x = event.clientx; let y = event.clientY; var mousej = 0; Var mousei = 0; // mousej = coordinate(y); Mousei = coordinate(x); Var color = array1[mousej][mousei]; If ((mousej + 1) < 10 && color == array1[mousej + 1][mousei]) If ((mousej-1) >= 0 && color == array1[mousej-1][mousei]) set2(mousej, mousei, color); If ((mousej + 1) < 10 && color == array1[mousej][mousei + 1]) set3(mousej, mousei, color); If ((mouse-1) >= 0 && color == array1[mousej][mouse-1]) set4(mousej, mousei, color); // Call stack does not overflow changeAll(); // Change the layout of the garden changeAll(); ctx.clearRect(0, 0, 600, 600); drowAll(); } function set1(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousej + 1) < 10 && color == array1[mousej + 1][mousei]) { set1(mousej + 1, mousei, Function set2(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousej - 1) >= 0 && color == array1[mousej - 1][mousei]) { set2(mousej - 1, mousei, Array1 [mousej][mousei] = 6;}} function set3(mousej, mousei, color) {array1[mousej] = 6; if ((mousei + 1) < 10 && color == array1[mousej][mousei + 1]) { set3(mousej, mousei + 1, Function set4(mousej, mousei, color) {array1[mousej][mousei] = 6; if ((mousei - 1) >= 0 && color == array1[mousej][mousei - 1]) { set4(mousej, mousei - 1, Function coordinate(x) {let mouse; if (x < 50) { mouse = 0 } if (x > 50 && x < 100) { mouse = 1 } if (x > 100 && x < 150) { mouse = 2 } if (x > 150 && x < 200) { mouse = 3 } if (x > 200 && x < 250) { mouse = 4 } if (x > 250 && x < 300) { mouse = 5 } if (x > 300 && x < 350) { mouse = 6 } if (x > 350 && x < 400) { mouse = 7 } if (x > 400 && x < 450) { mouse = 8 } if (x > 450 && x < 500) { mouse = 9 } return mouse; } function changeAll() {let col; let row; for (col = 0; col < 10; col++) { for (row = array1.length - 1; row > 0; row--) { if (array1[row][col] == 6) { for (let k = row; k > 0; k--) { array1[k][col] = array1[k - 1][col]; } array1[0][col] = 6; }}}}Copy the code