当前位置：首页 > 资讯 > 系统环境

课堂抽奖神器诞生！一个指令让DeepSeek造出会跳舞的骰子

时间：2025-11-19 19:34 作者：来源：阅读：0
扫一扫，手机访问

摘要：「救命！最近忙到飞起，连写稿的时间都被压缩了！」就在今天，一位老师突然来找菲菲求助——想要一个能3D旋转的骰子程序，要求骰子能随机停在任意一面。菲菲嘴角一扬：“这个简单，用DeepSeek分分钟搞定！”#deepseek##课堂抽奖##3D旋转骰子说干就干，菲菲立刻对DeepSeek下达指令：「编写HTML代码，实现：背景用back.jpg 中间放置彩色3D骰子，六面数字1-6，初始斜向展示

「救命！最近忙到飞起，连写稿的时间都被压缩了！」

就在今天，一位老师突然来找菲菲求助——想要一个能3D旋转的骰子程序，要求骰子能随机停在任意一面。

菲菲嘴角一扬：“这个简单，用DeepSeek分分钟搞定！”#deepseek##课堂抽奖##3D旋转骰子

说干就干，菲菲立刻对DeepSeek下达指令：

「编写HTML代码，实现：

背景用back.jpg

中间放置彩色3D骰子，六面数字1-6，初始斜向展示

开始按钮触发旋转，停止按钮随机定格任意面

旋转方向：右下→左上，配个轻松MP3背景音」

你猜怎么着？DeepSeek秒回代码！保存→运行→一次性成功！

课堂抽奖神器诞生！一个指令让DeepSeek造出会跳舞的骰子

彩色3D骰子，六面数字

老师看到效果眼睛都亮了：“我准备在课堂上用它随机抽小组上台表演！”

菲菲直接竖起大拇指：“这个创意太棒了！”

