Canvas typewriter game, canvas typewriter

Canvas typewriter game, canvas typewriter

Recently, I made a little research on particle imaging and decided to make a small game with it. So this simple typing game was born.

Trial address: Typewriter game is only tested in chorome. Be careful when using other browsers (especially ff). Loading Speed is slow. Please wait for 5 ~ 10 seconds. Because too many particles need to be loaded...

 

Game Overview

The game logic and code are actually very simple. h5 native APIs do not use any frameworks (in fact, they do not ).

Words are composed of particles. A random word appears in the canvas, listening to the buttons on the keyboard, and matching the letters in the word; when the entire word is matched, the particles that make up the word start flat. Until the game ends.

• For the main process of creating a canvas game, see: two Canvas games
• For details about how to convert words into appropriate particle shapes, refer to: pixel-based text images.
• For details about how to achieve the particle effect in the game (flat throwing motion), refer to: particle-based text images.

　　

Game details

Open the index page source code. We can see that the main component is 6 js files, as shown below:

Next we will analyze them one by one.

• Load. js

First, load. js. Load. js is actually very short, mainly because the game loading time is too long to play a loading animation effect. Here, I simply use text to indicate loading. if the quality of the game is demanding, excellent loading animations are also essential.

 

• Vector. js & common. js

I directly referenced my js file under github, which has a certain impact on the loading speed of the entire game.

Vector. js is a two-dimensional three-dimensional Vector class, because the vector is used in a large amount in the motion of particles; while common. js is a collection of commonly used js functions. There are not many js functions at the moment. Please add them when necessary.

 

• Temp. js

Temp. js is one of the main js files of the game. The main content is the four classes of the Game objects and their respective methods.

The structure of the game object is as follows: Collection-> Word-> Letter-> Ball. Collection is used as a scenario. The Word class is a Word in a scenario, the Letter is a Letter in a Word, and the Ball class is a particle in a Letter. I have omitted the Letter class, but later I found that letters correspond one by one and the colors change one by one, so the Letter class is indispensable.

When each frame is rendered, the four classes call the draw method and update method in sequence, which means recursion. In the final analysis, the Ball class performs draw and update.

Several key methods are explained:

• Word has a disappear method. when typing a Word in a game, the particles that make up the Word are flat. The main implementation method is to pass this change to the Ball class to change the speed and acceleration of the Ball.
• Word has a getLetters method, which is used to initialize the particles that make up the Word.
• The getbils method of the Letter class is completely pixel-based.
• The update method in the Ball class may be the most complicated. During initialization, each Ball is assigned a state value of 1. If a word is completed, the state value is changed to 2. Once the state value is 2, this means that the flat throwing starts, and the speed and acceleration change. To avoid multiple changes, change the state value to 3.

// Modify the flat throwing motion if (this. state = 2) {this. a = 10/1000*60; this. v. x = getRandomNum (-10, 10); this. state = 3 ;}

When the game ends, you can make a judgment here:

// Determine the end of the game if (this. state ==== 1 & this. pos2.y> height) {game. isOver = true; return ;}

The flat throw ends, and the lifecycle of the particle ends accordingly. You do not need to render the particle later:

// Flat throw ends, and the lifecycle of a particle ends. if (this. state ===3 & this. pos2.y> height) this. kill (id );

Ball kill method:

// When the ball performs the flat throwing motion out of the boundary, the next frame does not need to be rendered. prototype. kill = function (id) {this. father. bils. splice (id, 1 );};

 

• Data. js

A few lines of code are used to store words in an array.

A total of 50 words are hand-written by me. If any spelling is wrong, please try again. In fact, I originally wanted to write ajax to extract at least thousands of phrases and then load them. unexpectedly, the speed of new Word () is worrying, and 50 words have been stuck in that way.

for(var i = 0; i < array.length; i++)  words.push(new Word(array[i]));

The above two lines of code should be a program that occupies most of loading time, because loading 50 words is actually 50 * n balls initially, in addition, getImagedata is used to retrieve the pixel. You can see the retrieval speed.

 

• Game. js

The main logic code of the game is to set a game object. There are three main methods.

The first is the initialization init method, where a random word is initialized. In fact, this method is fine.

Next is the most important addListener method. This is the core of the entire listener. It monitors the keyboard and analyzes the buttons and corresponding words. If no matching word exists, select the word with the first letter as the key to match. If a matching word exists, the words on the key are compared with the letters on the word to be matched, if they are the same, the operation succeeds. If they are different, the player presses the wrong button. For details, refer to the source code.

Finally, the render method is related to the rendering of each frame. In addition to the required draw and update, the rendering of each frame also increases the number of words in the game scene and changes in the current score.

 

Game Summary

The introduction of this typing game is almost like this. If you are interested, refer to the source code: typewriter game.

There are still a few regrets in the production process. For example, I wanted to try require because the js files are a little dependent on each other. js is still called, and finally let me adjust the js Loading Order to solve the problem. Everything will be checked only when necessary... I still want to try to make a cool loading animation, but I still cannot do it.

It's March. Should I reply to the question "wait for you shine.