课堂做饭小游戏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课堂做饭小游戏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }
        body {
            background-color: #f0f8ff;
            overflow: hidden;
            user-select: none;
        }
        /* 整体游戏容器 */
        .game-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 20px;
        }
        .game-title {
            text-align: center;
            font-size: 32px;
            color: #222;
            margin-bottom: 15px;
            font-weight: bold;
        }
        /* 主操作区域 */
        .main-box {
            display: flex;
            flex: 1;
            gap: 20px;
        }
        /* 烹饪操作区 */
        .cook-area {
            flex: 4;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 0 15px #ccc;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .pot {
            width: 320px;
            height: 200px;
            border: 8px solid #999;
            border-radius: 0 0 100px 100px;
            background: #f5f5f5;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
            justify-content: center;
            padding: 10px;
        }
        .plate {
            width: 280px;
            height: 100px;
            border: 5px solid #ddd;
            border-radius: 50%;
            margin-top: 30px;
            background: #fafafa;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
        }
        /* 食材侧边栏 */
        .food-list {
            flex: 1;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 0 15px #ccc;
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            overflow-y: auto;
        }
        .food-title {
            font-size: 24px;
            text-align: center;
            color: #333;
            font-weight: bold;
        }
        .food-item {
            padding: 15px;
            background: #e8f4ff;
            border-radius: 12px;
            text-align: center;
            font-size: 20px;
            cursor: grab;
            touch-action: none;
        }
        .food-item:active {
            cursor: grabbing;
            background: #d0e8ff;
        }
        /* 操作按钮区 */
        .btn-box {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .op-btn {
            padding: 12px 20px;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            background: #409eff;
            color: #fff;
            cursor: pointer;
            transition: 0.2s;
        }
        .op-btn:hover {
            background: #2979ef;
        }
        .reset-btn {
            background: #f56c6c;
        }
        .reset-btn:hover {
            background: #e04444;
        }
        /* 食材拖拽元素样式 */
        .drag-food {
            font-size: 28px;
            margin: 3px;
        }
        /* 烹饪动画 */
        .cooking {
            animation: cookAni 0.5s infinite alternate;
        }
        @keyframes cookAni {
            from { transform: rotate(-5deg); }
            to { transform: rotate(5deg); }
        }
        .tip-text {
            position: absolute;
            top: 20px;
            font-size: 20px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="game-title">课堂创意做饭小游戏</div>
        <div class="main-box">
            <!-- 烹饪主区域 -->
            <div class="cook-area">
                <div class="tip-text">拖拽右侧食材到锅里，完成烹饪吧！</div>
                <div class="pot" id="pot"></div>
                <div class="plate" id="plate"></div>
                <div class="btn-box">
                    <button class="op-btn" id="wash">清洗食材</button>
                    <button class="op-btn" id="stir">翻炒搅拌</button>
                    <button class="op-btn" id="season">添加调味</button>
                    <button class="op-btn" id="cook">开火烹饪</button>
                    <button class="op-btn" id="out">出锅装盘</button>
                    <button class="op-btn reset-btn" id="reset">重新开始</button>
                </div>
            </div>
            <!-- 食材选择区 -->
            <div class="food-list">
                <div class="food-title">食材库</div>
                <div class="food-item" draggable="true">🥬 青菜</div>
                <div class="food-item" draggable="true">🥕 胡萝卜</div>
                <div class="food-item" draggable="true">🥔 土豆</div>
                <div class="food-item" draggable="true">🍅 番茄</div>
                <div class="food-item" draggable="true">🥚 鸡蛋</div>
                <div class="food-item" draggable="true">🍤 虾仁</div>
                <div class="food-item" draggable="true">🥩 肉片</div>
                <div class="food-item" draggable="true">🌽 玉米</div>
            </div>
        </div>
    </div>
    <script>
        // 获取元素
        const pot = document.getElementById('pot')
        const plate = document.getElementById('plate')
        const washBtn = document.getElementById('wash')
        const stirBtn = document.getElementById('stir')
        const seasonBtn = document.getElementById('season')
        const cookBtn = document.getElementById('cook')
        const outBtn = document.getElementById('out')
        const resetBtn = document.getElementById('reset')
        const tipText = document.querySelector('.tip-text')
        const foodItems = document.querySelectorAll('.food-item')
        // 拖拽食材功能
        foodItems.forEach(item => {
            item.addEventListener('dragstart', (e) => {
                e.dataTransfer.setData('food', item.innerText)
            })
        })
        // 锅放置拖拽
        pot.addEventListener('dragover', (e) => e.preventDefault())
        pot.addEventListener('drop', (e) => {
            e.preventDefault()
            const food = e.dataTransfer.getData('food')
            const span = document.createElement('span')
            span.className = 'drag-food'
            span.innerText = food
            pot.appendChild(span)
            tipText.innerText = `已添加${food}，可以开始处理食材！`
        })
        // 清洗食材
        washBtn.onclick = () => {
            if(pot.children.length === 0){
                tipText.innerText = '请先添加食材哦！'
                return
            }
            tipText.innerText = '✅ 食材清洗干净啦！'
        }
        // 翻炒搅拌
        stirBtn.onclick = () => {
            if(pot.children.length === 0){
                tipText.innerText = '锅里还没有食材！'
                return
            }
            pot.classList.add('cooking')
            tipText.innerText = '🔥 正在均匀翻炒食材！'
            setTimeout(()=>{
                pot.classList.remove('cooking')
            },1000)
        }
        // 调味
        seasonBtn.onclick = () => {
            if(pot.children.length === 0){
                tipText.innerText = '请先放入食材！'
                return
            }
            tipText.innerText = '🧂 已加入调料，食材更美味！'
        }
        // 开火烹饪
        cookBtn.onclick = () => {
            if(pot.children.length === 0){
                tipText.innerText = '暂无食材可以烹饪！'
                return
            }
            pot.classList.add('cooking')
            tipText.innerText = '🔥 大火烹饪中，食材正在熟透！'
            setTimeout(()=>{
                pot.classList.remove('cooking')
                tipText.innerText = '✅ 食材烹饪完成！可以出锅啦'
            },1500)
        }
        // 出锅装盘
        outBtn.onclick = () => {
            if(pot.children.length === 0){
                tipText.innerText = '没有食材可以出锅！'
                return
            }
            // 转移所有食材到盘子
            while(pot.firstChild){
                plate.appendChild(pot.firstChild)
            }
            tipText.innerText = '🎉 美味饭菜装盘完成！太棒了！'
        }
        // 重置游戏
        resetBtn.onclick = () => {
            pot.innerHTML = ''
            plate.innerHTML = ''
            pot.classList.remove('cooking')
            tipText.innerText = '拖拽右侧食材到锅里，完成烹饪吧！'
        }
    </script>
</body>
</html>