I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest
The game address (computer) : xiguapi027. Gitee. IO/juejin / # / ju…
The game address (phone) : xiguapi027. Gitee. IO/juejin / # / ju…
Development language: React
Running platform: Chrome
Gitee address: gitee.com/xiguapi027/…
Github address: None
The game has been open source, welcome to experience, can also modify
introduce
For this article, I have had this idea since the Spring Festival of this year. However, due to lack of time, IT has been delayed until now. Before the Spring Festival I saw the first spring brother wrote who is the king of firecrackers after the article, I want to make it into a game, after all, who do not want to succeed in blowing up nuggets, and their own control?
technology
- react: 17.+
- Umijs: 3.5.20
- svg
- Animejs: 3.2.1
- Mojs: 1.3.0
- ts
Detailed configuration is shown as follows:
The rules of the game
First click on the firecracker to start the game, in the specified time, click on a certain number of firecracker, if you successfully complete, there will be digging screen crack effect. Of course, the specified time is short, you can click on the picture to increase the time.
implementation
inspiration
This game is inspired by two articles during the Spring Festival (second creation on the giant)
Who is the firecracker king 🧨? Brother Chun will take you hand in hand to blow up the nuggets!
Implement the firecracker timer with SVG
In this I thank the authors of two articles: touch fish spring brother and 027 watermelon skin
1. Make a firecracker with SVG
The SVG code is as follows:
<svg width="200" height="250" xmlns="http://www.w3.org/2000/svg" version="1.1" enable-background="new 0 0 200 200"
xml:space="preserve">
<g>
<title>Layer 1</title>
<g id="bomb">
<path id="motion-path" fill="none" d="M0,0l0,5a10,10 0 0 1-20,0a18,18 0 0 0-36,0l0,30" />
<path stroke="null" fill="#E7402E"
d=C0 "m149.17433, 213.24695, 11.83309-7.94387, 21.51372, 17.65204, 21.51372 l - 58.69101, 0 c - 9.70908, 0-17.65295, 9.68062 C0-17.65295, 21.51372 l0, 108.80346, 11.83309, 7.94387, 21.51482, 17.65295, 21.51482 l58.69101, 0 c9. 70817, 0, 17.65204, 9.68173 17.65204, 21.51482 l0, 108.80346 z"
id="svg_1" />
<path stroke="null" fill="#F4DD50"
d="M131.1467, 234.76267 c9.91474, 0, 18.02763, 8.789, 18.02763-19.531 l0, 2.806 c0, 10.741-0.41538, 19.53 0.92215, 19.53 l - 94.1517, 0 c - 0.50769, 0-0.92215, 8.789-0.92215, 19.53 l0, c0 2.806, 10.742, 8.1129, 19.531 18.02856, 19.531 l59.93981, 0 z"
id="svg_2" />
<path stroke="null" fill="#3D100B"
d="M131.48444, 237.69167 l - 59.61522, 0 c - 11.37036, 0-20.62089-10.076-20.62089, 22.461 l0, c0-2.807, 5.244, 0.0964-10.195 0.27267,-13.943c0.08814,-1.863 0.19096,-3.344 0.30756,-4.396 C0.07069,-0.637 0.14414,-1.113 0.23227,-1.498c0.56921,-2.496 2.42831, 2.622, 2.79462, 2.622 l93.64185, 0 c0. 36631, 0, 2.22541, 0.126, 2.79554, 2.622 c0.08814, 0.385, 0.16158, 0.861 0.23135, 1.498 c0.1166, 1.055, 0.21942, 2.533, 0.30664, 4.396 c0.17627, 3.748, 0.2745, 8.699, 0.2745, 13.943 l0, c - 0.00092-2.807, 12.385 22.461 20.62089, 9.25145, 22.461 l0, 0 zm - 74.41551, - 41.868 - c - 0.22126 -, 2.823-0.44068, 8.557-0.44068, 16.602 l0, c0 2.806, 9.154 6.83691, 16.603, 15.24189, 16.603 l59.6143, 0 c8. 40406, 0, 15.2428, 7.447, 15.2428-16.603 l0, 2.806 c0, 8.045-0.21942, 13.778 0.43976, 16.602 l - 89.21856, 0 l0. 00001, 0 z"
id="svg_3" />
<path stroke="null" fill="#3D100B"
d="M131.68897, 237.69167 l - 59.02419, 0 c - 11.25764, 0-20.41645-11.31481-20.41645, 25.22252 l0, 110.91463 c0, 13.90771 9.15882, 25.22252, 20.41645, 25.22252 l59.02419, 0 c11. 25764, 0, 20.41645, 11.31481, 20.41645, 25.22252 l0, c0 38.0477, 1.81581 3.29136 2.6642, 1.19348, 3.29136 s to 2.66329-1.47443-2.66329, 3.29136 l0, 38.0477 c0, 10.27946-6.76913, 18.64317 15.09169, 18.64317 l - 59.02146, 0 c - 8.32074, 0-15.09078, 8.36259-15.09078, 18.64317 l0, c0 110.91463, 10.27833, 6.76913, 18.64317 C8 (15.09078, 18.64317 l59.02419, 0. 31983, 0, 15.09078, 8.36259, 15.09078-18.64317 l0, 35.36161 c0, 1.81693, 1.19348-3.29024 2.66329, 3.29024 c1.47072, 0, 2.66329, 1.47331, 2.66329, 3.29024 l0, 35.36161-0.00182 c, 13.90771-9.16063, 25.22252 20.41736, 25.22252 z"
id="svg_4" />
<path fill="#3D100B"
d="M149.17433, 176.31867 c to 1.618, 0-2.93-1.313-2.93, 2.93 l0, c0-12.109, 1.619, 1.312, 2.93, 2.93, 2.93 s2.931, 1.311 2.931, 2.93 l0, 12.109-0.001 c, 1.618-1.313, 2.93-2.931, 2.93 z"
id="svg_5" />
<path fill="#FFFFFF"
d="M112.045, 91.86 l - 7.031, 0 c - 1.618, 0-2.93-1.312-2.93, 2.93 c0, 1.618 1.312, 2.93, 2.93-2.93 l7.031, 0 c1. 618, 0, 2.93, 1.312 1.618 1.312, 2.93, 2.93 c0, 2.93-2.93, 2.93 zm - 47.115, 32.125-1.618 c, 0-2.93-1.312-2.93, 2.93 l0, 16.062 c0, 10.473 7.107,-18.992 15.842,-18.992l12.913,0c1.618,0 2.93,1.312 2.93,2.93c0, 1.618-1.312, 2.93-2.93,2.93 L -12.912,0c-2.529,0 1.287 6.836, 4.957, 3.624-2.029 c, 2.524-3.147, 5.901-3.147, 9.509 l0, 16.063 c0, 1.616-1.311, 2.928-2.93, 2.928 z"
id="svg_6" />
<g stroke="null" id="svg_7">
<path stroke="#3D100B" id="fuse" fill="none" stroke-width="5"
d=C0 "m174.004, 43.03652 l0, 5.51568, 6.09305-6.09177, 11.03271-13.59835, 11.03271-7.51559 c, 0-13.59835, 4.93965 C0-13.59835, 11.03271, 10.96721, 10.96441, 19.85888-24.48423, 19.85888 s to 24.47908, 8.89299-24.47908, 19.85888 l0, 33.09945" />
</g>
<circle fill="#F4DD50" cx="102" cy="141.97467" r="33.982" id="svg_10" />
<rect x="120.36745" y="125.38426" transform=Matrix (0.7071 0.7071 0.7071 101.112-39.4959)"
fill="#F4DD50" width="23.614" height="23.615" id="svg_11" />
<g id="spark">
<path id="ember" transform="Scale (2.1 2.1) translate (20) 83" stroke="#F3A37C" stroke-width="1.25"
d="M - 4.5-1.5 l3, 0 l1. 5-3 l1. 5, 3 l3, 0 l - 2.5, 2.5 l1.5, 3.25 l - 3.5, - 3.5-2 l, 2 l1. 5, 3.25 l - 2.5, 2.5 z"
fill="#FFF9EE" />
<g id="sparkles" transform="scale(0)">
<g fill="#F3A37C">
<circle transform="rotate(10) translate(12 0)" cx="0" cy="0" r="2">
</circle>
<circle transform="rotate(170) translate(12 0)" cx="0" cy="0" r="2">
</circle>
<circle transform="rotate(90) translate(12 0)" cx="0" cy="0" r="2">
</circle>
<circle transform="rotate(-60) translate(13 0)" cx="0" cy="0" r="2">
</circle>
<circle transform="rotate(-120) translate(13 0)" cx="0" cy="0" r="1.75">
</circle>
</g>
</g>
</g>
<text transform="Rotate (180 105.781 146.791) matrix(1.14815 0 1.23535 89.2675 95.9221)" fill="#e7402e"
font-family="'MicrosoftYaHei'" font-size="29" id="svg_13" x="2" y="54" stroke-width="3"
font-weight="bold">blessing</text>
</g>
</g>
</svg>
Copy the codeThe effect is as follows:
2. Implement timers
In a nutshell, there are three steps:
- with
svgTechnique draw a 🧨. - with
animejsDraw lead shortening animation. - with
animejsAnimate the motion of Mars.
The implementation effect is as follows, specific implementation can refer toImplement the firecracker timer with SVG
3. The firecracker exploded and crushed the nuggets
In a nutshell, there are three steps:
- with
divMake an explosion flash (principle mask goes from small to large to small). - with
Delaunay triangulationMake cracks. - with
canvasLet the fragments fall far.
Specific implementation can refer toWho is the firecracker king 🧨? Brother Chun will take you hand in hand to blow up the nuggets!The effect is shown below:
4. Rules of the game –firecrackersClick and run
The clickfirecrackersAfter that,firecrackersWill run, the effect is as follows:
firecrackersAnd then I give it a random place, and I useanimejsIs to implement running animation. The code is as follows:
anime({
targets: '.spark'.left: Math.ceil(document.body.clientWidth * 0.9 * Math.random()) - 50.top: Math.ceil(document.body.clientHeight * 0.9 * Math.random()) - 130.scale: 0.5.duration: 200.easing: 'linear'});Copy the code5. Rules of the game –firecrackersClick and get feedback
Because clicking was too monotonous, I added itfirecrackersClick on the feedback, is usedmojsTo achieve the star flash after clicking, the real effect is as follows:
new mojs.Burst({
// Burst range {from size: to size}
radius: { 0: 150 },
// Animate the mounted parent element, if not default mounted to
parent: '.spark'.// Animation delay bezier curve function
easing: mojs.easing.bezier(0.1.1.0.3.1),
// Animation delay time
duration: 1500.// The waiting time before the animation moves (150ms is generally set here to reduce the possible lag of low-end models)
delay: 300.// Diffuse particle configuration
children: {
duration: 750.// Particle size transform {from size: to size}
// rand(from, to) the rand function can help us randomly calculate the value of an interval
radius: { 0: `rand(5, 75)` },
// Shape selection, here we select "circle"
shape: 'circle'.// Particle optional fill color
fill: [
'#1abc9c'.'#2ecc71'.'#00cec9'.'#3498db'.'#9b59b6'.'#fdcb6e'.'#f1c40f'.'#e67e22'.'#e74c3c'.'#e84393',]},/ / transparency
opacity: 0.6.// The number of particles generated
count: 20,
}).play();
Copy the code6. Game Rules – Added ICON(Captain, Superior Arc, Troy)
In order to increase the fun of the game, I specially invited three gold diggers to join the game, which is actually the wechat profile picture obtained in the wechat group (PS: HOPE the big guys don’t mind).
// dom
<div className="czIcon icon" ref={czIconRef} onClick={onClickCZ}></div>
<div className="yhIcon icon" ref={yhIcon} onClick={onClickYH}></div>
<div className="tonyIcon icon" ref={tonyIcon} onClick={onClickTony}></div>
// css
.icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-repeat: no-repeat;
background-size: 100% 100%;
position: fixed;
cursor: pointer;
}
.czIcon {
background-image: url('/imgs/cz.jpg');
left: 20px;
top: -120px;
}
.yhIcon {
background-image: url('/imgs/yh.jpg');
left: 120px;
top: -220px;
}
.tonyIcon {
background-image: url('/imgs/tony.jpg');
left: 20px;
top: -220px;
}
Copy the code7. Rules of the game – click ICON(avatar) to extend the time
The idea is to control the progress of the anime timeline and set the timer back. There is a pit where the timer needs to be paused, and the code is as follows:
/ / to suspend
animation.pause();
// Time goes backwards
animation.seek(animation.currentTime - time);
// Start the timer
animation.play();
Copy the code6. Rules of the game — Consequences of the game
- No valid number of bombs are clicked within time (the game fails).
O praise
Thank you for the last word
- If you have different views or questions, please leave them in the comments below.
- If this article was helpful to you, or if you agree with it, please give it a thumbs up and support!
