Create "Lights Out" Game - Phoenix LiveView Tutorial [Elixir Language]
Create a simple game called "Lights Out" in this Phoenix LiveView tutorial using the Elixir language. With this elixir game programming exercise, get more comfortable creating apps and setting up basic workflows.
Here’s what we’ll cover:
Example of the game we are trying to build
How to set up a LiveView project
How to create a simple interactive UI
Walk through how I set up recreating the game in LiveView
Links to the final project below
Links to project resources:
Install Elixir
https://elixir-lang.org/install.html
Phoenix docs
https://hexdocs.pm/phoenix/overview.html
LiveView docs
https://hexdocs.pm/phoenix_live_view/...
Configure Tailwind
https://tailwindcss.com/docs/guides/p...
Canvas Confetti
https://github.com/catdad/canvas-conf...
Project repo
https://github.com/headwayio/lights-out
Segments:
00:00 - Intro
00:07 - Lights Out Game Overview
00:50 - What We'll Cover
01:10 - Phoenix LiveView Project Setup
02:17 - Phoenix LiveView Tailwind Setup
03:13 - Mounting a LiveView Component
04:35 - Render Grid Setup
06:02 - LiveView Event Handling
08:24 - Game Logic in LiveView
12:49 - Improving the Game Experience
17:17 - Recap
#elixirlang #learntocode #programmingforbeginners