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

Source: Internet
Author: User
Tags addchild clear screen
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.