Skip to content

Commit 687f6d7

Browse files
audaxlandaudaxland
authored
re-commit
1 parent 151d6ee commit 687f6d7

File tree

13 files changed

+142
-0
lines changed

13 files changed

+142
-0
lines changed

‎tutorial/example_4/img/paris.jpg

19.8 KB
Loading

‎tutorial/example_4/img/plane.jpg

12.7 KB
Loading

‎tutorial/example_4/img/scressnshot2.jpg

98.8 KB
Loading

‎tutorial/example_4/img/scressnshot4.jpg

122 KB
Loading

‎tutorial/example_4/img/telephon.jpg

59.3 KB
Loading

‎tutorial/example_4/img/tiger.jpg

44.6 KB
Loading

‎tutorial/example_4/img/train.jpg

56.1 KB
Loading

‎tutorial/example_4/img/viking.jpg

24.5 KB
Loading

‎tutorial/example_4/index.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
<!-- Bootstrap CSS -->
9+
<link rel="stylesheet" href="bootstrap.min.css" >
10+
<link rel="stylesheet" href="style.css" >
11+
12+
<title>Example 4</title>
13+
</head>
14+
<body>
15+
<br>
16+
<h1 class="text-center">Example 4</h1>
17+
<br>
18+
<div class="container">
19+
20+
<div class="row">
21+
<div class="col-12 ">
22+
<p>Here we want to create multiple levels with different images and increasing difficulty</p>
23+
<p>Look at the index.html and the script.js files to find out how to create
24+
and use arrays of objects
25+
<p>Then add a "Next Level" button to the puzzle that increases the level.
26+
This button must only be clickable when one level has been completed
27+
and it must reactivate the play button when clicked.
28+
</p>
29+
<p>Finally remove the difficulty button, and the buttons "Button 1", "Button 2", "Button 3" and "Next"
30+
that where added with the previous examples
31+
</p>
32+
</div>
33+
</div>
34+
35+
<div class="row">
36+
<div class="col-12 ">
37+
<div>
38+
<h2 id="level-title">Level ?</h2>
39+
<ul>
40+
<li id="level-image"></li>
41+
<li id="level-difficulty"></li>
42+
<li id="level-moves"></li>
43+
</ul>
44+
</div>
45+
46+
<p>
47+
<button id="play" class="btn btn-primary">Play</button>
48+
<button id="next-level" class="btn btn-primary">Next Level</button>
49+
<button id="move" class="btn btn-primary">Make a move</button>
50+
</p>
51+
</div>
52+
</div>
53+
54+
<div class="row">
55+
<div class="col-12 ">
56+
<p>The result should look like the following</p>
57+
<p><img src="img/scressnshot4.jpg" /></p>
58+
</div>
59+
</div>
60+
61+
62+
</div>
63+
64+
<!-- Optional JavaScript -->
65+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
66+
<script src="jquery-3.2.1.slim.min.js" ></script>
67+
<script src="popper.min.js"></script>
68+
<script src="bootstrap.min.js"></script>
69+
<script src="script.js"></script>
70+
</body>
71+
</html>

‎tutorial/example_4/jquery-3.2.1.slim.min.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tutorial/example_4/popper.min.js

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tutorial/example_4/script.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
$( document ).ready( function () {
2+
3+
var levels = {
4+
0: {image: "tiger.jpg", difficulty: 10, moves: 0},
5+
1: {image: "bridge.jpg", difficulty: 30, moves: 0},
6+
2: {image: "telephon.jpg", difficulty: 80, moves: 0},
7+
3: {image: "viking.jpg", difficulty: 200, moves: 0},
8+
4: {image: "cars.jpg", difficulty: 500, moves: 0},
9+
5: {image: "paris.jpg", difficulty: 1000, moves: 0},
10+
}
11+
12+
var currentLevel = 0;
13+
14+
var displayLevel = function (level) {
15+
$('#level-title').html('Level ' + level);
16+
$('#level-image').html('Level image: ' + levels[level].image);
17+
$('#level-difficulty').html('Level difficulty: ' + levels[level].difficulty);
18+
$('#level-moves').html('Level moves: ' + levels[level].moves);
19+
}
20+
21+
$('#next-level').click(function () {
22+
currentLevel++;
23+
if (currentLevel > 5) currentLevel = 0;
24+
displayLevel(currentLevel);
25+
$('#play').prop('disabled', false);
26+
$('#next-level').prop('disabled', true);
27+
});
28+
29+
$('#play').click(function () {
30+
$('#play').prop('disabled', true);
31+
$('#next-level').prop('disabled', false);
32+
});
33+
34+
$('#move').click(function () {
35+
levels[currentLevel].moves++;
36+
displayLevel(currentLevel);
37+
38+
});
39+
40+
displayLevel(currentLevel);
41+
42+
$('#play').prop('disabled', false);
43+
$('#next-level').prop('disabled', true);
44+
45+
});

‎tutorial/example_4/style.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
div {
2+
margin:20px;
3+
}
4+
5+
.large-div {
6+
height: 450px;
7+
width: 450px;
8+
}
9+
10+
.small-div {
11+
height: 146px;
12+
width: 146px;
13+
}
14+
15+
.test-div {
16+
border: solid 1px silver;
17+
}

0 commit comments

Comments
 (0)