2c:null 2d:["$","title",null,{"children":"Breakout: create a lot of bricks for the ball | 深度碎片 | Observable"}] 32:T477,bricks = { // let's create the bricks using eachBrick function newGame; // to reset the bricks for each new game const rows = 6; // set the number of rows for bricks const columns = Math.floor(w / 50); // brick width is roughly 50px, but the number of cols shall be dynamic const padding = 3, top = 70; // padding for bricks on left and right walls is 3 px, top space is 70, larger space for ball to run const width = (w - (columns + 1) * padding - 2 * scale) / columns // actual or exact width for each brick // return width; // to check the brick width value let bricks = new Array(rows).fill(1).map(() => new Array(columns).fill(1)); // quickly create a matrix of bricks // return bricks; // check as debugger eachBrick(bricks, (brick, row, col) => { // define each brick's property inside an object for drawing later bricks[row][col] = { w: width, h: scale, x: scale + padding * (col + 1) + col * width, // there is 1 more padding when it comes to second brick y: top + (scale + padding) * row // there is top padding between each row of bricks } }); return bricks; }33: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; } }34:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1574864653075.617,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1574864653075.617,"size":20368}] 30:{"id":"c9d389046f5e57a2","slug":"breakout-create-a-lot-of-bricks-for-the-ball","title":"Breakout: create a lot of bricks for the ball","thumbnail":"70ac4957787c59c83aa06815ccb6db8fc5de494fa925d49b117533c71b1af3f4","access_level":"public","create_time":"$D2019-11-27T14:24:13.075Z","update_time":"$D2019-11-27T15:48:10.286Z","view_time":null,"first_public_time":"$D2019-11-27T15:35:02.371Z","has_unpublished_edits":null,"fork":{"id":"56d65fc9bff30ca1","slug":"breakout-paddle-considering-the-thickness-of-the-wall","title":"Breakout: paddle considering the thickness of the wall","owner":{"id":"7a6719735624fc09","login":"embracelife","name":"深度碎片"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7a6719735624fc09","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":"starter_2024"},"version":445,"publish_version":445,"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":null,"type":"notebook","body":{"titling":"auto","title":"Breakout: create a lot of bricks for the ball","cells":[{"id":0,"value":"md`# Breakout: create a lot of bricks for the ball\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":426,"value":"function eachBrick(bricks, cb) { \n // create a bricks callback function to process each brick\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; // if current brick is undefined, move on to the next\n if (cb(brick, row, col)) return; // be careful the args you use: bricks or brick !!!\n // do something to each brick, and if return true, exit the loop and leave the rest of bricks alone\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":428,"value":"$32","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 ) { // considering thickness of the wall\n mutable paddleX = e.offsetX - paddleLength/2 \n } else if ( paddleLength/2 + scale > e.offsetX ) { // considering thickness of the wall\n mutable paddleX = scale // considering thickness of the wall\n } else {\n mutable paddleX = w - paddleLength - scale // considering thickness of the wall\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":"$33","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) => { // brick not bricks!!!\n debugger;\n c.fillStyle = \"green\"; // make it simple for now\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":"$W34","stdlib":"1"}} 31:"$30:body"