/
num_jquery.html
101 lines (88 loc) · 1.99 KB
/
num_jquery.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
<!DOCTYPE html>
<html>
<head>
<title>NumGuess HTML/jQuery version</title>
<style>
* {
font-family: Consolas, "Courier New", Courier, monospace;
font-size: 14px;
}
div {
position: relative;
height: 20px;
}
input {
width: 80px;
padding: 0px;
margin: 0px;
font-size: 12px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="libnumguess.js"></script>
<script>
$(function() {
var engine = NumGuessEngine;
var $last;
function show(text) {
text = text || '';
var lines = text.toString().split('\n');
for(var i = 0; i < lines.length; i++) {
$last = $('<div></div>')
.text(lines[i])
.appendTo('body');
}
$(window).scrollTop($last.offset().top);
};
function input(callback, width) {
var $input = $('<input>')
.appendTo($last)
.on('keypress', function(e) {
if((e.keyCode || e.which) === 13) {
var $result = $('<span>').text($input.val());
$input.replaceWith($result);
if(callback) callback($result.text());
}
})
.focus();
if(width) $input.width(width);
};
function getGuess() {
show('Guess: ');
input(evaluateGuess);
}
function evaluateGuess(guess) {
if(!engine.guess(guess)) {
getGuess();
} else {
show('Play again [y/N]? ');
input(function(again) {
if(again && again.toString().toUpperCase() == 'Y') {
engine.restart();
getGuess();
} else {
show('\nOkay, bye.');
}
});
}
}
// Initialise
engine.language = 'HTML/jQuery';
engine.show = show;
engine.console = true;
engine.welcome();
show('\nEnter your name: ');
input(function(name) {
name = name || 'Player';
show('\nWelcome ' + name + ', enter upper limit: ');
input(function(limit) {
limit = parseInt(limit, 10) || 10;
engine.start(name, limit);
getGuess();
});
}, 200);
});
</script>
</head>
<body></body>
</html>