Automation 2: AI Generated NPC Chat Animation, type The Prompt, Sumbit The Prompt, See A Animation's game | AI game creator

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

No:42694

162

Automation 2: AI Generated NPC Chat Animation, typ..ALL
Developer User13970｜Date and time 24/2/12 20:20:09
Build time 12.598 sec｜Game capacity 3.902KB｜

Hello! How can I assist you?

I need help with a quest.

Sure! Which quest do you need assistance with?

The lost treasure quest.

Ah, the lost treasure quest! You need to find the key hidden inside the abandoned castle and then proceed to the treasure chamber. Good luck!

In this example, we have implemented a simple AI Generated NPC Chat Animation game using JavaScript. The game is contained within a single HTML file and can be played on a smartphone or any web browser. The game consists of a conversation between an NPC (Non-Playable Character) and the player. Each message is represented by a pictogram of an NPC or a user, along with the corresponding text message. The JavaScript code uses a `startAnimation` function to animate the chat messages. NPC messages fade in one by one, followed by user messages. The animation timing can be adjusted by modifying the delay value. To play the game, open the HTML file in a web browser or on a smartphone. The conversation will automatically start and you can see the NPC and user messages appearing in sequence.

→ 　

0　

0　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>AI NPC Chat Animation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }

.container {
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }

.message {
            margin-bottom: 15px;
        }

.user-message {
            background-color: #e2f0ff;
            padding: 8px;
            border-radius: 8px;
            text-align: right;
        }

.npc-message {
            background-color: #f5f5f5;
            padding: 8px;
            border-radius: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message">
            <div class="npc-message">
                <img src="npc.png" alt="NPC" style="width: 30px; height: 30px; vertical-align: middle;">
                <span class="npc-text">Hello! How can I assist you?</span>
            </div>
        </div>
        <div class="message">
            <div class="user-message">
                <img src="user.png" alt="User" style="width: 30px; height: 30px; vertical-align: middle;">
                <span class="user-text">I need help with a quest.</span>
            </div>
        </div>
        <div class="message">
            <div class="npc-message">
                <img src="npc.png" alt="NPC" style="width: 30px; height: 30px; vertical-align: middle;">
                <span class="npc-text">Sure! Which quest do you need assistance with?</span>
            </div>
        </div>
        <div class="message">
            <div class="user-message">
                <img src="user.png" alt="User" style="width: 30px; height: 30px; vertical-align: middle;">
                <span class="user-text">The lost treasure quest.</span>
            </div>
        </div>
        <div class="message">
            <div class="npc-message">
                <img src="npc.png" alt="NPC" style="width: 30px; height: 30px; vertical-align: middle;">
                <span class="npc-text">Ah, the lost treasure quest! You need to find the key hidden inside the abandoned castle and then proceed to the treasure chamber. Good luck!</span>
            </div>
        </div>
    </div>

<script>
        function startAnimation() {
            const npcMessages = document.querySelectorAll('.npc-message');
            const userMessages = document.querySelectorAll('.user-message');

npcMessages.forEach((npcMessage, index) => {
                setTimeout(() => {
                    npcMessage.style.opacity = 1;
                }, index * 2000);
            });

userMessages.forEach((userMessage, index) => {
                setTimeout(() => {
                    userMessage.style.opacity = 1;
                }, (index + npcMessages.length) * 2000);
            });
        }

startAnimation();
    </script>
</body>
</html>
```

In this example, we have implemented a simple AI Generated NPC Chat Animation game using JavaScript. The game is contained within a single HTML file and can be played on a smartphone or any web browser.

The game consists of a conversation between an NPC (Non-Playable Character) and the player. Each message is represented by a pictogram of an NPC or a user, along with the corresponding text message.

The JavaScript code uses a `startAnimation` function to animate the chat messages. NPC messages fade in one by one, followed by user messages. The animation timing can be adjusted by modifying the delay value.

To play the game, open the HTML file in a web browser or on a smartphone. The conversation will automatically start and you can see the NPC and user messages appearing in sequence.