31:T437,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 wall 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) => { bricks[row][col] = { w: width, h: scale, x: scale + padding * (col + 1) + col * width, y: top + (scale + padding) * row, color: colors[row], points: breakpoints[row] // *********** add points as a property of bricks } }); return bricks; }32:T593,gameloop = { let {r, x, y, dx, dy} = mutable ball; while (!mutable gameover) { // stop iterating when gameover is true: x += dx, y += dy; // bounce the wall with a scale thickness if (x < r + scale) dx = Math.abs(dx); // bounce into the left wall if (x + r > w - scale) dx = -Math.abs(dx); // bounce into the right wall if (y < r + scale) dy = Math.abs(dy); // bounce into the top wall // bounce off the paddle let px = mutable paddleX; if (y + r > h - scale && x + r > px && x - r < px + paddleLength) { dy = -dy; dx = ((x - px) / paddleLength - 0.5) * Math.PI * speed; } eachBrick(bricks, (brick, row, col) => { let hit = collide(mutable ball, brick); // see whether a ball and a brick collide if (!hit) return; // if not hit a brick, then return undefined to move on and check another brick bricks[row][col] = null; // if hit a brick, then turn the brick null (hit == "v") ? dy = -dy : dx = -dx; // if hit vertically, reverse y direciton, otherwise reserve x direction mutable scores += brick.points; // ************** add up scores when a brick is hit return true; // to stop check other bricks }); // hit the bottom wall and gameover if (y + r > h) mutable gameover = true; mutable ball = {r, x, y, dx, dy}; yield true; } }33:T480,function collide(ball, brick){ // ********** 1 const {x, y, r, dx, dy} = ball; // why not add mutable? // ************ 2 let hit = x + r > brick.x && x - r < brick.x + brick.w && // the ball is within the brick's width y + r > brick.y && y - r < brick.y + brick.h; // the ball is within the brick's height if (!hit) return false; // if not hit, return false // what does these two lines mean? // ************ 3 // if (y - dy + r <= brick.y ) debugger; // the ball falls into brick but less than a dy depth (try make the ball bounce in the top region to trigger the debugger here) if (y - dy + r <= brick.y || // the ball should fall into bricks but not too deep y - dy - r >= brick.y + brick.h) { // the ball should bounce up into bricks but not too deep return "v"; // return a value enable callback to stop eachBrick to check on the rest of bricks ********* 4 } if (x - dx + r <= brick.x || // when the ball runs from left to right into the bricks but not too deep x - dx - r >= brick.x + brick.w) { // when the ball runs from right to left into the bricks but not too deep return "h"; } }34:Tbf3, md` ## Coding steps 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@30/history", "create a basic canvas")} with \`DOM.context2d\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@35/history", "display the canvas")} with \`viewof\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@36/history", "assign c as ")} \`c.canvas.value\` (why it is important?) 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@47/history", "turn static w and h into dynamic ")} \`slider\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@59/history", "add expandable youtube video to code along")} with \`videoyt\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@62/history", "create a mutable ball object in the middle of the canvas")}, but why \`mutable\`? 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@95/history", "use a new cell to draw the canvas background shape and color")} with \`c.fillStyle\`, \`c.fillRect\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@102/history", "draw the ball on the canvas")} with \`c.beginPath\`, \`c.arc\`, \`c.fill\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@125/history", "create gameloop and draw the ball at every frame")} with \`yield\`, \`const {} = mutable ball\`, \`let {} = mutable ball\`, \`mutable ball = {r, x, y}\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@134/history", "create a gameloop to keep drawing ball with different locations")} Why must use \`yield\` instead a pure while loop? Why \`gameloop\` keeps \`draw\` updating? 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@169/history", "add scale and speed as ball's new property and create sliders for them")} 1. add dynamics to \`dx\` and \`dy\` to ${anchorLink("https://observablehq.com/d/101971d1850e082d@178/history", "make ball bounce the wall")} 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@203/history", "how to draw a paddle onto the canvas")} How can \`mutable\` enable paddle to change its position dynamically? ${anchorLink("https://youtu.be/Aznz6oLbuFQ?t=708", "video backward")} 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@226/history", "how to use mouse to control paddle")} How add mouse eventListener to the paddle? ${anchorLink("https://youtu.be/Aznz6oLbuFQ?t=789", "video backward")} and how to debug the existence of \`c.canvas.onmousemove\`? 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@236/history", "how to make cursor disappear inside canvas")} with \`c.canvas.style.cursor\` 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@249/history", "how to make the ball bounce off the paddle")} How to measure whether the ball really hit the paddle? How to adjust the ball's speedX based on where it hits the paddle? 1. ${anchorLink("https://observablehq.com/d/101971d1850e082d@283/history", "how to setup the gameover scenario")} How to create a mutable for gameover? How to set the condition for gameover? How to restart a game manually? `35:[] 2f:{"title":"Breakout - code along","cells":[{"id":746,"value":"md`# Breakout - code along\nsee the original ${anchorLink(\"https://observablehq.com/@jashkenas/breakout\", \"notebook\")}, or code along with jashkenas on ${anchorLink(\"https://youtu.be/Aznz6oLbuFQ\", \"youtube\")}\n\nAfter you master the technique details of this tutorial, you can let your imagination go wild with it!\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"md `# How to display the highScore and scores?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"md `# BreakOut!\n### High Score : ${highScore}\n#### score: ${scores}\n### ${gameover ? \"GAME OVER\" : \" \"}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"viewof c = {\n var c = DOM.context2d(w, h);\n\n c.canvas.value = c;\n c.canvas.style.cursor = \"none\"; // make cursor disappear inside the canvas\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof newGame = button(\"new game\"); // create a button, click it will reset ball and gameover","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"viewof w = slider({min:100, max: width, value: 700, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof h = slider({min: 100, max: 800, value: 350, step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof speed = slider({min: 0.1, max: 10, step: 0.1, value: 5});","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"viewof scale = slider({min: 2, max: 20, value: 12, step: 1});","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"viewof paddleLength = slider({min: 20, max: 850, value: 150, step: 1}); // to make the debugger easier with long paddle ******** 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":683,"value":"viewof s = scores","pinned":false,"hidden":false,"mode":"ojs"},{"id":708,"value":"highScore = {\n // debugger;\n console.log(this);\n return Math.max(this || 0, scores);// why this? -> highScore\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"mutable scores = {\n newGame;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable ball = { // reset ball using newGame button\n newGame;\n return {r: scale * 0.7, x: w/2, y: h - 2 * scale, dx: 0, dy: -speed}; \n \n // debugger helper: make the ball bounce in the top region at ease \n // return {r: scale * 0.7, x: w/2, y: 2 * scale, dx: speed, dy: -speed}; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"breakpoints = [7,7,4,4,1,1]; ","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"colors = [\"#c84848\", \"#c66c3a\", \"#b47a2f\", \"#a2a229\", \"#49a049\", \"#4348c8\"];","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"function eachBrick(bricks, cb) { \n // create a bricks callback function to handle creation of each brick using callback\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 loop\n if (cb(brick, row, col)) return; \n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"draw = {\n gameloop; \n\n // draw canvas background\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) => {\n // debugger;\n c.fillStyle = brick.color; \n c.fillRect(brick.x, brick.y, brick.w, brick.h);\n }); \n \n // draw the ball\n const {r, x, y} = mutable ball; \n c.beginPath();\n c.fillStyle = \"red\";\n c.arc(x, y, r, 0, 2 * Math.PI);\n c.fill();\n \n // draw the paddle (use canvas c to draw paddle as well, just like it did with the canvas and the ball)\n c.fillStyle = \"blue\";\n c.fillRect(mutable paddleX, \n h - scale, \n paddleLength,\n scale); \n \n // draw paddleX point\n c.fillStyle = \"green\";\n c.fillRect(paddleX, h - scale, scale/2, scale/2);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"mutable gameover = {\n newGame;\n return false; // reset gameover using newGame\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"// mutable paddleX = w/2 - paddleLength/2; // define paddle's x position and allow it to update dynamically\n\n // debugger helper: make the ball bounce in the bottom region at ease\nmutable paddleX = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"debugging = {\n // debugger;\n c.canvas.onmousemove // to checkout the existence of c.canvas.onmousemove\n return \"c.canvas.onmousemove\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"mousemove = c.canvas.onmousemove = e => { // add a mouse event listener\n\n // How to make sure the paddle move within the thick walls?\n mutable paddleX = Math.min(Math.max(scale, e.offsetX - paddleLength/2), \n // the most left position the paddleX can go is scale\n w - scale - paddleLength); \n // the most right position paddleX can go is w - scale - paddleLength\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"import {slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"stylesheet","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {videoyt, anchorLink, stylesheet} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":880,"value":"render_breakout = html`\n

\n \n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"videoyt(\"Aznz6oLbuFQ\", 800, 600);","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}