Webゲーム開発入門チュートリアル3（簡単なプログラム・アプリケーション）

Web ゲーム開発入門チュートリアル 2 (ゲームモード システム)
http://www.jb51.net/article/20724.htm

1. 開発言語を選択します
バックエンド: java .net php
フロントエンド: flex javascript ajax
データベース: mysql mssql
どの組み合わせでも構いませんを使用します。重要なのは時間と費用です。複雑さは、テクノロジーや効果の実装ではなく、データの相互作用と完成度にあります。多くの場合、いくつかの問題が発生します。たとえば、地図を作成するにはどうすればよいでしょうか?キャラクターの動きを実装するにはどうすればよいですか?実際、これらの問題は技術的には比較的簡単に実装できます。問題は、実装後にデータがどのように相互作用するかにあります。データ相互作用の問題を解決しない限り、これらの技術的なポイントを実装することはほとんど意味がありません。私はphp、javascript、mysqlを使用しています。
理由: シンプルですぐに使える。比較的早く製品を作ることができます。
2. プログラムは簡単に適用できます。
、UI の変更を容易にするためのテンプレート
。したがって、テンプレートを使用します。スマートテンプレートは非常に便利です。とてもシンプルです。コードはテンプレート内にネストすることもできます。唯一の問題は、アーティストがプログラミングの方法を知らない場合、テンプレートを変更するにはプログラミングが必要になることです。それは科学的ではありません。
スマート テンプレートのチュートリアルはオンラインで利用できます。ちょっと言ってください。 を使用して、テンプレート (.html ファイル) 内のコードをネストできます。渡された値を取得します。 $_obj['xxx'] または $_stack[0][''] を使用して、{xxx} に記述されたコードをネストします。 .php ファイルと同じであり、違いはありません。
、マップ
ゲームタイプがオゲームモードではないため、マップは自動生成されません。代わりに、すべてデータベースから呼び出されます。考え方はシンプルです。地図は大きな絵です。複数の小さな部分に切ります。大きな画像に対応する各小さなタイルの絶対座標がデータベースに記録されます。表示されたら、対応する座標エリアの小さなタイルを呼び出します。
コードは似ています:
$sql="select * from map where mapx between $xxx and $xxx and mapy between $yyy and $yyy ";
マップから横座標 xx を取得することを意味しますxxまでのテーブル。垂直座標が xx から xx のすべての小さなタイル。たとえば、20。取得したすべてのデータを表示する関数 showMap(x,y) を作成するとします。マップには多くのレイヤーを含めることができます。
それぞれの小さなタイルが div です。特定のコントロールには CSS を使用するだけです。小さなタイルは div の背景として使用できます。 div内の画像としても使用できます。 div の左と上を制御するだけです。 (左と上は、大きなタイルに対する小さなタイルの絶対座標です) showMap(x,y) は、下の 2 つのレイヤーに配置されます。
1 つのレイヤーがマップ サイズを処理します:

🎜 >1 つのレイヤーがドラッグを処理します:

コードをコピー コードは次のとおりです:

