-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
83 lines (76 loc) · 4.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>DVD Screensaver Mini-game</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<p id="gameMsg"></p>
<p id="score">Total Moves: <i></i></p>
<p id="level">Level: <i></i></p>
<p id="howToButton" onclick="document.querySelector('#howTo').style.opacity = '100%'; document.querySelector('#howTo').style.zIndex = '99999'; document.querySelector('#howToButton').style.opacity = '0'">Tutorial</p>
<span id="howTo">
<p id="closeButton" onclick="document.querySelector('#howTo').style.opacity = '0'; document.querySelector('#howTo').style.zIndex = '0'; document.querySelector('#howToButton').style.opacity = '100%'">X</p>
<h1 style="margin-top: auto;">How To Play?</h1>
<img width="200px" src="keys.png">
<p style="margin-bottom: auto;">
Use your arrows keys or WASD keys to move the DVD logo into a corner.
You can make one move every second, so choose your move wisely.
You will need precision and good timing to do it in as few moves as possible.
Each time the logo hits a corner you advance a level. The more levels you complete the faster the logo moves,
and the harder it becomes to control, but the easier it becomes to score. What will your highscore be?
Fun challenge: Can you hit level 10 in under 100 moves?
</p>
</span>
<button id="start">Start Game</button>
<div id="overlay" class="blur">
<canvas id="gameCanvas">
<script src="app.js"></script>
<h1>Your browser is out of date.</h1>
<p><a href="https://browser-update.org/update-browser.html?1">Update</a> your browser to view this site.</p>
</canvas>
</div>
<script>
function resize() {
let canvas = document.getElementById('gameCanvas');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
}
document.body.querySelector("#start").addEventListener('click', function(){
start = true;
document.querySelector("#start").style.display = "none";
document.querySelector("#level").style.display = "block";
document.querySelector("#score").style.display = "block";
document.querySelector("#overlay").classList.remove("blur");
});
window.addEventListener('resize', resize);
resize();
window.addEventListener('load', function(){
if (document.body.clientWidth >= img.width * 3 && document.body.clientHeight >= img.height * 3)
document.querySelector("#start").style.display = "block";
});
</script>
</body>
</html>