The sheep have become a sheep, how to realize it by yourself (and the introduction of the “Nuggets on the Code” programming challenge)

Original link: http://www.ruanyifeng.com/blog/2022/10/sheep-n-sheep.html

[Poster] Rare Earth Nuggets are holding the “First Programming Challenge” for the whole country, which is a good opportunity to showcase their works. See the text for details.

The small game “Sheep and Sheep” has become 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 placed in the “code on the Nuggets” code.juejin.cn , which 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 blocks of the same suit are connected together to eliminate, eliminate all the blocks, 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 got a sheep” and returned nearly 200 results, all kinds of code.

They implemented it better than me, so I chose a repository chenxch/xlegex and used his code to demonstrate it.

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 : The state of the card, whether it has been clicked or dismissed.
• 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 of the card from the upper left corner of the stacking area.

Students who are familiar with CSS may have thought of the zIndex , top , left attribute names in it. 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 to the author’s own article and try Demo .

However, his implementation is not the simplest, here is an even simpler one .

The page source code for this implementation has only one script and 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 attract others and show you that simple HTML + CSS + JS code can make a small game with good effect. Below are some other examples.

“Platform Jump”

“Blocks”

“Push Box”

You can go to the “code on the Nuggets” platform to see their codes and effects.

If you have a piece like this, or want to try it out, now is a great opportunity. “Nuggets on Code” is holding the first national programming challenge , which is a rare front-end programming competition in China.

[Introduction to “Nuggets on Code”] 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 primarily geared towards front-end development, but also supports more than 20 back-end languages .

If you have your own works (web games, web animations, UI special effects, etc.), but are unable to show and promote them to the community, then don’t miss this opportunity to compete, please read the 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: Game on the Code: Based on the code on the Nuggets, a creative web interactive mini-game has been developed. The specific game content and form are not limited.

Question 2: Creativity on the code : You can use any third-party open source library/framework, and the presentation forms include but are not limited to visual creative motion effects, animations, UI effects, etc., see Demo .

Question 3: Code in Chinese : You need to use the classical Chinese programming ability provided by Code Nuggets, and use classical Chinese as the programming language to realize the work. The style and form of the work presented are not limited, see Demo .

Question 4: 1024 on the yard: Realize the effect of “rare earth nuggets” or “1024” on the yard nuggets, see Demo .

Note that entries must be original works. See the discussion forum for more inspiration.

2. Prizes

(1) Award-winning students : competition bonus, honorary certificate, Nuggets annual membership, and blind boxes around Nuggets.

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.

(2) Contestants who have passed the review : obtain the monthly membership of the Rare Earth Nuggets and the latest peripheral blind boxes.

(3) All students who register on the official website : Participate in the lottery and have the opportunity to win prizes such as iPhone 14 Pro, Apple Watch 8, Pico4, Airpods Pro 2, Nuggets blind box, etc.

3. Activity time

October 12 – November 30

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

Visit the official website of the event , or scan the QR code below for details and to register.

(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

On October 31st (Monday) at 7:00 pm , the Nuggets will also launch a live broadcast of the “Code on the Nuggets Programming Challenge Special Round Table” event, inviting four guests with different career choices to talk about their own “Code on the Dig” The way of gold.

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.

Save the live link , or click here to enter the live room.

(Finish)

This article is reproduced from: http://www.ruanyifeng.com/blog/2022/10/sheep-n-sheep.html
This site is for inclusion only, and the copyright belongs to the original author.