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

No:34111

←

Prev Next

→

Make a ai chat room
Developer User16048｜Date and time 24/1/8 9:28:18
Build time 31.109 sec｜Game capacity 3.57KB｜

Script

Sure! Here's an example of a simple AI chatroom game implemented using a single HTML file with JavaScript, enclosed in script tags:

AI Chatroom Game

This AI chatroom game consists of a simple chat interface where the user can type messages and receive responses from the AI. The AI's responses are generated based on simple keyword matching logic. The chat history is displayed in a scrollable chatbox.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple AI chatroom game implemented using a single HTML file with JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
  <title>AI Chatroom Game</title>
  <style>
    body {
      background-color: #f1f1f1;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      text-align: center;
    }

#chatbox {
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 5px;
      height: 300px;
      margin: 0 auto;
      overflow-y: auto;
      padding: 10px;
      text-align: left;
      width: 80%;
    }

input[type="text"] {
      border-radius: 5px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      font-size: 16px;
      margin-top: 10px;
      padding: 10px;
      width: 80%;
    }
  </style>
</head>
<body>
  <h1>AI Chatroom Game</h1>
  <div id="chatbox"></div>
  <input type="text" id="userInput" placeholder="Type your message..." autofocus>
  
  <script>
    // Initialize the chat history with a welcome message
    let chatHistory = ["Hi, I'm the AI Chatbot! How can I assist you today?"];
    
    // Function to render the chat history
    function renderChatHistory() {
      const chatbox = document.getElementById("chatbox");
      chatbox.innerHTML = "";
      
      chatHistory.forEach(message => {
        const p = document.createElement("p");
        p.textContent = message;
        chatbox.appendChild(p);
      });
    }

// Function to handle user input
    function handleUserInput(event) {
      if (event.key === "Enter") {
        const userInput = event.target.value;
        
        // Add user's message to chat history
        chatHistory.push("User: " + userInput);
        
        // Process user's input and generate AI response
        const aiResponse = generateAIResponse(userInput);
        
        // Add AI's response to chat history
        chatHistory.push("AI: " + aiResponse);
        
        // Clear input field
        event.target.value = "";
        
        // Render chat history
        renderChatHistory();
        
        // Scroll to the bottom of the chatbox
        const chatbox = document.getElementById("chatbox");
        chatbox.scrollTop = chatbox.scrollHeight;
      }
    }

// Function to generate AI's response
    function generateAIResponse(userInput) {
      // This is a simple example, you can implement more complex logic here
      if (userInput.includes("hello") || userInput.includes("hi")) {
        return "Hello! How can I assist you today?";
      } else if (userInput.includes("game")) {
        return "What kind of game would you like to play?";
      } else if (userInput.includes("weather")) {
        return "The weather is currently sunny.";
      } else if (userInput.includes("bye")) {
        return "Goodbye! Have a great day!";
      } else {
        return "I'm sorry, but I don't understand. Can you please rephrase?";
      }
    }

// Add event listener to handle user input
    const userInputField = document.getElementById("userInput");
    userInputField.addEventListener("keydown", handleUserInput);
    
    // Render chat history initially
    renderChatHistory();
    
    // Set focus on input field to start
    userInputField.focus();
  </script>
</body>
</html>
```