Sheep got a sheep, how to achieve it by yourself (cum"Code on the Nuggets"Introduction to Programming Challenge)

The reason why this post seems so long is because over 17 people write this content for our viewers. so enjoy

[海报] Rare earth nuggets are being held nationwide“The First Coding Challenge”this is a good opportunity to showcase your own work, see the post for details.

Games“Sheep A Sheep”It has been very popular recently, and it has attracted the attention of the whole people. Douyin and Weibo have billions of views.

Its development difficulty is actually not high at all. The main game logic is in the front end, using ordinary web development technology. It is a miracle that such a simple implementation has achieved such a huge response.

This article describes how this game is implemented. Just make a simple version with HTML + CSS + JS, no backend needed at all.

The final product will be put on the “Nuggets on the Yard” code.juejin.cnwhich is a code development environment for web pages, which can share the running results, which is similar to the foreign CodePen.

For readers who don’t know it, let me briefly explain what is going on in “The Sheep Led a Sheep”.

In essence, it is a traditional “Xiao Xiaole” game (pictured below), where the squares of the same suit are connected together to eliminate, eliminate all the squares, and then pass the level.

“Sheep and Goat” draws lessons from the foreign “Mahjong” game (below) in form, and adopts stacking elimination.

The difference is that it has a slot column to store removed cards (below). As long as there are three consecutive cards of the same color in the slot column, they can be eliminated, which is the so-called “match three”.

If you think about it carefully, the core logic of web page implementation is actually only two steps.

The first step is to draw out an area on the web page, and stack all cards in this area into four layers. The card position and suit distribution of each layer can be controlled with random numbers.

In the second step, the unobstructed cards of each layer can be moved. As soon as they are clicked, they move from the card area to the slot column.

Then, the following two steps are implemented. I originally wanted to write it myself, but I did a search on GitHub for “sheep made a sheep” and returned nearly 200 results, all kinds of code.

They implemented it better and better than I did, so I picked a repository chenxch/xlegexjust use his code to demonstrate.

This repository uses vue3 + TypeScript, and the source code adds up to less than 1000 lines. The core logic is the above two points, and some key implementation details are introduced below.

First, each card is an instance object, and TypeScript types are described below.

As you can see from the above image, each card has the following attributes.

• id: Card number.
• type: Card type, cards of the same type can be eliminated.
• state: Card status, whether it has been clicked or eliminated.
• zIndex: Which layer the card is on.
• index: The card number of this layer.
• row: The row where the card is located.
• column: The column where the card is located.
• top: The vertical distance of the card from the upper left corner of the stacking area.
• left: The horizontal distance between the card and the upper left corner of the stacking area.

Students who are familiar with CSS, see the insidezIndex、top、leftThese attribute names may have been thought of, the author uses “absolute positioning + zIndex” to achieve card positioning.

The positioning logic is in the code of the card component, only a few lines.

In the above code, the red box part is the positioning logic, which sets the coordinates of each card and which layer it is in.

Note that the vertices of the card on the previous layer should fall on the center point of the card on the next layer, so that the underlying pattern can be exposed.

In the above diagram, the black square represents the card of the next layer, with its center point as the base point, and four cards can be placed on the previous layer, represented by the red box.

The final stacking effect is as shown below.

After the image is replaced, the UI is basically completed.

Finally, add a click event handler for each picture (click to move to the card slot), and the core logic of the game is almost the same.

For more detailed source code interpretation, you can refer toAuthor’s own articleand try it out Demo。

However, his implementation is not the simplest, here is anothersimpler implementation。

This is achievedpage sourceThere is only one script that doesn’t even need to be compiled. (If the “Nuggets on Code” page is a white screen, click the “Run” button in the upper right corner.)

That’s it for “Sheep and Sheep”, but this article is not over yet.

My purpose is to throw a piece of the puzzle and show it to everyoneSimple HTML + CSS + JS code, you can make a small game with good effect.Below are some other examples.

“Platform Jump”

“Blocks”

“Push Box”

everyone can go“Nuggets on the Yard”platform to see their code and effects.

If you have a piece like this, or want to try it out, now is a great opportunity. “Nuggets on the Code” is being heldThe First National Programming Challengewhich is a rare front-end programming competition in China.

[“码上掘金”介绍] An online Code Playground service for developers launched by Rare Earth Nuggets enables instant preview, demonstration and sharing of code effects without building a complex development environment.

It is similar to Codepen abroad, which seems to be the only one in China.It is mainly for front-end development, but also supports20+ backend languages。

If you have your own work (web game, web animation, UI special effects, etc.), but you cannot show and promote it to the community, then don’t miss this opportunityplease read the following introduction carefully.

As long as you participate, the platform will help promote your work and provide generous bonuses and prizes.

Code on the Nuggets Programming Challenge

1. Activity track

Question 1:code game: Based on the development and completion of a creative web interactive mini-game based on the code on the Nuggets, the specific game content and form are not limited.

Question two:code on creativity: Any third-party open source library/framework can be used, and the presentation forms include but are not limited to visual creative motion effects, animations, UI effects, etc. See Demo。

Question three:code text: You need to use the code provided by the Nuggets on the codeClassical Chinese programming abilityusing classical Chinese as the programming language to realize the work, the style and form of the work presented are not limited, see Demo。

Question Four:code 1024: To achieve “rare earth nuggets” or “1024” related effects on the yard nuggets, see Demo。

Note that entries must be original works.For more inspiration, seeforum。

2. Prizes

(one)Award-winning students: Competition bonus, honorary certificate, Nuggets annual membership, Nuggets peripheral blind box.

The winning works may become the opening page of the Nuggets website, get recommendation of resources on the site, publicity of ByteDance Work Area, etc.

The winning students have the opportunity to get byte offers.

(two)Contestants who passed the review: Get the rare earth Nuggets monthly membership, the latest peripheral blind box.

(three)All students registered on the official website: Participate in the lucky draw to have a chance to win prizes such as iPhone 14 Pro, Apple Watch 8, Pico4, Airpods Pro 2, Nuggets Blind Box, etc.

3. Activity time

October 12th – November 30th

Time:

• October 12-November 22: Sign up and submit your works.
• November 23-November 29: Selection of works.
• November 30: Awards for the competition.

4. Registration method

accessOfficial website of the eventor scan the QR code below to learn more and sign up.

(Official website registration QR code)

Sign up to participate in the lucky draw, iPhone 14 Pro, Apple Watch 8, Pico4, Airpods Pro 2, the latest blind box and other prizes are waiting for you!

If you have any questions, scan the QR code on WeChat to add the event assistant, and reply “1024” to join the competition communication group.

(The QR code of the assistant of the competition)

5. Live event

October 31st (Monday) at 7pmthe Nuggets will also launch a “Code on the Nuggets Programming Challenge Special Round Table” The event was broadcast live, and four guests with different career choices were invited to talk about their “code on the Nuggets” road.

Some of them went to Dachang, some left Dachang, some started a business, and some embarked on an academic path. Through their sharing, they hoped to give some inspiration to students who are still studying and just entering the workplace.

keepLive linkor whenClick hereto enter the live room.

(Finish)