/
tetris.html
85 lines (75 loc) · 3.24 KB
/
tetris.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
<!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>Tetris | 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 {
display: none;
}
</style>
<div class="container">
<div class="back-btn">
<img src="images/arcademachine.png" onclick="backToGamesRoom();" alt="">
</div>
<div class="start">
<p>Use the left, right and down keys to move the piece. Use the Q key to rotate the piece.
<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="tetrisCanvas" width="240" height="400"></canvas>
<div class="keypad">
<div class="column">
<div class="key" id="q">
<p id="q" style="font-weight: bold;">Q</p>
</div>
<div class="key" id="down">
<i class="fas fa-chevron-down" id="down"></i>
</div>
</div>
<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>GAME OVER</h1>
<p>You lost the game.. Try again!</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/tetris.js" charset="utf-8"></script>
</body>
</html>