//ドラッグを処理するための JS コード。 (インターネットからコピーしました。この人のおかげです。)
<script><BR>function fDragging(obj, e, limit){ <BR>if(!e) e=window.event; x=parseInt(obj.style.left); <BR>var y=parseInt(obj.style.top); <BR>var x_=e.clientX-x; <BR>if(document.addEventListener){ <BR>document.addEventListener('mousemove', inFmove, true); <BR>document.addEventListener('mouseup', inFup, true); .cursor="move"; <BR>} else if(document.attachEvent){ <BR>document.attachEvent('onmouseup', inFmove); document.body.style.cursor="move"; <BR>} <BR>inFstop(e); <BR>inFabort(e) <BR>関数 inFmove(e){ <BR>var evt; (!e)e=window.event; <BR>if(limit){ <BR>var op=obj.parentNode; <BR>var opY=parseInt (op.style.top); <BR>if((e.clientX-x_)<0) return false; <BR>else if((e.clientX-x_ obj.offsetWidth opX)>(opX op. offsetWidth)) return false; <BR>if(e.clientY-y_<0) return false; <BR>else if((e.clientY-y_ obj.offsetHeight opY)>(opY op.offsetHeight)) ; <BR>//status=e.clientY-y_; <BR>} <BR>obj.style.left=e.clientX-x_ 'px'; 'px'; <BR>inFstop(e); <BR>} // ショール.qiu スクリプト <BR>関数 inFup(e){ <BR>if(!e)e=window.event ; <BR>if(document.removeEventListener){ <BR>document.removeEventListener('mousemove', inFmove, true); <BR>document.removeEventListener('mouseup', inFup, true); document.detachEvent){ <BR>document.detachEvent('onmousemove', inFmove); <BR>document.detachEvent('onmouseup', inFup); <BR>inFstop(e); body.style.cursor="auto"; <BR>//Google マップと同様のドラッグ効果を実現します。 <BR>ajaxRead('map.php?mapx=' (e.clientX-x_) '&mapy=' (e.clientY-y_) '','2'); <BR>} // shawl.qiu スクリプト <BR>function inFstop(e){ <BR>if(e.stopPropagation) return e.stopPropagation(); <BR>else return e.cancelBubble=true; <BR>} // shawl.qiu スクリプト <BR>function (e){ <BR>if(e.preventDefault) return e.preventDefault(); <BR>else return e.returnValue=false; <BR>} // shawl.qiu スクリプト <BR>} <BR>// ]]> <BR></スクリプト> <BR><BR> <BR>注意下面这段代码: <BR>ajaxRead('map.php?mapx='+(e.clientX-x_)+'&mapy='+(e.clientY-y_)+'','2'); <BR>这句代码的位置，是在拖动层后，释放鼠标的时候触发的。你可以用alert(“地图拖动到了这里”); 替换。测试下效果。这句代码的意思是，根据当前地图被拖动的坐标。调用一个ajax。也就是重新从数据库里获得地图信息。AjaxRead（）是一个ajax的调用函数。你可以全部自己写。也可以用如prototype.js之类的框架写。 <BR>//处理ajax的代码。(还是网上抄的，有轻微的改动。。。唉，怎么老抄呢。。主要是为了节约开发时间。。还有一点就是我的JavaScript很垃圾的(*^__^*) 嘻嘻) <BR><p class="codetitle"><span style="CURSOR: pointer" onclick="doCopy('code97902')"><U>复制代码 代码如下:<p class="codebody" id="code97902"> <BR>function ajaxRead(file,action) <BR>{ <BR>var xmlObj = null; <BR>if(window.XMLHttpRequest) <BR>{ <BR>xmlObj = new XMLHttpRequest(); <BR>} <BR>else if(window.ActiveXObject) <BR>{ <BR>xmlObj = new ActiveXObject("Microsoft.XMLHTTP"); <BR>} <BR>else <BR>{ <BR>return; <BR>} <BR>function ajaxDo(action) <BR>{ <BR>switch(action) <BR>{ <BR>case "2": <BR>document.getElementById('display').innerHTML = xmlObj.responseText;//这里的display是你在页面上层的id。上面的地图代码都需要放到这个层里。如<div id=display name=display></script>

id と名前を記述するのは、Firefox と IE の互換性を容易にするためです。
break;
}
}
xmlObj.onreadystatechange = function()
{
/*
if(xmlObj.readyState == 1)// 状態を読み込みます。
{
document.getElementById('xianshi2').innerHTML = "読み込み中";
}
*/
if(xmlObj.readyState == 4)//完了時。
{
ajaxDo(action);
}
}
xmlObj.open ('GET', file, true); 、 true);
xmlObj.send (null);
//xmlObj.abort ('');


コード全体の意味は次のとおりです。 >マップをドラッグしてマウスを放した後、表示レイヤーはデータを回復します。更新は表示されません。地図内の写真はすべてpng32の透過画像を使用しております。 Ie7もff3も大丈夫です。 IE6に遭遇した場合。 。代わりにgifを使用してください。マップ.php関数。取得した x と y に従って、対応する小さなタイルを表示します。この関数は実際には上記の showMap(x,y) であり、Google マップでのドラッグに非常に似ています。しかし、それははるかに簡単です。シンプルかつ効果的。 2. キャラクター 2. キャラクター属性 が設定されているため。キャラクターには装備ボーナスとステータスボーナス（バフ、デバフ）が必要です。このとき、必要なボーナスをすべてキャラクタークラスに入れます。はとても良い方法です。
おそらく次のようになります:



コードをコピー

コードは次のとおりです: class role

{

// 文字データを取得します。
getRloe()
{
データベースからキャラクター情報を取得します。
}
//装備ボーナスを獲得します。
getEquip()
{
装備ボーナス情報を取得します。
}
//ステータスボーナスの取得
getState()
{
ステータスボーナス情報を取得します。
}
//上記で取得した情報を加算、減算、または調整します。
//文字データを返します。
Return xxx
}


