Webpage game development tutorial 3 (Simple Application)

Webpage game development tutorial 2 (game mode + System)
Http://www.jb51.net/article/20724.htm

1. Select a development language
Background: java. net php
Front-end: flex javascript ajax
Database: mysql mssql
Which combination is used is really not important. Time and cost are important. The complexity lies in the interaction and improvement of data, rather than the implementation of technology or effects. Some problems are often encountered. For example, how to compile a map? How can we implement character movement? In fact, these problems are technically easy to implement. It is difficult to interact with data after implementation. The problem of data interaction is not solved, so it is of little significance to implement these technical points. I am using php + javascript + mysql.
Cause: simple and easy to use. You can quickly export products.
2. Simple application.
, Template
To facilitate UI modification. Therefore, use a template. Smart template is easy to use. Very simple. The code can also be nested in the template. The only problem is that if there is no program in art, the program will be used to modify the template. Not scientific.
The smart template tutorial is available online. Only one point. You can use <? Php?> Nest any code. Obtain the pass value. You can use $ _ obj ['xxx'] or $ _ stack [0] [''] to nest code with {xxx. Like. php files, there is no difference.
, Map
Because the game type is not in the ogame mode, the map is not automatically generated. Instead, they are all called from the database. The idea is simple. A map is a full graph. Cut into multiple small graph blocks. The database records the absolute coordinates of the big image corresponding to each small graph block. When displayed, call the small plot block in the corresponding coordinate area.
The code is similar:
$ SQL = "select * from map where mapx between $ xxx and mapy between $ yyy and $ yyy ";
It means to obtain the abscissa xx to xx from the map table. All the small graph blocks from x-axis xx to x-axis. For example, 20. Suppose we write a showMap (x, y) function to display all the obtained data. A map can have many layers.
Each small graph block is a div. You can use css for specific control. A thumbnail can be used as the background of a div. It can also be used as an image in a div. Control left and top of the div. (Left and top are the absolute coordinates of the small graph block relative to the large graph block.) showMap (x, y) is placed in the following two layers.
Map size processed by one layer:
<Div style = \ "position: relative; width:". $ mapwidth. "px; height:". $ mapheight. "px; overflow: hidden \">
Processing and dragging at one layer:
Copy codeThe Code is as follows:
<Div style = \ "position: absolute; z-index: 10; left: 2px; top: 2px; width :". $ mapwidth. "px; height :". $ mapheight. "px; \" onmousedown = \ "fDragging (this, event, false); \">
// Process the drag js Code. (Copied online .. Thank you very much .)
<Script>
Function fDragging (obj, e, limit ){
If (! E) e = window. event;
Var x = parseInt (obj. style. left );
Var y = parseInt (obj. style. top );
Var x _ = e. clientX-x;
Var y _ = e. clientY-y;
If (document. addEventListener ){
Document. addEventListener ('mousemove ', inFmove, true );
Document. addEventListener ('mouseup', inFup, true );
Document. body. style. cursor = "move ";
} Else if (document. attachEvent ){
Document. attachEvent ('onmousemove ', inFmove );
Document. attachEvent ('onmouseup', inFup );
Document. body. style. cursor = "move ";
}
InFstop (e );
InFabort (e)
Function inFmove (e ){
Var evt;
If (! E) e = window. event;
If (limit ){
Var op = obj. parentNode;
Var opX = parseInt (op. style. left );
Var opY = parseInt (op. style. top );
If (e. clientX-x _) <0) return false;
Else if (e. clientX-x _ + obj. offsetWidth + opX)> (opX + op. offsetWidth) return false;
If (e. clientY-y _ <0) return false;
Else if (e. clientY-y _ + obj. offsetHeight + opY)> (opY + op. offsetHeight) return false;
// Status = e. clientY-y _;
}
Obj. style. left = e. clientX-x _ + 'px ';
Obj. style. top = e. clientY-y _ + 'px ';
InFstop (e );
} // Shawl. qiu script
Function inFup (e ){
Var evt;
If (! E) e = window. event;
If (document. removeEventListener ){
Document. removeEventListener ('mousemove ', inFmove, true );
Document. removeEventListener ('mouseup', inFup, true );
} Else if (document. detachEvent ){
Document. detachEvent ('onmousemove ', inFmove );
Document. detachEvent ('onmouseup', inFup );
}
InFstop (e );
Document. body. style. cursor = "auto ";
// Implement the drag effect similar to google map.
AjaxRead ('map. php? Mapx = '+ (e. clientX-x _) +' & mapy = '+ (e. clientY-y _) + '', '2 ');
} // Shawl. qiu script
Function inFstop (e ){
If (e. stopPropagation) return e. stopPropagation ();
Else return e. cancelBubble = true;
} // Shawl. qiu script
Function inFabort (e ){
If (e. preventDefault) return e. preventDefault ();
Else return e. returnValue = false;
} // Shawl. qiu script
}
//]>
</Script>

