/
brick.html
87 lines (76 loc) · 3.19 KB
/
brick.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
<!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>Brick | 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 {
background-color: black;
display: none;
}
.keypad {
bottom: 50px;
}
</style>
<div class="container">
<div class="back-btn">
<img src="images/arcademachine.png" onclick="backToGamesRoom();" alt="">
</div>
<div class="start">
<p>Use the left and right keys to move the 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="brickCanvas" width="480" height="400"></canvas>
<div class="keypad">
<div class="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! You won the game.</p>
<button onclick="location.reload();">Play again</button>
</div>
<div class="gameOver">
<h1>GAME OVER</h1>
<p>You lost the game</p>
<button class="btn" 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/brick.js" charset="utf-8"></script>
</body>
</html>