/
ping.html
92 lines (83 loc) · 3.58 KB
/
ping.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="description" content="Free Arcade Games - Online browser play of old school arcade games. Enjoy some of the classics, such as Pacman, Space Invader, Tetris, Snake and more. Online Games and free emulator play designed and coded in Javascript, CSS and HTML.">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ping Pong | Arcade Room | Old School Games in Javascript | Classic Online Games</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;800&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<!-- Flickity Carousel -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- CSS links -->
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<style media="screen">
canvas {
visibility: hidden;
}
.player1 {
top: 0px!important;
}
.player2 {
bottom: 0px!important;
}
</style>
<div class="container">
<div class="back-btn">
<img src="images/arcademachine.png" onclick="backToGamesRoom();" alt="">
</div>
<div class="about-section">
<div class="start">
<p>This is a two player ping pong game.
<br>Player 1: Use Q and R keys to move player.
<br>Player 2: Use the left and right keys to move player.
<br>Good luck!!</p>
<br>
<br>
<p id="n-press">Press N to start a new game</p>
<p id="click-press">Press anyway on the screen to start a new game</p>
</div>
<canvas id="pingCanvas" width="600" height="500"></canvas>
<div class="keypad">
<div class="player1 row">
<div class="key" id="q">
<p id="q"style="font-weight: bold;">Q</p>
</div>
<div class="key" id="r">
<p id="r"style="font-weight: bold;">R</p>
</div>
</div>
<div class="player2 row">
<div class="key" id="left">
<i class="fas fa-chevron-left" id="left"></i>
</div>
<div class="key" id="right">
<i class="fas fa-chevron-right" id="right"></i>
</div>
</div>
</div>
<div class="playAgain">
<h1>YOU WON!</h1>
<p>Congratulations <span id="winner"></span>! You won the game.</p>
<button onclick="location.reload();">Play Again</button>
</div>
</div>
<!-- Flickity -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<!-- GSAP CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js" charset="utf-8"></script>
<!-- GSAP ScrollTo CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollToPlugin.min.js" charset="utf-8"></script>
<!-- JQUERY CDN -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Javascript File -->
<script src="js/index.js" charset="utf-8"></script>
<script src="js/ping.js" charset="utf-8"></script>
</body>
</html>