Skip to content

Commit efc432d

Browse files
authored
initial commit
1 parent 540085b commit efc432d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

100 files changed

+780
-0
lines changed

puzzle_2_0/README.md

Lines changed: 1 addition & 0 deletions

puzzle_2_0/bootstrap.min.css

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

puzzle_2_0/bootstrap.min.js

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

puzzle_2_0/img/background.jpg

200 KB

puzzle_2_0/img/boats.jpg

34.9 KB

puzzle_2_0/img/bridge.jpg

38.6 KB

puzzle_2_0/img/cars.jpg

22.4 KB

puzzle_2_0/img/door.jpg

53.1 KB

puzzle_2_0/img/paris.jpg

19.8 KB

puzzle_2_0/img/plane.jpg

12.7 KB

puzzle_2_0/img/telephon.jpg

59.3 KB

puzzle_2_0/img/tiger.jpg

44.6 KB

puzzle_2_0/img/train.jpg

56.1 KB

puzzle_2_0/img/viking.jpg

24.5 KB

puzzle_2_0/index.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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>Dojo Puzzle</title>
13+
</head>
14+
<body>
15+
<br>
16+
<h1 class="text-center">Waterford Dojo Puzzle</h1>
17+
<br>
18+
<div class="container">
19+
20+
<div class="row">
21+
22+
<div class="col-xs-12 col-lg-6">
23+
24+
<div id="the-board">
25+
<div id="piece_1_1" class="square puzzle-piece"></div>
26+
<div id="piece_2_1" class="square puzzle-piece"></div>
27+
<div id="piece_3_1" class="square puzzle-piece"></div>
28+
<div id="piece_1_2" class="square puzzle-piece"></div>
29+
<div id="piece_2_2" class="square puzzle-piece"></div>
30+
<div id="piece_3_2" class="square puzzle-piece"></div>
31+
<div id="piece_1_3" class="square puzzle-piece"></div>
32+
<div id="piece_2_3" class="square puzzle-piece"></div>
33+
<div id="piece_3_3" class="square fixed-piece"></div>
34+
</div>
35+
36+
</div>
37+
<div class="col-xs-12 col-lg-6" style="border: #EEEEEE thin solid">
38+
<div id="actions" class="text-left">
39+
<div id="win" class="alert alert-success">Congratulations! You won in <span id="total_moves" ></span> moves</div>
40+
<div>
41+
<button id="play" class="btn btn-primary action_buttons">Play</button> <span class="game-text">This button starts a new Game.</span>
42+
</div>
43+
<br/>
44+
<div>
45+
<button id="resetGame" class="btn btn-primary action_buttons">Reset</button> <span class="game-text">This button resets Game.</span>
46+
</div>
47+
<br/>
48+
<div>
49+
<div class="dropdown">
50+
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown">
51+
Difficulty:
52+
<span id="difficultyVal" class="game-text">Noob</span>
53+
</button>
54+
<div class="dropdown-menu">
55+
<a class="dropdown-item" data-val="15" href="#">Noob</a>
56+
<a class="dropdown-item" data-val="30" href="#">Semi Noob</a>
57+
<a class="dropdown-item" data-val="40" href="#">Pro</a>
58+
<a class="dropdown-item" data-val="1000" href="#">Master</a>
59+
</div>
60+
</div>
61+
</div>
62+
<br/>
63+
<div>
64+
<span id="counter" class="game-text">0</span> <span class="game-text">Moves.</span>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
</div>
71+
72+
<!-- Optional JavaScript -->
73+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
74+
<script src="jquery-3.2.1.slim.min.js" ></script>
75+
<script src="popper.min.js"></script>
76+
<script src="bootstrap.min.js"></script>
77+
<script src="script.js"></script>
78+
</body>
79+
</html>

puzzle_2_0/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.

puzzle_2_0/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.

