模拟 School 事件木偶 - Javascript

在这个项目中，我们将使用Javascript来模拟一个学校事件，并使用木偶角色来演示事件。我们将构建一个交互式UI，其中用户可以与木偶互动并与其交互。我们还将使用本地存储来保存木偶的状态。

技术栈

Javascript, HTML, CSS

功能

1. 木偶的出现和动画效果
2. 点击木偶可以开启弹出窗口
3. 用户可以与木偶互动，木偶根据用户的输入做出相应的回应
4. 可以保存木偶的状态，当用户重新打开页面时，木偶将继续上次保存的状态。

实现步骤

第一步：创建一个木偶对象

我们将创建一个JavaScript对象表示木偶，并为其添加必要的属性和方法。

var puppet = {
    name: "小明",
    mood: "开心",
    age: 10,
    dance: function() {
        console.log("木偶跳舞！");
    },
    speak: function() {
        console.log("我是" + this.name + "，我现在" + this.mood + "，" + "我今年" + this.age + "岁。");
    }
};

• name：木偶的名称
• mood：木偶的情绪
• age：木偶的年龄
• dance()：木偶跳舞方法
• speak()：木偶说话方法

第二步：创建UI

使用HTML和CSS创建交互式UI，包括木偶角色和作为弹出窗口的模态框。

<div id="puppet-container">
    <img id="puppet" src="puppet.png">
</div>

<div id="modal-container" class="modal-background">
    <div id="modal" class="modal">
        <h2>欢迎来到模拟学校事件木偶项目！</h2>
        <p>请输入您的问题</p>
        <input type="text" id="input">
        <button id="submit">发送</button>
        <button id="close">关闭</button>
    </div>
</div>

#puppet-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#puppet {
    width: 150px;
    height: 150px;
    cursor: pointer;
}

.modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
}

第三步：添加交互功能

使用JavaScript为木偶和模态框添加交互功能。

// 获取页面元素
var puppetContainer = document.getElementById("puppet-container");
var puppet = document.getElementById("puppet");
var modalContainer = document.getElementById("modal-container");
var modal = document.getElementById("modal");
var input = document.getElementById("input");
var submitButton = document.getElementById("submit");
var closeButton = document.getElementById("close");

// 木偶的出现和动画效果
window.onload = function() {
    puppetContainer.style.display = "block";
    puppet.classList.add("bounceIn");
};

// 点击木偶打开模态框
puppet.addEventListener("click", function() {
    modalContainer.style.display = "block";
    modal.classList.add("zoomIn");
});

// 点击发送按钮，木偶作出回应
submitButton.addEventListener("click", function() {
    var userInput = input.value;
    if (userInput) {
        console.log("用户输入：" + userInput);
        // 木偶作出回应
        puppet.speak();
        // 清空输入框
        input.value = "";
    } else {
        console.log("请输入问题！");
    }
});

// 点击关闭按钮，关闭模态框
closeButton.addEventListener("click", function() {
    modalContainer.style.display = "none";
});

// 保存木偶状态
window.addEventListener("beforeunload", function() {
    localStorage.setItem("puppet", JSON.stringify(puppet));
});

// 加载木偶状态
window.addEventListener("load", function() {
    var savedPuppet = localStorage.getItem("puppet");
    if (savedPuppet) {
        puppet = JSON.parse(savedPuppet);
    }
});

第四步：添加动画效果

我们可以使用animate.css库实现一些简单的动画效果。只需将其添加到页面并为元素添加相应的类即可。

<link rel="stylesheet" href="animate.min.css">

在上面的JavaScript代码中，我们为木偶和模态框添加了两个类： bounceIn和zoomIn。

结论

在本教程中，我们使用Javascript实现了一个交互式UI，并使用一个木偶角色作为演示者。我们还使用了本地存储来保存木偶的状态。通过完成这个项目，我们获得了以下技能：

1. 使用Javascript创建对象，并添加属性和方法。
2. 创建HTML和CSS UI。
3. 实现交互功能，并以事件为驱动。
4. 保存和加载本地存储。

完成的代码：https://github.com/MuXi-Studio/school-puppet.git