"HTML5 Game development" simple "find different Chinese version", to test your eyesight bar __html

One, prepare to work

This game development needs to use the Lufylegend.js open source game engine, the version I use is 1.5.2 (now the newest version is 1.6.0).

location of the engine download:Http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar

Engine API Documentation:HTTP://LUFYLEGEND.COM/LUFYLEGEND/API

First of all, we need to create a folder called Find_word, and then add items to it as follows:

Find_word Folder

|---index.html

|---js folder

|---main.js

|---lufylegend-1.5.2.min.js (game engine)

|---lufylegend-1.5.2.js (game engine)

Once you've done this, you can start the game development. Two, the production process

Because this game development is simpler, therefore, I briefly said the process. First, add the HTML code to the index.html:

<! DOCTYPE html>
Maybe some friends would be wondering because they didn't find the canvas tag. In Lufylegend, when you call the init () function, the canvas tag is automatically added, so you can automatically join canvas in HTML by writing a DIV tag and the ID of the div tag.

The main.js invoke Init () is written as follows:


Init (M, "Mylegend", 525,500,main);
 

The first parameter of the INIT function is the page refresh rate, the second is the ID of the div that canvas adds to, the third and fourth is the page size, and the last one is the function called after the page initialization completes.

Next, we define a series of variables:


var Backlayer,tilelayer,ctrllayer,overlayer,gameoverlayer;
var Tiletext,overtext,gameovertext;
var Col,row;
var time = 0;
var Selectlayer;
var checkpoints = [
	["Nationality", "by"],
	["I", "find"], ["Chun", "Chung"], ["
	Dragon", "ESP"],
	["Yue", "Day"
]]; var checkpointno = 0;
var I0;
var j0;
var i,j;
var Partx,party;
var overtextcontent = ["Congratulations, you pass the", "Enter the next level", "restart"];
var gameovertextcontent = ["Sorry, you Failed", "re-opened the Checkpoint"];
var nowline;
var settimeline;
I'll just introduce a few important variables, others will be mentioned later.


var Backlayer,tilelayer,ctrllayer,overlayer,gameoverlayer;
These codes are in the definition of layer variables for easy game development later.


var Tiletext,overtext,gameovertext;
This is the word-level variable that may appear in the definition game.


var checkpoints = [
	["Nationality", "by"],
	["I", "find"], ["Chun", "Chung"], ["
	Dragon", "ESP"],
	["Yue", "Day"
]];
These are defined levels, in this two-dimensional array, each array is a pass, each of the text in the array is the level of words to appear in the checkpoint. It can be seen that this game altogether 5 off

The next part is the function of the game. The first is the main function:


function Main () {
	I0 = Math.floor (Math.random () *10);
	J0 = Math.floor (Math.random () *10);

	Initlayer ();
	Initctrl ();
	Inittile ();
}
In this case, I first assign values to I0 and j0, so that they become a random number between any 0-10 to determine where the word is different. Then I also initialized the layer and control in this program, and called the Function inittile () that shows the text, let's look at the code in Initlayer and Inittile separately:

In Initlayer:


function Initlayer () {
	backlayer = new Lsprite ();
	AddChild (Backlayer);
	
	Tilelayer = new Lsprite ();
	Backlayer.addchild (Tilelayer);

	Ctrllayer = new Lsprite ();
	Backlayer.addchild (Ctrllayer);
}
I use the Lsprite class method in Lufylegend to define the layer variable as a container, and to display something later, you can put it in these containers. Where Addchild is the function of putting a thing into a container, and of course the thing that goes in it can also be a container. Thus, the game has a sense of hierarchy. If directly write Addchild (XXX) is to put XXX at the bottom of the game.

In Inittile:


function Inittile () {for
	(i=0;i<row;i++) {for
		(j=0;j<col;j++) {
			tile ();
}}}
This function is doing tile work, a bit like tiling. The key is tile (), and everything on the page is pasted up by it. Let us now reveal its true nature:

function tile () {
	tileLayer.graphics.drawRect (3, "Dimgray", [J*50,i*50,50,50],true, "Lightgray");

	var w = checkpoints[checkpointno][(i==i0 && j==j0)? 0:1];
	Tiletext = new Ltextfield ();
	Tiletext.weight = "bold";
	Tiletext.text = W;
	Tiletext.size =;
  	Tiletext.color = "Dimgray";
	Tiletext.font = "Blackbody";
	Tiletext.x = j*50+7;
	Tiletext.y = i*50+7;
	Tilelayer.addchild (Tiletext);
}
 

First we put the grid on the page, so we used the DrawRect in the Lgraphics class in the lufylegend and used it to draw 100 50*50 squares on the screen.

Several parameters of DrawRect are:

First: Edge line thick
Second: Edge Line Color
Third: [Starting coordinates x, starting coordinates y, rectangular width, rectangular height]
Fourth: Whether a solid graphic
Fifth: Solid Color

After drawing the lattice, we began to write the text on each grid. The output of text in Lufylegend is simple, simply by defining a Ltextfield class and filling its properties with a value and then addchild it to completion.

Its properties are:



 
 
 
  
 
   
 
    
Type
 
    
Type
 
   
 
   
 
    
X
 
    
Coordinate x
 
   
 
   
 
    
Y
 
    
Coordinate y
 
   
 
   
 
    
Text
 
    
A string that is the current text in a text field
 
   
 
   
 
    
Font
 
    
Formatting of text
 
   
 
   
 
    
Size
 
    
Text Size
 
   
 
   
 
    
Color
 
    
Text color
 
   
 
   
 
    
Visible
 
    
is visible
 
   
 
   
 
    
Weight
 
    
Text weight
 
   
 
   
 
    
Stroke
 
    
When True, you can set the line width
 
   
 
   
 
    
LineWidth
 
    
Text line width
 
   
 
   
 
    
TextAlign
 
    
Align text to left and right
 
   
 
   
 
    
Textbaseline
 
    
Alignment of text up and down
 
   
 
  
 

 
 

A simple example is easy to understand:


var backlayer,title; 
function Main () { 
    backlayer = new Lsprite (); 
    AddChild (Backlayer); 
    title = new Ltextfield (); 
    Title.size =; 
    Title.color = "#ff0000"; 
    Title.text = "text display test"; 
    Backlayer.addchild (title); 

When you understand the Ltextfield class, then understand my code is simple, first I set the content of the text:


var w = checkpoints[checkpointno][(i==i0 && j==j0)? 0:1];
 

This line of code means that when a square is drawn, the one that is judged is the first few lines, I and J, and then see if it is equal to J0 and i0, and if it is equal, it means that the piece is different from the other. Then take the word out of the level array. You can see from the array checkpoints that the word labeled 0 is removed when you encounter a different piece of it, otherwise the word labeled 1 is removed. So, when it comes to the first level, the word we are looking for is "nationality" and the rest of the word is "excuse".

The position of the word is then processed, because if it is not processed, all the words will be stacked together. Several lines of code for the processing location are as follows:


Tiletext.x = j*50+7;
Tiletext.y = i*50+7;
 

And then we'll look at the game time:


function Addtimeline () {
	overLayer.graphics.drawRect (5, "Dimgray", [500,0,20,500],true, "Lightgray");
	OverLayer.graphics.drawLine ("Lightgray", [510,3,510,497]);
	OverLayer.graphics.drawLine ("Red", [510,3,510,497]);
	Settimeline = setinterval (function () {drawtimeline ();},100);
}
function Drawtimeline () {
	nowline = 3+ ((TIME/5) *495)/10;
	OverLayer.graphics.drawLine ("Lightgray", [510,3,510,497]);
	OverLayer.graphics.drawLine ("Red", [510,nowline,510,497]);
	time++;
	if (time>50) {
		clearinterval (settimeline);
		Gameover ();
	}
I still use graphics to achieve, but with the inside of the DrawLine, parameters are:

First: Line thick
Second: Line Color
Third: [Start coordinates x, start coordinate y, end coordinate x, end coordinate y]

To achieve a shorter time bar, I first draw a color Lightgray line to clear the time bar, and then let the brush every 100 milliseconds to move to 3+ ((TIME/5) *495)/10, and then let this coordinate with 510 position. This repeatedly clear screen heavier painting, it realized the reduction of the short time bar.

Next, we want to implement the mouse event, first look at the code:


function Ondown () {
	var Mousex,mousey;
	MouseX = Event.offsetx;
	Mousey = event.offsety;

	Partx = Math.floor ((mousex)/50);
	party = Math.floor ((mousey)/50);
	Isture (partx,party);

	Alert (partx+ "," +party);
}
 

This piece of code is very well understood, first I take out the mouse position, then divide it by 50 and take the whole, get the point of which lattice, and then put the point of that lattice as a parameter into the isture, in which I judged whether the value of the parameter and I0 and J0 in line with, if the match, call the processing of victory function.

The contents of Isture are as follows:


function Isture (x,y) {if (x==j0 && y==i0) {clearinterval (settimeline);
		OverLayer.graphics.drawRect (5, "Dimgray", [(lglobal.width-420) *0.5,80,420,250],true, "Lightgray");

		SelectLayer.graphics.drawRect (5, "Dimgray", [(lglobal.width-250) *0.5,230,250,50],true, "Darkgray");
			for (Var i=0;i<overtextcontent.length;i++) {Overtext = new Ltextfield ();
			Overtext.weight = "bold";
			Overtext.color = "Dimgray";
			Overtext.font = "Blackbody";
				if (i==0) {overtext.text = Overtextcontent[i];
				Overtext.size = 35;
				Overtext.x = (Lglobal.width-overtext.getwidth ()) *0.5;
				Overtext.y = 120;
			Overlayer.addchild (Overtext);
					}else if (i==1) {if (Checkpointno = = checkpoints.length-1) {overtext.text = overtextcontent[i+1];
					Overtext.size = 20;
					Overtext.x = (Lglobal.width-overtext.getwidth ()) *0.5; 
					Overtext.y = 240;
					Selectlayer.addchild (Overtext);
				Checkpointno = 0;
					}else{overtext.text = Overtextcontent[i];
				Overtext.size = 20;	Overtext.x = (Lglobal.width-overtext.getwidth ()) *0.5;
					Overtext.y = 240;
				Selectlayer.addchild (Overtext);
}}} Tilelayer.removeeventlistener (Lmouseevent.mouse_down,ondown); }
 

Finally, there are some code as a win or after the loss of processing, very simple, I have a pen with:


function Gameover () {OverLayer.graphics.drawRect (5, "Dimgray", [(lglobal.width-420) *0.5,80,420,250],true, "
	Lightgray ");

	GameoverLayer.graphics.drawRect (5, "Dimgray", [(lglobal.width-250) *0.5,230,250,50],true, "Darkgray");
		for (Var i=0;i<gameovertextcontent.length;i++) {Gameovertext = new Ltextfield ();
		Gameovertext.weight = "bold";
		Gameovertext.color = "Dimgray";
		Gameovertext.font = "Blackbody";
			if (i==0) {gameovertext.text = Gameovertextcontent[i];
			Gameovertext.size = 35;
			Gameovertext.x = (Lglobal.width-gameovertext.getwidth ()) *0.5;
			Gameovertext.y = 120;
		Gameoverlayer.addchild (Gameovertext);
			}else if (i==1) {gameovertext.text = Gameovertextcontent[i];
			Gameovertext.size = 20;
			Gameovertext.x = (Lglobal.width-gameovertext.getwidth ()) *0.5;
			Gameovertext.y = 240;
		Gameoverlayer.addchild (Gameovertext);
} tilelayer.removeeventlistener (Lmouseevent.mouse_down,ondown);
	function Gamerestart () {i0 = Math.floor (Math.random () *10); J0 = Math.floor (Math. Random () *10);

	Time = 0;
	Tilelayer.removeallchild ();
	Overlayer.removeallchild ();
	Selectlayer.removeallchild ();
	Backlayer.removechild (Selectlayer);
	Backlayer.removechild (Overlayer);
	if (Checkpointno!= checkpoints.length-1) {checkpointno++;
	} inittile ();
	Addevent ();
Addtimeline ();
	function retry () {I0 = Math.floor (Math.random () *10);

	J0 = Math.floor (Math.random () *10);

	Time = 0;
	Tilelayer.removeallchild ();
	Overlayer.removeallchild ();
	Gameoverlayer.removeallchild ();
	Selectlayer.removeallchild ();
	Backlayer.removechild (Selectlayer);
	Backlayer.removechild (Overlayer);

	Backlayer.removechild (Gameoverlayer);
	Inittile ();
	Addevent ();
Addtimeline (); }
 
third, download and demo location 

Demo Location:http://www.lufylegend.com/lufylegend_developers/yorhom_Find_Word/index.html

Download location:http://www.demodashi.com/demo/10494.html

Demo screenshot:







I hope you will support us, thank you. 

---------------------March 30, 2013 update---------------------

1, add filter effect

2, modified to enter the game after the mouse event failure bug (thank you netizens: qq407653296)

Game screenshot:






----------------------------------------------------------------

You are welcome to reprint my article.

Reprint Please specify: Transferred from Yorhom ' s Game Box

 Welcome to stay tuned for my blog