42 lines
2.0 KiB
HTML
42 lines
2.0 KiB
HTML
<!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>
|