-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (147 loc) · 4.18 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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<head>
<link rel="stylesheet" href="styles/objects.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/menu.css">
</head>
<body>
<div id="menu-container">
</div>
<div id="game-container">
<p id="debug"></p>
<h3 id="score-tracker">Score: 0</h3>
<div class="timer"></div>
<div id="token-container"></div>
<div id="obstacle-container"></div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<!-- the script the moves things around -->
<script src="js/animations.js"></script>
<!-- the script that does certain things like start the timer, display the next level, etc. -->
<script src="js/events.js"></script>
<!-- related to menu functions -->
<script src="js/menu.js"></script>
<script>
//declare time related variables
var level={
time:12*1000,
timeDelta:500,
score:0
}
var obstacle={
size:50,
sizeDelta:2,
speed:5*1000,
speedDelta:250,
amount:7
};
var token={
size:50,
sizeDelta:1,
amount:5
}
//declare boundries of the x and the y
var X_BOUND=700;
var Y_BOUND=500;
//do all the steps necessary for making a new level
function newLevel(){
changeBackground(1000);
//resets the timer, lessens the time for each level, the restarts it.
resetTimer();
if(level.time > 4000)
level.time-=level.timeDelta;
startTimer(level.time, function(){lose("Time's up!")});
//Reshows hidden tokens, places them in random locations again, and shrinks the token size if it is greater than 35 pixels
$(".token").show();
place_all(token.amount, "token", X_BOUND, Y_BOUND);
if(token.size > 30){
token.size-=token.sizeDelta;
}
transform($(".token"), token.size, token.size);
//Stops all the obstacles in their tracks, increases the speed of the obstacles, and starts all of the obstacles again.
stop_all(obstacle.amount, "obstacle");
if(obstacle.speed > 1500){
obstacle.speed-=obstacle.speedDelta;
}
shift_all(obstacle.amount, "obstacle", X_BOUND, Y_BOUND, obstacle.speed);
}
//do all the steps necessary to lose
function lose(lossMessage){
$("#score-tracker").html('<h3 id="score-tracker">Score: 0</h3>');
//stop all the obstacles
$(".obstacle").stop();
//show the menu panel
$("#menu-container").show();
//stop and reset the timer
$(".timer").stop();
$(".timer").css({height:"10px"});
//show the menu panel associated with losing
showLoss(lossMessage, level.score);
//remove the obstacles and tokens from the DOM
$(".obstacle").remove();
$(".token").remove();
//reset all the stats about the game
level={
time:12*1000,
timeDelta:500,
score:0
};
obstacle={
size:50,
sizeDelta:2,
speed:5*1000,
speedDelta:250,
amount:7
};
token={
size:50,
sizeDelta:1,
amount:5
};
//listen for the play button to be clicked again, to that it will run.
$("#play-button").click(function(){
run();
});
}
//runs the game
function run(){
$("#menu-container").hide();
$("#game-container").show();
//put the objects in their appropriate container
var tokens=populate(token.amount, "token");
var obstacles=populate(obstacle.amount, "obstacle");
//place the tokens and shift the obstacles
place_all(token.amount, "token", X_BOUND, Y_BOUND);
shift_all(obstacle.amount, "obstacle", X_BOUND, Y_BOUND,obstacle.speed)
//start the timer
startTimer(level.time, function(){lose("Time's up!")});
//debug things. When I add the puck this will be more useful.
$("*").mousemove(function(){
//Removed the puck
// followMouse(event.pageX, event.pageY);
//debug information
// $("p").text(JSON.stringify(level)+", "+JSON.stringify(obstacle)+", "+JSON.stringify(token));
});
$(".token").mouseover(function(){
$(this).hide();
level.score+=1;
//update the score tracker
$("#score-tracker").html("<h3 id='score-tracker'>Score: "+level.score+"</h3>");
//if there are no more tokens left, get a new level ready.
if(level.score % token.amount == 0){
newLevel();
}
});
$(".obstacle").mouseover(function(){
lose("You've been hit!");
});
}
$(document).ready(function(){
changeBackground(100);
showTitle();
$("#play-button").click(function(){
run();
})
})
</script>