WDX-180
Web Development X
Week 28 | Battleship Game
Week 28 - Day 1 | Battleship Game - Part 2
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
-
Part 1: We continue on our Battleship game by coming up with more requirements and game rules and ways and ideas to implement them. We also take a look at error handling and creating custom errors by extending the native
Errorconstructor in JavaScript. Last, but not least, we explore the IIFE pattern: Immediately Invoked Function Expression, which is one of the most powerful and widely used JS patterns. -
Part 2: We continue our discussion on the IIFE pattern, debug some Battleship algorithm implementation that deals with the game board and try to come up with some abstractions that will help us deal with the complexity of the game requirements.
You can find the lecture code here
Lecture Notes:
Questions
- How can we limit the number of exposed global variables?
- Use Modules (import/export)
- How can we protect our code from global variable conflicts?
- Avoid common names (e.g. user, password, secret, initGame, initApp, init)
- Prefix your global variables with something very specific, e.g. bgameUser, bgameApp, etc.
References & Resources:
- Creating custom Errors
- IIFE: Immediately Invoked Function Expression
- getBoundingClientRect(): “An object providing information about the size of an element and its position relative to the viewport” (MDN)
- returns DOMRect
- Debugging techniques:
- Comment/Uncomment lines and check and compare behavior (before/after)
- Change the order of lines and see what happens
console.logeverything!- Manually trace the code
Tips for production apps:
- Handle errors
- Minimize the code required to run the app
Extra Resources
Week 28 - Day 2 | WebSockets for Multi-Player Games
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Here’s an interesting question: how will our human battleship players be able to play the game together online?
There are quite a few options available, but one of the most prominent technologies these days is WebSockets.
What is a WebSocket
“WebSocket is a standardized communication protocol that enables simultaneous two-way communication over a single TCP connection. It has full-duplex or bi-directional capabilities that distinguishes it from HTTP. WebSocket achieves HTTP compatibility by using the HTTP Upgrade header to transition protocols.
It allows servers to push content to clients without initial requests and maintains open connections for continuous message exchange, making it ideal for real-time data transfer with lower overhead than alternatives like HTTP polling.
WebSocket communications typically occur over TCP ports 443 (secured) or 80 (unsecured), helping bypass firewall restrictions on non-web connections. The protocol defines its own URI schemes (ws:// and wss://) for unencrypted and encrypted connections respectively and supported by all major browsers.”
(From the Node.js documentation)
Here are a few resources for studying WebSockets today and experimenting with some code that will prepare us for the Battleship implementation:
Week 28 - Day 3 | Coding Challenge: Data Wrangling
Schedule
- Practice on the topics and share your questions
Study Plan
Jump straight to the Exercises section below and solve the data wrangling exercises!
Exercises
Download the exercise file and start solving each exercise found inside the labelled statements (make_all_the_keys_lowercase, convert_the_array_into_a_dict, and so forth) and ensure that the tests pass.
You can execute and run the exercise file, either in the browser or using Node.js: node --watch jqpilot.exerices.js
IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week28/progress/progress.draft.w28.d03.csv
You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.
Week 28 - Day 4 | Practice Day
Schedule
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Practice on the concepts that we’ve covered so far this week and build upon them.
Focus on finding solutions to the Battleship game requirements, improving and refactoring the code to make it more readable, and ready to be scaled.
Week 28 - Day 5 | TBA
Schedule
- Watch the lectures
- Study the suggested material
- Practice on the topics and share your questions
Study Plan
Your instructor will share the video lectures with you. Here are the topics covered:
- Part 1:
- Part 2:
You can find the lecture code here
Lecture Notes & Questions:
References & Resources:
Extra Resources
Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!