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

No:1460

151

←

Prev Next

→

Games where you can interact with AI
Developer User3329｜Date and time 23/6/18 16:52:09
Build time 52.399 sec｜Game capacity 5.817KB｜

Script

AIと対話するゲーム

このプログラムは、AIと対話するゲームです。ユーザーがテキストメッセージを入力し、AIがそのメッセージに応答します。プログラムは1つのHTMLファイルに含まれ、JavaScriptを使用して実装されています。ゲームはスマートフォンで操作されることを前提としており、絵文字が多く使用されています。AIが応答するメッセージは、あらかじめ配列に格納されています。ユーザーが入力したメッセージが配列のいずれかの要素と一致する場合、AIはその要素に関連するメッセージを応答します。それ以外の場合、AIは「すみません、わかりませんでした」と応答します。

←

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">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>AIと対話するゲーム</title>
    <style>
        body {
            font-size: 16px;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

h1 {
            text-align: center;
            margin-top: 50px;
            font-size: 36px;
            color: #ef5350;
        }

#wrapper {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            background-color: #fff;
        }

#output {
            min-height: 200px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow-y: scroll;
            background-color: #fff;
        }

#input {
            width: 100%;
            height: 40px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: none;
            font-size: 16px;
            outline: none;
        }

#input:focus {
            border-color: #ef5350;
        }

#btn-send {
            margin-top: 10px;
            width: 100%;
            height: 40px;
            background-color: #ef5350;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            box-shadow: none;
            cursor: pointer;
        }

#btn-send:hover {
            background-color: #d32f2f;
        }

.right {
            text-align: right;
        }

.card {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            background-color: #fff;
        }

.card-response {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            background-color: #ef5350;
            color: #fff;
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>AIと対話するゲーム</h1>
    <div id="wrapper">
        <div id="output"></div>
        <input type="text" id="input" placeholder="メッセージを入力してください">
        <button type="button" id="btn-send">送信</button>
    </div>

const outputEl = document.getElementById("output");
        const inputEl = document.getElementById("input");
        const sendEl = document.getElementById("btn-send");

function addMessage(message, isUser) {
            const cardEl = document.createElement("div");
            cardEl.className = "card";

const contentEl = document.createElement("p");
            contentEl.innerText = message;

if (isUser) {
                cardEl.classList.add("right");
            } else {
                const responseEl = document.createElement("div");
                responseEl.className = "card-response";
                responseEl.innerText = "AI";

cardEl.appendChild(responseEl);
            }

cardEl.appendChild(contentEl);
            outputEl.appendChild(cardEl);
        }

function getMessage() {
            const message = inputEl.value.trim();
            inputEl.value = "";
            addMessage(message, true);
            respond(message);
        }

function respond(message) {
            const response = messages.find(m => m.input === message || message.includes(m.input));
            const responseMessage = response ? response.output : "すみません、よくわかりませんでした。";

addMessage(responseMessage, false);
        }

sendEl.addEventListener("click", getMessage);
        inputEl.addEventListener("keypress", function (event) {
            if (event.key === "Enter") {
                getMessage();
            }
        });
    </script>
</body>
</html>