forked from jeuelc/mworld-flat
-
Notifications
You must be signed in to change notification settings - Fork 0
/
game-bh1.html
116 lines (110 loc) · 5.7 KB
/
game-bh1.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
<!-- i-C-a -->
<div data-role="page" id="game-bh1">
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<div data-role="content">
<div id="wrapper">
<div id="titleb-holder"><h1>Black Hole Creator</h1></div>
<div id="arrow1" style="width:82px;height:87px;position:relative;overflow:hidden;top:121px;left:347px;"> </div>
<div id="arrow2" style="width:82px;height:87px;position:relative;overflow:hidden;top:82px;left:538px;"> </div>
<div id="arrow3" style="width:82px;height:87px;position:relative;overflow:hidden;top:106px;left:531px;"> </div>
<div style="width:151px;height:63px;position:absolute;top:40px;left:50px;z-index:999"><img src="css/images/5-8/Space/Black_Holes/game/backbtn.png" id="backbtn"></div>
<div style="width:151px;height:63px;position:absolute;top:110px;left:50px;z-index:999"><img src="css/images/5-8/Space/Black_Holes/game/resetbtn.png" id="resetbtn"></div>
<div style="width:151px;height:63px;position:absolute;top:40px;left:800px;z-index:999"><img src="css/images/5-8/Space/Black_Holes/game/submitsoln.png" id="submitsoln"></div>
<div id="bqlink" style="width:102px;height:112px;position:absolute;top:620px;left:700px;z-index:998;">
<div id="lock" style="position:relative;top:10px;left:7px;"><img src="css/images/5-8/Space/Black_Holes/game/lock.png"></div>
</div>
<div id="zoomwrapper">
<div id="jpiece1" class="bhgame1Piece" style="left:15px;top:585px;">
<img src="css/images/5-8/Space/Black_Holes/game/supernova.png" alt="" width="173" height="186" />
</div>
<div id="jpiece2"class="bhgame1Piece" style="left:139px;top:585px;">
<img src="css/images/5-8/Space/Black_Holes/game/neutronstar.png" alt="" width="173" height="186" />
</div>
<div id="jpiece3" class="bhgame1Piece" style="left:259px;top:585px;">
<img src="css/images/5-8/Space/Black_Holes/game/blackhole.png" alt="" width="173" height="186" />
</div>
<div id="jpiece4" class="bhgame1Piece" style="left:389px;top:585px;">
<img src="css/images/5-8/Space/Black_Holes/game/supergiant.png" alt="" width="173" height="186" />
</div>
</div><!--/zoomwrapper-->
</div>
<div class="v-spacer"></div>
<div id="bonusq" style="display:none;">
<div id="titleb-holder"><h1>How else can a black hole be formed?</h1></div>
<span style="color:#FFFFFF;margin:auto;font-size:10px;">Clue: Have a look at the screen titled 'From Supergiant to Black Hole'</span>
<div style="width:350px;margin:20px auto 0;"><input type="text" id="bqanswer" style="text-align:center;"></div>
<div style="width:250px;margin:0 auto;">
<a href="#" id="submitbqans" data-role="button" style="width:100px;float:left;">Submit</a>
<a href="#" id="cancelbqans" data-role="button" style="width:100px;float:right;">Cancel</a>
</div>
</div><!--/bonusq-->
</div> <!-- end content -->
<script>
$(function() {
animatearrows = setTimeout(moveArrows, 500);
});
$('#bqlink').on('tap', function() {
if($('#lock').is(":visible")) {
alert("You need to complete the process of creating a black hole before you can answer the bonus question.");
} else {
$('#bonusq').fadeIn();
$('#bonusq').css('z-index', '999');
}
});
$('#backbtn').on('tap', function() {
$.mobile.changePage("sub-space-bh-bhgo.html", {transition:"flip"});
bgsoundbh.play();bhcreator.pause();
});
$('#resetbtn').on('tap', function() {
$('#jpiece4').css('top', '585px');
$('#jpiece4').css('left', '389px');
$('#jpiece3').css('top', '585px');
$('#jpiece3').css('left', '259px');
$('#jpiece2').css('top', '585px');
$('#jpiece2').css('left', '139px');
$('#jpiece1').css('top', '585px');
$('#jpiece1').css('left', '15px');
});
$('#submitsoln').on('tap', function() {
if(($('#jpiece4').css('top') == "77px" && $('#jpiece4').css('left') == "240px")
&& ($('#jpiece1').css('top') == "272px" && $('#jpiece1').css('left') == "378px")
&& ($('#jpiece2').css('top') == "119px" && $('#jpiece2').css('left') == "610px")
&& ($('#jpiece3').css('top') == "391px" && $('#jpiece3').css('left') == "654px")
) {
alert("Congratulations!\nYou have unlocked the bonus question!");
//$('#lock').animate({ display: "none" }, 1000 );
$('#lock').fadeOut(1000);
} else {
alert("Sorry, the process is wrong.");
}
});
$('#cancelbqans').on('tap', function() {
$('#bonusq').fadeOut();
//$('#bonusq').css('z-index', '-1');
});
$('#submitbqans').on('tap', function() {
var answer = $('#bqanswer').val();
if(answer.toLowerCase() == "by the collision of two neutron stars") {
alert("Congratulations! You are correct!");
}
});
function moveArrows() {
$('#arrow1').css('background-position', '-82px center');
$('#arrow2').css('background-position', '-82px center');
$('#arrow3').css('background-position', '-82px center');
setTimeout(function() {
$('#arrow1').css('background-position', '-164px center');
$('#arrow2').css('background-position', '-164px center');
$('#arrow3').css('background-position', '-164px center');
}, 400);
setTimeout(function() {
$('#arrow1').css('background-position', '0px center');
$('#arrow2').css('background-position', '0px center');
$('#arrow3').css('background-position', '0px center');
}, 800);
animatearrows = setTimeout(moveArrows, 1200);
}
</script>
<script src="js/gamebh1Logic.js"></script>
</div>