The typewriter game of the canvas

Recently for the particles into a little bit of inquiry, decided to combine it to do a small game, so this simple typing game was born.

Demo Address: Typewriter game is only tested under Chorome, use a different browser (especially FF), and be slow to load, wait 5-10 seconds. Because there are too many particles to load ...

Game Overview

The game logic and code are really simple, and are all H5 native APIs that don't have a framework (in fact).

Words are made up of particles. The words appear randomly in the canvas, the keys on the keyboard are listened to, and the letters in the words are matched; when the whole word is matched, the particles that make up the word begin to do the flat-throw motion. Until the game is over.

• For the main production process of canvas games please refer to: two canvas games
• For information on how to convert a word into a suitable particle shape, please refer to: Talking about the pixel of text picture
• For more information on how to achieve particle effects in the game (flat-throw motion), please refer to: Talking about the particle of text image

　　

Game explanation

Open the index page source code, we see the main component is 6 JS files, as follows:

And then we'll analyze each of them.

• Load.js

The first is load.js. Load.js is actually very short, mainly the game loading time is too long, play a load animation effect. And here I simply use the text to express the load, if the game quality requirements, excellent loading animation is also essential.

• Vector.js & Common.js

Directly quoted my JS file under GitHub, the entire game loading speed has a certain impact.

Vector.js is a two-dimensional three-dimensional vector class, because the motion of particles will be used in a large number of vectors, and common.js is my usual set of JS functions, temporarily not much, there is a need to continue to add it.

• Temp.js

Temp.js is one of the main JS files of the game, the main content is four classes of objects in the game and their respective methods.

The structure of the game object is as follows: Collection Word, letter-Ball. Collection is used as a scene, the word class is the word in the scene, letter is the letters in the word (word), and the ball class is the particle in the letter. Originally I directly omitted the letter class, but later found that the typing process, the alphabet is a corresponding, color a change, so letters are essential.

When each frame is rendered, four classes are sequentially called by the draw method and the Update method, with a bit of recursion meaning, after all, the ball class for draw and update.

Explain a few key methods:

• Word has a disappear method that when a typing game completes a word, the particles that make up the word do a flat-throw motion. The main implementation method is to pass this change to ball class, change ball speed and acceleration.
• Word has a getletters method, which boils down to initializing the particles that make up the word.
• The Getballs method of the letter class is completely pixelated.
• The Update method in the ball class is probably the most complex. When initializing, give each ball a status value, assign its state to a value of 1, if a word is completed, then the value is changed to 2, once it is monitored to a value of 2, that means that the flat throw motion begins, when the speed and acceleration changes, in order to avoid multiple changes, Change the state value to 3

Change to Flat throw motion if (this.state = = = 2) {  THIS.A = 10/1000 *;  this.v.x = Getrandomnum ( -10, ten);  This.state = 3;}

The end of the game can also be judged here:

Determine if the game is over if (this.state = = = 1 && this.pos2.y > Height) {  game.isover = true;  return;}

The end of the flat-throw movement, the life cycle of the particle is also ended, and subsequent rendering of the particle is no longer necessary:

The end of the flat throw movement, the end of the particle life cycle if (this.state = = 3 && this.pos2.y > Height)  this.kill (ID);

Ball's Kill Method:

The next frame does not need to continue rendering Ball.prototype.kill = function (id) {  this.father.balls.splice (ID, 1) When Ball does a flat throw motion out of bounds;};

• Data.js

There are few lines of code that basically store words in an array.

A total of 50 words, all of my impromptu handwriting, if there are misspelled also please light spray. In fact, originally wanted to write an Ajax extract at least thousands of phrases and then load, and behold new Word () the speed is really worrying, 50 words have been Kacheng that.

for (var i = 0; i < array.length; i++)  Words.push (New Word (array[i));

The above two lines of code should be occupied loading most of the time of the program, because the load of 50 words is actually the initial x N ball, and this in the acquisition using the Getimagedata pixel retrieval, speed you understand.

• Game.js

Game main logic code, mainly set up a game object, there are 3 main methods.

The first is the Init method that represents initialization, in which a word is randomly initialized, but this method does not write.

Next is the most important method of AddListener. This is the core of the whole monitoring, mainly to listen to the keyboard and listening to the keys and corresponding words to analyze the role. If there is no word in the match, select the first letter to match the key, and if there is a word that is being matched, then the key word is compared with the letter that matches the word, if the same succeeds, if it is different, the player presses the wrong one. Refer to the source code for details.

Finally, the Render method, as the name implies, relates to the rendering of each frame. Each frame is rendered in addition to the necessary draw and update, as well as an increase in the number of words in the game scene, changes in the current score, and so on.

Game Summary

The simple introduction of this type of game is almost like this, interested can refer to the source code: Typewriter Game

Production process also left a few regrets, for example, because the JS file a little more dependent on trying to try the next require.js or what, finally let me adjust the next JS loading order to solve, what things are only when the need to check ... would also like to try to do a cool loading animation, the last is still powerless.

March, is not the answer to the phrase "Waiting for you Shine".

The typewriter game of the canvas