2c:null 2d:["$","title",null,{"children":"Breakout: bounce the ball on the paddle | 深度碎片 | Observable"}] 32:T88c,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 (true) { x = x + xSpeed; y = y + ySpeed; if (x < r) { xSpeed = Math.abs(xSpeed); yield pauseBall(0); } if (x + r > w) { xSpeed = -Math.abs(xSpeed); yield pauseBall(0); } if (y < r) { ySpeed = Math.abs(ySpeed); yield pauseBall(0); } if (y + r > h) { ySpeed = -Math.abs(ySpeed); yield pauseBall(0); } mutable ball = {r, x, y, xSpeed, ySpeed}; // bounce off the paddle let px = mutable paddleX; // make the mutable paddleX an alias // make sure the ball hit the paddle (hit inside the space/bounds of the paddle) if (y + r > h - scale // the ball's bottom side is below the top side of the paddle && x + r > px // the ball's right side is on the right of the left side of the paddle && x - r < px + paddleLength) { // the ball's left side is on the left of the rightside of the paddle yield pauseBall(0); // inspect to visualize ball hitting paddle ySpeed = -ySpeed; // reverse the up-down direction xSpeed = ((x - px) / paddleLength // where exactly on the paddle does the ball hit, in scale from 0-1 - 0.5) // - 0.5 to measure how far the hitting position is from the center of paddle // if the ball hits the left side from the center of paddle (being negative after - 0.5), change xSpeed (or x direction) // if the ball hits the right side from the center of paddle (being positive after - 0.5), direction is unchanged * Math.PI * speed; // multiply a positive constant, indicates that // the closer the ball hit the center of paddle, the slower the ball is bounced; // the further the ball hit the center of paddle, the faster the ball is bounced } yield true; } }33:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1574765366589.779,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1574765366589.779,"size":20368}] 30:{"id":"2bca5996f35b25a8","slug":"breakout-bounce-the-ball-on-the-paddle","title":"Breakout: bounce the ball on the paddle","thumbnail":"2cf39ac2a91ca0e29fe2d3c4382fc9615a47b30b91f80e71618931dcdf2957a9","access_level":"public","create_time":"$D2019-11-26T10:49:26.589Z","update_time":"$D2019-12-04T06:30:42.691Z","view_time":null,"first_public_time":"$D2019-11-26T10:51:46.901Z","has_unpublished_edits":null,"fork":{"id":"43e391f13ebb0589","slug":"breakout-hide-cursor-inside-canvas","title":"Breakout: hide cursor inside canvas","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":399,"publish_version":399,"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":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Breakout: bounce the ball on the paddle","cells":[{"id":0,"value":"md`# Breakout: bounce the ball on the paddle\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":384,"value":"viewof restart = button()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"restart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"mutable paddleX = {\n restart;\n return w/2 - paddleLength/2; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"mutable ball = {\n restart;\n return {r: scale, x: w/2, y: h-2*scale, xSpeed: 0, ySpeed: speed}; \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":335,"value":"mousemove = c.canvas.onmousemove = e => { \n \n if ( paddleLength/2 <= e.offsetX && e.offsetX < w - paddleLength/2 ) {\n mutable paddleX = e.offsetX - paddleLength/2 \n } else if ( paddleLength/2 > e.offsetX ) {\n mutable paddleX = 0 \n } else {\n mutable paddleX = w - paddleLength\n }\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 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 ( x < r ) c.fillText(`x < r : ${x < r}`, x + 20, (y < h/2)? y + 20 : y - 20); \n if ( x + r > w ) c.fillText(`x + r > w : ${x + r > w}`, x - 120 , (y < h/2)? y + 20 : y - 20); \n if ( y < r ) c.fillText(`y < r : ${y < r}`, ( x < w/2) ? x + 20 : x - 80, y + 20, );\n if ( y + r > h ) c.fillText(`y + r > h : ${y + r > h}`,( x < w/2) ? x + 20 : x - 80, y - 20);\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}","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"