-
Notifications
You must be signed in to change notification settings - Fork 1
/
game.html
59 lines (47 loc) · 1.58 KB
/
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
<html>
<head>
<title>Awesome jQuery Game!</title>
<script src="../jquery.js"></script>
<script>
// Functions can be assigned to variables!
var start = function() {
// Select the btn with jQuery
// ID of btn
var btn = $('#btn');
// Select the score span
var scoreTxt = $('#score');
var score = 0;
// Get the window width and height
var height = $(window).height();
var width = $(window).width();
// Pass click a function that executes when
// btn is clicked
btn.click(function() { // Anonymous function without a name, defined on the fly!
// Increase score
score++;
// Set the text of the score span to be the new score
scoreTxt.text(score);
// Use JavaScript Math.random to get random new top and left
var newTop = Math.random() * height; // Get a number between 0 and height
var newLeft = Math.random() * width; // Get a number between 0 and width
// JavaScript object to pass to the animation function supplied by jQuery
var newStyle = {
top: newTop,
left: newLeft
};
// Animate the button to the new position
// Based on the CSS properties of top and left
btn.animate(newStyle);
});
};
// Functions can be passed as arguments
// This ensures that the HTML is loaded
// before your JS runs
$(document).ready(start);
</script>
</head>
<body>
<div>Score: <span id="score">0</span>
<button id="btn" style="position:absolute;top:50px;">Click here</button>
</body>
</html>