特にこれを取り上げます。キャラクターオブジェクトにボーナスが入っていないからです。戦うか何かをしなければならないたびに。キャラクターデータを取得した後は、コード処理のボーナスを大量に追加する必要があります。繰り返しが多すぎます。コードを目の前に置くと、世界は平和になります。 。 。
、小道具

小道具は特別です。種類も使い方もたくさんあるので、保管場所が複数あったり、個性的な小道具があったりするかもしれません。ある日、私は Web World of Warcraft のコードを調べました。彼の唯一の小道具は時計だったことが判明した。 (1、オークションハウス、2、バックパック、3、倉庫、4、店舗) などの小道具の位置を処理するフィールドがあります。この方法は非常に優れています。ただし、プロップの複雑さが増す場合。たとえば、異なる倉庫、異なるオークションハウスを合成する必要があるなどです。またはサブテーブルのみ。
基本アイテムテーブル:
id
itemname name
itemprice 価格
itemimage pic
itemtype type
uptype 追加タイプ
uppoint ポイント追加
addtype 追加タイプ (永続)
addpoint ポイント増加(永続)
cleardebuff デバフ解除
addbuff バフ追加
アップタイプからスタート。すべて xx|yy|zz の形式で記述できます。 1対1で対応するのがベストです。区切り文字は自分で選択できます。
データを呼び出して処理するときは、次のようなメソッドを使用できます:



コードをコピー

コードは次のとおりです: $ uptype =explode("|", $iteminfo['uptype']);

