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

Why Vanilla JS? In the article below, I am sharing my story of building SaaS product in vanilla js and explaining why I decided to go with this approach. https://guseyn.com/html/posts/why-vanilla-js.html

Learn why choosing Vanilla JS can be a great approach for building SaaS products and how it can simplify development

Dev.to · Guseyn Ismayylov

How to Create a Cursor Tail Using HTML, CSS, and JavaScript

Learn to create a colorful cursor tail using HTML, CSS, and JavaScript for a unique user interface effect

Medium · JavaScript

I built a landing page with Three.js, vanilla JS, and zero frameworks — here's what I learned

Learn how to build a landing page with Three.js and vanilla JS without relying on frameworks, and discover the key takeaways from this project

Dev.to · Ayush Shekhar

Part 1: Why I Rarely Use useEffect Anymore (and what I use instead)

Learn why useEffect is not always the best choice in React and discover alternative solutions

Dev.to · Alejandro

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 Build A Twitter Clone - React Next JS - Appwrite Crash Course