迫于无聊,写了个魔方.

rabbbit

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

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

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

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

还可以加点什么功能呢?

预览
 Github 地址

28 条回复 • 2020-06-18 17:23:08 +08:00

Jackeriss1 天前

1. 自动打乱
2. 自动解

kop19891 天前

拖动某层的时候有时候魔方那层会出现和预期不匹配的惯性（ pc chrome 浏览器鼠标操作）。大概描述就是松手后反而会在自己转几圈。

coderluan1 天前

支持自定义图片? 我感觉除非你贴图换成小黄图, 否则应该没人会想这样玩魔方的.

Lin09361 天前

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

ashong1 天前

不错，应该加上步骤口诀，以便新手练习 👍

meisen1 天前

@Lin0936 #4 这个难度刚刚好，楼主的太简单。

rabbbit1 天前

@kop1989
是不是鼠标移动到视口外面了,可以录个 Gif 复现一下过程吗?

rabbbit1 天前

@coderluan
这个可以有,把颜色换成随机的贴图.

di10121 天前

太难用了

kop19891 天前

@rabbbit #7 找到 bug 的触发点了，转 355 度以上必出。

kop19891 天前

@rabbbit #7 355 度到 360 度之间，然后松手，魔方会反转

rabbbit1 天前

@di1012
能说说哪里不好用吗,是操作起来不舒服吗?

rabbbit1 天前

@kop1989
这种 bug 都能找出来...厉害

kop19891 天前

@rabbbit #13 只能说明上班划水划的走心😄

rabbbit1 天前

@Lin0936
没加判断, 出 bug 变空白魔方了 😂

imdong1 天前

稍稍改了一下，

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

emm 这个你们绝对会拼，无法复原的来打我...

imdong1 天前

https://aaron-bird.github.io/rubiks-cube/?fd=RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR 应该是这个

rabbbit1 天前

@imdong
呃,看来得加个 URL 颜色校验...

aguesuka20 小时 42 分钟前 via Android

可以加一个《魔方和数学建模》

winmer13 小时 7 分钟前 via Android

那个全红的状态任意一行往一个方向连续转 6 次之后，另选一行转一圈就会多出两格白色
正面中间竖行直接向下转一圈之后下方横行逆时针转一圈也会出现白格
怀疑计算公式有问题

winmer13 小时 2 分钟前 via Android

不对正面顶端横行一转背面就会出现白块
我复原不了了我要打楼主(滑稽
当然有可能是本来计算六色的公式直接拿来套双色忘了改参数就是了

linxiaojialin10 小时 58 分钟前

666，给 LZ 加个星。有二、四、五阶版本吗？

86299 小时 54 分钟前

@imdong 绿色少一个正中的

xcatliu8 小时 50 分钟前

实现上帝之数的解法

rabbbit8 小时 32 分钟前

@winmer

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

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

其实写的时候根本就没考虑到有人会手动改 URL ...
所以就各种 Bug 了. 😂

shuax8 小时 1 分钟前

加上光追效果

rabbbit5 小时 15 分钟前

@shuax
试了下光追,不太可行,手机带不动.

rockjike2 小时 54 分钟前

你这个配置我试了一下 4s 多, 没有办法减小,
把 ForkTsCheckerWebpackPlugin 去掉能达到 2s,
你的 1s 秒我没遇见过