2c:null 2d:["$","title",null,{"children":"Breakout! | Scott Penberthy | Observable"}] 32:[] 30:{"id":"83c197e134d30402","slug":"breakout","title":"Breakout!","thumbnail":"669ae394f98b66f0bc9616f8440a936a677603b66392698164d4cca30c415288","access_level":"public","create_time":"$D2019-05-27T21:41:47.152Z","update_time":"$D2019-05-27T21:41:47.152Z","view_time":null,"first_public_time":"$D2019-05-27T21:41:49.278Z","has_unpublished_edits":null,"fork":{"id":"5611c97c55aa59b7","slug":"breakout","title":"Breakout!","owner":{"id":"172cc08ef8a18a4b","login":"jashkenas","name":"Jeremy Ashkenas"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bdca7bf1409a8598","login":"scottp","name":"Scott Penberthy","avatar_url":"https://avatars-next.observableusercontent.com/9e2e70deb0989d9540387c9752b32c729b9c4e1512c148f6dea7b553e7da94c1","tier":"starter_2024"},"version":1056,"publish_version":1056,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9a828a94b8a6987","login":"scottp","name":"Scott Penberthy","avatar_url":"https://avatars-next.observableusercontent.com/9e2e70deb0989d9540387c9752b32c729b9c4e1512c148f6dea7b553e7da94c1","tier":null}],"members":[{"type":"individual","id":"f9a828a94b8a6987","login":"scottp","name":"Scott Penberthy","avatar_url":"https://avatars-next.observableusercontent.com/9e2e70deb0989d9540387c9752b32c729b9c4e1512c148f6dea7b553e7da94c1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Breakout!","cells":[{"id":0,"value":"md`# Breakout!\n### High Score: ${highscore}\n### Score: ${score}\n*This notebook demonstrates using [mutable state](https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state) to build a clone of [Atari Breakout](https://en.wikipedia.org/wiki/Breakout_(video_game)). Adjust the parameters or code below, or watch [the screencast](https://www.youtube.com/watch?v=Aznz6oLbuFQ) to live code along...*\n# ${\n gameover ? \"GAME OVER\" : \" \"\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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":518,"value":"viewof newgame = button(\"New Game\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":741,"value":"mutable score = {\n newgame;\n return 0;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"highscore = Math.max(this || 0, score)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"mutable gameover = {\n newgame;\n return false;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof w = slider({min: 100, max: width, value: 700, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof h = slider({min: 100, max: 800, value: 350, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"viewof speed = slider({min: 0.1, max: 10, step: 0.1, value: 5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"viewof scale = slider({min: 2, max: 20, value: 12, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":848,"value":"viewof paddleLength = slider({min: 20, max: 150, value: 90, step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"md`## Watch the screencast:\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"md`The *mutable* ball is reset to the middle of the screen when a new game begins.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"mutable ball = {\n newgame;\n return {r: scale * 0.7, x: w / 2, y: h - scale * 2, dx: 0, dy: -speed}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"md`In the main \\`gameloop\\`, we: \n* Move the \\`ball\\` according to its current velocity.\n* Check to see if it should bounce off the walls or the paddle.\n* Bounce it off any collided brick (removing the brick from the game).\n* Set \\`gameover\\` if the ball has snuck past your paddle to hit the bottom edge of the screen.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"gameloop = {\n let {r, x, y, dx, dy} = mutable ball;\n \n while (!mutable gameover) {\n // Move the ball.\n x += dx, y += dy;\n \n // Bounce off walls.\n if (x < r + scale) dx = Math.abs(dx);\n if (x + r > w - scale) dx = -Math.abs(dx);\n if (y < r + scale) dy = speed;\n \n // Bounce off paddle.\n let px = mutable paddleX;\n if (y + r > h - scale && x + r > px && x - r < px + paddleLength) {\n dy = -speed;\n dx = ((x - px) / paddleLength - 0.5) * Math.PI * speed;\n }\n \n // Bounce off bricks.\n eachBrick(bricks, (brick, row, col) => {\n let hit;\n if (!(hit = collide(mutable ball, brick))) return;\n bricks[row][col] = null;\n mutable score += brick.points;\n hit == \"v\" ? dy = -dy : dx = -dx;\n return true;\n });\n \n mutable ball = {r, x, y, dx, dy};\n if (y + r > h) mutable gameover = true;\n yield true;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"md`Our draw cell is responsible for rendering the game state to the canvas \\`c\\`, and is called for every tick of the \\`gameloop\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"draw = {\n gameloop;\n \n // Draw the background.\n c.fillStyle = \"black\";\n c.fillRect(0, 0, w, h);\n \n // Draw the walls.\n c.fillStyle = \"#444\";\n c.fillRect(0, 0, scale, h);\n c.fillRect(0, 0, w, scale);\n c.fillRect(w - scale, 0, scale, h);\n \n // Draw the bricks.\n eachBrick(bricks, (brick) => {\n c.fillStyle = brick.color;\n c.fillRect(brick.x, brick.y, brick.w, brick.h);\n });\n \n // Draw the paddle.\n c.fillStyle = colors[0];\n c.fillRect(mutable paddleX, h - scale, paddleLength, scale);\n \n // Draw the ball.\n const {r, x, y} = mutable ball;\n c.beginPath();\n c.fillStyle = colors[0];\n c.arc(x, y, r, 0, 2 * Math.PI);\n c.fill();\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"md`We don't want the paddle’s X position to affect the speed at which the gameloop ticks, so we define it as a \\`mutable\\` value that the \\`gameloop\\` can read from non-reactively.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"mutable paddleX = w / 2 - paddleLength / 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":971,"value":"md`When the mouse moves over the canvas, update \\`paddleX\\`, constraining it to the screen space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"mousemove = c.canvas.onmousemove = c.canvas.ontouchmove = e => {\n e.preventDefault();\n const cursor = e.changedTouches ? e.changedTouches[0] : e;\n const left = c.canvas.getBoundingClientRect().left;\n const x = cursor.pageX - left;\n mutable paddleX = Math.min(Math.max(scale, x - paddleLength / 2), w - paddleLength - scale)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"md`Our collision dection function between a brick and the ball. Returns \\`\"h\"\\` if the ball bounced off the side of the brick, and \\`\"v\"\\` if it hit the top or bottom.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"function collide(ball, brick) {\n const {x, y, r, dx, dy} = ball;\n let hit = x + r > brick.x && x - r < brick.x + brick.w &&\n y + r > brick.y && y - r < brick.y + brick.h;\n if (!hit) return false;\n if (y - dy + r <= brick.y || y - dy - r >= brick.y + brick.h) return \"v\";\n if (x - dx + r <= brick.x || x - dx - r >= brick.x + brick.w) return \"h\";\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"md`We define the bricks as a 2D array of \\`rows[columns]\\`. Each brick has a position, a width and height, a point value, and a color. When bricks are destroyed by the ball, we set them to \\`null\\` in the nested array.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"bricks = {\n newgame;\n \n const rows = 6, columns = Math.floor(w / 50);\n const padding = 3, top = 70;\n const width = (w - (padding * (columns + 1)) - scale * 2) / columns;\n \n let bricks = new Array(rows).fill(1).map(() => new Array(columns).fill(1));\n \n eachBrick(bricks, (b, row, col) => {\n bricks[row][col] = {\n w: width,\n h: scale,\n x: col * (width + padding) + padding + scale,\n y: row * (scale + padding) + top,\n color: colors[row],\n points: brickPoints[row]\n };\n });\n \n return bricks;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"colors = [\"#c84848\", \"#c66c3a\", \"#b47a2f\", \"#a2a229\", \"#49a049\", \"#4348c8\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"brickPoints = [7, 7, 4, 4, 1, 1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"function eachBrick(bricks, cb) {\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;\n if (cb(brick, row, col)) return;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {slider, button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`*Thanks for the [Breakout tutorial](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript), Mozilla!*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"