-
Notifications
You must be signed in to change notification settings - Fork 0
/
thprimer.html
128 lines (123 loc) · 3.72 KB
/
thprimer.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
<!DOCTYPE HTML>
<html lang = "th-TH">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>แตะ ก ข</title>
<style>
button {
height: 42px;
width: 42px;
padding: 2px 2px;
text-align: center;
font-size: 32px;
margin: 2px 2px;
cursor: pointer;
border-radius: 25%;
}
@keyframes bgs {
0% {background-color: #e6f3ff;}
25% {background-color: #ccccff;}
50% {background-color: #ffe6ff;}
100% {background-color: #ccffcc;}
}
#yard {
width: 400px;
height: 400px;
position: relative;
background: #e6f3ff;
animation-name: bgs;
animation-duration: 20s;
}
@keyframes pulse {
from { transform : scale(1); opacity : 1; }
50% { transform : scale(0.75); opacity : 0.25; }
to { transform : scale(1); opacity : 1; }
}
#letta {
width: 50px;
height: 50px;
position: absolute;
background-color: bisque;
font-size: 40px;
padding-bottom: 10px;
text-align: center;
/* rotate: z 30deg;
y -180deg; z -30deg; 1 1 0 60deg;
writing-mode: vertical-lr;
text-orientation: mixed;
*/
animation: pulse 3s infinite;
}
#pings {
font-size: 28px;
color: blue;
}
</style>
</head>
<body>
<h2>แตะ ก ข รู้ไหม</h2>
<p>
<button id="btn" onclick="wander()">▶️</button> <span id='pings'>:</span>
</p>
<div id="yard">
<div id="letta"></div>
</div>
<script src="script/beeper.js" type="text/javascript"></script>
<script>
var counter = 0;
var tis = null;
var col = ['red','yellow','orange','lime','bisque','pink','white','#66ff99'];
var rot = ['0deg','z 30deg','y -180deg','z -30deg', '1 1 1 60deg'];
function ping(e){
counter++;
//beep a musical note
var notes=[257, 272, 288, 305, 3243, 343, 363, 385, 408, 432, 458, 485];
var freq = notes[Math.floor(Math.random()*notes.length)]; //randomly select a note
var dur = 250; //250ms --a quarter note
beep(freq, 0, 0.5, dur);
var rot=['z 30deg','y -180deg','z -30deg', '1 1 0 60deg'];
e.style.backgroundColor=col[Math.floor(Math.random()*col.length)];
e.style.rotate=rot[Math.floor(Math.random()*rot.length)];
document.getElementById('pings').innerHTML += " " + e.innerText;
}
function wander() {
//restart the game
if (document.getElementById("btn").innerText=="↩️") location.reload();
var _x = 200; var _y = 0;
//var En="AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
//var EN="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//var en="abcdefghijklmnopqrstuvwxyz";
var Th="กจฎฏดตบปอคฅฆงชซฌญฑฒณทธนพฟภมยรลวฬฮขฃฉฐถผฝศษสห";
var Nm="๐๑๒๓๔๕๖๗๘๙+-0123456789";
var Al=Th+Nm; //make a collection for exercises
var dx=[-1,1,2,-2,3,1,-3,2,-1,-2]; //10 random increments
var mu=3; //multiplier to speed up
var ei = document.getElementById("letta");
ei.addEventListener('mousedown', function (e) { ping(this); });
clearInterval(tis);
tis = setInterval(frame, 100);
function frame() {
if (_x >= 360 || _y >=360 || counter >= 12) {
document.getElementById("btn").innerText="↩️";
clearInterval(tis); //stop
} else { //wander
_x += mu*dx[Math.floor(Math.random()*10)];
_y += mu*Math.floor(Math.random()*10);
if (_x < 0) {_x=350; mu=-3;} else if (_x > 360) {_x=10; mu=3}
if (_y < 0) {_y=10; mu=-2} else if (_y > 350) {
_y = 0; mu=2;
ei.innerHTML=
Al.substr(Math.floor(Math.random()*Al.length), 1);
}
//console.log("(_x, _y) = " + _x + ", " + _y);
ei.style.top = _y + "px";
ei.style.left = _x + "px";
ei.style.rotate = rot[Math.floor(Math.random()*rot.length)];
ei.style.backgroundColor=col[Math.floor(Math.random()*col.length)];
}
}
}
</script>
</body>
</html>