-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
130 lines (116 loc) · 4.15 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>GeoGuessr</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
button {
width: 100px;
height: 25px;
color: white;
background-color: red;
}
img {
padding-top: 10px;
}
#street-view {
height: 100%;
/* Google inverts the colours if you don't have any billing set up.
We can go around this by adding a counter invert filter on top of the street view */
filter: invert(1);
}
#floating-panel {
position: absolute;
top: 10px;
left: 5%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
width: 20%;
height: 30%;
}
#floating-panel {
margin-left: -100px;
}
</style>
<script>
// Set the starting score of the player to 0
let score = 0
let panorama
// Set different places where the player will be spawned
var places = [
[{ lat: 60.171001, lng: 24.939350 }, {country: 'Finland'}], // Helsinki, Finland
[{ lat: 48.858093, lng: 2.294694 }, {country: 'France'}], // Paris, France
[{ lat: 51.510020, lng: -0.134730 }, {country: 'Great Britain'}], // London, Great Britain
[{ lat: 41.8902, lng: 12.4922 }, {country: 'Italy'}], // Rome, Italy
[{ lat: 25.195302, lng: 55.272879 }, {country: 'United Arab Emirates'}], // Dubai, United Arab Emirates
[{ lat: 1.283404, lng: 103.863134 }, {country: 'Singapore'}], // Marina Bay, Singapore
[{ lat: 29.976768, lng: 31.135538 }, {country: 'Egypt'}], // Cairo, Egypt
[{ lat: 40.757876, lng: -73.985592 }, {country: 'United States'}], // New York, USA
]
let currentPlace = places[Math.floor(Math.random() * (places.length))] // Pick a random place to be spawned
let coordinates = currentPlace[0] // Get coordinates
let country = currentPlace[1].country // Get the name of the country
// Reload game environment when a round is over
let reconfigure = () => {
document.getElementById("score").innerHTML = "Your current score is: " + score
currentPlace = places[Math.floor(Math.random() * (places.length))]
coordinates = currentPlace[0]
country = currentPlace[1].country
initialize()
}
// Check if guess is correct and then execute reconfiguring function
const guess= () => {
var guess = window.prompt("Where are we? ")
if(guess === country) {
score++
alert("Correct! Current Score: " + score)
reconfigure()
} else {
score = 0
alert("Incorrect! Current Score: " + score)
reconfigure()
}
}
// Set and configure streetview
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("street-view"),
{
position: coordinates,
pov: { heading: 165, pitch: 0 },
zoom: 1,
}
)
}
</script>
</head>
<body>
<!-- The guess panel on top of the street view -->
<div id="floating-panel">
<img src="https://www.flaticon.com/svg/vstatic/svg/143/143960.svg?token=exp=1618227638~hmac=7f9a52aac37975da7d77fac34c73b8cb"
alt="icon" width="50px" height="50px">
<h1> If you know where we are, make a guess!</h1>
<h2 id="score"></h2>
<button onclick="guess()">Guess</button>
</div>
<!-- Street view -->
<div id="street-view"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnQ5wOdQoFj8_lN4qqyYU7vQn6PNByFnE&callback=initialize&libraries=&v=weekly"
async
></script>
</body>
</html>