textfallcliff/index.html at master · rickumali/textfallcliff · GitHub

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="./two.min.js"></script>
    <style type="text/css">
    </style>
    <title>Text Fall Cliff</title>
</head>
<body>
    <h1>Text Fall Cliff</h1>
    <p>Starting typing...</p>
    <div id="draw-text"></div>
    <script>
var elem = document.getElementById('draw-text');
var two = new Two({ width: 640, height: 480, type: Two.Types.canvas }).appendTo(elem);

// 100+12 is the baseline y (100) plus half the height of the letters
two.makeLine(540,100+12,640,100+12);
var message = []

window.addEventListener("keydown", function (e) {
    if (!e.repeat) {
        console.log("Key: ", e.key);
        console.log("Key (UpperCase): ", e.key.toUpperCase());
        switch (e.key.toUpperCase()) {
            case 'A':
            case 'B':
            case 'C':
            case 'D':
            case 'E':
            case 'F':
            case 'G':
            case 'H':
            case 'I':
            case 'J':
            case 'K':
            case 'L':
            case 'M':
            case 'N':
            case 'O':
            case 'P':
            case 'Q':
            case 'R':
            case 'S':
            case 'T':
            case 'U':
            case 'V':
            case 'W':
            case 'X':
            case 'Y':
            case 'Z':
            case '.':
            case ',':
            case '"':
            case '?':
            case '!':
                message.push(new RickText(two, e.key));
                break;
            default:
                break;
        }
    }
})

class RickText {
    constructor(t, letter) {
        var textStyle = {
          stroke: 'blue',
          opacity: .90,
          size: 32
        }

        this.y_step = 1.0;
        this.text = t.makeText(letter, 639, 100, textStyle);
    }

    visible() {
        return ((this.text.translation.x >= 0 && this.text.translation.x < 640) &&
            (this.text.translation.y >= 0 && this.text.translation.y < 489))
    }

    update() {
        this.text.translation.x = this.text.translation.x - 1;
        if (this.text.translation.x < 540) {
            // Simulate falling via gravity
            this.text.translation.y = this.text.translation.y + this.y_step;
            this.y_step = this.y_step * 1.085;
        }
    }
}

two.bind('update', function(frameCount) {
    message.forEach((elem) => {
        if (elem.visible()) {
            elem.update();
        } else {
            // Keep memory clean
            two.remove(elem.text);
            message.shift();
        }
    });
}).play();
    </script>
</body>
</html>