Mind teller and text game's game

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

No:11193

173

←

Prev Next

→

Mind teller and text game
Developer User4833｜Date and time 23/8/8 8:17:53
Build time 1.241 sec｜Game capacity 0.08KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

以下は、指定された要件に基づいて実装したサンプルコードです。

このコードでは、指定された要件に合わせて、「虹色！！」という巨大な文字が画面内を移動しながら点滅するゲームを実装しています。文字は複数表示され、ランダムな位置からスタートし、壁にぶつかると跳ね返ります。文字の後ろの背景も虹色に点滅します。また、一定時間経過後に文字と背景が消えます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>以下は、指定された要件に基づいて実装したサンプルコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>虹色！！</title>
    <style>
        #gameboard {
            position: relative;
            width: 100%;
            height: 100vh;
            background-color: black;
        }

.character {
            position: absolute;
            font-size: 30vh;
            color: white;
            animation: move 0.01s infinite;
        }

.background {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(255,0,0,0.8);
            opacity: 0;
            animation: blink 0.5s infinite;
        }

@keyframes move {
            from { left: 0%; top: 0%; }
            to { left: 100%; top: 100%; }
        }

@keyframes blink {
            0% { opacity: 0; }
            50% { opacity: 1; }
            100% { opacity: 0; }
        }
    </style>
</head>
<body>
    <div id="gameboard"></div>

// 文字をランダムに選択
            const character = characters[Math.floor(Math.random() * characters.length)];

// 文字と背景を作成
            const characterElement = document.createElement('div');
            characterElement.className = 'character';
            characterElement.textContent = character;

const backgroundElement = document.createElement('div');
            backgroundElement.className = 'background';

// 文字と背景をゲームボードに追加
            const gameboard = document.getElementById('gameboard');
            gameboard.appendChild(characterElement);
            gameboard.appendChild(backgroundElement);

// 文字の初期位置を設定
            const characterWidth = characterElement.offsetWidth;
            const characterHeight = characterElement.offsetHeight;
            const maxWidth = gameboard.clientWidth - characterWidth;
            const maxHeight = gameboard.clientHeight - characterHeight;
            let posX = Math.random() * maxWidth;
            let posY = Math.random() * maxHeight;

// 文字の移動をアニメーションする
            characterElement.animate([{ left: posX + 'px', top: posY + 'px' }], { duration: 7000, fill: 'forwards' });

// 文字が壁にぶつかったら反射する
            const characterAnimation = characterElement.getAnimations()[0];
            characterAnimation.onfinish = function() {
                const currentPosX = parseFloat(characterElement.style.left);
                const currentPosY = parseFloat(characterElement.style.top);

if (currentPosX <= 0 || currentPosX >= maxWidth) {
                    characterAnimation.playbackRate *= -1;
                }
                if (currentPosY <= 0 || currentPosY >= maxHeight) {
                    characterAnimation.playbackRate *= -1;
                }
            };

// 一定時間経過後に文字と背景を削除する
            setTimeout(() => {
                characterElement.remove();
                backgroundElement.remove();
            }, 5000);
        }

// 一定時間ごとに文字を生成する
        setInterval(createCharacter, 1000);
    </script>
</body>
</html>
```