Introduction to Web Game Development Tutorial II (game mode + system)
Http://www.jb51.net/article/20724.htm
First, choose the development language
Background: java. NET PHP
Front Desk: Flex JavaScript Ajax
Database: MySQL MSSQL
It really doesn't matter what kind of combination. The important thing is time and cost. The complex place in the data of the interaction and refinement, and not the implementation of technology or effect. Often encounter some problems. Like how the map is compiled? How to achieve the character movement? In fact, these problems from the technical realization are relatively easy. It is difficult to realize how data interacts after implementation. Without solving the problem of data interaction, it is of little significance to achieve these technical points. I'm using a php+javascript+mysql.
Reason: Simple, quick to get started. Can be more rapid out of the product.
second, the program simple application.
Template
For ease of UI modification. So use a template. Smart template is also convenient. Very simple. The code can also be nested inside the template. The only problem is that if the art does not program, modify the template to get the program. Not science.
The smart template tutorial is available online. Just a little. You can nest any code with <?php?> in a template (. html file). Gets the pass value. Nested with $_obj[' xxx '] or code that can be written with {XXX} with $_stack[0][' ". As with. php files, no difference.
Map
Because the game type is not Ogame mode, the map is not automatically generated. Instead, it's all called from the database. The idea is simple. The map is a whole large picture. Cut into several small tiles. In the database, we record the absolute coordinates of each small tile corresponding to the large graph. When displayed, a small tile of the corresponding coordinate area is called.
The code is similar:
$sql = "SELECT * from map where mapx between $xxx and $xxx and mapy between $ yyy and $yyy";
The meaning is from the map table, get the horizontal axis xx to XX. Ordinate all small tiles of xx to XX. Like 20. Let's say we write a function showmap (x,y) to display all the data we get. Maps can have many layers.
Each small tile is a div. The specific control on the use of CSS on the line. Small tiles can be used as the background of a div. It can also be used as a picture in a div. It's OK to control the left and top of the div. (left and top are the absolute coordinates of small tiles relative to large tiles) Showmap (x,y) is placed inside the two layers below.
One layer processing map size:
<div style=\ "Position:relative;width:". $mapwidth. " Px;height: ". $mapheight." Px;overflow:hidden\ ">
One layer handles drag:
Copy Code code as follows:
<div style=\ "Position:absolute;z-index:10;left:2px;top:2px;width:". $mapwidth. " Px;height: ". $mapheight." Px;\ "Onmousedown=\" fdragging (this, event,false); \ ">
Handles the dragged JS code. (Online copy of ...) Thanks to this big. )
<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 a drag effect similar to Google Maps.
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 when the layer is dragged. You can use alert ("Drag map to Here"); Replace. Test the effect. This code means the coordinates that are dragged according to the current map. Invoke an Ajax. Which is to get the map information from the database again. Ajaxread () is an AJAX invocation function. You can write all by yourself. It can also be written in a framework such as prototype.js.
Code that handles Ajax. (or online copy, there are slight changes ...) Alas, how old copy it. Mainly to save the development time. And one thing is my javascript is rubbish (*^__^*)
Copy Code code 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 on the top of the page. The map code above needs to be placed in this layer. such as <div Id=display name=display></div> write ID and name, is to facilitate the compatibility of Firefox and IE.
Break
}
}
Xmlobj.onreadystatechange = function ()
{
/*
if (xmlobj.readystate = = 1)//loading state.
{
document.getElementById (' Xianshi2 '). InnerHTML = "Loading";
}
*/
if (xmlobj.readystate = = 4)//complete state.
{
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 gets the data back. There is no refreshing display. The pictures in the map are all png32 with transparent graphs. Ie7 and FF3 are fine. Met IE6 's words. Replace it with a GIF. The map.php function. According to the obtained x,y display the corresponding one thanks small tile. This feature is actually the Showmap (X,y), which is like the drag of Google Maps. But it's a lot simpler. Simple, the effect is not bad. 2, Angle 2, role properties
Because of the set requirements. The role needs to be equipped plus, with state addition (Buff,debuff). At this point, put all the required addition into the character class. is a good way to do it.
Probably like this:
Copy Code code as follows:
Class role
{
Get the role data.
Getrloe ()
{
Get the role information from the database.
}
Get the equipment added.
Getequip ()
{
Get equipment to add information.
}
Get State Bonus
GetState ()
{
Get status Bonus information.
}
Add or subtract the information obtained above, or adjust it.
Returns the role data.
return XXX
}
Specifically put this article to say. Because I didn't put the addition into the character object. Every time you want to fight or do something. After you get the role data, you have to add a lot of code processing. Too much repetition. Let the code before the world is quiet ...
Props
Props are more special. Because of a wide variety of ways to use, there may be multiple storage sites, there may be only props. One day read the code of the Web Warcraft. Found that his props had only one watch. There is a field to deal with prop positions such as (1, Auction house, 2, backpack, 3, Warehouse, 4, store) This approach is good. However, if the complexity of the props went up. For example, different warehouses, different auction houses, need to synthesize and so on. or only the table.
Basic Props table:
Id
ItemName Name
Itemprice Price
Itemimage Pictures
ItemType type
Uptype Add Type
Uppoint Add points
AddType add type (permanent)
Addpoint Add points (permanent)
Cleardebuff Clear Debuff
Addbuff Increase Buff
Start with the Uptype. Can be written in xx|yy|zz form. Preferably one by one corresponds. The split symbol can be selected by itself.
When you call and work with data, you can use the following methods like this:
Copy Code code 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 and so on. A place to carry props. As long as there is an ID field to save the prop ID. As for the horizontal table or the longitudinal table, according to the actual need to choose. So far, the props seem to have handled well. At this time, planning to say. Props need to have a unique, need to be able to enchant. OK, then you can fill all the combinations into the props table. Synthesis is just a+b=c. A calculation. Like 40 things that might be possessed. 200 props to enchant. 40*200=8000. Obviously, the plan will not agree. So the headache is the procedure. How to deal with it. Add a watch.
Unique Props table:
ID unique prop ID (cannot be duplicated with normal prop ID). Convenient backpack and so on call)
temp_id Temporary ID (default 0. Can be used when synthesizing props. ）
Itemid original Prop ID (get initial value of prop)
fumo_id enchant ID. (default 0, no enchant)
Enchant table: (ie added attributes)
Id
Uptype Add Type
Uppoint Add points
Cleardebuff Clear Debuff
Addbuff Increase Buff
Now look at the feature changes
The first is the props class:
Class Item
{
GetItem ()
{
Used to be directly based on the ID to get props information on the OK.
Now add enchant.
First, determine if the prop ID belongs to the sole prop. (for example, the general props 1-10000.) The unique prop ID starts from 10001. If you think this is not good, then the basic props table, add a field. Determine whether props are unique)
if (prop only)
{
Get the original prop ID and enchant ID from the unique prop table
Based on the original prop ID, or prop base information.
According to the Enchant ID, obtain enchant bonus information.
Add both values.
Return prop information.
}
Else
{
Get props information directly.
}
}
}
enchant function:
Prop A. (basic props) + Prop B. (Basic props) = Prop C. (Only props)
The only props are generated when the Enchant function is executed. Take a backpack for example. No demon before.
Backpack inside prop A. ID is 1.
Backpack inside Prop B. ID is 2.
When the Enchant function is executed. Prop A, the ID of Prop B is all set to 0 (horizontal table), or deleted (vertical table). Generates a unique number. temp_id. (MD5 build on the line.) ) to generate a unique prop. At this point, according to TEMP_ID, let A's backpack get the ID of the unique prop again. Props, a relatively perfect solution.
The following sections are related to a number of business issues, so can only give ideas, and very little code.
--------------------------------------------------------------------------------
, timer
After processing the waiting xx time, executes xx the question. PHP has a sleep () function with itself. The wait time can also be controlled.
But obviously, both in terms of use and efficiency. is not enough to support the timing of the game. The idea is simple. All parameters of the event that will need to be counted, as well as start time, end time. are stored in a table. The foreground uses JavaScript to Countdown, the time to after, through the Ajax call time to after the handler. In the background every time, automatically executes a call time to the following handler.
Requires at least three PHP pages.
A content that is used to write access timing.
A processing foreground time to the end of the operation.
A processing background timing refresh, the judgment time to the end of the execution, time is not to deal with.
Miracle: Timers are different timers that correspond to different events, or can multiple events call the same timer, if a player he calls a timer to time a building for how long, and in the middle of the call this timer used to time another construction how long, this is not OK? Will there be a conflict?
Soot on the keyboard:
Multiple events correspond to 1 timers.
You can add a field to the timer. For example, called ActionType (event type)
Each user can handle many things at once. Just every thing has a fixed number.
For example, your users are allowed to do 5 things at once. Then the ActionType is directly numbered 1-5. When you call the timer, depending on the number, you know that this is the user's first "thread".
Miracle
If you are a different user, calling the same timer is not going to be a conflict.
Soot on the keyboard:
Of course not. You see. UserID can be used to determine a particular user. ActionType can be used to determine the first few threads.
, Event control
Combining timer, processing start (), process (), End ()
Copy Code code 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;
}
}
Like moving.
Class Move implements Action
{
function Doaction ()
{
Specific execution function
When to do this is a process. Are here to judge.
}
function Beginaction ()
{
Execution at the start of the event.
Here you can save the data in a timer. And then you take the data from the timer.
}
function Processaction ()
{
Take the data from the timer.
The process of the event execution. For example, when users refresh the page. If still in the countdown. So that's the call here.
}
function Endaction ()
{
Take the data from the timer.
The process of ending the event.
When the time comes, complete the event.
}
}
The first time it was called.
$Action = new Actionfactory ();
$InstanceAction = $Action->getaction ("move");
$InstanceAction->set ($parameter);
$InstanceAction->doaction ();
When it is called later.
$Action = new Actionfactory ();
$InstanceAction = $Action->getaction ("move");
At this time, the parameters or data of the event are obtained from the timer.
$InstanceAction->doaction ();
Fight
Instant and semi instant rounds (two or more people are fighting in real time) are more cumbersome.
Contains at least:
Front desk:
Automatically receive invitation information. Ajax
Shows the battle process. Ajax
The countdown between rounds. Javascript
Background:
Send invitations, accept, reject, timeout. a table. Combat data. a table. Save data on both sides or parties, including round time, first rounds, etc.
Combat control. A series of functions. Handle the player's actions and save the operation to the Combat data table. Do the operation after the time.
After sending troops, return directly to dispatches.
Just write it in the event.
function Endaction ()
{
Take the data from the timer.
Generate a turn to generate dispatches.
}
Note: Due to my work, this series may have to suspend for a period of time before updating, hope everyone forgive me ...
