canvas | 程式專案 | 橘蘋學習平台

{"id":37780,"student_id":168,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003cmeta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"ie=edge\\\"\u003e\\n    \u003ctitle\u003ehaha~\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ccanvas id=\\\"myCanvas\\\" width=\\\"640\\\" height=\\\"480\\\"\u003e\u003c/canvas\u003e\\n    \u003cscript\u003e\\n        var canvas = document.getElementById('myCanvas');\\n        var context = canvas.getContext('2d');\\n\\n        var block = []\\n        for (var x = 0; x \u003c 32; x++) {\\n            block[x] = [];\\n            for (var y = 0; y \u003c 24; y++) {\\n                block[x][y] = [];\\n                for (var a = 0; a \u003c 4; a++) {\\n                    block[x][y][a] = true\\n                }\\n                block[x][y][4] = \\\"white\\\"\\n            }\\n        }\\n        var nowx = 0\\n        var nowy = 0\\n        block[0][0][4] = \\\"blue\\\"\\n\\n        while(true) {\\n            for (var x = 0; x \u003c 32; x++) {\\n                for (var y = 0; y \u003c 24; y++) {\\n                    for (var a = 0; a \u003c 4; a++) {\\n                        if (block[x][y][a] == true) {\\n                            context.beginPath();\\n                            context.lineWidth = 3;\\n                            context.strokeStyle = \\\"#000000\\\";\\n                            if (a == 0) {\\n                                context.moveTo(x*20, y*20);\\n                                context.lineTo((x+1)*20, y*20);\\n                            }\\n                            if (a == 1) {\\n                                context.moveTo((x+1)*20, y*20);\\n                                context.lineTo((x+1)*20, (y+1)*20);\\n                            }\\n                            if (a == 2) {\\n                                context.moveTo((x+1)*20, (y+1)*20);\\n                                context.lineTo(x*20, (y+1)*20);\\n                            }\\n                            if (a == 3) {\\n                                context.moveTo(x*20, (y+1)*20);\\n                                context.lineTo(x*20, y*20);\\n                            }\\n                            context.stroke();\\n                        }\\n                        context.beginPath();\\n                        context.rect(x*20, y*20, (x+1)*20, (y+1)*20);\\n                        context.fillStyle = block[x][y][4];\\n                        context.fill();\\n                        context.lineWidth = 0.001;\\n                        context.strokeStyle = 'black';\\n                        context.stroke();\\n                    }\\n                }\\n            }\\n            var nexts = getNexts();\\n            if (nexts.length \u003e 0) {\\n                var rand = Math.floor(Math.random()*nexts.length);\\n                if (nexts[rand] == 0) {\\n                    block[nowx][nowy][0] = false\\n                    nowy -= 1\\n                    block[nowx][nowy][2] = false\\n                    block[nowx][nowy][4] = \\\"blue\\\"\\n                }\\n                if (nexts[rand] == 1) {\\n                    block[nowx][nowy][1] = false\\n                    nowx += 1\\n                    block[nowx][nowy][3] = false\\n                    block[nowx][nowy][4] = \\\"blue\\\"\\n                }\\n                if (nexts[rand] == 2) {\\n                    block[nowx][nowy][2] = false\\n                    nowy += 1\\n                    block[nowx][nowy][0] = false\\n                    block[nowx][nowy][4] = \\\"blue\\\"\\n                }\\n                if (nexts[rand] == 3) {\\n                    block[nowx][nowy][3] = false\\n                    nowx -= 1\\n                    block[nowx][nowy][1] = false\\n                    block[nowx][nowy][4] = \\\"blue\\\"\\n                }\\n            } else {\\n                if ((block[nowx][nowy][0] == false) \u0026\u0026 (block[nowx][nowy-1][4] != \\\"yellow\\\") \u0026\u0026 (nowy \u003e 0)) {\\n                    block[nowx][nowy][4] = \\\"yellow\\\"\\n                    nowy -= 1\\n                }\\n                if ((block[nowx][nowy][1] == false) \u0026\u0026 (block[nowx+1][nowy][4] != \\\"yellow\\\") \u0026\u0026 (nowx \u003c 31)) {\\n                    block[nowx][nowy][4] = \\\"yellow\\\"\\n                    nowx += 1\\n                }\\n                if ((block[nowx][nowy][2] == false) \u0026\u0026 (block[nowx][nowy+1][4] != \\\"yellow\\\") \u0026\u0026 (nowy \u003c 23)) {\\n                    block[nowx][nowy][4] = \\\"yellow\\\"\\n                    nowy += 1\\n                }\\n                if ((block[nowx][nowy][3] == false) \u0026\u0026 (block[nowx-1][nowy][4] != \\\"yellow\\\") \u0026\u0026 (nowx \u003e 0)) {\\n                    block[nowx][nowy][4] = \\\"yellow\\\"\\n                    nowx -= 1\\n                }\\n            }\\n            context.beginPath();\\n            context.rect(nowx*20, nowy*20, (nowx+1)*20, (nowy+1)*20);\\n            context.fillStyle = \\\"red\\\";\\n            context.fill();\\n            context.lineWidth = 0;\\n            context.strokeStyle = 'black';\\n            context.stroke();\\n        };\\n\\n\\n        function getNexts () {\\n            var arr = [];\\n            if (nowy \u003e 0 \u0026\u0026 block[nowx][nowy-1][4] == 'white') {\\n                arr.push(0)\\n            }\\n            if (nowx \u003c 31 \u0026\u0026 block[nowx+1][nowy][4] == 'white') {\\n                arr.push(1)\\n            }\\n            if (nowy \u003c 23 \u0026\u0026 block[nowx][nowy+1][4] == 'white') {\\n                arr.push(2)\\n            }\\n            if (nowx \u003e 0 \u0026\u0026 block[nowx-1][nowy][4] == 'white') {\\n                arr.push(3)\\n            }\\n            return arr;\\n        }\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2018-08-04T13:35:29.382+08:00","updated_at":"2019-11-11T16:44:12.144+08:00","name":"canvas","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/37780/08f32af6c995ad8a2c417128bd3b6d61.jpg"},"parent_id":null,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":122,"hashid":"p93s3k6k","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}