Hello World Animation's game

Click here for free DL of the app version that can save data.

No:8158

6614

←

Prev Next

→

Hello World Animation
Developer User3589｜Date and time 23/7/13 22:50:22
Build time 12.093 sec｜Game capacity 3.007KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript Animation</title>
    <style>
        .content {
            position: absolute;
            left: 0px;
            top: 0px;
            color: black;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="content-area"></div>

function changeContent(content) {
            content.element.textContent = negativePhrases[Math.floor(Math.random() * negativePhrases.length)];
            content.element.style.color = colors[Math.floor(Math.random() * colors.length)];
            content.element.style.fontSize = fontSizes[Math.floor(Math.random() * fontSizes.length)];
        }

function animate(content) {
            var left = parseInt(content.element.style.left, 10);
            var top = parseInt(content.element.style.top, 10);
            if (isNaN(left)) {
                left = 0;
            }
            if (isNaN(top)) {
                top = 0;
            }

// Reflect on reaching edge of screen
            if (left > window.innerWidth - content.element.offsetWidth) {
                content.direction.x = -1;
                changeContent(content);
            }
            else if (left < 0) {
                content.direction.x = 1;
                changeContent(content);
            }
            
            if (top > window.innerHeight - content.element.offsetHeight) {
                content.direction.y = -1;
                changeContent(content);
            }
            else if (top < 0) {
                content.direction.y = 1;
                changeContent(content);
            }

content.element.style.left = (left + 2 * content.direction.x) + 'px';
            content.element.style.top = (top + 2 * content.direction.y) + 'px';
            
            requestAnimationFrame(function() { animate(content); });
        }

for (var i = 0; i < 5; i++) {
            var content = createContent();
            animate(content);
        }
    </script>
</body>
</html>