forked from DynoCC/Dyno-Custom-Commands
-
Notifications
You must be signed in to change notification settings - Fork 0
/
bored.html
107 lines (105 loc) · 3.91 KB
/
bored.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
<html>
<head>
<meta charset="utf-8">
<title>Matrix - DCC</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body, html, canvas {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-style: hidden;
}
#ccc {
background-color: black;
}
.bt {
color: white;
font-family: Arial;
padding: 10px 10px;
font-size: 12px;
}
.bt:hover {
color: blue;
transistion: 1s color ease-in;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
function resetSize() {
$('#q').each(function() {
$(this)[0].width = $(this).width();
$(this)[0].height = $(this).height();
});
}
resetSize();
$(document).resize(function() {
resetSize();
});
var s=window.screen;
var width = q.width=s.width;
var height = q.height;
var yPositions = Array(300).join(0).split('');
var ctx=q.getContext('2d');
function getNextChar() {
//
//return(""+Math.round(Math.random()));
if(Math.random()<.4) {
// numbers
return(getRandomChar(48, 57));
} else if(Math.random()<.8) {
// capital letters
return(getRandomChar(65, 90));
} else {
// katakana
return(getRandomChar(0x30A0, 0x30A0));
}
}
function getRandomChar(rangeStart, rangeEnd) {
return(String.fromCharCode(rangeStart + Math.random() * (rangeEnd-rangeStart+1)));
}
var draw = function () {
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,width,height);
ctx.fillStyle='#0F0';
ctx.font = '10pt Georgia';
yPositions.map(function(y, index){
text = getNextChar();
x = (index * 10)+10;
q.getContext('2d').fillText(text, x, y);
if(y > 100 + Math.random()*20000) {
yPositions[index]=0;
} else {
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix() {
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
Game_Interval = setInterval(draw, 25);
}
function StopMatrix() {
clearInterval(Game_Interval);
}
//setInterval(draw, 33);
$("#pause").click(function() {
StopMatrix();
});
$("#play").click(function(){
RunMatrix();
});
})
</script>
</head>
<body>
<div id="ccc" align="center">
<a id="pause" class="bt" style="color: white;" onclick="StopMatrix()">Pause</a>
<a id="play" class="bt" style="color: white;" onclick="RunMatrix()">Resume</a>
<a class="inline" style="color: white;" href="/">Back</a>
<canvas id="q"></canvas>
</div>
</body style="overflow: hidden;">
</html>