陣列 & 迴圈 | JavaScript 程式專案

{"id":17521,"student_id":208,"content":"setBackdrop(\"#222\");\n\nvar shape = 'rect'; // \"rect\" or \"circle\"\nvar index = false;\nvar animate = false;\n// var grid = [\"red\", \"green\", \"blue\"]\n// grid.push(\"red\", \"green\", \"blue\")\n\n// // // // // grid[1] = \"orange\"\n// // // // // grid[2] = \"yellow\"\n// // // // // grid[3] = grid[4]\n// // // // // grid[4] = \"blue\"\n// // // // // grid[5] = \"purple\"\n// // // // // grid[6] = \"white\"\n\n// // // var i = 0;\n\n// // // While (i\u003c10) \n\n// // // }\n\n// for ( var i = 0; i\u003c5; i+=1 ) {\n//     grid.push(\"red\",\"blue\")\n// }\n\n// while(i\u003c30) {\n//     grid.push (\"red\");\n//     i += 1\n\n// }\n// var grid = [\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"yellow, \"orange\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"],\n//     [\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\",\"orange\", \"yellow\"]\n// ]\n// var row1 = [];\n// var row2 = [];\n// var grid = [];\n// var a = 0\n// // while (a\u003c10) {\n// //     a+=1\n// //     for(var i=0; i\u003c10; i+=1) {\n// //         row1.push(\"yellow\", \"red\");\n// //     }\n// //     for(var i=0; i\u003c10; i+=1) {\n// //         row2.push(\"red\", \"yellow\")\n// //     }\n// // }\n// grid = []\n// for(var i=0; i\u003c10; i+=1) {\n//     row1.push(\"yellow\", \"blue\");\n//     row2.push(\"red\", \"green\");\n// }\n// for(var i=0; i\u003c10; i+=1) {\n//     grid.push(row1)\n//     grid.push(row2)\n// }\n    \n\n// // for(var i=0; i\u003c10; i+=1) {\n// //     row1.push(\"yellow\", \"red\");\n// // }\n// // for(var i=0; i\u003c10; i+=1) {\n// //     row2.push(\"red\", \"yellow\")\n// // }\n\nvar grid = [    [\"white\", \"white\", \"white\"],[\"white\", \"red\", \"white\"],[\"white\", \"white\", \"white\"]\n]\nfor (var i=0; i\u003c10; i+=1)","created_at":"2017-03-01T20:52:04.729+08:00","updated_at":"2019-06-16T21:41:00.817+08:00","name":"陣列 \u0026 迴圈","language":"javascript","screenshot":{"url":"https://cdn2.koding.school/uploads/project/screenshot/17521/fd7084845949c64cd66c246d7fb8bfcb.jpg"},"parent_id":10709,"plugin":"var grid = [];\nvar padding = 20;\npen.size = 0;\n\nforever(function(){\n\n    var w,h;\n\n    w = grid.length;\n    h = 1;\n    for(var i=0; i\u003cgrid.length; i++) {\n        if(grid[i].constructor === Array \u0026\u0026 grid[i].length \u003e h) {\n            h = grid[i].length;\n        }\n    }\n\n    var a = (640 - padding*2) / w;\n    var b = (480 - padding*2) / h;\n    var cellWidth = a \u003e b ? b : a;\n\n    var offsetX = (640 - cellWidth * w) / 2;\n    var offsetY = (480 - cellWidth * h) / 2;\n\n    var time = Date.now()/1000;\n\n    for(var i=0; i\u003cgrid.length; i++) {\n        if(grid[i].constructor === Array) {\n            for(var j=0; j\u003cgrid[i].length; j++) {\n                if(grid[i][j]===undefined) continue;\n                pen.fillColor = grid[i][j];\n                if(window.shape == 'rect' \u0026\u0026 !animate) {\n                    pen.drawRect(offsetX + i*cellWidth, offsetY + j*cellWidth, cellWidth - cellWidth/10, cellWidth - cellWidth/10);\n                }\n                if(window.shape == 'circle' \u0026\u0026 !animate) {\n                    pen.drawCircle(offsetX + i*cellWidth + cellWidth/2, offsetY + j*cellWidth + cellWidth/2, cellWidth/2 - cellWidth/10);\n                }\n                if(animate) {\n                    var waveX = Math.sin(time*3.5 - Math.PI*i/8);\n                    var waveY = Math.sin(time*3.5 - Math.PI*i/8 - Math.PI/2);\n                }\n                if(window.shape == 'rect' \u0026\u0026 animate) {\n                    pen.drawRect(offsetX + i*cellWidth + waveX*3, offsetY + j*cellWidth + waveY*6, cellWidth - cellWidth/10 - waveX*1.2, cellWidth - cellWidth/10 - waveX*1.2);\n                }\n                if(window.shape == 'circle' \u0026\u0026 animate) {\n                    pen.drawCircle(offsetX + i*cellWidth + cellWidth/2 + waveX*3, offsetY + j*cellWidth + cellWidth/2 + waveY*6, cellWidth/2 - cellWidth/10 - waveX*1.2);\n                }\n            }\n        } else {\n            if(grid[i]===undefined) continue;\n            pen.fillColor = grid[i];\n            if(window.shape == 'rect' \u0026\u0026 !animate) {\n                pen.drawRect(offsetX + i*cellWidth, offsetY, cellWidth - cellWidth/10, cellWidth - cellWidth/10);\n            }\n            if(window.shape == 'circle' \u0026\u0026 !animate) {\n                pen.drawCircle(offsetX + i*cellWidth + cellWidth/2, offsetY + cellWidth/2, cellWidth/2 - cellWidth/10);\n            }\n            if(animate) {\n                var waveX = Math.sin(time*3.5 - Math.PI*i/8);\n                var waveY = Math.sin(time*3.5 - Math.PI*0/8 - Math.PI/2);\n            }\n            if(window.shape == 'rect' \u0026\u0026 animate) {\n                pen.drawRect(offsetX + i*cellWidth + waveX*3, offsetY + waveY*6, cellWidth - cellWidth/10 - waveX*1.2, cellWidth - cellWidth/10 - waveX*1.2);\n            }\n            if(window.shape == 'circle' \u0026\u0026 animate) {\n                pen.drawCircle(offsetX + i*cellWidth + cellWidth/2 + waveX*3, offsetY + cellWidth/2 + waveY*6, cellWidth/2 - cellWidth/10 - waveX*1.2);\n            }\n        }\n    }\n\n    if(index) {\n        var size =  cellWidth/3 \u003e 30 ? 30 : cellWidth/3;\n        for(var i=0; i\u003cw; i++) {\n            print(i, offsetX + i*cellWidth, offsetY - size*1.5, \"white\", size);\n        }\n        if(h \u003e 1) {\n            for(var i=0; i\u003ch; i++) {\n                print(i, offsetX - size*1.5, offsetY + i*cellWidth, \"white\", size);\n            }\n        }\n    }\n});","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":94,"hashid":"p93skg8m","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}