31:T488,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(1000); } if (y + r > h) { ySpeed = -Math.abs(ySpeed); yield pauseBall(0); } // when the ball hits the paddle let px = mutable paddleX; if ( x + r > px && x - r < px + paddleLength && y + r > h - scale) { // return true; yield pauseBall(1000); ySpeed = -ySpeed; // let xChangeRateDirection = ((x - px) / paddleLength - 0.5) * Math.PI; xSpeed = speed * ((x - px) / paddleLength - 0.5) * Math.PI; // return xSpeed; } mutable ball = {r, x, y, xSpeed, ySpeed}; yield true; } }32:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1575466601528.772,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1575466601528.772,"size":20368}] 2f:{"title":"Breakout: use paddle to bounce the ball","cells":[{"id":0,"value":"md`# Breakout: use paddle to bounce the ball\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":90,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"mutable paddleX = {\n\n return w/2 - paddleLength/2; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable ball = {\n\n return {r: scale, x: w/2, y: h-2*scale, xSpeed: speed, ySpeed: speed}; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"viewof paddleLength = slider({min: 20, max: 750, value: 700, 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":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"}