/
random.html
105 lines (89 loc) · 3.78 KB
/
random.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="AlphaSpeed is a game to test your typing ability, in speed and accuracy."/>
<meta name="author" content="JaL Productions"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Random - AlphaSpeed</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="shortcut icon" href="img/favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="img/touchicon-57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touchicon-72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touchicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touchicon-144.png">
</head>
<body>
<div class="centre">
<h1>AlphaSpeed</h1>
<h2>Random</h2>
<a href="play.html">Back</a>
<span id="letter"></span>
<span id="time"></span>
<form id="score-form">
<label for="name">Name: </label>
<input type="text" id="name"/>
<input type="submit" id="score-submit"/>
</form>
</div>
<script>
(function() {
var alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
var letter = document.getElementById('letter');
var time = document.getElementById('time');
var name = document.getElementById('name');
var count = 0;
var date1,
score;
shuffle(alphabet);
function shuffle(o) {
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
};
letter.innerHTML = alphabet[0];
document.addEventListener('keydown', keydown);
document.getElementById('score-submit').addEventListener('click', submitScore);
function keydown(e) {
if(count != alphabet.length - 1) {
if(count == 0) {
date1 = new Date();
}
if(e.which == alphabet[count].charCodeAt(0) - 32) {
count++;
letter.innerHTML = alphabet[count];
}
} else {
gameComplete();
}
}
function gameComplete() {
document.removeEventListener('keydown', keydown);
letter.innerHTML = '';
score = new Date() - date1;
time.innerHTML = score / 1000 + ' seconds';
document.body.className = 'game-complete';
setTimeout(function() {
name.focus();
}, 100);
}
function submitScore(e) {
e.preventDefault();
var name = document.getElementById('name').value;
var data = 'name=' + name + '&score=' + score + '&game=random';
var request = new XMLHttpRequest();
request.open('POST', 'php/saveScore.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
request.onreadystatechange = function() {
if(request.readyState == 4 && request.status == 200) {
alert('Success!');
}
}
request.onerror = function() {
alert('Something went wrong. Please try again.');
}
}
}());
</script>
</body>
</html>