Digitalferien 2024 - Halloween Puzzle

Coding Club Linz · Beginner ·🌐 Frontend Engineering ·1y ago

About this lesson

Gemeinsam bauen wir ein Halloween-Puzzle Spiel mit TypeScript. Die schriftliche Anleitung findet man unter https://bit.ly/digiferien-24-anleitung. Der Starter Code ist unter https://bit.ly/digiferien-24 erreichbar. 00:00:00 Einleitung 00:01:13 Entwicklungsumgebung öffnen 00:02:16 Beschreibung des Spiels 00:10:16 Hintergrundgrafik ändern (style.css) 00:12:13 Wechseln auf TypeScript (main.ts) 00:13:58 Raster erstellen (buildGrid) 00:20:19 Raster mit Symbolen füllen (fill) 00:24:55 Symbole auswählen (select, Teil 1) 00:31:19 Symbole auswählen (select, Teil 2) 00:35:41 Gruppen entfernen (cleanup, Teil 1) 00:41:13 Gruppen entfernen (cleanup, Teil 2) 00:46:07 Symbole nach unten fallen lassen (fallDown, Teil 1) 00:48:14 Symbole nach unten fallen lassen (fallDown, Teil 2) 00:50:39 Zeit, Punkte (updateStatus, Teil 1) 00:56:04 Zeit, Punkte (updateStatus, Teil 2) 01:00:00 Abschluss

Original Description

Gemeinsam bauen wir ein Halloween-Puzzle Spiel mit TypeScript. Die schriftliche Anleitung findet man unter https://bit.ly/digiferien-24-anleitung. Der Starter Code ist unter https://bit.ly/digiferien-24 erreichbar. 00:00:00 Einleitung 00:01:13 Entwicklungsumgebung öffnen 00:02:16 Beschreibung des Spiels 00:10:16 Hintergrundgrafik ändern (style.css) 00:12:13 Wechseln auf TypeScript (main.ts) 00:13:58 Raster erstellen (buildGrid) 00:20:19 Raster mit Symbolen füllen (fill) 00:24:55 Symbole auswählen (select, Teil 1) 00:31:19 Symbole auswählen (select, Teil 2) 00:35:41 Gruppen entfernen (cleanup, Teil 1) 00:41:13 Gruppen entfernen (cleanup, Teil 2) 00:46:07 Symbole nach unten fallen lassen (fallDown, Teil 1) 00:48:14 Symbole nach unten fallen lassen (fallDown, Teil 2) 00:50:39 Zeit, Punkte (updateStatus, Teil 1) 00:56:04 Zeit, Punkte (updateStatus, Teil 2) 01:00:00 Abschluss

Watch on YouTube ↗ (saves to browser)

Sign in to unlock AI tutor explanation · ⚡30

Related Reads

Tags, Releases, and Branches: A Practical Guide to Frontend Deployment

Learn how to streamline frontend deployment with a disciplined branching and release process

Medium · Programming

Tags, Releases, and Branches: A Practical Guide to Frontend Deployment

Learn how to implement a disciplined branching and release process for frontend deployment to improve production visibility

Medium · DevOps

Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown

Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.

Medium · Programming

I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week

Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach

Medium · Programming

Chapters (16)

Einleitung

1:13 Entwicklungsumgebung öffnen

2:16 Beschreibung des Spiels

10:16 Hintergrundgrafik ändern (style.css)

12:13 Wechseln auf TypeScript (main.ts)

13:58 Raster erstellen (buildGrid)

20:19 Raster mit Symbolen füllen (fill)

24:55 Symbole auswählen (select, Teil 1)

31:19 Symbole auswählen (select, Teil 2)

35:41 Gruppen entfernen (cleanup, Teil 1)

41:13 Gruppen entfernen (cleanup, Teil 2)

46:07 Symbole nach unten fallen lassen (fallDown, Teil 1)

48:14 Symbole nach unten fallen lassen (fallDown, Teil 2)

50:39 Zeit, Punkte (updateStatus, Teil 1)

56:04 Zeit, Punkte (updateStatus, Teil 2)

1:00:00 Abschluss

How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money

Grow with Will - SEO, Sales & Entrepreneurship