下面是完整的代码，老师们可以直接复制运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D旋转骰子（定向旋转版）</title>
    <style>
        /* 基础样式设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            perspective: 1000px; /* 创建3D透视效果 */
            overflow: hidden;
        }
        
        /* 背景图片设置 */
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('back.jpg');
            background-size: cover;
            background-position: center;
            filter: blur(3px); /* 轻微模糊背景增强前景对比度 */
            z-index: -1;
        }
        
        /* 骰子容器样式 */
        .dice-container {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d; /* 保持3D空间 */
            transition: transform 0.5s ease;
            margin-bottom: 50px;
        }
        
        /* 骰子面通用样式 */
        .dice-face {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 2px solid #333;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
            font-size: 70px;
            font-weight: bold;
            color: white;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }
        
        /* 设置骰子各面位置和颜色 */
        .front  { transform: translateZ(100px); background-color: #e74c3c; }
        .back   { transform: rotateY(180deg) translateZ(100px); background-color: #2ecc71; }
        .right  { transform: rotateY(90deg) translateZ(100px); background-color: #3498db; }
        .left   { transform: rotateY(-90deg) translateZ(100px); background-color: #f39c12; }
        .top    { transform: rotateX(90deg) translateZ(100px); background-color: #9b59b6; }
        .bottom { transform: rotateX(-90deg) translateZ(100px); background-color: #1abc9c; }
        
        /* 按钮容器样式 */
        .control-buttons {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }
        
        /* 按钮样式 */
        button {
            padding: 12px 28px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        #start-btn {
            background-color: #27ae60;
            color: white;
        }
        
        #stop-btn {
            background-color: #e74c3c;
            color: white;
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        button:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        /* 初始斜向状态 */
        .initial-position {
            transform: rotateX(30deg) rotateY(30deg);
        }
    </style>
</head>
<body>
    <!-- 背景图片容器 -->
    <div class="background"></div>
    
    <!-- 骰子容器 -->
    <div class="dice-container initial-position" id="dice">
        <div class="dice-face front">1</div>
        <div class="dice-face back">2</div>
        <div class="dice-face right">3</div>
        <div class="dice-face left">4</div>
        <div class="dice-face top">5</div>
        <div class="dice-face bottom">6</div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
        <button id="start-btn">开始</button>
        <button id="stop-btn" disabled>停止</button>
    </div>
    
    <!-- 背景音乐 -->
    <audio id="bg-music" loop>
        <source src="relax.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>
    
    <script>
        // 获取DOM元素
        const dice = document.getElementById('dice');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const bgMusic = document.getElementById('bg-music');
        
        // 旋转状态变量
        let isRotating = false;
        let rotationInterval;
        let xRotation = 30; // 初始X轴旋转角度（继承初始斜向状态）
        let yRotation = 30; // 初始Y轴旋转角度（继承初始斜向状态）
        
        // 开始旋转功能（修改为定向旋转）
        startBtn.addEventListener('click', () => {
            if (!isRotating) {
                isRotating = true;
                startBtn.disabled = true;
                stopBtn.disabled = false;
                
                // 播放背景音乐
                bgMusic.play().catch(error => {
                    console.log("音乐播放失败:", error);
                    alert("自动播放音乐被浏览器阻止，请点击页面后重试。");
                });
                
                // 设置定向旋转动画（从右下向左上）
                rotationInterval = setInterval(() => {
                    // 核心修改：X轴递增（向上旋转），Y轴递减（向左旋转）
                    // 形成从右下向左上的对角线旋转轨迹
                    xRotation += 5;  // X轴每次增加5度（向上翻滚）
                    yRotation -= 5;  // Y轴每次减少5度（向左翻滚）
                    
                    // 保持角度在0-360度范围内，避免数值溢出
                    xRotation %= 360;
                    yRotation %= 360;
                    
                    // 应用旋转变换
                    dice.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
                }, 80); // 每80ms更新一次旋转角度
            }
        });
        
        // 停止旋转功能（保持不变）
        stopBtn.addEventListener('click', () => {
            if (isRotating) {
                isRotating = false;
                startBtn.disabled = false;
                stopBtn.disabled = true;
                
                // 停止背景音乐
                bgMusic.pause();
                
                // 清除旋转间隔
                clearInterval(rotationInterval);
                
                // 随机停止在一个面上
                const faces = [
                    {x: 0, y: 0},      // 前面 (1)
                    {x: 0, y: 180},    // 后面 (2)
                    {x: 0, y: 90},     // 右面 (3)
                    {x: 0, y: -90},    // 左面 (4)
                    {x: 90, y: 0},     // 上面 (5)
                    {x: -90, y: 0}     // 下面 (6)
                ];
                
                // 随机选择一个面
                const randomFace = faces[Math.floor(Math.random() * faces.length)];
                dice.style.transform = `rotateX(${randomFace.x}deg) rotateY(${randomFace.y}deg)`;
                
                // 更新当前旋转角度（下次开始时延续此状态）
                xRotation = randomFace.x;
                yRotation = randomFace.y;
            }
        });
        
        // 处理浏览器自动播放限制
        document.addEventListener('click', () => {
            if (isRotating && bgMusic.paused) {
                bgMusic.play();
            }
        }, { once: true });
    </script>
</body>
</html>

灵光一闪，菲菲又想到进阶玩法——把数字换成图片！美术课展示学生作品时，用这个3D旋转随机抽选讲解，课堂效果直接拉满！

于是再次召唤DeepSeek：

「把骰子六面改成t1.jpg到t6.jpg六张图片，其他照旧」

代码秒变！效果惊艳！

课堂抽奖神器诞生！一个指令让DeepSeek造出会跳舞的骰子

3D旋转骰子-6个面是图片

不得不说，用DeepSeek开发教学小工具真的太丝滑了！老师们快来试试吧！文末直接复制代码，立马就能用到你的课堂上！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D图片骰子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            perspective: 1000px;
            overflow: hidden;
        }
        
        .background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('back.jpg');
            background-size: cover;
            background-position: center;
            filter: blur(3px);
            z-index: -1;
        }
        
        .dice-container {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.5s ease;
            margin-bottom: 50px;
        }
        
        .dice-face {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 2px solid #333;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            overflow: hidden; /* 确保图片不超出骰子面 */
        }
        
        /* 移除背景色，添加图片样式 */
        .dice-face img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片比例并填满容器 */
        }
        
        /* 骰子各面位置（保持不变） */
        .front  { transform: translateZ(100px); }
        .back   { transform: rotateY(180deg) translateZ(100px); }
        .right  { transform: rotateY(90deg) translateZ(100px); }
        .left   { transform: rotateY(-90deg) translateZ(100px); }
        .top    { transform: rotateX(90deg) translateZ(100px); }
        .bottom { transform: rotateX(-90deg) translateZ(100px); }
        
        .control-buttons {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }
        
        button {
            padding: 12px 28px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        #start-btn {
            background-color: #27ae60;
            color: white;
        }
        
        #stop-btn {
            background-color: #e74c3c;
            color: white;
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        button:hover:not(:disabled) {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .initial-position {
            transform: rotateX(30deg) rotateY(30deg);
        }
    </style>
</head>
<body>
    <div class="background"></div>
    
    <!-- 骰子容器（替换数字为图片） -->
    <div class="dice-container initial-position" id="dice">
        <div class="dice-face front"><img src="t1.png" alt="面1"></div>
        <div class="dice-face back"><img src="t2.png" alt="面2"></div>
        <div class="dice-face right"><img src="t3.png" alt="面3"></div>
        <div class="dice-face left"><img src="t4.png" alt="面4"></div>
        <div class="dice-face top"><img src="t5.png" alt="面5"></div>
        <div class="dice-face bottom"><img src="t6.png" alt="面6"></div>
    </div>
    
    <div class="control-buttons">
        <button id="start-btn">开始</button>
        <button id="stop-btn" disabled>停止</button>
    </div>
    
    <audio id="bg-music" loop>
        <source src="relax.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放
    </audio>
    
    <script>
        // JavaScript部分完全保持不变
        const dice = document.getElementById('dice');
        const startBtn = document.getElementById('start-btn');
        const stopBtn = document.getElementById('stop-btn');
        const bgMusic = document.getElementById('bg-music');
        
        let isRotating = false;
        let rotationInterval;
        let xRotation = 30;
        let yRotation = 30;
        
        startBtn.addEventListener('click', () => {
            if (!isRotating) {
                isRotating = true;
                startBtn.disabled = true;
                stopBtn.disabled = false;
                
                bgMusic.play().catch(error => {
                    console.log("音乐播放失败:", error);
                    alert("自动播放音乐被浏览器阻止，请点击页面后重试。");
                });
                
                rotationInterval = setInterval(() => {
                    xRotation += 5;
                    yRotation -= 5;
                    xRotation %= 360;
                    yRotation %= 360;
                    dice.style.transform = `rotateX(${xRotation}deg) rotateY(${yRotation}deg)`;
                }, 80);
            }
        });
        
        stopBtn.addEventListener('click', () => {
            if (isRotating) {
                isRotating = false;
                startBtn.disabled = false;
                stopBtn.disabled = true;
                bgMusic.pause();
                clearInterval(rotationInterval);
                
                const faces = [
                    {x: 0, y: 0},      // front (t1.jpg)
                    {x: 0, y: 180},    // back (t2.jpg)
                    {x: 0, y: 90},     // right (t3.jpg)
                    {x: 0, y: -90},    // left (t4.jpg)
                    {x: 90, y: 0},     // top (t5.jpg)
                    {x: -90, y: 0}     // bottom (t6.jpg)
                ];
                
                const randomFace = faces[Math.floor(Math.random() * faces.length)];
                dice.style.transform = `rotateX(${randomFace.x}deg) rotateY(${randomFace.y}deg)`;
                xRotation = randomFace.x;
                yRotation = randomFace.y;
            }
        });
        
        document.addEventListener('click', () => {
            if (isRotating && bgMusic.paused) {
                bgMusic.play();
            }
        }, { once: true });
    </script>
</body>
</html>

直接拿走不谢！老师们如果有什么好的创意想法，可以在下方评论区留言哦！

全部评论(0)

上一篇：go同步工具：sync.WaitGroup/sync.Mutex
下一篇：点击气球小游戏

真快激活码

店铺

推荐商品