javascript : 단어 벽 부딪히기 효과

언어/javascript
javascript : 단어 벽 부딪히기 효과

하이후에호 2020. 12. 17. 18:20
<head>
    <script>
        function nextRandomInteger(limit) {
            return Math.round(Math.random() * limit);
        }

        var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        function randomAlphabet() {
            return alphabet.charAt(nextRandomInteger(25));
        }

        function randomSpeed(maxSpeed) {
            return Math.random() * maxSpeed - Math.random() * maxSpeed;
        }

        var canvasWidth = 700;
        var canvasHeight = 400;

        function MovingText(data) {
            this.x = nextRandomInteger(canvasWidth);
            this.y = nextRandomInteger(canvasHeight);
            this.vx = randomSpeed(10);
            this.vy = randomSpeed(10);

            this.body = document.createElement('h3');
            this.body.innerHTML = data;
            this.body.style.position = 'absolute';

            document.body.appendChild(this.body);
        }

        MovingText.prototype.move = function () {
            if (this.x < 0 || this.x > canvasWidth) { this.vx *= -1; }
            if (this.y < 0 || this.y > canvasHeight) { this.vy *= -1; }

            this.x += this.vx;
            this.y += this.vy;

            this.body.style.left = this.x + 'px';
            this.body.style.top = this.y + 'px';

        };
        var movingTexts = [];

        window.onload = function () {

            setInterval(function () {
                for (var i in movingTexts) {
                    movingTexts[i].move();
                }
            }, 1000 / 24);
        }

        function inputData() {
            var data = document.getElementById("data");
            movingTexts.push(new MovingText(data.value));
            data.value = '';
        }
    </script>

<body>
    <div>
        <input type="text" id="data" onKeypress="inputData()" />
    </div>
</body>


</head>