Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
F
Flappy Birds Game ohne Scoreboard und Name
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Iterations
Wiki
Requirements
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Locked files
Build
Pipelines
Jobs
Pipeline schedules
Test cases
Artifacts
Deploy
Releases
Package registry
Container Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Code review analytics
Issue analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
KI-gestütztes Marketing
Prototyping
Flappy Birds Game ohne Scoreboard und Name
Commits
9b6acc0e
Commit
9b6acc0e
authored
1 year ago
by
Simon Flaisch
Browse files
Options
Downloads
Patches
Plain Diff
initilization
parent
487613bc
No related branches found
Branches containing commit
No related tags found
No related merge requests found
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
index.html
+66
-0
66 additions, 0 deletions
index.html
script.js
+229
-0
229 additions, 0 deletions
script.js
style.css
+205
-0
205 additions, 0 deletions
style.css
with
500 additions
and
0 deletions
index.html
0 → 100644
+
66
−
0
View file @
9b6acc0e
<!DOCTYPE html>
<html
lang=
"de"
>
<head>
<!-- Deklariere den Typ des Dokuments und die verwendete Zeichenkodierung -->
<meta
charset=
"UTF-8"
>
<!-- Legt den Standardmodus für die Darstellung der Webseite im Internet Explorer fest -->
<meta
http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
<!-- Legt die Breite des Viewports fest, um die Website auf verschiedenen Geräten korrekt darzustellen -->
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<!-- Fügt ein FavIcon zur Webseite hinzu -->
<link
rel=
"icon"
type=
"image/png"
href=
"images/favicon.ico"
>
<!-- Titel der Webseite -->
<title>
Flappy Bird Game
</title>
<!-- Verknüpfung mit dem externen Stylesheet -->
<link
rel=
"stylesheet"
href=
"style.css"
>
<!-- Einbinden des externen JavaScript-Codes, der verzögert geladen wird -->
<script
src=
"script.js"
defer
></script>
</head>
<body>
<!-- Obere Leiste -->
<div
class=
"topBar"
>
<div
class=
"gameTitle"
>
Flappy Birds
</div>
<div
class=
"menuOptions"
>
<div
class=
"menuItem"
>
Game
</div>
<div
class=
"menuItem"
id=
"scoresButton"
>
Scores
</div>
</div>
</div>
<!-- Hintergrundbild des Spiels -->
<div
class=
"background"
id=
"background"
></div>
<!-- Bild des Vogels -->
<img
src=
"images/Bird.png"
alt=
"bird-img"
class=
"bird"
id=
"bird-1"
>
<!-- Bild des Mascots -->
<div
class=
"mascot"
id=
"mascot"
>
<img
src=
"images/Tiger-Laecheln.png"
alt=
"Tiger"
id=
"Tiger-Laecheln"
class=
"mascot"
>
</div>
<div
class=
"GameOverMessage"
>
<p
id=
"gameOverText"
></p>
</div>
<!-- Anzeige des aktuellen Punktestands -->
<div
class=
"score"
>
<span
class=
"score_title"
></span>
<span
class=
"score_val"
></span>
</div>
<!-- Schwierigkeitsgrad-Auswahl im difficultyContainer -->
<div
id=
"difficultyContainer"
class=
"difficultyContainer"
>
<label
for=
"difficulty"
>
Wähle den Schwierigkeitsgrad:
</label>
<select
id=
"difficulty"
>
<option
value=
"langsam"
>
Langsam
</option>
<option
value=
"normal"
>
Normal
</option>
<option
value=
"schnell"
>
Schnell
</option>
</select>
</div>
<div
class=
"start-container"
>
<button
class=
"start-button"
id=
"start-button"
>
Start
</button>
<!-- Eingabefeld für den Spielernamen -->
<input
type=
"text"
id=
"playerNameInput"
placeholder=
"Enter your name"
class=
"inputField"
>
</div>
</body>
</html>
This diff is collapsed.
Click to expand it.
script.js
0 → 100644
+
229
−
0
View file @
9b6acc0e
// Wähle das Vogel-Element und das Bild aus
let
bird
=
document
.
querySelector
(
'
.bird
'
);
let
img
=
document
.
getElementById
(
'
bird-1
'
);
// Hole die Eigenschaften des Vogel-Elements und des Hintergrund-Elements
let
bird_props
=
bird
.
getBoundingClientRect
();
let
background
=
document
.
querySelector
(
'
.background
'
).
getBoundingClientRect
();
// Wähle die Elemente für den Punktestand, Nachricht und Titel aus
let
score_val
=
document
.
querySelector
(
'
.score_val
'
);
let
message
=
document
.
querySelector
(
'
.GameOverMessage
'
);
let
score_title
=
document
.
querySelector
(
'
.score_title
'
);
// Setze den Spielzustand auf "Start" und verstecke das Vogelbild
let
game_state
=
'
Start
'
;
img
.
style
.
display
=
'
none
'
;
message
.
classList
.
add
(
'
messageStyle
'
);
// Führe den folgenden Code aus, sobald das DOM geladen ist
document
.
addEventListener
(
'
DOMContentLoaded
'
,
()
=>
{
const
mascot
=
document
.
getElementById
(
'
mascot
'
);
const
mascotImage
=
document
.
getElementById
(
'
Tiger-Laecheln
'
);
const
messages
=
[
"
Willkommen zum Flappy Birds Spiel! Drücke Enter, um zu starten.
"
,
"
Weiche den Hindernissen aus, um Punkte zu sammeln.
"
,
"
Viel Glück und hab Spaß!
"
];
const
images
=
[
"
images/Tiger-Laecheln.png
"
,
"
images/Mund-Geschlossen.png
"
,
"
images/Mund-Offen.png
"
];
let
messageIndex
=
0
;
let
imageIndex
=
0
;
// Funktion, um eine Nachricht auszusprechen
function
speakMessage
(
message
)
{
const
utterance
=
new
SpeechSynthesisUtterance
(
message
);
utterance
.
lang
=
'
de-DE
'
;
window
.
speechSynthesis
.
speak
(
utterance
);
}
// Funktion, um die Nachricht zu aktualisieren
function
updateMessage
()
{
const
messageText
=
messages
[
messageIndex
];
speakMessage
(
messageText
);
messageIndex
=
(
messageIndex
+
1
)
%
messages
.
length
;
}
// Funktion, um das Bild zu aktualisieren
function
updateImage
()
{
mascotImage
.
src
=
images
[
imageIndex
];
imageIndex
=
(
imageIndex
+
1
)
%
images
.
length
;
}
// Zeige die nächste Nachricht alle 3 Sekunden an
const
messageInterval
=
setInterval
(
updateMessage
,
3000
);
// Wechsle das Bild alle 0.5 Sekunden, um die Mundbewegung zu simulieren
const
imageInterval
=
setInterval
(
updateImage
,
500
);
const
playerNameInput
=
document
.
getElementById
(
'
playerNameInput
'
);
const
scoresButton
=
document
.
getElementById
(
'
scoresButton
'
);
const
scoreBoard
=
document
.
getElementById
(
'
scoreBoard
'
);
const
scoreList
=
document
.
getElementById
(
'
scoreList
'
);
let
scores
=
JSON
.
parse
(
localStorage
.
getItem
(
'
scores
'
))
||
[];
// Event-Listener für den Mausklick auf den Start-Button
const
startButton
=
document
.
getElementById
(
'
start-button
'
);
startButton
.
addEventListener
(
'
click
'
,
()
=>
{
if
(
game_state
!==
'
Play
'
)
{
// Entferne alle Rohre, zeige das Vogelbild, setze die Startposition des Vogels und starte das Spiel
document
.
querySelectorAll
(
'
.pipe_sprite
'
).
forEach
((
e
)
=>
{
e
.
remove
();
});
// Stoppe die Nachrichten- und Bildaktualisierungsintervalle
clearInterval
(
messageInterval
);
clearInterval
(
imageInterval
);
window
.
speechSynthesis
.
cancel
();
img
.
style
.
display
=
'
block
'
;
bird
.
style
.
top
=
'
40vh
'
;
game_state
=
'
Play
'
;
message
.
innerHTML
=
''
;
score_title
.
innerHTML
=
'
Score :
'
;
score_val
.
innerHTML
=
'
0
'
;
message
.
classList
.
remove
(
'
messageStyle
'
);
startButton
.
style
.
display
=
'
none
'
;
mascot
.
style
.
display
=
'
none
'
;
difficultyContainer
.
style
.
display
=
'
none
'
;
play
();
// Starte das Spiel
}
}
)});
// Hauptspiellogik
function
play
()
{
// Funktion für die Bewegung des Vogels
function
move
()
{
if
(
game_state
!=
'
Play
'
)
return
;
// Überprüfe Kollisionen mit den Rohren und Spielende
let
pipe_sprite
=
document
.
querySelectorAll
(
'
.pipe_sprite
'
);
pipe_sprite
.
forEach
((
element
)
=>
{
let
pipe_sprite_props
=
element
.
getBoundingClientRect
();
bird_props
=
bird
.
getBoundingClientRect
();
// Kollisionserkennung
if
(
pipe_sprite_props
.
right
<=
0
)
{
element
.
remove
();
}
else
{
if
(
bird_props
.
left
<
pipe_sprite_props
.
left
+
pipe_sprite_props
.
width
&&
bird_props
.
left
+
bird_props
.
width
>
pipe_sprite_props
.
left
&&
bird_props
.
top
<
pipe_sprite_props
.
top
+
pipe_sprite_props
.
height
&&
bird_props
.
top
+
bird_props
.
height
>
pipe_sprite_props
.
top
)
{
game_state
=
'
End
'
;
document
.
querySelector
(
'
.GameOverMessage
'
).
innerHTML
=
'
Game Over
'
.
fontcolor
(
'
red
'
);
message
.
classList
.
add
(
'
GameOverMessageStyle
'
);
img
.
style
.
display
=
'
none
'
;
return
;
}
else
{
if
(
pipe_sprite_props
.
right
<
bird_props
.
left
&&
pipe_sprite_props
.
right
+
move_speed
>=
bird_props
.
left
&&
element
.
increase_score
==
'
1
'
)
{
score_val
.
innerHTML
=
+
score_val
.
innerHTML
+
1
;
}
element
.
style
.
left
=
pipe_sprite_props
.
left
-
move_speed
+
'
px
'
;
}
}
});
requestAnimationFrame
(
move
);
}
requestAnimationFrame
(
move
);
// Funktion für die Anwendung der Gravitation auf den Vogel
let
bird_dy
=
0
;
function
apply_gravity
()
{
if
(
game_state
!=
'
Play
'
)
return
;
bird_dy
+=
gravity
;
// Steuere den Vogelsprung durch Tastendruck
document
.
addEventListener
(
'
keydown
'
,
(
e
)
=>
{
if
(
e
.
key
==
'
ArrowUp
'
||
e
.
key
==
'
'
)
{
img
.
src
=
'
images/Bird-2.png
'
;
bird_dy
=
-
10.6
;
}
});
document
.
addEventListener
(
'
keyup
'
,
(
e
)
=>
{
if
(
e
.
key
==
'
ArrowUp
'
||
e
.
key
==
'
'
)
{
img
.
src
=
'
images/Bird.png
'
;
}
});
// Überprüfe, ob der Vogel den Bildschirmrand berührt und das Spiel beendet
if
(
bird_props
.
top
<=
0
||
bird_props
.
bottom
>=
background
.
bottom
)
{
game_state
=
'
End
'
;
message
.
style
.
left
=
'
28vw
'
;
window
.
location
.
reload
();
message
.
classList
.
remove
(
'
GameOverMessageStyle
'
);
return
;
}
// Aktualisiere die Vogelposition basierend auf der Gravitation
bird
.
style
.
top
=
`
${
parseFloat
(
bird
.
style
.
top
)
+
bird_dy
}
px`
;
bird_props
=
bird
.
getBoundingClientRect
();
requestAnimationFrame
(
apply_gravity
);
}
requestAnimationFrame
(
apply_gravity
);
// Funktion zum Erstellen und Bewegen der Rohre
let
pipe_separation
=
0
;
let
pipe_gap
=
35
;
let
difficulty
=
'
normal
'
;
function
create_pipe
()
{
// Überprüfe, ob das Spiel läuft
if
(
game_state
!=
'
Play
'
)
return
;
// Erzeuge neue Rohre, wenn der Abstand groß genug ist
if
(
pipe_separation
>
115
)
{
pipe_separation
=
0
;
// Zufällige Position für das obere Rohr berechnen
let
pipe_posi
=
Math
.
floor
(
Math
.
random
()
*
43
)
+
8
;
//Erzeuge das obere Rohr
let
pipe_sprite_inv
=
document
.
createElement
(
'
div
'
);
pipe_sprite_inv
.
className
=
'
pipe_sprite
'
;
pipe_sprite_inv
.
style
.
top
=
pipe_posi
-
70
+
'
vh
'
;
//Position des oberen Rohrs
pipe_sprite_inv
.
style
.
left
=
'
100vw
'
;
// Beginne außerhalb des sichtabaren Bereichs
//Füge das obere Rohr dem Dokumet hinzu
document
.
body
.
appendChild
(
pipe_sprite_inv
);
//Erzeuge das untere Rohr
let
pipe_sprite
=
document
.
createElement
(
'
div
'
);
pipe_sprite
.
className
=
'
pipe_sprite
'
;
pipe_sprite
.
style
.
top
=
pipe_posi
+
pipe_gap
+
'
vh
'
;
// Position des unteren Rohrs
pipe_sprite
.
style
.
left
=
'
100vw
'
;
// Beginne außerhalb des Sichtbaren Bereichs
pipe_sprite
.
increase_score
=
'
1
'
;
// Markiere das Rohr zur Punktzählung
// Füge das untere Rohr dem Dokument hinzu
document
.
body
.
appendChild
(
pipe_sprite
);
}
// Inkrementiere den Abstandzähler
pipe_separation
++
;
//Wiederhole die Funktion, um kontinuierlich neue Rohre zu erstellen
requestAnimationFrame
(
create_pipe
);
}
//Starte die Rohrerstellung basierend auf dem Schwierigkeitsgrad
if
(
difficulty
===
'
langsam
'
||
difficulty
===
'
normal
'
||
difficulty
===
'
schnell
'
)
{
requestAnimationFrame
(
create_pipe
);
//Passe die Bewegungsgeschwindigkeit basierend auf dem Schwierigkeitsgrad an
if
(
difficulty
===
'
langsam
'
)
{
move_speed
=
2
;
gravity
=
0.2
;
}
else
if
(
difficulty
===
'
normal
'
)
{
move_speed
=
3
;
gravity
=
0.3
;
}
else
if
(
difficulty
===
'
schnell
'
)
{
move_speed
=
5
;
gravity
=
0.6
;
}
}
}
This diff is collapsed.
Click to expand it.
style.css
0 → 100644
+
205
−
0
View file @
9b6acc0e
/* Setze den Standard-Margin und Padding auf 0, nutze das border-box Box-Modell, und wähle eine Standardschriftart */
*
{
margin
:
0
;
padding
:
0
;
box-sizing
:
border-box
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
}
/* Stil für das Eingabefeld */
.inputField
{
position
:
fixed
;
top
:
20vh
;
left
:
50%
;
transform
:
translateX
(
-50%
);
padding
:
10px
;
font-size
:
16px
;
border-radius
:
5px
;
border
:
1px
solid
#ccc
;
}
.start-container
{
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
height
:
100vh
;
/* Höhe des Containers auf die volle Höhe des Viewports setzen */
}
.start-button
{
background-color
:
#3498db
;
color
:
#fff
;
padding
:
10px
20px
;
font-size
:
16px
;
border
:
none
;
cursor
:
pointer
;
border-radius
:
5px
;
z-index
:
1000
;
margin-top
:
10px
;
}
.start-button
:hover
{
background-color
:
#2980b9
;
}
/* Stil für die obere Leiste */
.topBar
{
background-color
:
#02917b
;
/* Hintergrundfarbe */
color
:
white
;
/* Textfarbe */
padding
:
10px
;
/* Innenabstand */
display
:
flex
;
/* Flexbox-Layout verwenden */
justify-content
:
space-between
;
/* Elemente gleichmäßig verteilen */
align-items
:
center
;
/* Elemente zentrieren */
}
/* Stil für den Spieltitel */
.gameTitle
{
font-size
:
24px
;
font-weight
:
bold
;
}
/* Stil für die Menüoptionen */
.menuOptions
{
display
:
flex
;
/* Flexbox-Layout verwenden */
}
.menuItem
{
margin-left
:
10px
;
/* Abstand zwischen den Menüoptionen */
cursor
:
pointer
;
/* Zeiger-Cursor */
}
/* Stil für hover über Menüoptionen */
.menuItem
:hover
{
text-decoration
:
underline
;
/* Unterstrich bei Hover */
}
/* Stil für den Hintergrund */
.background
{
height
:
100vh
;
width
:
100vw
;
background
:
url('images/background.png')
no-repeat
center
center
fixed
;
background-size
:
cover
;
position
:
fixed
;
}
/* Stil für den Difficulty Container */
.difficultyContainer
{
position
:
fixed
;
top
:
10
;
left
:
0
;
padding
:
10px
;
background-color
:
rgba
(
255
,
255
,
255
,
0.5
);
}
/* Stil für den Vogel */
.bird
{
height
:
70px
;
width
:
100px
;
position
:
fixed
;
top
:
40vh
;
left
:
30vw
;
z-index
:
100
;
}
/* Stil für das Maskottchen */
.mascot
{
width
:
450px
;
height
:
500px
;
cursor
:
pointer
;
position
:
fixed
;
top
:
40vh
;
left
:
-5vw
;
z-index
:
100
;
background-image
:
url('Tiger-Laecheln.png')
;
/* Standard-Hintergrundbild */
background-repeat
:
no-repeat
;
background-size
:
contain
;
}
.Mund-Offen
{
background-image
:
url('Mund-Offen.png')
;
/* Hintergrundbild für offenen Mund */
}
.Mund-Geschlossen
{
background-image
:
url('Mund-Geschlossen.png')
;
/* Hintergrundbild für geschlossenen Mund */
}
.mascot-text
{
visibility
:
hidden
;
}
/* Stil für die Rohre */
.pipe_sprite
{
position
:
fixed
;
top
:
40vh
;
left
:
100vw
;
height
:
70vh
;
width
:
6vw
;
background
:
radial-gradient
(
rgb
(
96
,
98
,
2
)
50%
,
rgb
(
138
,
118
,
1
));
border
:
5px
solid
black
;
}
/* Stil für Nachrichten */
.GameOverMessage
{
position
:
absolute
;
z-index
:
10
;
color
:
black
;
top
:
30%
;
left
:
50%
;
font-size
:
4em
;
transform
:
translate
(
-50%
,
-50%
);
text-align
:
center
;
}
/* Zusätzlicher Stil für Nachrichten im Spielstil */
.GameOverMessageStyle
{
background
:
rgb
(
156
,
130
,
3
);
padding
:
30px
;
box-shadow
:
rgba
(
0
,
0
,
0
,
0.24
)
0px
3px
8px
;
border-radius
:
5%
;
}
/* Stil für den Punktestand */
.score
{
position
:
fixed
;
z-index
:
10
;
height
:
10vh
;
font-size
:
10vh
;
font-weight
:
100
;
color
:
white
;
-webkit-text-stroke-width
:
2px
;
-webkit-text-stroke-color
:
black
;
top
:
10
;
left
:
0
;
margin
:
10px
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
}
/* Stil für den Punktestand-Wert */
.score_val
{
color
:
gold
;
font-weight
:
bold
;
}
/* Media Query für kleinere Bildschirme */
@media
only
screen
and
(
max-width
:
1080px
)
{
.message
{
font-size
:
50px
;
top
:
50%
;
white-space
:
nowrap
;
}
.score
{
font-size
:
8vh
;
}
.bird
{
width
:
120px
;
height
:
90px
;
}
.pipe_sprite
{
width
:
14vw
;
}
}
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment