-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathAboutPage.html
More file actions
133 lines (131 loc) · 5.82 KB
/
AboutPage.html
File metadata and controls
133 lines (131 loc) · 5.82 KB
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html>
<head>
<title> About Page </title>
<meta name="description" content="Page Description Here" /> <!-- This line specifies a description for the page, which may be used by search engines -->
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/> <!-- This line specifies the character encoding for the HTML document -->
<meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- This line specifies how the page should be scaled on different devices -->
<style type ="text/css">
Body {
color : black;
}
.wrapper {
background-color: #d98cb3;
padding: 20px;
border-color: black;
border-style: groove;
border-width: 5px;
}
</style>
<script>
function myFunction(){
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
<div class="wrapper">
<table width="100%" height="50" align="center" border="0" cellspacing="5" cellpadding="5" bgcolor="#000000">
<tr>
<td align="left">
<table width="550" border="0" align="center" cellspacing="5" cellpadding="5">
<tr>
<td width="100" align="center"><font face="Verdana, Geneva, sens-serif"><h2><a href="#about" style="color: white;">About</a></h2></font></td>
<td width="100" align="center"><font face="Verdana, Geneva, sens-serif"><h2><a href="#player" style="color: white;">Player</a></h2></font></td>
<td width="100" align="center"><font face="Verdana, Geneva, sens-serif"><h2><a href="#start" style="color: white;">Start</a></h2></font></td>
<td width="100" align="center"><font face="Verdana, Geneva, sens-serif"><h2><a href="ExitPage.html" style="color: white;">Exit</a></h2></font></td>
<td width="100" align="center"><img src="butterfly.gif" width="100%" height="70"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="wrapper">
<h2><em><strong><a id="about"></a><font face="Verdana, Geneva, sens-serif">About The Game . . .</font></strong></em></h2>
<table width="100%" height="50" border ="0" cellspacing="2" cellpadding="2" bgcolor="#d98cb3">
<tr>
<td align="left"><font face="Verdana, Geneva, sens-serif">The<em><strong>"Simple Jump Game"</strong></em> involves a character that can jump and a block that moves towards the character.⏹<br>
The goal of the game is to make the character jump over the block to avoid collision.💢<br>
The code is written in HTML, CSS, and JavaScript.📝</font>
</td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sens-serif">The game keeps track of the score, which increases as the character successfully jumps over the block.<br>
It also tracks the player’s high score and displays it on the game over screen.</font></td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sens-serif">When the user clicks the "space" button on the keyboard, it calls a jump() function that makes the character element jump by adding a class animate to it, which triggers a CSS animation defined in the stylesheet.⌨️<br>
The function also sets a timer to remove the animate class after 300 milliseconds, stopping the jump animation.🖲</font>
</td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sens-serif">The game also sets up an interval that checks for collision between the character and the block every 10 milliseconds.⏱<br>
It does this by getting the current values of the top property of the character element and the left property of the block element and checking if they meet certain conditions.🔎<br>
If a collision is detected, it stops the animation on the block element, checks if the current score is greater than the current high score and updates it if necessary, displays an alert with the final score and high score, and resets the game by setting the counter variable to 0 and restarting the animation on the block element.❌<br>
If no collision is detected, it increments a counter variable and updates a score display with its current value.✔️</font>
</td>
</tr>
<tr>
<td align="left"><font face="Verdana, Geneva, sens-serif">The index file is related to the About Page file, and the Exit Page file.🌐<br>
The relationship is created by hyperlinking appropriate words 🔑.<br>
The About Page file contains basic information about the game.📋<br>
The Exit Page file contains a goodbye message.👋</font>
</td>
</tr>
</table>
</div>
<div class="wrapper">
<h2><b><a id="player"></a><font face="Verdana, Geneva, sens-serif">Player . . .</font></b></h2>
<!-- We use JS function for converting the input text from lowercase to capital letters -->
<p>
<table width="100%" height="50" border ="0" cellspacing="0" bgcolor="#d98cb3">
<tr>
<td align="center">
<table width="100%" border ="0" cellspacing="5" >
<tr>
<td align="center"> <font face="Verdana, Geneva, sens-serif">Write down your name and press "Enter": </font></td>
</tr>
<tr>
<td align="center"><input type="text" id="fname" onchange="myFunction()"></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
</div>
<div class="wrapper">
<h2><b><a id="start"></a><font face="Verdana, Geneva, sens-serif">Let's start . . .</font></b></h2>
<p align="center">
<table width="100%" height="100" border ="0" cellspacing="5" bgcolor="#d98cb3">
<tr>
<td align="center">
<table width="100%" border ="0" cellspacing="1" >
<tr>
<td align="center">
<table width="100" border="0" cellspacing="3" cellpadding="3">
<tr>
<td align="center">
<a href="index.html"><img src="clickHere.gif" width="100%" height="100"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="percentLine.gif" width="100%" height="70"></td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<table width="100%" height="50" border ="0" cellspacing="5"bgcolor="#000000">
<tr>
<td align="center"><em><h4><font color="white">All rights reserved <br>@ 2023 JM's Web World</font></h4></em></td>
</tr>
</table>
</div>
</body>
</html>