31:[{"id":"95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","href":"https://static.observableusercontent.com/files/95eb25be5b21b34085d6dffdd8129bd6517658aef27eddd888194e4cd587d32f8dd29b0aad7896ddb87076bbd0ed3db8f12366b41cb0bd9f6175669a39fc26b0","name":"chart.png","type":"image/png","lastModified":1574745292386.931,"size":157153},{"id":"961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","href":"https://static.observableusercontent.com/files/961a4475613d7e799fc92fd09e582c312c5aa053ff68570d361b44c01fd0d367a3788c242331fee893e74809f5c3527c8a1138bcce54354d8df079ff487fc2e9","name":"chart.svg","type":"image/svg+xml","lastModified":1574745292386.931,"size":20368}] 2f:{"title":"Breakout: create a paddle for the ball","cells":[{"id":0,"value":"md`# Breakout: create a paddle for 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 return c.canvas; // a canvas has nothing on it\n}","pinned":false,"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":330,"value":"mutable paddleX = w/2 - paddleLength/2; // paddleX should be mutable by mouse, initialized at the middle","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"// add a mouse event listener in another cell\nmousemove = c.canvas.onmousemove = e => { \n // https://www.w3schools.com/jsref/event_onmousemove.asp\n \n // debugger;// try to inspect e and e.offsetX value\n \n // https://www.w3schools.com/jsref/event_offsetx.asp \n \n // use mouse control the most left of the paddle\n // mutable paddleX = ( e.offsetX < w - paddleLength ) ? e.offsetX : w - paddleLength \n \n // use mouse control the middle point of the paddle\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":60,"value":"mutable ball = ({r: scale, x: 0, y: 0, xSpeed: speed, ySpeed: speed}); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"gameloop = {\n let n = 0;\n let {r, x, xSpeed, y, ySpeed} = mutable ball; \n \n function pauseBall(duration){ \n mutable ball = {r, x, y, xSpeed, ySpeed}\n return Promises.delay(duration, mutable ball) \n }\n \n while (true) { \n \n x = x + xSpeed;\n y = y + ySpeed;\n\n if (x < r) {\n xSpeed = Math.abs(xSpeed); \n yield pauseBall(0);\n\n }\n \n if (x + r > w) {\n xSpeed = -Math.abs(xSpeed); \n yield pauseBall(0);\n }\n \n if (y < r) { \n ySpeed = Math.abs(ySpeed);\n yield pauseBall(0);\n }\n \n if (y + r > h) {\n ySpeed = -Math.abs(ySpeed); \n yield pauseBall(0);\n }\n \n mutable ball = {r, x, y, xSpeed, ySpeed};\n \n yield true; \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 // draw the paddle \n c.fillStyle = \"blue\";\n c.fillRect(mutable paddleX, \n h - scale, // paddleY\n paddleLength, // width of the paddle\n scale); // height of the paddle\n \n // draw paddle starting point\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} 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":"$W31","stdlib":"1","titling":"auto"}