31: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; } }32:[{"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}] 2f:{"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"},{"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"},{"id":384,"value":"viewof restart = button()","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"restart","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"mutable paddleX = {\n restart;\n return w/2 - paddleLength/2; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":318,"value":"viewof paddleLength = slider({min: 20, max: 150, value: 90, step: 1, title: \"paddleLength\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof w = slider({min:100, max: width, value: 700, step: 1, title: \"width\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof h = slider({min: 100, max: 800, value: 350, step: 1, title: \"height\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":179,"value":"viewof scale = slider({min: 5, max: 100, value: 10, step: 1, title: \"scale\"})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":90,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":53,"value":"videoyt(\"Aznz6oLbuFQ\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {videoyt, slider, button} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"FileAttachment(\"chart.svg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"FileAttachment(\"chart.png\").image()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}