-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
97 lines (97 loc) · 4.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="media/stylesheet.css">
<title>JS Pacman</title>
</head>
<body>
<div id="wrapper">
<div id="lives" class="lives_table text_table">
LIVES 
</div>
<div class="instructions-background instructions"></div>
<div class="instructions-text instructions">
WELCOME TO OUR...<br><br>
<img src="./media/pacmanlogo.png" width="500px"><br>
You can change Pac-Man's direction using the arrows Up, Down, Left and Right.<br><br>
You have 5 lives, each of them with 99 seconds.<br><br>
If you eat all the dots and flashing pills you win the game.<br><br>
If you want to pause the game, press "P".<br><br>
If you are not familiar with Pac-Man and want to read more instructions, press "I".<br><br>
Press "Enter" to start the game.<br><br>
Good luck!
</div>
<div id="extra-instrunctions" class="instructions-text instructions hide">
<div class="flex-container">
<div class="flex-child">You are Pac-Man:</div>
<div class="flex-child instructions-characters"><div class="pacman-instructions instructions-characters"></div></div>
<div class="flex-child">and you are hungry!</div>
</div>
You can change your direction pressing arrow up, down, left and right.<br><br>
<div class="flex-container">
<div class="flex-child">This is a dot:</div>
<div class="flex-child instructions-characters"><div class="dot-instructions instructions-characters"></div></div>
<div class="flex-child">This is a flashing pill:</div>
<div class="flex-child instructions-characters"><div class="pill-instructions instructions-characters"></div></div>
</div>
to win the game, eat them all!<br>
You have 5 lives and 99 seconds in each of them.
If you run out of time, you die.<br><br>
<div class="flex-container">
<div class="flex-child">that's blinky:</div>
<div class="flex-child instructions-characters"><div class="ghost-instructions blinky instructions-characters"></div></div>
<div class="flex-child">pinky:</div>
<div class="flex-child instructions-characters"><div class="ghost-instructions pinky instructions-characters"></div></div>
<div class="flex-child">inky:</div>
<div class="flex-child instructions-characters"><div class="ghost-instructions inky instructions-characters"></div></div>
<div class="flex-child">and clyde:</div>
<div class="flex-child instructions-characters"><div class="ghost-instructions clyde instructions-characters"></div></div>
</div>
If they catch you, you'll loose a life!
<div class="flex-container">
<div class="flex-child">They'll be scared for 10 seconds</div>
 (<div class="flex-child instructions-characters">
<div class="ghost-instructions scared instructions-characters"></div>
</div>
<div class="flex-child instructions-characters">
<div class="ghost-instructions scared instructions-characters"></div>
</div>
<div class="flex-child instructions-characters">
<div class="ghost-instructions scared instructions-characters"></div>
</div>
<div class="flex-child instructions-characters">
<div class="ghost-instructions scared instructions-characters"></div>
</div>)
</div>
when you eat a flashing pill. If they are scared,
you can eat them and get extra points.
Be careful: they'll reborn and come after you!<br><br>
In the center of the maze, there are two tunnels:
one on the left and another on the right. If you go through one
of them, you'll be transported to the other.<br><br>
You can pause or unpause the game pressing "p".<br><br>
The game can be restarted by pressing "r".<br><br>
To show or hide the instructions, press "i".<br><br>
Press "enter" to start the game!
</div>
<div id="pause" class="game-status hide">GAME PAUSED! PRESS "P" TO RESUME OR "R" TO RESTART</div>
<div id="game_win" class="game-status hide"></div>
<div id="game"></div>
<div id="score_table" class="text_table">
SCORE 
<div id="score">0</div>
</div>
<div id="time_table" class="text_table">
TIME <div id="time">99</div>
<div class="font_bug"></div>
</div>
<div id="level_table" class="text_table level">LEVEL
<span id="level">1</span>
</div>
</div>
<script type="module" src="./index.js"></script>
</body>
</html>