puzzle_2_0/script.js

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
$( document ).ready( function () {
2+
console.log( "ready!" );
3+
4+
var moves = 0;
5+
var iters = 15;
6+
7+
// store the positions of the pieces in an array
8+
var pieces = {
9+
0: {id: "piece_1_1", initial_x: 0, initial_y: 0, x: 0, y: 0 },
10+
1: {id: "piece_2_1", initial_x: 1, initial_y: 0, x: 1, y: 0 },
11+
2: {id: "piece_3_1", initial_x: 2, initial_y: 0, x: 2, y: 0 },
12+
3: {id: "piece_1_2", initial_x: 0, initial_y: 1, x: 0, y: 1 },
13+
4: {id: "piece_2_2", initial_x: 1, initial_y: 1, x: 1, y: 1 },
14+
5: {id: "piece_3_2", initial_x: 2, initial_y: 1, x: 2, y: 1 },
15+
6: {id: "piece_1_3", initial_x: 0, initial_y: 2, x: 0, y: 2 },
16+
7: {id: "piece_2_3", initial_x: 1, initial_y: 2, x: 1, y: 2 },
17+
}
18+
19+
// store the position of the empty piece
20+
var empty_piece = {x: 10, y: 10};
21+
22+
// this is a function that places a piece in a chosen position
23+
function place_piece( index, x, y ) {
24+
pieces[index].x = x;
25+
pieces[index].y = y;
26+
$('#' + pieces[index].id).css('left', (x * 33.5) + '%');
27+
$('#' + pieces[index].id).css('top', (y * 33.5) + '%');
28+
}
29+
30+
// try to move a piece if possible
31+
function move_piece( index ) {
32+
33+
var current_x = pieces[index].x;
34+
var current_y = pieces[index].y;
35+
// move this piece to the empty spot if possible
36+
if (Math.abs( current_x - empty_piece.x) + Math.abs( current_y - empty_piece.y) == 1 ){
37+
place_piece( index, empty_piece.x, empty_piece.y );
38+
empty_piece.x = current_x;
39+
empty_piece.y = current_y;
40+
return true;
41+
} else {
42+
return false;
43+
}
44+
}
45+
46+
// what to do when a piece is clicked
47+
$('.puzzle-piece').click(function () {
48+
// find the corresponding piece
49+
for( var k = 0 ; k < 8 ; k++ ) {
50+
if ( this.id == pieces[k].id ){
51+
if (move_piece( k )) {
52+
moves++;
53+
$('#counter').html( moves );
54+
detect_win();
55+
}
56+
}
57+
}
58+
});
59+
60+
// mix the pieces when playing
61+
$('#play').click(function () {
62+
63+
// console.log( $('#difficulty').text());
64+
// console.log( $('#difficulty').val( $(this).prop('data-val') ));
65+
66+
// reset the pieces
67+
restGame();
68+
empty_piece.x = 2;
69+
empty_piece.y = 2;
70+
$('.fixed-piece').css('opacity', 0.2);
71+
72+
for ( var k = 0 ; k < iters ; k++ ) {
73+
var random_index = Math.floor(Math.random()*(7.99));
74+
move_piece( random_index );
75+
}
76+
$('#play').prop('disabled', true);
77+
$('#win').hide();
78+
$('#counter').html( moves );
79+
});
80+
81+
//detect if the game is won
82+
function detect_win() {
83+
var win = true;
84+
for( k = 0 ; k < 8 ; k++ ) {
85+
if ( (pieces[k].initial_x != pieces[k].x ) || (pieces[k].initial_y != pieces[k].y )) {
86+
win = false;
87+
}
88+
}
89+
if (win) {
90+
$('#total_moves').html( moves );
91+
$('.fixed-piece').css('opacity', 1);
92+
$('#win').show();
93+
$('#play').prop( 'disabled', false );
94+
empty_piece.x = 10;
95+
empty_piece.y = 10;
96+
}
97+
}
98+
99+
function restGame() {
100+
for ( var i in pieces ){
101+
var piece = pieces[i];
102+
place_piece( i, piece.initial_x, piece.initial_y );
103+
}
104+
moves = 0;
105+
empty_piece.x = 10;
106+
empty_piece.y = 10;
107+
$('.fixed-piece').css('opacity', 1);
108+
109+
}
110+
111+
$('#resetGame' ).click(function () {
112+
restGame();
113+
$('#counter').html( moves );
114+
$('#play').prop('disabled', false );
115+
});
116+
117+
118+
$('.dropdown-item').click(function (e) {
119+
iters = $(this).attr( 'data-val' );
120+
$('#difficultyVal').html($(this).html());
121+
e.preventDefault();
122+
})
123+
124+
});

