-
Notifications
You must be signed in to change notification settings - Fork 0
/
memory-game.html
83 lines (72 loc) · 3.47 KB
/
memory-game.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="pt">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<title>Jogo da Memória</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>Jogo da Memória</h1>
<div class="rules">
<p>Clique em "Novo Jogo" para criar o tabuleiro de jogo</p>
<p>Clique em "Iniciar Jogo" para dar início ao jogo e ao cronómetro </p>
</div>
</header>
<div id="game-area">
<button id="new-game" class="btn">Novo Jogo</button>
<div id="game-messages"></div>
<div id="game-board"></div>
<button id="start-game" class="btn btn-start">Iniciar Jogo</button>
<p id="stopwatch"><i class="fas fa-stopwatch"></i><span id="timer">0 segundos</span></p>
<a href="#" id="twitter" class="share-twitter"><i class="fab fa-twitter"></i>Tweet</a>
</div>
<footer>
<span>© Copyright 2018 - Rui Silva</span>
<span><a href="https://www.linkedin.com/in/rui-m-silva/" title="LinkedIn"><i class="fab fa-linkedin"></i></a></span>
</footer>
</div>
<script type="text/javascript" src="memory-game.js"></script>
<script type="text/javascript">
function getJsonP() {
let link = document.getElementById('new-game');
link.style.display = 'none';
let script = document.createElement('script');
script.id = 'jsonp-id';
script.src = 'https://services.sapo.pt/Codebits/listbadges?callback=setGame';
document.body.appendChild(script);
}
function setGame(data) {
let badge;
let p;
let btn = document.getElementById('start-game');
let script = document.getElementById('jsonp-id');
let gameEngine = new MemoryGame();
let gameBadges = gameEngine.shuffleBadges(gameEngine.chooseBadges(gameEngine.shuffleBadges(data)));
script.parentElement.removeChild(script);
window.boardDiv = document.getElementById('game-board');
gameEngine.gameDataArray = gameBadges;
for (let i = 0; i < gameBadges.length; i++) {
badge = document.createElement('img');
badge.src = gameEngine.defaultImg;
badge.id = 'badge-' + i;
badge.classList.add('badge');
badge.addEventListener('click', gameEngine.changeSource.bind(gameEngine, badge.id), false);
window.boardDiv.appendChild(badge);
if ((i + 1) % 6 === 0) {
p = document.createElement('p');
window.boardDiv.appendChild(p);
}
}
btn.addEventListener('click', gameEngine.startGame.bind(gameEngine), false);
btn.style.display = 'block';
}
(function newGame() {
let new_game = document.getElementById('new-game');
new_game.addEventListener('click', getJsonP, false);
})();
</script>
</body>
</html>