-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
116 lines (99 loc) · 4.66 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping pong</title>
<link rel="icon" href="images/Logo.jpg" type="image/icon type">
</head>
<body>
<div class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/Netraj Logo.png" width="150px">
</div>
<nav>
<ul id="MenuItems">
<li><a href="#play">Play</a></li>
<li><a href="#howtoplay">How to play</a></li>
<li><a href="#otherGames">Other games</a></li>
<li><a href="#footer">About me</a></li>
<li><a href="#footer">Follow me on</a></li>
</ul>
</nav>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
</div>
<div class="row">
<div class="col-2">
<h1>Ping <br>Pong</h1>
<p>This is a Ping Pong game. <br>Its basically a single player game where you have to play versus computer.</p>
</div>
<div class="col-2">
<img src="images/PingPong.jpg">
</div>
</div>
</div>
</div>
<div class="game" id="play">
<div class="container">
<h1>Ping Pong Game</h1>
<br>
<div id="PlayPause">
<button onclick="handlePlayPause('play')">Play</button>
<button onclick="handleReset()">Reset</button>
</div>
<br>
<canvas id="pingPong" width="600px" height="400px"></canvas>
</div>
</div>
<div class="game" id="howtoplay">
<h2>How to play</h2>
<br>
<p>This is a ping pong game and it can be played by only one player at a time.
The player has to play versus the computer. There are two paddles on right and left sides which help in playing the game. <br>
The left paddle is yours and the right one is of the computer.
Press the play button to play the game. Once pressed, the ball will start moving towards the computer's paddle at first. you can control your paddle by moving your mouse in the gaming area. <br> In case you felt like pausing the game you can do it by pressing the pause button above. There is also a reset button, which will reset your and the computer's score. <br>
If you miss hitting the ball computer's score will increase and the ball's position will again reset to the original. If the computer miss the ball, your score will increase
and the ball then will come to you first, after resetting its position.
</p>
</div>
<div class="game">
<div class="otherGames" id="otherGames">
<h2>Other Games</h2>
<div class="row">
<div class="col-2">
<h3> <a href="https://netraj-patil.github.io/Snake/">Snake game</a></h3>
</div> <div class="col-2">
<h3> <a href="https://netraj-patil.github.io/Tic_tac_toe.github.io/">Tic tac toe game</a></h3>
</div>
</div>
</div>
</div>
<!---------footer------------>
<div class="footer" id="footer">
<div class="container">
<div class="row">
<div class="col-2">
<h3>Netraj Patil</h3>
<br>
<p>Hi! This is Netraj Patil. I am passionate about understanding the basics to advanced in programming. I considers myself a ‘forever student,’ eager to do both to build on his programming skills and to stay in tune with the latest digital marketing strategies through continued coursework.
</p>
</div>
<div class="col-2">
<h3>If you liked my work please follow me</h3>
<br>
<ul>
<li> <a href="https://www.facebook.com/profile.php?id=100016375352502">Facebook</a></li>
<li> <a href="https://www.instagram.com/netra_jpatil/?hl=en">Instagram</a></li>
</ul>
</div>
</div>
<br>
<hr>
</div>
</div>
<script src="app.js"></script>
</body>
</html>