puzzle_2_0/style.css

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
body {
2+
background: url(img/background.jpg) no-repeat center right fixed;
3+
background-size: cover;
4+
}
5+
6+
#the-board {
7+
width: 450px;
8+
height: 450px;
9+
background: rgba(255, 255, 255, 0.8);
10+
border: solid rgba(255, 255, 255, 0.9) 3px;
11+
position: relative;
12+
}
13+
14+
.square {
15+
background: url(img/tiger.jpg);
16+
width: 33%;
17+
height: 33%;
18+
position: absolute;
19+
z-index:100;
20+
}
21+
22+
.fixed-piece {
23+
opacity: 1;
24+
z-index:1;
25+
}
26+
27+
#piece_1_1 {
28+
top: 0;
29+
left: 0;
30+
background-position: top left;
31+
}
32+
33+
#piece_2_1 {
34+
top: 0;
35+
left: 33.5%;
36+
background-position: top center;
37+
}
38+
39+
#piece_3_1 {
40+
top: 0;
41+
left: 67%;
42+
background-position: top right;
43+
}
44+
45+
#piece_1_2 {
46+
top: 33.5%;
47+
left: 0;
48+
background-position: center left;
49+
}
50+
51+
#piece_2_2 {
52+
top: 33.5%;
53+
left: 33.5%;
54+
background-position: center center;
55+
}
56+
57+
#piece_3_2 {
58+
top: 33.5%;
59+
left: 67%;
60+
background-position: center right;
61+
}
62+
63+
#piece_1_3 {
64+
top: 67%;
65+
left: 0;
66+
background-position: bottom left;
67+
}
68+
69+
#piece_2_3 {
70+
top: 67%;
71+
left: 33.5%;
72+
background-position: bottom center;
73+
}
74+
75+
#piece_3_3 {
76+
top: 67%;
77+
left: 67%;
78+
background-position: bottom right;
79+
}
80+
81+
#actions {
82+
padding: 1em;
83+
width: 450px;
84+
}
85+
86+
#win {
87+
display: none;
88+
}
89+
90+
.action_buttons {
91+
width: 100px;
92+
}
93+
94+
.game-text{
95+
color: white;
96+
font-size: 16px;
97+
}
98+
99+
.row .col-xs-12{
100+
margin-bottom: 1em;
101+
}

tutorial/example_/bootstrap.min.css

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

tutorial/example_/bootstrap.min.js

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

tutorial/example_/img/background.jpg

200 KB

tutorial/example_/img/boats.jpg

34.9 KB

tutorial/example_/img/bridge.jpg

38.6 KB

tutorial/example_/img/cars.jpg

22.4 KB

tutorial/example_/img/door.jpg

53.1 KB

tutorial/example_/img/paris.jpg

19.8 KB

tutorial/example_/img/plane.jpg

12.7 KB

tutorial/example_/img/telephon.jpg

59.3 KB

tutorial/example_/img/tiger.jpg

44.6 KB

tutorial/example_/img/train.jpg

56.1 KB

tutorial/example_/img/viking.jpg

24.5 KB

tutorial/example_/index.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 1</title>
13+
</head>
14+
<body>
15+
<br>
16+
<h1 class="text-center">Example 1</h1>
17+
<br>
18+
<div class="container">
19+
20+
<div class="row">
21+
<div class="col-12 ">
22+
23+
24+
</div>
25+
</div>
26+
27+
28+
</div>
29+
30+
<!-- Optional JavaScript -->
31+
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
32+
<script src="jquery-3.2.1.slim.min.js" ></script>
33+
<script src="popper.min.js"></script>
34+
<script src="bootstrap.min.js"></script>
35+
<script src="script.js"></script>
36+
</body>
37+
</html>

tutorial/example_/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_/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_/script.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
$( document ).ready( function () {
2+
3+
4+
5+
});

tutorial/example_1/bootstrap.min.css

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

tutorial/example_1/bootstrap.min.js

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

tutorial/example_1/img/background.jpg

200 KB

tutorial/example_1/img/boats.jpg

34.9 KB

tutorial/example_1/img/bridge.jpg

38.6 KB

tutorial/example_1/img/cars.jpg

22.4 KB

tutorial/example_1/img/door.jpg

53.1 KB

tutorial/example_1/img/paris.jpg

19.8 KB

tutorial/example_1/img/plane.jpg

12.7 KB
91 KB

tutorial/example_1/img/telephon.jpg

59.3 KB

tutorial/example_1/img/tiger.jpg

44.6 KB

tutorial/example_1/img/train.jpg

56.1 KB

tutorial/example_1/img/viking.jpg

24.5 KB

0 commit comments

Comments
 (0)