Like attention is not lost, wechat search “front ear east”, can add private wechat chat technology

Tired of rolling? Instead of memorizing, check out this interesting open source project I recently discovered on GitHub.

Here’s a motion picture to give you a feel for yourself.

That’s right, this is a CheckBox rendered motion picture that not only can draw static and motion pictures, but can also render pictures, videos, and even make mini games with it.

The GitHub address for this project is Checkboxland and the demo address is checkboxlandDemo

The author’s motivation for doing this project

Before going into the use of this project, I would like to talk about the author’s background and motivation for doing this project. The original article is here (my background and motivation for doing checkboxland).

The following is a partial translation summary of the original text:

“

I organized SparkNight’s HackNight in November 2019, and just before starting the HackNight, my friends and I discussed a nearby sign:

So I realized I had the perfect Hack Night project: CheckBox on AN HTML page to do something similar. After 3 hours, my friend and I implemented the digital clock implemented by CheckBox:

This is certainly an interesting project, but I won’t let it stop there. In theory, we could use CheckBox to render everything, right?

In some ways, the digital clock I built was unwieldy because you had so many checkboxes to control and it was difficult to display them correctly and consistently across different browsers.

I’ve been thinking about all the animations that could happen, and I wish I had a JavaScript library to help me do it easily.

Soon I had a chance to spend a week in Recurse Center, so I decided to build the library here. Everyone else here was doing crazy stuff, like neural networks or reverse engineering, and I was just playing with HTML CheckBox🙃

Anyway, I got the project done, and it’s the checkBoxland that you see here, which you can see in a quick demo.

Elon Musk once said: “One of the biggest traps for smart engineers is optimizing a thing that shouldn’t exist.” It’s true that Checkboxland is the sort of thing Elon Musk would say “shouldn’t exist,” but it’s bubbling out of my brain to do it.

In the future I hope I can spend more time pursuing more worthwhile things, but it’s nice to do something weird and fun once in a while. The world still needs weird and fun things.

“

After reading the author’s talk about it as the starting point and background of checkboxland, I really envy them for having a lot of free time to realize their creative ideas.

Let’s do something with Checkboxland

Now that we’ve covered the background of CheckBoxland, it’s time to do something with it. Before we do something, let’s talk about the basics of checkBoxland.

Basic usage

NPM installation is used

npm install checkboxland
Copy the code

Script tag usage

Draw a heart

Draw a simple heart

As you can see from this simple example, using CheckBoxland to draw graphics is mainly as follows:

  1. Create an instance of Checkboxland, passing in the following arguments:
    • Dimensions: Draw the size of the area
    • Selector: The instance mounts the DOM
  2. In this example, setData, we pass in a two-dimensional array, where 0 and 1 indicate whether the checkbox is checked

Implement horizontal scrolling characters

We first use it to draw a static graph, such as draw the words “front ear east”, before we already know that draw characters as long as call setData to change the value of the data passed on the line, so draw the static graph code is:

It looks like this:

Doesn’t it feel good? Now let’s give it a horizontal scrolling effect

Checkboxland supports a marquee method for horizontal scrolling. Check checkboxland. Marquee

Draw the effect as follows:

Realize the snake game

Full project address: github.com/erdong-fe/c… Welcome star, free whoring

For the realization of a fully functional project, no matter large or small projects are unlikely to be written in one go, they are all written in parts and then combined into a project.

So we need to do a good job of logical decoupling. That is, we need to break up a lot of functionality into methods and classes, and we need to think about what each method is responsible for, what the return value is, and what the input parameter is.

So for the snake this small game, let’s see what it wants to achieve:

  1. Draw the game area and snake
  2. Let the snake move on
  3. Let the snake change direction in response to the keyboard control
  4. Let the snake eat apple length plus one, and have a new apple generated in the game area
  5. The game fails when snake touches the edge of the game area

We can simply follow the above function split, step by step to achieve the whole game.

Draw the game area and snake

First we draw the game area and the static snake, which is the initialization of the entire game.

Start with the checkboxland basics we talked about earlier. What methods and variables are needed to draw the game area and snake?

We need a checkboxland instance and a snake variable to record the current state of the game area and the snake’s location, respectively. The checkboxland instance is very simple and follows the basic usage described above:

We need an array to store the location information of the snake:

Now that we have the game area and snake data, we need to draw them, so we abstracted a _draw method to draw:

The initgame method is responsible for initializing the game area and snake state information. The _draw method is responsible for drawing snake to the game area. The complete code is as follows:

The effect is as follows:

Let the snake move on

Now let’s get the snake moving.

Let the snake forward, nothing more than to do two things:

  1. Modified gluttonous Snake location information
  2. Draw out the modified location information

First of all, let’s change the location of Snake, default it to move to the right, so we just need to increase the x value of each snake node by 1

So, the code looks like this:

Next we will draw the latest snake position information. We will move the _draw method inside the _moveSnake method. This will ensure that the latest snake will be drawn every time the snake state changes:

There is still a step to make the snake really move, which is to keep updating its position information at a certain speed and constantly drawing the latest snake, so we use setInterval to achieve this.

Since this is what happens when the game is initialized, this code can be placed inside the _initGame method:

The complete code is as follows:

The effect is as follows:

Let the snake change direction

Before we implemented the snake forward, now we implement the snake according to the keyboard input to change the direction of the forward.

First we need to define the four directions of the enumeration:

Add a new variable direction to identify the latest direction, and bind the _onChangeDirection method to the body element to change the direction variable in response to keyboard input. Still in the current direction of progress:

And finally, we have to get the snake to change direction.

The act of changing direction is divided into two steps:

  1. Step 1: For the nodes that have passed the head of the snake, they can move one unit forward in the current direction
  2. Step 2: For the snakehead node, adjust its coordinates according to the direction. For example, the current direction is to the right, and the new direction is to the down, then the y coordinate of the snakehead node will be increased by one, as shown in the figure:

So we modify _moveSnake as follows:

The complete code is as follows:

The renderings are as follows:

Let the snake get the apple

In this section, we realize the function of letting the snake eat the apple.

We need to implement two pieces of logic

  1. After updating the location of the snake, determine whether it ate the apple. If eaten, update the snake’s length and regenerate the apple
  2. A method to generate the location of an apple

The logic to determine whether to eat an apple is very simple. It only needs to see whether the coordinates of the snake head node coincide with the coordinates of the apple.

When the snake eats the apple, all we need to do is push a new node at the end of the snake, as shown below:

_moveSnake = movesnake = movesnake = movesnake

Add a variable to save the location information of the apple, and generate a random number within the scope of the drawing area, but pay attention to the generated apple can not just be covered by the Snake node, the code is as follows:

After each apple is eaten, call the _generateApple method to regenerate the apple. The code is as follows:

The overall code is as follows:

The effect is as follows:

Game area edge collision detection

Most of snake’s features have been completed, but there is one small feature left that will cause the game to fail when Snake is near the edge of the game area.

We’re going to add a _isSnakeCrossBorder method to determine if snake is beyond the boundaries of the game area:

Then modify the _moveSnake method to add a boundary judgment method, and restart the game after hitting the boundary:

Overall code:

The effect is as follows:

At the end

This article mainly introduces checkboxland and its usage, and finally uses a snake small game to further familiar with checkboxland usage and JavaScript programming.

I will bring more articles and tutorials in this way in the future, welcome to follow up.