2c:null 2d:["$","title",null,{"children":"Breakout: continue, return, callback on bricks | 深度碎片 | Observable"}] 32:T478,gameloop = { let n = 0; let {r, x, xSpeed, y, ySpeed} = mutable ball; function pauseBall(duration){ mutable ball = {r, x, y, xSpeed, ySpeed} return Promises.delay(duration, mutable ball) } while (!mutable gameover) { x = x + xSpeed; y = y + ySpeed; if (x < r + scale) { xSpeed = Math.abs(xSpeed); // yield pauseBall(1000); } if (x + r > w - scale) { xSpeed = -Math.abs(xSpeed); // yield pauseBall(1000); } if (y < r + scale) { ySpeed = Math.abs(ySpeed); // yield pauseBall(1000); } if (y + r > h) { ySpeed = -Math.abs(ySpeed); // yield pauseBall(0); } mutable ball = {r, x, y, xSpeed, ySpeed}; let px = mutable paddleX; if (y + r > h - scale && x + r > px && x - r < px + paddleLength) { yield pauseBall(0); ySpeed = -ySpeed; xSpeed = ((x - px) / paddleLength - 0.5) * Math.PI * speed; } if ( y + r > h ) { mutable gameover = true; yield pauseBall(3000); } yield true; } }33:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1575001768118.162,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1575001768118.162,"size":20368}] 30:{"id":"193ffe9f4ed48a57","slug":"breakout-continue-return-callback-on-bricks","title":"Breakout: continue, return, callback on bricks","thumbnail":"ceed7fd07cf8ab4bdbf8ceb8a6bb80090fb2466fe6a31301b29e7793f28bf160","access_level":"public","create_time":"$D2019-11-29T04:29:28.118Z","update_time":"$D2019-11-29T04:31:52.396Z","view_time":null,"first_public_time":"$D2019-11-29T04:31:57.066Z","has_unpublished_edits":null,"fork":{"id":"7636b2114757682e","slug":"breakout-add-a-series-of-color-to-bricks","title":"Breakout: add a series of color to bricks","owner":{"id":"7a6719735624fc09","login":"embracelife","name":"深度碎片"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a6719735624fc09","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":"starter_2024"},"version":459,"publish_version":459,"role":null,"authored":false,"authors":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null}],"members":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6667f867eb133d8c","slug":"observable-code-along","title":"Observable-Code-Along","owner":{"id":"7a6719735624fc09","login":"embracelife","name":"深度碎片"}},"type":"notebook","body":{"titling":"auto","title":"Breakout: continue, return, callback on bricks","cells":[{"id":0,"value":"md`# Breakout: continue, return, callback on bricks\ncode along with jashkenas [youtube](https://youtu.be/Aznz6oLbuFQ)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof c = {\n var c = DOM.context2d(w, h);\n c.canvas.value = c;\n // c.canvas.style.cursor = \"none\"; \n return c.canvas; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"viewof newGame = button(\"new game\"); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md `\n### ${gameover ? \"GAME OVER\" : \" \"} \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"colors = [\"#c84848\", \"#c66c3a\", \"#b47a2f\", \"#a2a229\", \"#49a049\", \"#4348c8\"]; // array of colors","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"bricks = { \n newGame; \n \n const rows = 6; \n const columns = Math.floor(w / 50); \n const padding = 3, top = 70; \n const width = (w - (columns + 1) * padding - 2 * scale) / columns \n \n let bricks = new Array(rows).fill(1).map(() => new Array(columns).fill(1)); \n \n eachBrick(bricks, (brick, row, col) => { \n bricks[row][col] = {\n w: width,\n h: scale,\n x: scale + padding * (col + 1) + col * width, \n y: top + (scale + padding) * row, \n color: colors[row] \n }\n });\n\n \n return bricks;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"function eachBrick(bricks, cb) { \n \n for (let row = 0; row < bricks.length; row++) {\n for (let col = 0; col < bricks[row].length; col++) {\n let brick = bricks[row][col];\n if (!brick) continue; // continue: if current brick not exist, move onto next brick\n if (cb(brick, row, col)) return; // if callback on the brick return true, then exit and leave the rest of bricks alone; if return undefined, keep working on the next brick\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"mutable gameover = {\n \n newGame; \n \n return false; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"viewof paddleLength = slider({min: 20, max: 150, value: 90, step: 1, title: \"paddleLength\"});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewof w = slider({min:100, max: width, value: 700, step: 1, title: \"width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof h = slider({min: 100, max: 800, value: 350, step: 1, title: \"height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof speed = slider({min: 1, max: 50, value: 5, step: 1, title: \"speed\"}) // speed is global, cause mutable ball to react too","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof scale = slider({min: 5, max: 100, value: 10, step: 1, title: \"scale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"mutable paddleX = w/2 - paddleLength/2; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"mousemove = c.canvas.onmousemove = e => { \n \n if ( paddleLength/2 + scale <= e.offsetX && e.offsetX <= w - paddleLength/2 - scale ) { \n mutable paddleX = e.offsetX - paddleLength/2 \n } else if ( paddleLength/2 + scale > e.offsetX ) { \n mutable paddleX = scale \n } else {\n mutable paddleX = w - paddleLength - scale \n }\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"\nmutable ball = {\n newGame;\n return {r: scale, x: w/2, y: h - 2*scale, xSpeed: speed, ySpeed: -speed}; \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"draw = {\n gameloop; \n \n c.fillStyle=\"black\";\n c.fillRect(0,0,w,h);\n \n // draw the thick walls\n c.fillStyle = \"#444\"; \n c.fillRect(0, 0, w, scale); \n c.fillRect(0, 0, scale, h); \n c.fillRect(w-scale, 0, scale, h); \n \n // draw the bricks\n eachBrick(bricks, (brick, row, col) => { \n c.fillStyle = brick.color; \n c.fillRect(brick.x, brick.y, brick.w, brick.h);\n });\n \n const {r, x, y} = mutable ball; \n \n c.beginPath();\n c.fillStyle = \"red\";\n c.arc(x, y, r, 0, 2 * Math.PI);\n c.fill();\n \n // c.fillStyle = \"green\"\n // c.font = \"15px Arial\"\n // if ( y + r > h ) c.fillText(`y + r > h : ${y + r > h} gameover: ${gameover}`, (x < w/2)? x + 20 : x - 170, y - 20); \n\n \n c.fillStyle = \"blue\";\n c.fillRect(mutable paddleX, \n h - scale, \n paddleLength, \n scale); \n \n c.fillStyle = \"cyan\";\n c.fillRect(mutable paddleX, h - scale, 2, 2)\n \n\n \n\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"videoyt(\"Aznz6oLbuFQ\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import {videoyt, slider, button} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"FileAttachment(\"chart.svg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"FileAttachment(\"chart.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"