three实现3d四川麻将人机对战代码

代码语言:html

所属分类:三维

代码描述:three实现3d四川麻将人机对战代码

代码标签: three 3d 四川 麻将 人机 对战 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Three.js 3D麻将 - 多选打牌版</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #111; font-family: 'Microsoft YaHei', sans-serif; user-select: none; }
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        
        #info-panel { position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,0.8); color: #fff; padding: 15px; border-radius: 8px; border: 1px solid #555; box-shadow: 0 4px 10px rgba(0,0,0,0.5); pointer-events: auto; }
        
        #turn-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; font-weight: bold; color: #ffeb3b; text-shadow: 2px 2px 10px #000, 0 0 20px #ff9900; opacity: 0; transition: opacity 0.3s; }
        
        #deck-count { font-size: 20px; font-weight: bold; color: #00ff88; margin-top: 10px; }
        .controls { color: #ccc; font-size: 14px; margin-top: 15px; line-height: 1.6; }
        .controls span { color: #ffeb3b; font-weight: bold; }

        /* 新增的确认出牌按钮 */
        #play-btn {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 50px;
            font-size: 24px;
            font-weight: bold;
            background-color: #00ff88;
            color: #000;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: none; /* 初始隐藏 */
            pointer-events: auto;
            box-shadow: 0 4px 15px rgba(0,255,136,0.4);
            transition: background-color 0.2s;
        }
        #play-btn:hover { background-color: #00cc6a; box-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0