首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
rabbbit
V2EX  ›  分享创造

迫于无聊,写了个魔方.

  •  5
     
  •   rabbbit · 26 天前 · 5706 次点击

    找不着工作,闲的无聊找事干.于是拿 Three.js 写了个魔方.

    手势部分意外的比想象中难搞,写游戏是真难啊.

    支持 PC/移动端,可用鼠标 /手指头操作.
    按住空白区域移动可旋转整体.
    按住魔方移动可旋转对应的层.

    魔方的颜色会同步到 URL 里.如果想分享当前的颜色状态给别人的话, 直接拷贝 URL 即可.

    还可以加点什么功能呢?

    预览
    Github 地址

    第 1 条附言  ·  25 天前
    还有个问题,为啥 Webpack + TypeScript 有时候编译很快(1 秒以下),有时侯需要花好几秒(5 ~ 20).
    可以给点优化建议吗?或者给个配置参考也可以.

    配置地址:
    https://github.com/Aaron-Bird/rubiks-cube/blob/master/webpack.config.js
    第 2 条附言  ·  21 天前
    第 3 条附言  ·  11 天前
    增加打乱 复原功能
    40 条回复    2020-07-13 14:04:36 +08:00
    Jackeriss
        1
    Jackeriss   26 天前   ❤️ 1
    1. 自动打乱
    2. 自动解
    kop1989
        2
    kop1989   26 天前   ❤️ 2
    拖动某层的时候有时候魔方那层会出现和预期不匹配的惯性( pc chrome 浏览器 鼠标操作)。大概描述就是松手后反而会在自己转几圈。
    coderluan
        3
    coderluan   26 天前   ❤️ 1
    支持自定义图片? 我感觉除非你贴图换成小黄图, 否则应该没人会想这样玩魔方的.
    ashong
        5
    ashong   26 天前   ❤️ 2
    不错, 应该加上 步骤口诀, 以便新手练习 👍
    meisen
        6
    meisen   26 天前   ❤️ 3
    @Lin0936 #4 这个难度刚刚好,楼主的太简单。
    rabbbit
        7
    rabbbit   26 天前
    @kop1989
    是不是鼠标移动到视口外面了,可以录个 Gif 复现一下过程吗?
    rabbbit
        8
    rabbbit   26 天前
    @coderluan
    这个可以有,把颜色换成随机的贴图.
    di1012
        9
    di1012   26 天前
    太难用了
    kop1989
        10
    kop1989   26 天前   ❤️ 2
    @rabbbit #7 找到 bug 的触发点了,转 355 度以上必出。
    kop1989
        11
    kop1989   26 天前
    @rabbbit #7 355 度到 360 度之间,然后松手,魔方会反转
    rabbbit
        12
    rabbbit   26 天前
    @di1012
    能说说哪里不好用吗,是操作起来不舒服吗?
    rabbbit
        13
    rabbbit   26 天前
    @kop1989
    这种 bug 都能找出来...厉害
    kop1989
        14
    kop1989   26 天前
    @rabbbit #13 只能说明上班划水划的走心😄
    rabbbit
        15
    rabbbit   26 天前
    @Lin0936
    没加判断, 出 bug 变空白魔方了 😂
    imdong
        16
    imdong   26 天前   ❤️ 1
    稍稍改了一下,

    https://aaron-bird.github.io/rubiks-cube/?fd=BURDRBLLDLRFLRDLRDBBFBRFDDFRRUURFFDLRLURRURLBDFUBRUBFU

    emm 这个 你们绝对会拼,无法复原的来打我...
    rabbbit
        18
    rabbbit   26 天前
    @imdong
    呃,看来得加个 URL 颜色校验...
    aguesuka
        19
    aguesuka   25 天前 via Android   ❤️ 1
    可以加一个《魔方和数学建模》
    winmer
        20
    winmer   25 天前 via Android   ❤️ 1
    那个全红的状态任意一行往一个方向连续转 6 次之后,另选一行转一圈就会多出两格白色
    正面中间竖行直接向下转一圈之后 下方横行逆时针转一圈也会出现白格
    怀疑计算公式有问题
    winmer
        21
    winmer   25 天前 via Android
    不对 正面顶端横行一转背面就会出现白块
    我复原不了了 我要打楼主(滑稽
    当然有可能是本来计算六色的公式直接拿来套双色忘了改参数就是了
    linxiaojialin
        22
    linxiaojialin   25 天前   ❤️ 1
    666,给 LZ 加个星。有二、四、五阶版本吗?
    8629
        23
    8629   25 天前   ❤️ 1
    @imdong 绿色少一个正中的
    xcatliu
        24
    xcatliu   25 天前   ❤️ 1
    实现上帝之数的解法
    rabbbit
        25
    rabbbit   25 天前
    @winmer

    上面那个全红的少两个颜色, 下面这样就不会有白的了.

    https://aaron-bird.github.io/rubiks-cube/?fd=RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR

    其实写的时候根本就没考虑到有人会手动改 URL ...
    所以就各种 Bug 了. 😂
    shuax
        26
    shuax   25 天前   ❤️ 1
    加上光追效果
    rabbbit
        27
    rabbbit   25 天前
    @shuax
    试了下光追,不太可行,手机带不动.
    rockjike
        28
    rockjike   25 天前   ❤️ 2
    你这个配置我试了一下 4s 多, 没有办法减小,
    把 ForkTsCheckerWebpackPlugin 去掉能达到 2s,
    你的 1s 秒我没遇见过
    rabbbit
        29
    rabbbit   24 天前
    我这偶尔改动少的时候, 速度很快.能到 1s.
    charten
        30
    charten   24 天前
    万向节死锁警告
    DEVN
        31
    DEVN   14 天前
    牛逼 哈哈
    chenz197
        32
    chenz197   11 天前
    niub
    gaigechunfeng
        33
    gaigechunfeng   11 天前
    @rockjike webpack 大神
    gaigechunfeng
        34
    gaigechunfeng   11 天前
    楼主写的不错。我还没有用过 three.js ,看来要学习一下了。
    fkue587
        35
    fkue587   11 天前
    不是国内服务器??加载太慢了.
    rabbbit
        36
    rabbbit   10 天前
    @fkue587 预览也在 Github 上,估计被干扰了吧.
    t298
        37
    t298   10 天前
    不能 360 旋转
    rabbbit
        38
    rabbbit   10 天前
    @t298
    可以详细描述下不能旋转的问题吗?
    如果是指相机上下方向不能 360 度旋转的话, 这个是相机控制插件的限制.
    fuwu1245
        39
    fuwu1245   10 天前
    收藏一波 挺好玩的
    huoxingren
        40
    huoxingren   6 小时 14 分钟前
    找到工作了嘛,我有些产品上的想法,不知道你有没有兴趣
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3045 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:18 · PVG 20:18 · LAX 05:18 · JFK 08:18
    ♥ Do have faith in what you're doing.