Note the following code:
AjaxRead ('map. php? Mapx = '+ (e. clientX-x _) +' & mapy = '+ (e. clientY-y _) + '', '2 ');
The position of the Code is triggered when the mouse is released after the layer is dragged. You can use alert ("drag the map here"); replace. Test the effect. The Code indicates that the map is dragged Based on the coordinates of the current map. Call ajax. That is, retrieve the map information from the database again. AjaxRead () is an ajax call function. You can write it all by yourself. You can also use a framework such as prototype. js.
// Process ajax code. (I copied it online, but there were minor changes... Alas, how can we copy it .. It is mainly used to save development time .. Another point is that my JavaScript is very spam (* ^__ ^)
Copy codeThe Code is as follows:
Function ajaxRead (file, action)
{
Var xmlObj = null;
If (window. XMLHttpRequest)
{
XmlObj = new XMLHttpRequest ();
}
Else if (window. ActiveXObject)
{
XmlObj = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else
{
Return;
}
Function ajaxDo (action)
{
Switch (action)
{
Case "2 ":
Document. getElementById ('display'). innerHTML = xmlObj. responseText; // The display here is your id at the upper layer of the page. The above map code must be put in this layer. For example, <div id = display name = display> </div> writes id and name to facilitate compatibility between firefox and ie.
Break;
}
}
XmlObj. onreadystatechange = function ()
{
/*
If (xmlObj. readyState = 1) // loading status.
{
Document. getElementById ('xianshi2'). innerHTML = "loading ";
}
*/
If (xmlObj. readyState = 4) // when the status is completed.
{
AjaxDo (action );
}
}
XmlObj. open ('get', file, true );
// XmlObj. reload ('get', file, true );
XmlObj. send (null );
// XmlObj. abort ('');
}

The whole code means:
When you drag the map to release the mouse, the display layer obtains data again. And no matter whether it is displayed. Png32 transparent images are used in the map. Ie7 and ff3 are both correct. In the case of ie6 .. Use gif instead. Map. php. According to the obtained x, y shows a thank-you cell. This function is actually the showMap (x, y) mentioned above, which is similar to the drag of a google Map. But it is much simpler. Simple and effective. 2. Corner 2. Role attributes
Because of the set requirements. The role must be equipped with a bonus and a stateful bonus (buff, debuff ). At this time, all the required bonuses are put into the role class. Is a good method.
Like this:
Copy codeThe Code is as follows:
Class role
{
// Obtain role data.
GetRloe ()
{
Obtain role information from the database.
}
// Obtain the device bonus.
GetEquip ()
{
Obtain the device bonus information.
}
// Get the status bonus
GetState ()
{
Obtain the status bonus information.
}
// Add, subtract, or adjust the information obtained above.
// Return role data.
Return xxx
}

Put forward this article specifically. It is because the addition is not put into the role object. Every time you want to fight or do something. After obtaining the role data, you need to add a lot of code processing bonuses. Too many duplicates. Once the code is ready, the world will be quiet...
, Item
Item is special. There are many different types of data and there are many usage methods. There may be multiple storage locations, and there may be a unique item. One day I read the web World of Warcraft code. He found that his item only has one table. There is a field to process the position of the item, such as (1, auction house, 2, backpack, 3, warehouse, 4, store). This method is quite good. However, if the complexity of the item goes up. For example, different warehouses and auction houses need to be merged. Or only table shards are allowed.
Basic item table:
Id
Itemname
Itemprice
Itemimage
Itemtype
Uptype increase type
Uppoint increase points
Addtype add type (permanent)
Addpoint increase (permanent)
Cleardebuff clear debuff
Addbuff added buff
Starting from uptype. Can be written as xx | yy | zz. It is best to match one by one. You can select the separator.
When calling and processing data, you can use the following method:
Copy codeThe Code is as follows:
$ Uptype = explode ("|", $ iteminfo ['uptype ']);
$ Uppoint = explode ("|", $ iteminfo ['uppoint']);
For ($ j = 0; $ j <count ($ uptype); $ j ++)
{
Echo $ uptype [$ j];
Echo $ uppoint [$ j];
}

Warehouses, auction houses, shops, backpacks, etc. The place where the prop is hosted. You only need an id field to store the item id. To the horizontal or vertical table, select as needed. So far, items seem to have been handled well. At this time, the plan said. The item must be unique and be possessed. OK, then fill in all the combinations in the item list. Synthesis is just a + B = c .. 1. computing. For example, 40 items that may be enchanted. 200 magical items. 40*200 = 8000. Obviously, the planning will not agree. So the headache is the program. How can this problem be solved. Add a table.
Unique item table:
Id: unique item id. Facilitate the call of backpacks and so on)
Temporary temp_id id (0 by default. It may be used when merging items .)
Itemid: original item id (obtain the item's initial value)
Fumo_id enchantment id. (0 by default, that is, no enchantment)
Enchantment table: (the added attribute)
Id
Uptype increase type
Uppoint increase points
Cleardebuff clear debuff
Addbuff added buff
View Function Modification now
The first is the item class:
Class Item
{
GetItem ()
{
// In the past, it was OK to directly obtain the item information based on the id.
// Now the enchantment is added
// First, determine whether the item id is a unique item. (For example, normal Item 1-10000. The unique item id starts from 10001. If this is not the case, add a field to the basic item table. Determines whether the item is unique)
If (unique item)
{
// Obtain the original item id and enchantment id from the unique item table
// Based on the original item id or basic item information.
// Obtain the enchantment bonus information based on the enchantment id.
// Add values on both sides.
Return item information.
}
Else
{
Directly obtain the item information.
}
}
}
Enchantment function:
Item. (Basic item) + item B. (Basic item) = item C. (Unique item)
That is, the only item is generated when the enchantment function is executed. Use a backpack as an example. No enchantment.
A in the backpack. Id is 1.
B In the backpack. The id is 2.
After the enchantment function is executed. Item A and item B IDs are set to 0 (horizontal table), or deleted (vertical table ). Generate a unique number. Temp_id. (Generate md5 .) Generate a unique item. At this time, according to temp_id, let A's backpack get the id of the unique item again. Item.
The following sections involve some commercial issues, so we can only give ideas and few code.
--------------------------------------------------------------------------------
, Note
Handle the issue of running xx AFTER xx time. Php comes with a sleep () function. The wait time can also be controlled.
But obviously, whether in terms of application or efficiency. Not enough to support game timing. The idea is simple. Set all parameters of the event to be countdown, as well as the start time and end time. Are stored in a table. The front-end uses javascript countdown. After the time is reached, the processing program after the ajax call time is reached. The background automatically executes the processing program after the call time at a specified time.
At least three php pages are required.
It is used to write and access scheduled content.
The operation ends when the frontend time is reached.
A processing background is refreshed on a regular basis. When the Judgment time is reached, the execution is finished and the processing time is not reached.
Miracle: the timer is a different timer that corresponds to different events, or multiple events can call the same timer. If a player calls a timer, it times the length of a building, the timer was called to time the construction of another building? Will there be conflicts?
Smoke on the keyboard:
Multiple events correspond to one timer.
You can add a field in timer. For example, actiontype)
Each user can handle multiple tasks at the same time. Every task has a fixed number.
For example, your user can do five things at the same time. The number in actiontype is 1-5. When you call a timer, you will know that this is the user's first "Thread" based on different numbers ".
Miracle
If different users call the same timer, no conflict will occur.
Smoke on the keyboard:
Of course not. You see. Userid can be used to determine a user. Actiontype can be used to determine the number of threads.
, Event Control
In combination with the note, the process starts (), the process (), and the end ()
Copy codeThe Code is as follows:
Interface Action
{
Function doAction ();
Function beginAction ();
Function processAction ();
Function endAction ();
}
// Simple event Factory
Class ActionFactory
{
Public function getAction ($ what)
{
$ ActionName = $ what;
Return new $ ActionName;
}
}
// Such as mobile
Class Move implements Action
{
Function doAction ()
{
Specific execution function
The process of this line. All are judged here.
}
Function beginAction ()
{
The event is executed at the beginning.
Data can be stored in the notebook. The data will be retrieved from the notebook later.
}
Function processAction ()
{
Retrieve data from the notebook.
The process of event execution. For example, when a user Refreshes a page. If the countdown is still in progress. So it is called here.
}
Function endAction ()
{
Retrieve data from the notebook.
The process of event termination.
The event is completed after the recording.
}
}
// The first call.
$ Action = new ActionFactory ();
$ InstanceAction = $ Action-> getAction ("Move ");
$ InstanceAction-> set ($ parameter );
$ InstanceAction-> doAction ();
// Call later.
$ Action = new ActionFactory ();
$ InstanceAction = $ Action-> getAction ("Move ");
// At this time, the event parameters or data are obtained from the records.
$ InstanceAction-> doAction ();

, Battle
Real-time and semi-real-time round battles (instant turn-based battles between two or more people) are cumbersome.
Include at least:
Front-end:
Automatically receives the invitation information. Ajax
Displays the combat process. Ajax
Round countdown time. Javascript
Background:
Send the invitation, accept, reject, and time out. A table. Combat data. A table. Stores data from both parties or multiple parties, including the round time and round number.
Combat Control. A series of functions. Process player operations and store the operations in the combat data table. After the time is reached, perform the operation.
After the troops are dispatched, the report is returned.
Write it in the event.
Function endAction ()
{
Retrieve data from the notebook.
Generate a round to generate a battle report.
}
Note: Due to my work, this series may take some time to be updated. Sorry...