We'll occasionally release outdated material for free, primarily so you can judge the quality of our products before making a purchase.
Quadblock is loosely based on Tetris, one of the most iconic video games of all time. In this video tutorial with sixteen paid videos you’ll learn to build it. Along the way, we’ll learn a little Elixir, some Phoenix, and also LiveView.
We talk about the overall series, and the use of reducers. The repo is https://github.com/groxio-learning/quadblock
We build new structs, and then use them in new reducers.
We walk through the LiveView lifecycle, and build a basic blank SVG board.
We represent a point as an SVG shape. In the repo, we start from the checkpoint_1 branch.
We build individual tetromino shapes, and render them on our svg. Start on checkpoint_2.
We begin to render colors on our SVG, and introduce the concept of converters. We start at checkpoint_3.
In this episode, we take the concept of reducers to the max. We rotate our tetromino using some trivial geometry. checkpoint_4
We begin to move our individual tetrominos around the page using phx-window-keydown HTML attributes. checkpoint_5.
We crank up the complexity, and attempt to isolate that new complexity in a boundary layer. checkpoint_6
We integrate our new boundary code into the LiveView handlers and mount. checkpoint_7
We start to build the bottom boundary, where we will eventually merge in old shapes as they hit the bottom. checkpoint_8
We continue to work with stacking up blocks into the bottom boundary. checkpoint 10
In this section, we check for collisions with items in the junkyard. checkpoint_11
We move some of our code into templates, and talk about when and why we should do so. checkponit_13
In this chapter, we work on a little navigation when the game ends. checkpoint_14
We finish up the game, and tidy up loose ends. checkpoint 15
Start project, and create a new random brick.
In part 2, we establish reducers to move and spin basic brick.
In part 3, we create the model for the geomitry of each tetromino using a flat functional data structure.
In part 4, we create another set of reducers to work on the points of a teromino to manipulate geometry.
In part 5, we build a test helper to make it easier to test our tetromino.
In part 6, we translate the brick to a string in preparation for using the inspect protocol.
In part 7, we make a brick work in IEx by making inspect render a two dimensional shape.
We set up LiveView and learn what a LiveView is.
We set up a LiveView route and work with a trivial LiveView view, paying attention to the lifecycle.
Dependencies. We talk about the strategies for managing dependencies. We set up a Pancho project, and plug in the Tetris work we've done so far.
We begin to show graphics using SVG. We show a background and a single box.
We get ready to render a tetromino by creating a function to prepare us to render, and a reducer called show that adds points to a socket.
For the first time, we tie into handle_event "keydown". We render a block and tie it to the arrow key. so a user can move our pieces right and left.
We work on our api and boundaries layer, working in the idea of collisions with the boundaries and other blocks.
In our API layer, we build an API that handles uncertainty, a function that could potentially take the user out of bounds. We begin to layer on tests.
We integrate our new API to our keydown functions and begin to handle the game mechanics on the bottom of the board.
Start working with the game mechanics of the bottom, so we can see bricks that hit the bottom merge with the bricks that are already there.
We write the backend code to erase blank rows.
We score the bricks that merge and write tests for the new game mechanics.
We test and debug the new bottom to get it ready for the LiveView.
Integrate the new bottom code to work with the API and LiveView.
Bring on the gravity! We integrate a timer tick to simulate gravity and wrap up the session.
These resources will get you on the path to learning with background information, tooling and exercises.
You decide how deep to go. These resources are exercises and projects to cement your learning.
These resources will help you put your new knowledge into context so you'll be better at your everyday job.