This topic should be put in the game area, but it also has a little technical component, so I will leave it here
Recently, my friend Amway made a game called "Yuan Shen". It has been out for a long time. Anyway, I took the time to experience it (take someone else's trumpet). There are not many comments on the game, but I am curious about the process of drawing cards. , after reading station B's speculation on the probability of Yuanshen's card draw, we got a relatively accurate data:
Gold 1.6% Purple 13.0%
The same is true for the up pool, but there is a bottom-guarantee mechanism, so I won't expand it.
Based on the above statistics, I want to try to make a grassroots version of the card drawer myself. I took a look at github first, and sure enough, a big guy wrote it, here:
I quickly forked a copy, and laughed at the pictures and video resources inside.
Then, I found out that this big guy's card drawing animation was directly used in the video. If I copied it like him, wouldn't it be meaningless at all. So I decided to rewrite the animation part. By the way, the logic of the probability part was also done by myself.
I have a little webgl foundation before, I have used three.js and d3, and after a little pondering, I will use three.js. There are many official cases, and it is easier to get started. Originally, I also wanted to use unity3D to do some cool special effects, but I was not satisfied with the result after trying it out (3D still has a threshold!), so I gave up. Then you can only use the most primitive canvas rendering to do the effect.
The final effect is as follows:
or
Although the things are very general, but the sparrow is small and complete, such as 3D animation, sky box, ten consecutive draw guarantee mechanism, etc. are basically realized, and the technology also uses lensflare halo special effects, and animation library tween.js , Friends who are interested in these two parts of knowledge can study it by themselves. I am only in the entry stage. Friends who can write more gorgeous effects can help improve this civilian version of the card drawer. The code has been uploaded to gitee (because the speed of github is a bit collapsed, so I switched to the code cloud), the address is as follows:
In particular, I want to talk about this evil skybox picture. It took a long time to find a very suitable picture. Originally, I used a picture with a higher quality and better effect, but the bandwidth of the small broken site is not strong, so I can’t put it online. Come on, here are the local screenshots:
The things are relatively rough. I tried it on the PC and mobile phones here. There are no major defects. It is the small water pipe of the website, which sometimes gets stuck and cannot be opened. Let's take a screenshot:
If you encounter a bug or the star rating of the weapon character is wrong, you can file an issue, or please ignore it
最后，good luck and enjoy it ~