title
JavaScript Snake Game Tutorial Using Functional Programming

description
Build a Snake Game in JavaScript using Functional Programming concepts. No libraries are used in this JavaScript tutorial. 💻 Source code: https://github.com/chrokh/snake Created by Christopher Okhravi. 🔗Check out his YouTube channel: https://www.youtube.com/channel/UCbF-4yQQAWw-UnuCd2Azfzg -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'JavaScript Snake Game Tutorial Using Functional Programming', 'heatmap': [{'end': 338.704, 'start': 276.175, 'weight': 1}, {'end': 446.495, 'start': 388.383, 'weight': 0.819}, {'end': 2630.308, 'start': 2564.979, 'weight': 0.736}, {'end': 4240.966, 'start': 4180.987, 'weight': 0.763}], 'summary': 'This tutorial focuses on building a snake game in javascript using functional programming, with a demonstration of browser and terminal implementations. it covers modularity in program design, managing game state, canvas drawing, web page optimization, game logic, and implementation of game functions.', 'chapters': [{'end': 141.786, 'segs': [{'end': 27.911, 'src': 'embed', 'start': 0.149, 'weight': 0, 'content': [{'end': 6.054, 'text': "In this video, I want to take you through this snake-like game that I've built using JavaScript,", 'start': 0.149, 'duration': 5.905}, {'end': 16.403, 'text': 'and more precisely JavaScript in functional style or in functional programming style, so with a focus on purity, small functions and composability.', 'start': 6.054, 'duration': 10.349}, {'end': 20.446, 'text': "So as you can see here now, I'm running this snake game in the browser.", 'start': 16.703, 'duration': 3.743}, {'end': 24.109, 'text': 'and ah, you can see also there that i actually crashed.', 'start': 21.247, 'duration': 2.862}, {'end': 27.911, 'text': "sorry, my camera is in the way, so i can't really see what i'm doing in this snake game.", 'start': 24.109, 'duration': 3.802}], 'summary': 'Demonstration of a snake game built in javascript with a focus on functional programming style.', 'duration': 27.762, 'max_score': 0.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig149.jpg'}, {'end': 113.955, 'src': 'embed', 'start': 88.252, 'weight': 2, 'content': [{'end': 93.016, 'text': 'Which is generally what we should do, right? We should separate presentation from the business logic.', 'start': 88.252, 'duration': 4.764}, {'end': 97.5, 'text': 'So my interpretation of most of the snake tutorials, or actually game tutorials,', 'start': 93.476, 'duration': 4.024}, {'end': 105.068, 'text': 'that you find on the interwebs is that they are focused on just getting a quick version up and running quickly, essentially.', 'start': 97.5, 'duration': 7.568}, {'end': 110.153, 'text': 'But what I want to do, as I tend to do with all of these videos, is instead talk about design.', 'start': 105.328, 'duration': 4.825}, {'end': 113.955, 'text': "i'm by no means saying that this is a perfectly designed snake game.", 'start': 110.974, 'duration': 2.981}], 'summary': 'Focus on design in game tutorials, not just quick versions.', 'duration': 25.703, 'max_score': 88.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig88252.jpg'}, {'end': 150.354, 'src': 'embed', 'start': 122.618, 'weight': 4, 'content': [{'end': 128.639, 'text': 'or rather, i should say improve upon this code and make this code base even more modular and elegant.', 'start': 122.618, 'duration': 6.021}, {'end': 129.541, 'text': 'that would be fantastic.', 'start': 128.639, 'duration': 0.902}, {'end': 131.701, 'text': 'so if you do have comments, please do shoot those in the comments.', 'start': 129.541, 'duration': 2.16}, {'end': 137.764, 'text': 'or, or, if you do fork off from this code base and make changes, please do post your changes in the comments.', 'start': 131.701, 'duration': 6.063}, {'end': 138.864, 'text': 'that would be really interesting to read.', 'start': 137.764, 'duration': 1.1}, {'end': 141.786, 'text': 'But anyways, when we focus on modularity,', 'start': 139.264, 'duration': 2.522}, {'end': 150.354, 'text': 'we can again trivially achieve this kind of thing where we have one implementation for the terminal and one implementation for the web, which,', 'start': 141.786, 'duration': 8.568}], 'summary': 'Improve code modularity through comments and forks. achieve terminal and web implementations.', 'duration': 27.736, 'max_score': 122.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig122618.jpg'}], 'start': 0.149, 'title': 'Snake game in javascript', 'summary': 'Discusses building a snake game using javascript in functional programming style, with a focus on modularity. it demonstrates the browser and terminal implementations of the game.', 'chapters': [{'end': 141.786, 'start': 0.149, 'title': 'Snake game in javascript', 'summary': 'Discusses building a snake game using javascript in functional programming style, with a focus on modularity, and it demonstrates the browser and terminal implementations of the game.', 'duration': 141.637, 'highlights': ['The game is built using JavaScript in functional programming style, focusing on purity, small functions, and composability.', 'Demonstrates the implementation of the snake game in both the browser and terminal, showcasing modularity in the codebase.', 'Emphasizes the separation of the game engine from the game visuals, highlighting the importance of separating presentation from business logic.', 'Encourages viewers to focus on improving the codebase for modularity and elegance, inviting feedback and contributions for enhancements.', 'The chapter emphasizes the importance of design and modularity in building the snake game, promoting a focus on code improvement and elegance.']}], 'duration': 141.637, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig149.jpg', 'highlights': ['The game is built using JavaScript in functional programming style, focusing on purity, small functions, and composability.', 'Demonstrates the implementation of the snake game in both the browser and terminal, showcasing modularity in the codebase.', 'Emphasizes the separation of the game engine from the game visuals, highlighting the importance of separating presentation from business logic.', 'The chapter emphasizes the importance of design and modularity in building the snake game, promoting a focus on code improvement and elegance.', 'Encourages viewers to focus on improving the codebase for modularity and elegance, inviting feedback and contributions for enhancements.']}, {'end': 965.251, 'segs': [{'end': 224.458, 'src': 'embed', 'start': 179.63, 'weight': 0, 'content': [{'end': 184.713, 'text': 'is how we keep programs alive over longer periods of time and how to increase modularity.', 'start': 179.63, 'duration': 5.083}, {'end': 188.576, 'text': 'And so in some sense, then this game is just an example of that.', 'start': 185.354, 'duration': 3.222}, {'end': 195.3, 'text': 'But anyways, you could also just see this as how to build Snake using functional programming in JavaScript.', 'start': 188.616, 'duration': 6.684}, {'end': 196.081, 'text': "Let's get going.", 'start': 195.48, 'duration': 0.601}, {'end': 199.763, 'text': 'So let me cancel out of the game here and let me make this full screen.', 'start': 196.661, 'duration': 3.102}, {'end': 204.847, 'text': 'Okay, so again, let me just show you the files that I have in this folder here.', 'start': 200.564, 'duration': 4.283}, {'end': 210.111, 'text': 'So the main snake implementation is in this file called snake.js.', 'start': 205.347, 'duration': 4.764}, {'end': 214.934, 'text': "That's sort of the core library or the game engine in some sense.", 'start': 210.511, 'duration': 4.423}, {'end': 220.196, 'text': 'And then these three files web.css, web.html and web.js.', 'start': 215.374, 'duration': 4.822}, {'end': 224.458, 'text': "that's essentially the web interface for the snake game.", 'start': 220.196, 'duration': 4.262}], 'summary': 'Demonstrating how to build snake using functional programming in javascript.', 'duration': 44.828, 'max_score': 179.63, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig179630.jpg'}, {'end': 338.704, 'src': 'heatmap', 'start': 276.175, 'weight': 1, 'content': [{'end': 278.997, 'text': 'And this is why we have some code in this base file.', 'start': 276.175, 'duration': 2.822}, {'end': 282.641, 'text': "And then, of course, we have this README file, just because I've put this up on GitHub.", 'start': 279.578, 'duration': 3.063}, {'end': 286.446, 'text': 'And by the way, you can find the link to all of the code in the description.', 'start': 282.961, 'duration': 3.485}, {'end': 289.691, 'text': 'I might have moved it elsewhere, but the link in the description should work.', 'start': 286.506, 'duration': 3.185}, {'end': 291.714, 'text': "Let's actually start by looking at the web end.", 'start': 289.991, 'duration': 1.723}, {'end': 294.057, 'text': "So let's start with web.html.", 'start': 291.754, 'duration': 2.303}, {'end': 296.901, 'text': "So let me open vim, and then let's open web.html.", 'start': 294.117, 'duration': 2.784}, {'end': 307.041, 'text': 'And as you can see, I mean this is clearly just any old normal HTML file where we are loading in the style sheet.', 'start': 298.408, 'duration': 8.633}, {'end': 309.565, 'text': "Here I'm doing some funky stuff, I'll explain that in a moment.", 'start': 307.442, 'duration': 2.123}, {'end': 321.035, 'text': "But then in the body we have a canvas setup that's of a size 700 and of a height, or of a width 700 and of a height 500.", 'start': 309.805, 'duration': 11.23}, {'end': 322.816, 'text': "And then I'm loading these script tags.", 'start': 321.035, 'duration': 1.781}, {'end': 331.34, 'text': 'And maybe people nowadays always load their scripts here and then make sure that the DOM is loaded in the scripts files.', 'start': 322.936, 'duration': 8.404}, {'end': 338.704, 'text': 'I was just lazy and put them here to ensure that when I load this web.js, the canvas has definitely loaded.', 'start': 331.44, 'duration': 7.264}], 'summary': 'Transcript discusses code and file structure, including html and javascript setup.', 'duration': 62.529, 'max_score': 276.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig276175.jpg'}, {'end': 446.495, 'src': 'heatmap', 'start': 388.383, 'weight': 0.819, 'content': [{'end': 393.246, 'text': "It's the actual main entry point of this web application.", 'start': 388.383, 'duration': 4.863}, {'end': 395.007, 'text': 'And then let me just quickly explain this.', 'start': 393.746, 'duration': 1.261}, {'end': 395.968, 'text': 'I mean, this I do.', 'start': 395.047, 'duration': 0.921}, {'end': 400.431, 'text': 'Let me actually, let me open up a split here and open up snake.js in order to show you that.', 'start': 396.168, 'duration': 4.263}, {'end': 406.755, 'text': 'So snake.js, because I started with the command line implementation.', 'start': 400.491, 'duration': 6.264}, {'end': 410.518, 'text': 'Actually from the beginning I was thinking that I only should do the command line implementation, but then I figured,', 'start': 406.815, 'duration': 3.703}, {'end': 415.12, 'text': "actually it's so easy to make another web implementation, so let me just make a web implementation as well.", 'start': 410.518, 'duration': 4.602}, {'end': 420.462, 'text': "I'm a big fan of trying to keep it as absolutely simple as possible from the beginning, and this is why I was so.", 'start': 415.4, 'duration': 5.062}, {'end': 426.784, 'text': 'actually, I started building this snake.js file and I started doing it in a sort of step-by-step fashion,', 'start': 420.462, 'duration': 6.322}, {'end': 431.626, 'text': "where I implemented one function at a time where it's like okay, this function needs to be able to do this right?", 'start': 426.784, 'duration': 4.842}, {'end': 438.229, 'text': 'So like, if we have a list of snake points and we want to compute the next snake point given a movement in some direction,', 'start': 431.646, 'duration': 6.583}, {'end': 440.27, 'text': 'what would that function look like right?', 'start': 438.929, 'duration': 1.341}, {'end': 446.495, 'text': 'And then I did that step by step for all of the different pieces and then I, sort of from the ground up, built the snake implementation.', 'start': 440.35, 'duration': 6.145}], 'summary': 'The web application includes a command line and web implementation for a snake game, developed in a step-by-step fashion.', 'duration': 58.112, 'max_score': 388.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig388383.jpg'}, {'end': 616.379, 'src': 'embed', 'start': 593.463, 'weight': 3, 'content': [{'end': 600.81, 'text': "You can see here at 53, here I'm saying, I added a comment here to say that this is the main portion.", 'start': 593.463, 'duration': 7.347}, {'end': 602.712, 'text': "So let's actually start from this main portion.", 'start': 600.99, 'duration': 1.722}, {'end': 604.873, 'text': 'So what web.js does?', 'start': 603.132, 'duration': 1.741}, {'end': 610.996, 'text': 'so the JavaScript that will be run in the browser when we run the browser version of the snake game, right?', 'start': 604.873, 'duration': 6.123}, {'end': 612.417, 'text': 'First we do draw.', 'start': 611.296, 'duration': 1.121}, {'end': 613.738, 'text': 'so these are actually two lines, right?', 'start': 612.417, 'duration': 1.321}, {'end': 616.379, 'text': 'Sorry, I thought it was prettier to put them on a single line.', 'start': 613.758, 'duration': 2.621}], 'summary': 'Explanation of web.js and its role in browser version of snake game.', 'duration': 22.916, 'max_score': 593.463, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig593463.jpg'}, {'end': 899.781, 'src': 'embed', 'start': 864.992, 'weight': 4, 'content': [{'end': 871.216, 'text': "or we say or rather I should say, we don't compute the new state and we don't redraw, importantly,", 'start': 864.992, 'duration': 6.224}, {'end': 880.823, 'text': 'but we do request another animation frame and to that we tack on, or we throw in a function that says step again from T1..', 'start': 871.216, 'duration': 9.607}, {'end': 887.848, 'text': 'So notice the difference between this line and this line, right? In this line, we have T2, and in this line, we have T1.', 'start': 881.363, 'duration': 6.485}, {'end': 888.348, 'text': 'T2 and T1.', 'start': 887.868, 'duration': 0.48}, {'end': 899.781, 'text': 'And T2 here is because we want to have the new point, the current timestamp as the next timestamp that we want to compare against.', 'start': 890.109, 'duration': 9.672}], 'summary': 'Program requests another animation frame and compares t2 to t1.', 'duration': 34.789, 'max_score': 864.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig864992.jpg'}], 'start': 141.786, 'title': 'Modularity in program design', 'summary': 'Discusses the concept of modularity in program design and showcases how to build different implementations for a core module. it includes an example of building snake using functional programming in javascript, with separate implementations for the terminal and web.', 'chapters': [{'end': 259.719, 'start': 141.786, 'title': 'Modularity in program design', 'summary': 'Discusses the concept of modularity in program design, showcasing how to build different implementations for a core module, as seen in the example of building snake using functional programming in javascript, with separate implementations for the terminal and web.', 'duration': 117.933, 'highlights': ['The chapter discusses the concept of modularity in program design and showcases building different implementations for a core module.', 'The example of building Snake using functional programming in JavaScript demonstrates separate implementations for the terminal and web.', 'Explanation of the core files includes snake.js as the core library, web.css, web.html, and web.js as the web interface, and cli.js as the node implementation for the terminal GUI.']}, {'end': 965.251, 'start': 260.579, 'title': 'Snake game web implementation', 'summary': 'Discusses the self-contained web implementation of the snake game, detailing the setup of web.html and web.js, the use of module.exports for node.js, the main functionality of web.js including the draw and step functions, and the logic behind requesting animation frames for game development.', 'duration': 704.672, 'highlights': ['The web implementation for the Snake game is self-contained and does not rely on third-party libraries, utilizing a base file and a README file for GitHub, and showcasing the web.html setup with canvas and script tags.', 'The use of module.exports is explained in the context of the snake.js file and the base library, with a note on the lack of module.exports in the browser and a workaround involving declaring require and module as empty objects to expose global functions.', 'The main functionality of web.js is detailed, including the draw and step functions, the use of window.requestAnimationFrame, and the logic behind invoking the step function to track time intervals and update the game state.', "The explanation of the step function's implementation highlights the handling of time intervals, the computation of the next game state without mutation, and the logic behind requesting animation frames based on time differences for efficient game rendering."]}], 'duration': 823.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig141786.jpg', 'highlights': ['The example of building Snake using functional programming in JavaScript demonstrates separate implementations for the terminal and web.', 'The chapter discusses the concept of modularity in program design and showcases building different implementations for a core module.', 'The web implementation for the Snake game is self-contained and does not rely on third-party libraries, utilizing a base file and a README file for GitHub.', 'The main functionality of web.js is detailed, including the draw and step functions, the use of window.requestAnimationFrame, and the logic behind invoking the step function to track time intervals and update the game state.', "The explanation of the step function's implementation highlights the handling of time intervals, the computation of the next game state without mutation, and the logic behind requesting animation frames based on time differences for efficient game rendering."]}, {'end': 1441.804, 'segs': [{'end': 1071.423, 'src': 'embed', 'start': 1039.326, 'weight': 2, 'content': [{'end': 1041.848, 'text': 'But anyways, yeah, I should have fixed that.', 'start': 1039.326, 'duration': 2.522}, {'end': 1045.49, 'text': "But anyways, that's from the snake.js file.", 'start': 1042.709, 'duration': 2.781}, {'end': 1049.251, 'text': 'So snake.js file has a function called next here.', 'start': 1045.53, 'duration': 3.721}, {'end': 1051.972, 'text': "And we'll talk about this when we get to the snake.js file.", 'start': 1049.631, 'duration': 2.341}, {'end': 1059.294, 'text': 'But suffice to say, for now, that the next function takes a state and computes the next state given that state.', 'start': 1052.012, 'duration': 7.282}, {'end': 1065.078, 'text': "Oh, sorry, I was about to talk about initial state and not about next, but that's next, right? That's what next does.", 'start': 1059.574, 'duration': 5.504}, {'end': 1071.423, 'text': "But if we look at initial state, that's just a function, I think it's called a unit function, like it's a constant in some sense.", 'start': 1065.358, 'duration': 6.065}], 'summary': 'The snake.js file contains a next function that computes the next state given the current state.', 'duration': 32.097, 'max_score': 1039.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1039326.jpg'}, {'end': 1130.002, 'src': 'embed', 'start': 1101.022, 'weight': 3, 'content': [{'end': 1106.564, 'text': "So that's the first argument, and then the second argument is this function that takes a single argument, which is this variable named e,", 'start': 1101.022, 'duration': 5.542}, {'end': 1107.245, 'text': 'which is the event.', 'start': 1106.564, 'duration': 0.681}, {'end': 1111.788, 'text': 'And then we can extract the key variable or the key property from that event.', 'start': 1107.585, 'duration': 4.203}, {'end': 1115.91, 'text': 'And then we switch case over essentially that variable.', 'start': 1112.188, 'duration': 3.722}, {'end': 1122.715, 'text': 'And then we say, OK, well, we want to be able to control the snake using WASD, the keys, and HJKL.', 'start': 1116.05, 'duration': 6.665}, {'end': 1130.002, 'text': 'uh, so here is wasd and here is hjkl, but then we also want to be able to use the arrow keys right.', 'start': 1123.255, 'duration': 6.747}], 'summary': 'Code function extracts key variable from event to control snake using wasd, hjkl, and arrow keys.', 'duration': 28.98, 'max_score': 1101.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1101022.jpg'}, {'end': 1249.666, 'src': 'embed', 'start': 1226.489, 'weight': 1, 'content': [{'end': 1235.856, 'text': "And we need to do that because, as we do here, because again it's almost pure, so it doesn't know what state we have.", 'start': 1226.489, 'duration': 9.367}, {'end': 1237.557, 'text': "It doesn't keep track of its own state.", 'start': 1235.916, 'duration': 1.641}, {'end': 1241.76, 'text': 'And enqueue is also defined here in this snake method.', 'start': 1237.757, 'duration': 4.003}, {'end': 1245.563, 'text': "And again, we'll get to this when we start to talk about the snake stuff.", 'start': 1242.12, 'duration': 3.443}, {'end': 1249.666, 'text': 'But essentially, as you can see here, it takes the current state and it takes a move.', 'start': 1246.003, 'duration': 3.663}], 'summary': 'Discussion of enqueue method in snake, taking current state and move', 'duration': 23.177, 'max_score': 1226.489, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1226489.jpg'}, {'end': 1430.82, 'src': 'embed', 'start': 1404.488, 'weight': 0, 'content': [{'end': 1408.231, 'text': "So I figured, okay, let's actually remove that functionality from my Snake game.", 'start': 1404.488, 'duration': 3.743}, {'end': 1411.632, 'text': "And that's when I added this valid move portion to NQ.", 'start': 1408.271, 'duration': 3.361}, {'end': 1414.033, 'text': 'So previously, NQ used to only do this right?', 'start': 1411.692, 'duration': 2.341}, {'end': 1419.916, 'text': 'It used to only just merge in whatever motion you added into the queue of motions or into the queue of moves.', 'start': 1414.093, 'duration': 5.823}, {'end': 1424.598, 'text': "But now I said, well, actually, let's avoid this sort of inverse situation.", 'start': 1420.216, 'duration': 4.382}, {'end': 1427.439, 'text': "So if you pass the inverse, so that's what valid move does.", 'start': 1424.638, 'duration': 2.801}, {'end': 1428.819, 'text': "It checks whether it's the inverse.", 'start': 1427.479, 'duration': 1.34}, {'end': 1430.82, 'text': "And if it's not the inverse, yes, then it's valid.", 'start': 1428.839, 'duration': 1.981}], 'summary': 'Added valid move portion to nq to avoid inverse situation.', 'duration': 26.332, 'max_score': 1404.488, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1404488.jpg'}], 'start': 965.271, 'title': 'Managing snake.js game state', 'summary': 'Covers challenges of global state in snake.js, control of snake game state, and state management in snake.js, including state passing, computation, and valid move check, emphasizing benefits of immutability.', 'chapters': [{'end': 1080.229, 'start': 965.271, 'title': 'Understanding global state in snake.js', 'summary': 'Discusses the challenges of working with global state in the snake.js file, highlighting the shared state variable, the functions that change it, and the potential solution of scoping functions inside an object for better management.', 'duration': 114.958, 'highlights': ['The state variable in the Snake.js file contains the state of the game at all times and is shared across all functions, posing challenges in tracking its source and scope.', 'The step method and key events listener are responsible for changing the state, emphasizing the impact of multiple functions on the global state.', 'The speaker reflects on the difficulty of tracking the source of the initial state function due to the global scope, suggesting the potential benefits of scoping functions inside an object for better namespace management and clarity.', 'The next function in the snake.js file computes the next state given the current state, providing insight into the role of the next function in state manipulation.']}, {'end': 1206.893, 'start': 1080.229, 'title': 'Controlling snake game state', 'summary': 'Discusses invoking the initial state, adding event listeners for key inputs to control the snake, and defining constants for directions in the game, with a mention of impure functions and randomness.', 'duration': 126.664, 'highlights': ['The chapter explains invoking the initial state of the game, which is always the same when starting a game.', "It covers adding event listeners for key inputs to control the snake's movement, including the keys WASD, HJKL, and arrow keys.", 'It defines constants for directions in the game, such as north, west, south, and east, with specific velocity and movement descriptions.', 'The chapter briefly mentions impure functions and randomness in the snake.js file, acknowledging the reliance on system date and the non-reproducibility of the same output for the same input.']}, {'end': 1441.804, 'start': 1207.233, 'title': 'Snake game state management', 'summary': 'Discusses the state management in the snake.js file, including the passing of the current state to the snake and queue methods, the computation of new states based on moves, and the implementation of valid move check to avoid inverse situations, emphasizing the benefits of immutability in state management.', 'duration': 234.571, 'highlights': ['The snake and queue methods require the passing of the current state to manage the game state effectively, ensuring that the methods can compute new states based on moves and validate the moves to avoid inverse situations.', 'The valid move check in the NQ method prevents inverse situations by ignoring invalid moves and only queuing valid moves, showcasing the benefits of immutability in state management.', 'The chapter emphasizes the advantages of immutability in state management by illustrating how it simplifies changes and helps avoid unexpected behaviors, such as crashing when making inverse moves in the snake game.']}], 'duration': 476.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig965271.jpg', 'highlights': ['The valid move check in the NQ method prevents inverse situations by ignoring invalid moves and only queuing valid moves, showcasing the benefits of immutability in state management.', 'The snake and queue methods require the passing of the current state to manage the game state effectively, ensuring that the methods can compute new states based on moves and validate the moves to avoid inverse situations.', 'The next function in the snake.js file computes the next state given the current state, providing insight into the role of the next function in state manipulation.', "It covers adding event listeners for key inputs to control the snake's movement, including the keys WASD, HJKL, and arrow keys."]}, {'end': 2242.789, 'segs': [{'end': 1487.564, 'src': 'embed', 'start': 1461.191, 'weight': 0, 'content': [{'end': 1466.013, 'text': 'let me here in the main let me just put that back on one line we have this main that initiates it,', 'start': 1461.191, 'duration': 4.822}, {'end': 1468.874, 'text': "and then we haven't talked about what draw actually does right?", 'start': 1466.013, 'duration': 2.861}, {'end': 1471.695, 'text': 'So, as you can see here, the comment says game loop draw right?', 'start': 1468.914, 'duration': 2.781}, {'end': 1475.757, 'text': "So this function draw, and it's also pretty simple.", 'start': 1472.096, 'duration': 3.661}, {'end': 1480.499, 'text': 'like, as you can see from the comments here, like I was contemplating separating this into multiple functions.', 'start': 1475.757, 'duration': 4.742}, {'end': 1487.564, 'text': "But given the mutable nature of the canvas library and like, given the fact that we probably won't reuse this code, I just figured whatever.", 'start': 1480.979, 'duration': 6.585}], 'summary': 'The main function initiates the draw process, contemplating multiple functions but deciding against it due to the nature of the canvas library.', 'duration': 26.373, 'max_score': 1461.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1461191.jpg'}, {'end': 1546.243, 'src': 'embed', 'start': 1519.974, 'weight': 3, 'content': [{'end': 1524.519, 'text': 'So I grab that canvas and then we get the context for that so that we can draw.', 'start': 1519.974, 'duration': 4.545}, {'end': 1527.463, 'text': 'So inCTX is a context variable.', 'start': 1524.86, 'duration': 2.603}, {'end': 1529.085, 'text': 'Then we have these position helpers here.', 'start': 1527.683, 'duration': 1.402}, {'end': 1530.206, 'text': "We'll talk about these in a moment.", 'start': 1529.145, 'duration': 1.061}, {'end': 1538.956, 'text': "But what we do then is that we first clear this canvas by saying, okay, let's set the fill style to this blackish color, I guess it is.", 'start': 1530.286, 'duration': 8.67}, {'end': 1543.22, 'text': 'and then we draw a rectangle over the whole width and the height.', 'start': 1539.156, 'duration': 4.064}, {'end': 1546.243, 'text': 'Then the next step is that we draw the snake right?', 'start': 1543.6, 'duration': 2.643}], 'summary': 'Canvas cleared and rectangle drawn before snake is drawn.', 'duration': 26.269, 'max_score': 1519.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1519974.jpg'}, {'end': 1845.376, 'src': 'embed', 'start': 1818.394, 'weight': 4, 'content': [{'end': 1822.778, 'text': "so that's the way we're indicating a crash, And that's the whole drawing thing.", 'start': 1818.394, 'duration': 4.384}, {'end': 1825.74, 'text': 'A moment to pause and reflect.', 'start': 1822.798, 'duration': 2.942}, {'end': 1829.844, 'text': 'The point here is that this is all graphics.', 'start': 1826.381, 'duration': 3.463}, {'end': 1835.348, 'text': 'Assuming that we can use this state structure for all of the graphics engines.', 'start': 1830.204, 'duration': 5.144}, {'end': 1838.63, 'text': 'assuming that state tree gives enough information,', 'start': 1835.348, 'duration': 3.282}, {'end': 1845.376, 'text': 'this can be completely focused on just the visuals and is not intermingled with all of the business logic.', 'start': 1838.63, 'duration': 6.746}], 'summary': 'Using state tree for graphics decouples visuals from business logic.', 'duration': 26.982, 'max_score': 1818.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1818394.jpg'}, {'end': 1957.799, 'src': 'embed', 'start': 1919.834, 'weight': 1, 'content': [{'end': 1923.778, 'text': 'uh, this first draw here in the, in the end right like the only difference.', 'start': 1919.834, 'duration': 3.944}, {'end': 1930.102, 'text': "if we have that or if we remove that, you can see that there's a a quick flash of 100 milliseconds where we don't have a board.", 'start': 1923.778, 'duration': 6.324}, {'end': 1931.463, 'text': "that's essentially the only difference.", 'start': 1930.102, 'duration': 1.361}, {'end': 1935.025, 'text': "And that's why I added that, because then immediately we should get the board.", 'start': 1931.523, 'duration': 3.502}, {'end': 1938.367, 'text': "Actually, now that I think about it, it's almost hardly visible.", 'start': 1935.085, 'duration': 3.282}, {'end': 1943.91, 'text': 'Like, you can see, I mean, loading the page probably takes quite some time anyway.', 'start': 1938.747, 'duration': 5.163}, {'end': 1946.271, 'text': 'So yeah, I mean, you might want to remove that.', 'start': 1944.19, 'duration': 2.081}, {'end': 1948.072, 'text': "OK, but that's the web portion.", 'start': 1946.651, 'duration': 1.421}, {'end': 1951.134, 'text': "Let's now actually look at the snake core library.", 'start': 1948.132, 'duration': 3.002}, {'end': 1955.036, 'text': "I think it's probably easier to start with that and then look at the command line implementation.", 'start': 1951.174, 'duration': 3.862}, {'end': 1957.799, 'text': "so let's go to snake.js.", 'start': 1955.476, 'duration': 2.323}], 'summary': 'A brief discussion about a 100-millisecond flash and reviewing the snake core library.', 'duration': 37.965, 'max_score': 1919.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1919834.jpg'}, {'end': 2041.989, 'src': 'embed', 'start': 2009.372, 'weight': 5, 'content': [{'end': 2011.733, 'text': 'And this is kind of just me hacking again, so I apologize for that.', 'start': 2009.372, 'duration': 2.361}, {'end': 2017.416, 'text': 'But what I wanted to do is, so base, for example, exposes the function map, right? So you have base.map.', 'start': 2011.773, 'duration': 5.643}, {'end': 2020.777, 'text': "But whenever I use, I don't want to have to say base.map.", 'start': 2017.736, 'duration': 3.041}, {'end': 2026.079, 'text': 'I just want to be able to simply say map and refer to base.map because they are helper functions.', 'start': 2020.817, 'duration': 5.262}, {'end': 2026.72, 'text': 'I mean in some sense.', 'start': 2026.099, 'duration': 0.621}, {'end': 2036.665, 'text': 'you could argue that some of the functions defined in base here are functions that should be defined in JavaScript if JavaScript was actually aiming to be a functional language.', 'start': 2026.72, 'duration': 9.945}, {'end': 2041.989, 'text': 'So functions such as map or reduce are defined in the prelude of Haskell.', 'start': 2036.925, 'duration': 5.064}], 'summary': "Discussion about simplifying function references and comparison with haskell's prelude", 'duration': 32.617, 'max_score': 2009.372, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2009372.jpg'}, {'end': 2169.343, 'src': 'embed', 'start': 2144.985, 'weight': 6, 'content': [{'end': 2150.973, 'text': 'because if you could check for deep object equality, right, like, I think, in many of the JavaScript libraries, you can do that,', 'start': 2144.985, 'duration': 5.988}, {'end': 2152.335, 'text': 'and many of the testing libraries you can.', 'start': 2150.973, 'duration': 1.362}, {'end': 2159.14, 'text': 'So actually like object deep equals or deep equality of two objects is actually a very useful thing to have in the language.', 'start': 2152.415, 'duration': 6.725}, {'end': 2165.642, 'text': 'so actually, i mean the implementation of of point equals should essentially just like if you pass point one and you pass point two,', 'start': 2159.14, 'duration': 6.502}, {'end': 2169.343, 'text': 'then the implementation should essentially be point one equals equals point two.', 'start': 2165.642, 'duration': 3.701}], 'summary': "Implementing deep object equality in javascript is useful for testing libraries and should be done using 'point1 == point2'.", 'duration': 24.358, 'max_score': 2144.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2144985.jpg'}], 'start': 1441.804, 'title': 'Canvas drawing and web page optimization', 'summary': 'Covers canvas drawing process, game logic, web page optimization, and snake core library review, aiming to separate concerns between visuals and business logic, optimize web page by removing 100ms flash, and review and enhance a 61-line codebase.', 'chapters': [{'end': 1919.834, 'start': 1441.804, 'title': 'Canvas drawing and game logic', 'summary': 'Discusses the process of drawing on a canvas, including the use of context variables and position helpers, as well as the interplay between game logic and graphics, emphasizing the separation of concerns between visuals and business logic.', 'duration': 478.03, 'highlights': ['The draw function involves clearing the canvas, drawing the snake and apple, and indicating a crash by drawing a red rectangle, demonstrating the separation of visual rendering from business logic.', 'The use of context variables and position helpers simplifies the process of drawing on the canvas, enhancing the efficiency of the visual grid in the browser.', 'The chapter emphasizes the importance of separating the visuals from the business logic, ensuring that changes to the visual elements can be made without affecting the core business logic.']}, {'end': 2242.789, 'start': 1919.834, 'title': 'Web page and snake core library review', 'summary': 'Discusses optimizing a web page by removing a 100 millisecond flash and reviewing a codebase of 61 lines, aiming to make it more elegant and concise while exploring the snake core library and its base functions.', 'duration': 322.955, 'highlights': ["The web page's optimization is discussed, focusing on removing a 100 millisecond flash to improve user experience.", 'Reviewing the snake core library and its base functions for making the code more elegant and concise.', "The discussion on making base functions more accessible without the need for prefixing with 'base.'", "The concept of deep object equality and its relevance to the 'point equals' operation is explained."]}], 'duration': 800.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig1441804.jpg', 'highlights': ['The draw function separates visual rendering from business logic', "The web page's optimization focuses on removing a 100ms flash", 'Reviewing the snake core library and its base functions for elegance', 'The use of context variables and position helpers enhances visual grid efficiency', 'Emphasizing the importance of separating visuals from business logic', "Making base functions more accessible without prefixing with 'base'", 'Explaining the concept of deep object equality and its relevance to operations']}, {'end': 3144.596, 'segs': [{'end': 2275.238, 'src': 'embed', 'start': 2243.149, 'weight': 7, 'content': [{'end': 2245.691, 'text': "So that's why I'm saying that's a bit silly and that was disappointing.", 'start': 2243.149, 'duration': 2.542}, {'end': 2251.732, 'text': 'But I figured it was just overkill to implement deep equality, a function of deep equality in the base library.', 'start': 2245.891, 'duration': 5.841}, {'end': 2252.633, 'text': 'But at least now you know.', 'start': 2251.792, 'duration': 0.841}, {'end': 2253.813, 'text': "Anyways, let's move on.", 'start': 2252.913, 'duration': 0.9}, {'end': 2256.413, 'text': 'So then we have a bunch of Boolean methods, right?', 'start': 2253.913, 'duration': 2.5}, {'end': 2264.135, 'text': 'So what I mean here is I mean a bunch of functions that take some particular or potential arguments, but also the current state.', 'start': 2256.794, 'duration': 7.341}, {'end': 2266.496, 'text': 'And then given the current state answers questions.', 'start': 2264.215, 'duration': 2.281}, {'end': 2275.238, 'text': 'So the questions that we want to have answered is whether the snake will eat upon the next update given the current state,', 'start': 2266.576, 'duration': 8.662}], 'summary': 'Discussion on avoiding overkill in implementing deep equality and introduction of boolean methods for state-based questions.', 'duration': 32.089, 'max_score': 2243.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2243149.jpg'}, {'end': 2346.1, 'src': 'embed', 'start': 2321.605, 'weight': 4, 'content': [{'end': 2329.13, 'text': 'so you pass a move first and then you pass a state and then it says yes, if this move is okay given this state.', 'start': 2321.605, 'duration': 7.525}, {'end': 2336.094, 'text': "so if it's okay to add this move to this state, and the way we do this is just that we say okay, well, so let's think about this,", 'start': 2329.13, 'duration': 6.964}, {'end': 2341.137, 'text': 'we do logical or between this thing and between this thing, right.', 'start': 2336.094, 'duration': 5.043}, {'end': 2346.1, 'text': "so let's just let's put these uh like this just temporarily, so that we can think about it, right.", 'start': 2341.137, 'duration': 4.963}], 'summary': 'A process involves passing a move and state, then checking for validity through logical operations.', 'duration': 24.495, 'max_score': 2321.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2321605.jpg'}, {'end': 2522.728, 'src': 'embed', 'start': 2494.027, 'weight': 6, 'content': [{'end': 2497.669, 'text': 'And then we start with the default apple actually at 16, two.', 'start': 2494.027, 'duration': 3.642}, {'end': 2501.632, 'text': 'So maybe that should be a random position, but for some reason I chose to put it there.', 'start': 2497.79, 'duration': 3.842}, {'end': 2504.474, 'text': 'So again you can see that the apple always starts here.', 'start': 2501.732, 'duration': 2.742}, {'end': 2507.537, 'text': "so we'll always automatically catch the first apple right?", 'start': 2504.474, 'duration': 3.063}, {'end': 2509.718, 'text': 'leaving the snake to do its thing.', 'start': 2508.357, 'duration': 1.361}, {'end': 2511.099, 'text': "So that's the initial state.", 'start': 2510.058, 'duration': 1.041}, {'end': 2512.84, 'text': "But let's now jump back.", 'start': 2511.179, 'duration': 1.661}, {'end': 2515.322, 'text': 'Now you know sort of what that contains.', 'start': 2513.261, 'duration': 2.061}, {'end': 2516.803, 'text': 'And, of course, the snake thing right?', 'start': 2515.362, 'duration': 1.441}, {'end': 2522.728, 'text': 'Like we were saying, the snake is an array and it is an array of positions or points, right?', 'start': 2516.823, 'duration': 5.905}], 'summary': 'Initial apple position is at 16, two, snake starts with array of positions.', 'duration': 28.701, 'max_score': 2494.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2494027.jpg'}, {'end': 2630.308, 'src': 'heatmap', 'start': 2544.883, 'weight': 0, 'content': [{'end': 2556.131, 'text': 'So when we looked at the web implementation, if we go, oh sorry, to web.js, here you can see we talked about how we call the next function here.', 'start': 2544.883, 'duration': 11.248}, {'end': 2562.217, 'text': 'right?. When we step the game, we say the new state is equal to the old state.', 'start': 2556.131, 'duration': 6.086}, {'end': 2564.739, 'text': 'ran through the next function.', 'start': 2562.217, 'duration': 2.522}, {'end': 2566.621, 'text': 'And the question is does the next function do??', 'start': 2564.979, 'duration': 1.642}, {'end': 2571.164, 'text': 'Well, the next function is I make use of this library method called spec,', 'start': 2566.661, 'duration': 4.503}, {'end': 2576.548, 'text': 'which the library Ramda I think they call it apply spec or something like that, but I just called it spec.', 'start': 2571.164, 'duration': 5.384}, {'end': 2578.969, 'text': 'So you can see spec is a fairly interesting method.', 'start': 2576.628, 'duration': 2.341}, {'end': 2590.877, 'text': 'It has this slightly tricky implementation where it takes an object and then it takes some value and then it grabs the keys out of this object and maps over the keys,', 'start': 2579.009, 'duration': 11.868}, {'end': 2601.129, 'text': 'constructs a new object from that key and runs the function that hides under that key, applies that function to this x that we passed,', 'start': 2590.877, 'duration': 10.252}, {'end': 2605.414, 'text': 'to this value that we passed, and then it reduces over merge.', 'start': 2601.129, 'duration': 4.285}, {'end': 2610.36, 'text': 'So it simply merges all of these different objects that it produced into a single object.', 'start': 2605.634, 'duration': 4.726}, {'end': 2613.461, 'text': "that's a pretty complicated way of saying that.", 'start': 2610.68, 'duration': 2.781}, {'end': 2618.924, 'text': 'essentially what we do here, let me just i mean if i, if i retype this implementation, we could retype it as that.', 'start': 2613.461, 'duration': 5.463}, {'end': 2620.244, 'text': "let's think about it.", 'start': 2618.924, 'duration': 1.32}, {'end': 2630.308, 'text': 'next is a function that takes a state and returns a new object, where the new object if i had a spread syntax, i could say is the old state right,', 'start': 2620.244, 'duration': 10.064}], 'summary': "The 'next' function uses a library method called 'spec' to map over keys and apply functions, ultimately returning a new object representing the state.", 'duration': 26.281, 'max_score': 2544.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2544883.jpg'}, {'end': 2870.194, 'src': 'embed', 'start': 2842.882, 'weight': 1, 'content': [{'end': 2847.923, 'text': 'What enqueue does is essentially that you pass it a state and you pass it a move and if the move is valid,', 'start': 2842.882, 'duration': 5.041}, {'end': 2853.164, 'text': 'then you merge the move into the list of current moves that you have stacked up right?', 'start': 2847.923, 'duration': 5.241}, {'end': 2857.045, 'text': "So the reason we're stacking them up, by the way, is that, if you think about it, what we can do.", 'start': 2853.544, 'duration': 3.501}, {'end': 2860.206, 'text': 'Oh, sorry, let me collect a few of these just to get a tail.', 'start': 2857.045, 'duration': 3.161}, {'end': 2866.351, 'text': 'But what we can do is that we can stack moves like this.', 'start': 2861.286, 'duration': 5.065}, {'end': 2870.194, 'text': 'If I just mash the buttons, sorry, now I have a tail, now I can do this.', 'start': 2866.451, 'duration': 3.743}], 'summary': 'Enqueue stacks up valid moves to merge into a list of current moves.', 'duration': 27.312, 'max_score': 2842.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2842882.jpg'}, {'end': 2978.778, 'src': 'embed', 'start': 2953.146, 'weight': 3, 'content': [{'end': 2959.149, 'text': 'so the intention is that it takes the whole state, but the intention is that it should produce only the list of moves right?', 'start': 2953.146, 'duration': 6.003}, {'end': 2961.391, 'text': 'So it takes the whole and it produces the part.', 'start': 2959.169, 'duration': 2.222}, {'end': 2966.293, 'text': 'So we take the state and then we say, okay, state.moves.length is greater than one.', 'start': 2961.791, 'duration': 4.502}, {'end': 2973.536, 'text': 'So we say if we have more moves than one, then we should drop the first move right?', 'start': 2966.373, 'duration': 7.163}, {'end': 2976.437, 'text': 'So drop first is a function that I have to find here in the base.', 'start': 2973.556, 'duration': 2.881}, {'end': 2978.778, 'text': "Drop first, which is, I mean, it's trivial.", 'start': 2976.757, 'duration': 2.021}], 'summary': 'A function should produce a list of moves from a state, dropping the first move if there are more than one.', 'duration': 25.632, 'max_score': 2953.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2953146.jpg'}, {'end': 3128.824, 'src': 'embed', 'start': 3103.262, 'weight': 2, 'content': [{'end': 3112.248, 'text': 'The way we achieve ad hoc polymorphism is through object-oriented polymorphism is by saying that length is a function that exists on an object,', 'start': 3103.262, 'duration': 8.986}, {'end': 3117.513, 'text': 'And in a dynamically typed language, such as JavaScript, we say well, everything is a duck type right?', 'start': 3112.768, 'duration': 4.745}, {'end': 3119.274, 'text': "Like if it quacks, it's a duck.", 'start': 3117.533, 'duration': 1.741}, {'end': 3128.824, 'text': 'So everything that responds to length is lengthable, but which implementation of length you get depends on which object you call the method length on.', 'start': 3119.495, 'duration': 9.329}], 'summary': 'Ad hoc polymorphism is achieved through object-oriented polymorphism, where lengthable objects in javascript have different length implementations.', 'duration': 25.562, 'max_score': 3103.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3103262.jpg'}], 'start': 2243.149, 'title': 'Snake game implementation', 'summary': 'Covers the introduction to boolean methods for game logic, initial state of the snake game, implementation of web.js, functional programming concepts, and challenges of achieving ad hoc polymorphism in javascript.', 'chapters': [{'end': 2544.823, 'start': 2243.149, 'title': 'Snake game logic and initial state', 'summary': 'Introduces the concept of boolean methods for game logic, determining valid moves, and the initial state of the snake game, including starting position and default moves.', 'duration': 301.674, 'highlights': ['The chapter introduces the concept of Boolean methods for game logic.', 'Determining valid moves and implementation through logical operations.', 'Description of the initial state of the snake game.']}, {'end': 2918.146, 'start': 2544.883, 'title': 'Implementation of web.js', 'summary': 'Discusses the implementation of the next function in web.js, which utilizes the spec method to construct a new object from the state by applying various functions and merging the results. it also explains the enqueue function and the reasoning behind stacking moves in the game.', 'duration': 373.263, 'highlights': ['The next function in web.js utilizes the spec method to construct a new object from the state by applying various functions and merging the results, making the implementation more clear and common in functional programming (relevance score: 5)', 'The enqueue function in the code merges valid moves into the list of current moves, which is stacked up to allow queuing of moves in the game of Snake (relevance score: 4)', 'The stacking of moves in the game of Snake is explained, demonstrating the practical use and necessity of stacking moves for queuing actions in the game (relevance score: 3)']}, {'end': 3144.596, 'start': 2918.507, 'title': 'Functional programming concepts and polymorphism', 'summary': 'Discusses the functional programming concept of producing a list of moves based on the current state, including dropping the first move if there are more than one move, and the challenges of achieving ad hoc polymorphism in javascript.', 'duration': 226.089, 'highlights': ["The function 'next moves' takes the whole state and produces only the list of moves, dropping the first move if there are more than one move, achieving the effect of continuous movement to the right.", 'The implementation uses a mix of object-oriented dot syntax and function syntax due to the limitations in achieving ad hoc polymorphism in JavaScript.', 'The challenges of achieving ad hoc polymorphism in JavaScript are discussed, highlighting the difficulty in defining different behaviors for a function depending on the type of data, and the reliance on object-oriented polymorphism for achieving polymorphism in JavaScript.']}], 'duration': 901.447, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig2243149.jpg', 'highlights': ['The next function in web.js utilizes the spec method to construct a new object from the state by applying various functions and merging the results, making the implementation more clear and common in functional programming (relevance score: 5)', 'The enqueue function in the code merges valid moves into the list of current moves, which is stacked up to allow queuing of moves in the game of Snake (relevance score: 4)', 'The challenges of achieving ad hoc polymorphism in JavaScript are discussed, highlighting the difficulty in defining different behaviors for a function depending on the type of data, and the reliance on object-oriented polymorphism for achieving polymorphism in JavaScript', "The function 'next moves' takes the whole state and produces only the list of moves, dropping the first move if there are more than one move, achieving the effect of continuous movement to the right", 'Determining valid moves and implementation through logical operations', 'The stacking of moves in the game of Snake is explained, demonstrating the practical use and necessity of stacking moves for queuing actions in the game (relevance score: 3)', 'Description of the initial state of the snake game', 'The chapter introduces the concept of Boolean methods for game logic', 'The implementation uses a mix of object-oriented dot syntax and function syntax due to the limitations in achieving ad hoc polymorphism in JavaScript']}, {'end': 4196.8, 'segs': [{'end': 3207.615, 'src': 'embed', 'start': 3185.39, 'weight': 5, 'content': [{'end': 3193.552, 'text': 'So if the snake, given the current state, will eat the apple, then we need to spawn a new position for the apple based on the current state.', 'start': 3185.39, 'duration': 8.162}, {'end': 3200.854, 'text': "If it's not, if the snake is not going to eat the apple, then the apple will maintain its position.", 'start': 3193.852, 'duration': 7.002}, {'end': 3202.854, 'text': 'The new position for the apple will be the same.', 'start': 3201.034, 'duration': 1.82}, {'end': 3207.615, 'text': "So let's actually, for the fun of it, let's actually do the same thing in both of these cases.", 'start': 3203.454, 'duration': 4.161}], 'summary': 'If snake eats apple, spawn new apple position; if not, maintain current position.', 'duration': 22.225, 'max_score': 3185.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3185390.jpg'}, {'end': 3279.087, 'src': 'embed', 'start': 3252.855, 'weight': 4, 'content': [{'end': 3260.438, 'text': "The game works, fine, but we can just hands off and then just leave it like this because we're just going to eat all the apples until we crash.", 'start': 3252.855, 'duration': 7.583}, {'end': 3266.701, 'text': "Actually, it's probably still tricky, again, because the snake will take up all the screen and then it's going to be tricky to eat the apple.", 'start': 3261.119, 'duration': 5.582}, {'end': 3269.042, 'text': 'But anyways, I mean, clearly what we want is a random position.', 'start': 3266.741, 'duration': 2.301}, {'end': 3272.724, 'text': 'So what we want is this, like we spawn a new position when we eat the apple.', 'start': 3269.062, 'duration': 3.662}, {'end': 3279.087, 'text': "And again, it's like some of these things are very easy to think about when you have immutability.", 'start': 3273.044, 'duration': 6.043}], 'summary': 'Game requires random apple position for better gameplay experience.', 'duration': 26.232, 'max_score': 3252.855, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3252855.jpg'}, {'end': 3402.575, 'src': 'embed', 'start': 3373.597, 'weight': 3, 'content': [{'end': 3379.602, 'text': "So we have the snake here and then we're saying okay, if you're not eating, we should just take the snake and move it here.", 'start': 3373.597, 'duration': 6.005}, {'end': 3384.545, 'text': "But if you're eating, then we should take the head and move it here, but the tail should be fixed.", 'start': 3379.842, 'duration': 4.703}, {'end': 3386.347, 'text': 'We should not remove anything from the end.', 'start': 3384.626, 'duration': 1.721}, {'end': 3390.729, 'text': "because it's this removing that makes, that gives the appearance of it moving right?", 'start': 3386.707, 'duration': 4.022}, {'end': 3394.171, 'text': "Because it's actually that we remove this thing and it's easier.", 'start': 3390.769, 'duration': 3.402}, {'end': 3395.752, 'text': 'maybe if we just think about one dot right?', 'start': 3394.171, 'duration': 1.581}, {'end': 3402.575, 'text': "Like if you have one dot like one snake head, then what happens when we're not eating is that we're just saying okay,", 'start': 3395.772, 'duration': 6.803}], 'summary': 'Discussion on relocating snake head and tail based on eating behavior.', 'duration': 28.978, 'max_score': 3373.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3373597.jpg'}, {'end': 3474.336, 'src': 'embed', 'start': 3448.279, 'weight': 1, 'content': [{'end': 3454.323, 'text': 'So, to compute the next snake, what do we do? Well, what we do is that we have two ifs, we have two nested ifs.', 'start': 3448.279, 'duration': 6.044}, {'end': 3460.927, 'text': 'We say okay, if the snake will crash right, given the current state, given the current direction, given the current world,', 'start': 3454.363, 'duration': 6.564}, {'end': 3464.79, 'text': 'if in the next state that we are now computing, will the snake crash or not?', 'start': 3460.927, 'duration': 3.863}, {'end': 3468.733, 'text': 'Like, if it will crash, then the next snake is going to be an empty array.', 'start': 3464.87, 'duration': 3.863}, {'end': 3471.134, 'text': "then we're going back to this sort of initial state thing.", 'start': 3469.033, 'duration': 2.101}, {'end': 3474.336, 'text': "we're saying let's go back, the snake is an empty array.", 'start': 3471.134, 'duration': 3.202}], 'summary': 'The process involves evaluating if the next snake will crash, resulting in an empty array if it will.', 'duration': 26.057, 'max_score': 3448.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3448279.jpg'}, {'end': 3883.891, 'src': 'embed', 'start': 3852.83, 'weight': 0, 'content': [{'end': 3853.53, 'text': 'But think about it.', 'start': 3852.83, 'duration': 0.7}, {'end': 3858.254, 'text': 'The reason we use modulus here is that because we want to have this wrapping effect right?', 'start': 3853.851, 'duration': 4.403}, {'end': 3863.558, 'text': "Like notice how, when we go out of the right end of the screen like it's a torus right?", 'start': 3858.294, 'duration': 5.264}, {'end': 3866.961, 'text': 'We go out on the right end of the screen and we show up on the left end.', 'start': 3863.898, 'duration': 3.063}, {'end': 3870.604, 'text': 'And similarly, if we go out on the left end, we show up on the right end.', 'start': 3867.421, 'duration': 3.183}, {'end': 3875.246, 'text': "And that modulus operator is actually everything that's needed to implement that.", 'start': 3871.064, 'duration': 4.182}, {'end': 3880.67, 'text': "Because what we're saying is that if the grid, let's say that the grid is 12, right? Let's think of a clock.", 'start': 3875.327, 'duration': 5.343}, {'end': 3883.891, 'text': "So if, I'm not sure if I can do mod here, actually.", 'start': 3880.97, 'duration': 2.921}], 'summary': 'Modulus operator creates a wrapping effect, simulating a torus grid where going out on one end shows up on the opposite end.', 'duration': 31.061, 'max_score': 3852.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3852830.jpg'}], 'start': 3144.596, 'title': 'Snake game implementation', 'summary': "Discusses implementing apple spawning based on snake's position, dynamics, and the need for random apple position. it also explains snake game logic, involving nested if statements, position calculations, growing and crashing scenarios. additionally, it covers using the modulus operator in game development to create a wrapping effect and its behavior with negative numbers.", 'chapters': [{'end': 3431.327, 'start': 3144.596, 'title': 'Snake game implementation', 'summary': "Discusses the implementation of spawning a new apple based on the snake's position, including the scenarios where the snake eats or does not eat the apple, and the logic behind moving the snake's head and tail. the game's dynamics are explored, indicating that the current implementation is not ideal and emphasizing the need for a random position for the apple when eaten.", 'duration': 286.731, 'highlights': ['The current implementation spawns the apple at new locations, regardless of whether the snake eats the apple or not.', 'The need for a random position for the apple when eaten is emphasized, as the current implementations result in undesired game dynamics.', "The logic behind moving the snake's head and tail is explained, highlighting the difference in behavior when the snake eats or does not eat the apple."]}, {'end': 3809.029, 'start': 3432.068, 'title': 'Snake game logic', 'summary': 'Explains the logic for computing the next snake position and head position in a snake game, involving nested if statements and position calculations, with examples of growing and crashing scenarios.', 'duration': 376.961, 'highlights': ['The logic for computing the next snake position involves nested if statements to determine if the snake will crash or not, and whether it is eating, with different actions taken based on these conditions.', 'The process of computing the next head position involves checking if there is a snake or not, and then calculating the new position based on the current position and the next move to be executed.', 'Explanation of default start position and the calculation of the next head position when the snake length is greater than 0.']}, {'end': 4196.8, 'start': 3809.449, 'title': 'Using modulus operator in game development', 'summary': 'Explains the concept of using the modulus operator in game development to create a wrapping effect, ensuring the game objects move seamlessly across the screen, with examples and discussions on its behavior with negative numbers, and different implementations, making problems trivial through math.', 'duration': 387.351, 'highlights': ['The use of modulus in game development ensures a wrapping effect, allowing game objects to move seamlessly across the screen, with clear examples and discussions on its behavior with negative numbers and different implementations.', 'Discussions on the behavior of the modulus operator with specific examples such as 10 modulo 12 resulting in 10, 12 modulo 12 resulting in 0, and the wrapping effect when passing higher numbers or negative numbers.', 'The concept of using the modulus operator to create a wrapping effect is highlighted through discussions on its application to the size of the grid, ensuring objects wrap around seamlessly and the practical implications of the zero-indexed system in game development.', 'The explanation of using the modulus operator to determine the new position of game objects by taking the raw position and performing modulo on the size of the rows or columns, emphasizing its crucial role in game development.', 'The chapter also delves into the use of the modulus operator in creating the next head and next snake based on the raw new position, highlighting its significance in game logic and object movement.']}], 'duration': 1052.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig3144596.jpg', 'highlights': ['The use of modulus in game development ensures a wrapping effect, allowing game objects to move seamlessly across the screen, with clear examples and discussions on its behavior with negative numbers and different implementations.', 'The logic for computing the next snake position involves nested if statements to determine if the snake will crash or not, and whether it is eating, with different actions taken based on these conditions.', 'The explanation of using the modulus operator to determine the new position of game objects by taking the raw position and performing modulo on the size of the rows or columns, emphasizing its crucial role in game development.', "The logic behind moving the snake's head and tail is explained, highlighting the difference in behavior when the snake eats or does not eat the apple.", 'The need for a random position for the apple when eaten is emphasized, as the current implementations result in undesired game dynamics.', 'The current implementation spawns the apple at new locations, regardless of whether the snake eats the apple or not.']}, {'end': 5576.703, 'segs': [{'end': 4280.818, 'src': 'embed', 'start': 4257.339, 'weight': 2, 'content': [{'end': 4265.125, 'text': 'Yeah, so what we do is we make use of set interval, right? Which is this function in JavaScript that calls a function with a regular interval.', 'start': 4257.339, 'duration': 7.786}, {'end': 4270.949, 'text': "And it's also expressed in milliseconds, but here actually I run it every 80 milliseconds.", 'start': 4265.405, 'duration': 5.544}, {'end': 4275.593, 'text': 'So yeah, for some odd reason, I chose a different interval for the terminal application.', 'start': 4271.269, 'duration': 4.324}, {'end': 4279.456, 'text': 'Maybe we should change this to 100 in order to sort of make it have the same speed.', 'start': 4275.613, 'duration': 3.843}, {'end': 4280.818, 'text': 'But never mind.', 'start': 4279.536, 'duration': 1.282}], 'summary': 'Using set interval in javascript with 80ms interval, considering changing to 100ms.', 'duration': 23.479, 'max_score': 4257.339, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4257339.jpg'}, {'end': 4358.481, 'src': 'embed', 'start': 4330.131, 'weight': 0, 'content': [{'end': 4332.712, 'text': "Now we're just saying, do this thing and then do that thing.", 'start': 4330.131, 'duration': 2.581}, {'end': 4333.492, 'text': 'So like, nevermind.', 'start': 4332.752, 'duration': 0.74}, {'end': 4341.295, 'text': 'But anyway, so set interval, what it does is that it calls step and then it calls show and it does that every 80 milliseconds.', 'start': 4333.732, 'duration': 7.563}, {'end': 4347.737, 'text': "And what show does, let's start with the show, right? So both of these, both show and step are functions that don't take any arguments.", 'start': 4341.715, 'duration': 6.022}, {'end': 4352.999, 'text': 'And show what it does is that it console logs this strange character which works as a clearing right?', 'start': 4347.797, 'duration': 5.202}, {'end': 4353.779, 'text': 'Like, if you think about it.', 'start': 4353.019, 'duration': 0.76}, {'end': 4358.481, 'text': 'actually, if I remove this, I think that would be the most simple way of describing this.', 'start': 4353.779, 'duration': 4.702}], 'summary': "The 'set interval' function calls 'step' and 'show' every 80 milliseconds, with 'show' console logging a clearing character.", 'duration': 28.35, 'max_score': 4330.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4330131.jpg'}, {'end': 4423.491, 'src': 'embed', 'start': 4398.276, 'weight': 3, 'content': [{'end': 4404.06, 'text': "But if we add that character, we keep clearing the screen all the time so that we're just, it's like clearing the canvas.", 'start': 4398.276, 'duration': 5.784}, {'end': 4407.102, 'text': "So that's the first part of show, like we clear.", 'start': 4404.1, 'duration': 3.002}, {'end': 4416.669, 'text': 'And then what we do is that we have these functions on the object matrix, right? So here you can see we have a comment that says matrix operations.', 'start': 4407.382, 'duration': 9.287}, {'end': 4423.491, 'text': "And then following that, there's a constant called matrix, which is sort of a module with a bunch of functions that operates on matrices.", 'start': 4416.929, 'duration': 6.562}], 'summary': 'The program features a character clearing the screen and a module with matrix operations.', 'duration': 25.215, 'max_score': 4398.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4398276.jpg'}, {'end': 4606.772, 'src': 'embed', 'start': 4579.333, 'weight': 5, 'content': [{'end': 4587.279, 'text': 'Because I mean, if you think about it, we print this pretty much as a matrix, right? Like this has a number of rows and it has a number of columns.', 'start': 4579.333, 'duration': 7.946}, {'end': 4594.443, 'text': "And actually, if we look at toString here in the matrix module, you can see that this is where it becomes obvious that it's fairly trivial,", 'start': 4587.979, 'duration': 6.464}, {'end': 4596.305, 'text': 'because toString takes.', 'start': 4594.443, 'duration': 1.862}, {'end': 4597.125, 'text': 'I wrote xs,', 'start': 4596.305, 'duration': 0.82}, {'end': 4606.772, 'text': 'xs here because usually in functional programming you will see people say xs or ss or something like that to indicate that you have an array of something.', 'start': 4597.125, 'duration': 9.647}], 'summary': 'Discussion about matrix representation and functional programming.', 'duration': 27.439, 'max_score': 4579.333, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4579333.jpg'}, {'end': 4753.447, 'src': 'embed', 'start': 4726.078, 'weight': 4, 'content': [{'end': 4730.02, 'text': 'But the first function makes the matrix, the second function adds the snake to the matrix,', 'start': 4726.078, 'duration': 3.942}, {'end': 4736.183, 'text': 'the third function adds the apple and the fourth function adds a crash if there is supposed to be any crash.', 'start': 4730.02, 'duration': 6.163}, {'end': 4740.404, 'text': 'So again, these are sort of immutable methods in order just to keep my head straight in this.', 'start': 4736.443, 'duration': 3.961}, {'end': 4742.004, 'text': 'So matrix.make.', 'start': 4740.744, 'duration': 1.26}, {'end': 4743.005, 'text': 'we can see up here right?', 'start': 4742.004, 'duration': 1.001}, {'end': 4744.005, 'text': 'The matrix.make.', 'start': 4743.025, 'duration': 0.98}, {'end': 4749.806, 'text': 'here I called it table and not state, because a table is anything that has calls and rows.', 'start': 4744.005, 'duration': 5.801}, {'end': 4753.447, 'text': 'But I mean, actually, what we will pass is we will actually pass the state.', 'start': 4750.086, 'duration': 3.361}], 'summary': 'Functions create matrix, add snake, apple, & crash. immutable methods to maintain clarity.', 'duration': 27.369, 'max_score': 4726.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4726078.jpg'}, {'end': 4833.919, 'src': 'embed', 'start': 4805.524, 'weight': 7, 'content': [{'end': 4807.625, 'text': 'And if I, instead of a, if I have one here,', 'start': 4805.524, 'duration': 2.101}, {'end': 4814.789, 'text': "I'll essentially get an array with this thing repeated the number of times as the second argument that we're passing.", 'start': 4807.625, 'duration': 7.164}, {'end': 4818.311, 'text': 'And rep was implemented in terms of range.', 'start': 4815.289, 'duration': 3.022}, {'end': 4821.913, 'text': "And what range does is just that, let's see if I can remember the syntax.", 'start': 4818.351, 'duration': 3.562}, {'end': 4825.414, 'text': 'If we do this, right, then we get a range from 10 to 20.', 'start': 4821.953, 'duration': 3.461}, {'end': 4827.436, 'text': 'We get an array of all the elements of 10 to 20.', 'start': 4825.414, 'duration': 2.022}, {'end': 4833.919, 'text': 'So what we were doing is that we were mapping over that range in order to have an array of multiple elements.', 'start': 4827.436, 'duration': 6.483}], 'summary': "The function 'rep' creates an array with a specified number of repetitions, implemented using the 'range' function.", 'duration': 28.395, 'max_score': 4805.524, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4805524.jpg'}, {'end': 5511.896, 'src': 'embed', 'start': 5480.436, 'weight': 6, 'content': [{'end': 5487.08, 'text': 'like what graphics version or engine you want to use your snake with what GUI you want to use your snake game with,', 'start': 5480.436, 'duration': 6.644}, {'end': 5492.804, 'text': 'so which way you want to display snake to the user and which way you want the user to interact with your snake game.', 'start': 5487.08, 'duration': 5.724}, {'end': 5501.009, 'text': 'So again, if we think broader than game programming, functional programming is really susceptible to modularity.', 'start': 5493.064, 'duration': 7.945}, {'end': 5511.896, 'text': 'So what I mean is, when you produce small functions, you can really quickly feel how they become very composable and very reusable.', 'start': 5501.83, 'duration': 10.066}], 'summary': 'Choose graphics, gui, and user interaction for snake game. functional programming promotes modularity and reusability.', 'duration': 31.46, 'max_score': 5480.436, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig5480436.jpg'}], 'start': 4197.56, 'title': 'Implementing game functions', 'summary': "Covers implementing cli and game loop, understanding the 'show' function, implementing matrix operations, and discussing matrix operations in a snake game, providing insights into functional programming techniques for game development in javascript.", 'chapters': [{'end': 4347.737, 'start': 4197.56, 'title': 'Implementing cli and game loop', 'summary': 'Provides an overview of implementing the cli and game loop, using set interval to call functions step and show every 80 milliseconds, and exploring the use of piping and composing functions in javascript.', 'duration': 150.177, 'highlights': ['The chapter provides an overview of implementing the CLI and game loop, using set interval to call functions step and show every 80 milliseconds, and exploring the use of piping and composing functions in JavaScript.', 'The setInterval function in JavaScript calls a function with a regular interval, in this case, running step and show every 80 milliseconds.', 'The show and step functions are called by setInterval every 80 milliseconds, providing a smooth game loop implementation.', 'The author explores the use of piping and composing functions in JavaScript, highlighting the differences and considerations when using these techniques.']}, {'end': 4744.005, 'start': 4347.797, 'title': 'Understanding the show function in a game', 'summary': "Explains the 'show' function in the game, which clears the screen, constructs a matrix from the current state, and then turns that matrix into a string, providing insights into the process of clearing the canvas and creating a matrix-like data structure to display the game.", 'duration': 396.208, 'highlights': ["The 'show' function clears the screen and constructs a matrix from the current state, which is used to display the game, offering insights into the process of clearing the canvas and creating a matrix-like data structure (e.g., array of arrays).", "The 'toString' function in the matrix module is used to convert the matrix into a string, where the outer array is mapped over, and for every inner array, all values are joined with a space, providing a detailed understanding of the string conversion process for displaying the game grid.", "The process of creating the matrix involves immutably piping the state through functions like 'matrix.make', 'add snake', 'add apple', and 'add crash', which collectively contribute to the creation of the game display, shedding light on the sequential steps involved in generating the game grid."]}, {'end': 5161.683, 'start': 4744.005, 'title': 'Implementing matrix operations', 'summary': "Explains the implementation of matrix operations in a functional programming language, including the use of helper functions like 'rep', 'range', and 'map' to create two-dimensional arrays and manipulate their elements, along with the explanation of functions like 'addsnake' and 'set' for adjusting specific cells within the matrix without mutating the original data structure.", 'duration': 417.678, 'highlights': ["Explaining the implementation of 'rep' function to create arrays with repeated elements, such as using 'base.rep' to generate 10 'a's or 3 'a's, and how it is implemented using 'range' and 'map' functions.", "Detailing the 'addSnake' method that adjusts cells in the matrix by spreading the mapping of setting values over the snake, and the explanation of the 'set' function to modify the matrix without mutation.", "Describing the 'adjust' function which changes elements in a collection at a specified index, and its usage in the context of the 'addSnake' method to replace values in the matrix."]}, {'end': 5576.703, 'start': 5161.683, 'title': 'Matrix operations in snake game', 'summary': "Discusses the usage of the 'set' function in the snake game implementation to update values in the matrix, adding snake, apple, and crash to the matrix, and the modularity of functional programming for game development.", 'duration': 415.02, 'highlights': ["The chapter discusses the usage of the 'set' function in the snake game implementation, where it updates values in the matrix when given a value, position, and matrix.", "It explains the usage of 'set' in adding snake, apple, and crash to the matrix, with a more simple implementation for adding apple and a condition for adding crash based on snake length.", 'The chapter emphasizes the modularity of functional programming for game development, highlighting the composability and reusability of small functions, and the relevance of this approach for applications expecting changes or targeting multiple platforms.']}], 'duration': 1379.143, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/bRlvGoWz6Ig/pics/bRlvGoWz6Ig4197560.jpg', 'highlights': ['The show and step functions are called by setInterval every 80 milliseconds, providing a smooth game loop implementation.', 'The setInterval function in JavaScript calls a function with a regular interval, in this case, running step and show every 80 milliseconds.', 'The chapter provides an overview of implementing the CLI and game loop, using set interval to call functions step and show every 80 milliseconds, and exploring the use of piping and composing functions in JavaScript.', "The 'show' function clears the screen and constructs a matrix from the current state, which is used to display the game, offering insights into the process of clearing the canvas and creating a matrix-like data structure (e.g., array of arrays).", "The process of creating the matrix involves immutably piping the state through functions like 'matrix.make', 'add snake', 'add apple', and 'add crash', which collectively contribute to the creation of the game display, shedding light on the sequential steps involved in generating the game grid.", "The 'toString' function in the matrix module is used to convert the matrix into a string, where the outer array is mapped over, and for every inner array, all values are joined with a space, providing a detailed understanding of the string conversion process for displaying the game grid.", 'The chapter emphasizes the modularity of functional programming for game development, highlighting the composability and reusability of small functions, and the relevance of this approach for applications expecting changes or targeting multiple platforms.', "Explaining the implementation of 'rep' function to create arrays with repeated elements, such as using 'base.rep' to generate 10 'a's or 3 'a's, and how it is implemented using 'range' and 'map' functions."]}], 'highlights': ['The game is built using JavaScript in functional programming style, focusing on purity, small functions, and composability.', 'The example of building Snake using functional programming in JavaScript demonstrates separate implementations for the terminal and web.', 'The valid move check in the NQ method prevents inverse situations by ignoring invalid moves and only queuing valid moves, showcasing the benefits of immutability in state management.', 'The draw function separates visual rendering from business logic', 'The use of modulus in game development ensures a wrapping effect, allowing game objects to move seamlessly across the screen, with clear examples and discussions on its behavior with negative numbers and different implementations.', 'The show and step functions are called by setInterval every 80 milliseconds, providing a smooth game loop implementation.']}