$uppoint =explode("|", $iteminfo['uppoint']); =0;$j{
echo $uptype[$j];
echo $uppoint[$j];


倉庫、オークションハウス、ショップ、バックパックなど。小道具を置く場所。プロパティ ID を保存する ID フィールドがある限り。水平テーブルか垂直テーブルかについては、実際のニーズに応じて選択できます。今のところ、小道具はうまく管理されているようだ。このときプランナーさんはこう言いました。小道具はユニークであり、エンチャントできる必要があります。 OK、次にプロパティ テーブルにすべての組み合わせを入力します。合成はまさに b=c です。 。一つの計算。たとえば、エンチャントできるものは 40 個あります。エンチャント可能なアイテムが 200 個。 40*200=8000。プランナーが同意しないのは明らかです。次に、問題はプログラムです。対処方法。テーブルを追加します。
一意の prop テーブル:
id 固有のプロップ ID (通常のプロップ ID と重複することはできません。バックパック呼び出しなどに便利です)
temp_id 一時 ID (デフォルトは 0。プロップを合成するときに使用できます。)
itemid オリジナルプロップID(プロップの初期値を取得)
fumo_id エンチャントID。 (デフォルトは 0、つまりエンチャントなし)
エンチャント テーブル: (つまり、追加された属性)
id
アップタイプ増加タイプ
アップポイント増加ポイント
cleardebuff クリア デバフ
addbuff 増加バフ
ここで関数の変更を見てみましょう
最初は prop クラスです:
class Items
{
getItem()
{
//以前は、 ID に直接基づいてプロパティ情報を取得します。
//エンチャントが追加されました
//まず、アイテム ID が固有のアイテムであるかどうかを判断します。 (たとえば、通常の prop の範囲は 1 から 10000 です。一意の prop ID は 10001 から始まります。これが良くないと思われる場合は、基本的な prop テーブルにフィールドを追加して、prop が一意であるかどうかを判断します)
if (propは一意です)
{
//一意のプロップ テーブルから元のプロップ ID とエンチャント ID を取得します
//元のプロップ ID、またはプロップの基本情報に従います。
//エンチャントIDに従って、エンチャントボーナス情報を取得します。
//両辺の値を加算します。
プロップ情報を返します。
}
else
{
アイテム情報を直接取得します。
}
}
}
エンチャント機能:
アイテム A. （基本小道具） 小道具B. (基本的な小道具) = 小道具 C. (唯一のプロップ)
つまり、エンチャント関数が実行されたときに唯一のプロップが生成されます。バックパックを例に考えてみましょう。エンチャント前。
バックパックの中のアイテム A。 IDは1です。
バックパックの中のアイテム B。 IDは2です。
エンチャント機能実行後。プロップ A と B の ID は 0 (水平テーブル) に設定されるか、削除されます (垂直テーブル)。一意の番号を生成します。 temp_id。 (md5 を生成するだけです。) 固有の prop を生成します。このとき、temp_id に従って、A のバックパックは再びユニークなプロップの ID を取得します。小道具、比較的完全なソリューション。
以下の部分はすべてビジネス上の問題に関係しているため、アイデアとほんの少しのコードしか提供できません。
----------------------------------------------- --- ----------------------------------
、タイマー
は待機後に実行されますxx時間xxの質問です。 PHP には sleep() 関数が付属しています。待ち時間もコントロール可能です。
しかし、アプリケーションと効率の両方の観点から見ても明らかです。どちらもゲームのタイミングをサポートするには十分ではありません。考え方はシンプルです。カウントダウンする必要があるイベントのすべてのパラメーター、および開始時刻と終了時刻。すべてテーブルに保存されます。フロントではJavaScriptを使用してカウントダウンを行い、タイムアップになると、ajax経由でタイムアップ後のハンドラーを呼び出します。バックグラウンドは一定時間ごとに呼び出し時間が経過すると自動的に処理プログラムを実行します。
少なくとも 3 つの PHP ページが必要です。
アクセスタイミングを書き込むためのコンテンツです。
処理フォアグラウンド時間が経過すると、操作は終了します。
処理バックグラウンドは定期的に更新され、判定時間が経過すると実行が終了します。判定時間が経過するまでは処理は行われません。
奇跡: タイマーには異なるイベントに対応する異なるタイマーがありますか、それとも複数のイベントに対して同じタイマーを呼び出すことができますか? プレイヤーがタイマーを呼び出して建物の建設にかかる時間を計る場合、その中でこのタイマーが呼び出されます。別の建物の建設時間を計ります。これは問題ありませんか?
キーボードの煤:
複数のイベントが 1 つのタイマーに対応します。
タイマーにフィールドを追加できます。例えば、アクションタイプ(イベントタイプ)と呼ばれます
各ユーザーは同時に複数のことを処理できます。ただ、すべてのものには決まった番号があるというだけです。
たとえば、ユーザーは同時に 5 つのことを実行できます。その場合、actiontype の直接の番号は 1 ～ 5 になります。タイマーを呼び出すと、さまざまな数値に基づいて、これがユーザーの最初の「スレッド」であることがわかります。
奇跡
異なるユーザーが同じタイマーを呼び出した場合、競合は発生しませんよね?
キーボードのすす:
もちろん違います。分かりますか。 userid はユーザーを識別するために使用できます。 actiontype を使用して、どのスレッドであるかを判断できます。
、イベントコントロール
とタイマー、処理start()、process()、end()

コードをコピー コードは次のとおりです:

インターフェイス アクション
{
関数 doAction();
関数 processAction()
関数 endAction(); >//単純なイベントファクトリー
class ActionFactory
{
public function getAction($what)
{
$ActionName = $what;
return new $ActionName;
}
//例: move
class Move 実装 Action
{
function doAction()
{
特定の実行関数
このプロセスをいつ実行するか？すべてここで判断されます。
}
function beginAction()
{
イベントの開始時に実行されます。
ここでタイマーにデータを保存できます。将来的には、データはタイマーから取得されるようになります。
}
function processAction()
{
タイマーからデータを取得します。
イベント実行のプロセス。たとえば、ユーザーがページを更新したときなどです。まだカウントダウンしてるなら。それなら、ここに電話してください。
}
function endAction()
{
タイマーからデータを取得します。
イベントを終了するプロセス。
タイマーが期限切れになったら、イベントを完了してください。
}
}
//初めて呼び出されたとき。
$Action = new ActionFactory();
$InstanceAction = $Action->getAction("Move");
$InstanceAction->set ($parameter); ;doAction();
//後で呼び出されるとき。
$Action = new ActionFactory();
$InstanceAction = $Action->getAction("Move");
//このとき、イベントのパラメータまたはデータがタイマーから取得されます。 。
$InstanceAction->doAction();


、戦闘
リアルタイムおよび半リアルタイムのターンベース戦闘 (2 人またはより多くの人）は比較的面倒です。
少なくとも以下を含めてください:
フロントデスク:

招待情報を自動的に受信します。 Ajax
戦闘プロセスを表示します。 Ajax
ラウンドのカウントダウン時間。 javascript
バックエンド:
招待の送信、承諾、拒否、タイムアウト。テーブル。戦闘データ。テーブル。ラウンド時間、どのラウンドなどを含む、両当事者または複数の当事者のデータを保存します。
戦闘コントロール。一連の機能。プレイヤーの操作を処理し、戦闘データ テーブルに操作を保存します。時間が経過してから操作を行ってください。
軍隊を派遣した後、直接戦闘レポートに戻ります。
イベントに書き込むだけです。
function endAction()
{
タイマーからデータを取得します。
ラウンドを生成し、戦闘レポートを生成します。
}
注: 仕事の都合により、このシリーズは更新前に一定期間中断される場合があります。ご容赦ください。 。 。