garbage-classification
/
game.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>垃圾分类小游戏</title>
    <style>
        .img-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .classification-image {
            width: 300px; /* 设置图片宽度 */
            height: 300px; /* 设置图片高度 */
        }
    </style>
</head>
<body>
<div id="game-container" style="display: flex; flex-direction: column; justify-content: flex-start; align-items: center;">
    <h1>垃圾分类小游戏</h1>
    <div id="trash-area" style="display: flex; justify-content: center; align-items: center;  margin-bottom: 200px;">
        <img class="classification-image" id="trash-image" src="" draggable="true">
    </div>
    <div id="classification-areas" style="display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap;">
        <div class="classification-area" id="可回收物" style="display:inline">
            <div class="img-wrapper">
                <img class="classification-image" src="可回收垃圾桶.png">
                <span>可回收物</span>
            </div>
        </div>
        <div class="classification-area" id="有害垃圾" style="display:inline">
            <div class="img-wrapper">
                <img class="classification-image" src="有害垃圾桶.png">
                <span>有害垃圾</span>
            </div>
        </div>
        <div class="classification-area" id="厨余垃圾" style="display:inline">
            <div class="img-wrapper">
                <img class="classification-image" src="湿垃圾桶.png">
                <span>厨余垃圾</span>
            </div>
        </div>
        <div class="classification-area" id="干垃圾" style="display:inline">
            <div class="img-wrapper">
                <img class="classification-image" src="干垃圾桶.png">
                <span>干垃圾</span>
            </div>
        </div>
    </div>
    <div id="score-board">
        <h2>得分: <span id="score">0</span></h2>
    </div>
</div>

<script>
    // JavaScript 代码
    const trashImage = document.getElementById('trash-image');
    const recyclableArea = document.getElementById('可回收物');
    const hazardousArea = document.getElementById('有害垃圾');
    const organicArea = document.getElementById('厨余垃圾');
    const residualArea = document.getElementById('干垃圾');
    const scoreElement = document.getElementById('score');

    let score = 0;

    // 拖放事件处理函数
    function dragStart(event) {
        event.dataTransfer.setData('text/plain', event.target.id);
    }

    function allowDrop(event) {
        event.preventDefault();
    }

    function drop(event) {
        event.preventDefault();
        const trashId = event.dataTransfer.getData('text/plain');
        // const classification = event.target.parentElement.id;
        const classification = event.currentTarget.id;
        console.log('放入的垃圾桶ID：', classification); // 打印放入的垃圾桶ID
        checkClassification(trashId, classification);
    }

    // 检查垃圾分类结果
    async function checkClassification(trashId, classification) {
        try {
            const response = await fetch(`http://localhost:8088/api/trash/check/${trashId}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ classification: classification })
            });
            const isCorrect = await response.json();
            const content = "已放入"+classification;
            if (isCorrect) {
                score++;
                scoreElement.textContent = score;
                alert(content+' 正确分类！');
            } else {
                alert(content+' 错误分类！');
            }

            // 获取下一个垃圾图片
            getNextTrashImage();
        } catch (error) {
            console.error(error);
        }
    }

    // 获取下一个垃圾图片
    async function getNextTrashImage() {
        console.log("获取下一个垃圾图片！！！")
        try {
            const response = await fetch('http://localhost:8088/api/trash/random');
            const trash = await response.json();
            trashImage.src = trash.imagePath;
            trashImage.id = trash.id;
        } catch (error) {
            console.error(error);
        }
    }

    // 绑定拖放事件
    trashImage.addEventListener('dragstart', dragStart);
    recyclableArea.addEventListener('drop', drop);
    hazardousArea.addEventListener('drop', drop);
    organicArea.addEventListener('drop', drop);
    residualArea.addEventListener('drop', drop);
    recyclableArea.addEventListener('dragover', allowDrop);
    hazardousArea.addEventListener('dragover', allowDrop);
    organicArea.addEventListener('dragover', allowDrop);
    residualArea.addEventListener('dragover', allowDrop);

    // 初始化游戏
    getNextTrashImage();
</script>
</body>
</html>