ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-15 14:11:18 +02:00
parent 1627fb7260
commit a78c7aa1be
27 changed files with 1200 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
03_dom/uebungen/u10_running-lights/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10 - Chasing Lights</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 10 - Chasing Lights</h2>
<p>
Eine erste Variante sind die chasing Lights. Dabei muss der Anwender das Lauflicht mit der Maus »jagen«. Immer
wenn der Mauszeiger sich über einer Glühbirne befindet, schaltet sich die nächste Birne ein und die aktuelle
aus. Versucht der Benutzer, mit dem Mauszeiger die leuchtende Glühbirne zu berühren, springt das Licht auf die
nächste über. Er »jagt« quasi das Lauflicht. Bei der letzten Lampe beginnt das Spiel wieder von vorn!
</p>
<p>
Programmiere ein weiteres Lauflicht. Diesmal soll das Lauflicht weiterspringen, wenn der Benutzer auf eine der
Lampen klickt. Auch hier gilt: Nach der letzten Lampe fängt das Licht wieder von vorn an zu laufen.
</p>
</div>
<div class="light-bulbs">
<img src="assets/img/light_on.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_on.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
</div>
</div>
</body>
</html>