شارك معنا في صنع لعبة عن طريق جافا سكريب

هو المشروع نام ليه؟؟؟؟؟؟

يا جماعة لماذا توقف المشروع :( :( :(

بعد غياب عن الموضوع نرجع ومعي تكملة بسيطة في اللعبة ..

أولا رأينا في صفحة الHTML السابقة الشكل العام للجدول وكيفية توضع عناصر ال XO .. الخطوة التي سوف أقدمها هنا هي عبارة عن تكوين هذا الجدول بطريقة ديناميكية باستخدام كود Java Script ..

معظم أو تقريبا كل عناصر ال HTML تحتوي على خاصية تمكننا من تغير محتويات العنصر من داخل لغة ال script هذه الخاصية سوف تفيدنا هنا وهي innerHTML .. وتعتبر هذه بعض الخيارات التي تسمح بتغيير محتويات الصفحة عن طريق ال script ..

من أفضل العناصر التي يفضل تغيير محتوياتها هو عنصر ال DIV لأن الDIV جدا مرن في توضعه على صفحة ال HTML وممكن أن يشكل طبقة أخرى إذا أردنا .. ممكن اعتبار ال DIV عبارة موضع ديناميكي نقوم بتغيير محتوياته متى أردنا ..

مثلا :

<DIV ID=MySection></DIV>



<SCRIPT>

MySection.innerHTML = "<p>Testing</p>";

</SCRIPT>

سوف يقوم السابق عند تنفيذ الصفحة بكتابة العبارة testing داخل ال div وسوف تظهر في الصفحة ..

ماذا يفيدنا هذا هنا في اللعبة! ....

الجدول هو ديناميكي وسوف نقوم بانشائه بالاعتماد على معطيات المستخدم ..

الكود الحالي ينقسم إلى قسمين قسم لمعالجة معطيات المستخدم وقسم من أجل تكوين الجدول .. القسم الأول سهل وهو كالتالي :

<p>

Enter the number of rows: <input Id="InputRows" type="text" size="20" maxlength="20"></input>




<input name="" type="button" value="Start!" onClick="OnStartClick()"></input>

</p>



<div id="TableLayer" align="center"></div>



<script>

function OnStartClick()

{

	if (InputRows.value.length == 0) {

  alert("You should enter the number of the rows!");

  return;

	}



	if (InputRows.value <= 2) {

  alert("You should use more than 2 rows!");

  return;

	}



	var table = new GameTable(InputRows.value);



	TableLayer.innerHTML = table.GetHTML();

}

ببساطة في البداية قمنا بتعريف خانة نص وأعطيناها ال ID الذي هو InputRows حتى نستطيع الوصول لها لاحقا وقمنا بتعريف زر ولم نعطه ID لأننا لا نحتاجها ولكن أعطينا تابع يتم تنفيذه عند الضغط على الزر والتابع هو OnStartClick() الذي يوجد أيضا في الأعلى في قسم script .. ولاحظ أيضا أننا وضعنا DIV فارغ اسمه TableLayer حتى نضع بداخله الجدول .

الكود يقوم بالتأكد من أنه تم ادخال قيمة وبعدها بتأكد أن القيمة أكبر من 2 .. بعد ذلك يقوم لانشاء الجدول وتغيير محتويات ال DIV التي اسمها TableLayer .

بالنسبة للجدول فقمت ببناء class له بالجافا سكريتب .. مبدأ الكلاس هنا هو مختلف عن باقي اللغات كالسي أو الجافا العادية .. الكلاس هنا هو عبارة عن تابع عادي نقوم باسناد قيم معينه فيه .. وهذا هو تعريف الكلاس الذي يقوم بانشاء الجدول :

function GameTable(n)

{

	this.rows = n;

	this.columns = n;

	this.GetCellStyle = GetCellStyle;

	this.GetRowHTML = GetRowHTML;

	this.GetHTML = GetHTML;

}

لاحظ في التابع OnStartClick أننا قمنا باستخدام هذا الكلاس عن طريق حجزه ككائن باستخدام new وحينها في التابع قمنا بتعريف متحوولا ت داخل الكائن عن طريق العبارة this . أيضا يمكننا من تعريف methods عن طريق اسناد تابع .

يوجد لدينا 3 توابع هنا .. الأول GetHTML يقوم بتكوين الجدول وبه حلقة من أجل كل سطر تستدعي GetRowHTML التي تنشئ كل خلية في السطر حيث تحتوي على حلقة من أجل هذا .. ومن أجل كل خلية نستدعي GetCellStyle من أجل تكوين ال style للخلية (حيث يختلف style من خلية لأخرى على حسب موقعها في الجدول - لاحظ كود ال HTML للجدول)..

الكود سهل جدا إذ تتبعته وهو يقوم بتوليد نفس كود ال HTML السابق المذكور في رد سابق ..

وممكن أخذه ورأية النتيجة في الوصلة : http://www.arabteam2000.com/atassi/tictac/table2.htm

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

الخطوة التالية هي أن نجعل الجدول يتحسس إلى الضغط من المستخدم ويتم وضع الصورة X وبعدها الصورة Y في محل المربع المضغوط ..

العملية سهلة جدا أيضا .. وسوف أنتظر أولا مشاركتكم قبل أن أضعها .. :)

الا ترى اخ هاني ان الجدول يجب ان يكون له حد أقصى من الخانات

جرب مثلا كتابة الرقم 1000 في خانة عدد الخانات بالجدول :):)

طيب ماحدا عميشارك :( ... لذلك راح أحط درس من عندي اليوم حتى مايموت الموضوع ..

ذكرت في الدرس السابق أن الخطوة التالية هي أن نضع الصور X أو O في محلاتها على الرقعة ..

يقتضي هذا طبعا معرفة دور اللاعب الذي يلعب حاليا .. لذلك أضفنا المتحول playerTurn في أعلى الصفحة .. وأيضا من أجل سهولة تغيير الصورة لاحقا قمنا بالحاق أسماء الصور في متحولات .. :

var playerTurn = 'X';

var oImage = "mo.gif"

var xImage = "mx.gif"

في الكلاس GameTable قمت بتغيير فقط التابع GetRowHTML الذي يرجع بالأساس كود ال HTML للصف .. كالتالي

	var i;
	for (i = 0; i < this.columns; i++) {
		result += '		result += ' onMouseDown="OnCellClick(this,' + row + ',' + i + ')"'
		result += ' style="cursor:hand"> ';			
	}

لاحظ أضفت التحسس لل event التالي onmousedown وجعلت المتصفح يستدعي OnCellClick عندما يقوم المستخدم بالضغط على الخلية ... كود ال HTML الناشئ عن الخلية 0،0 هو التالي :

<td width=60 style='...' onMouseDown="OnCellClick(this, 0, 0)"

style="cursor:hand"> </td>'

قمنا بتمرير كائن الخلية للتابع OnCellClick عن طريق this وهذا ضروري من أجل تغيير محتوياتها لاحقا ..

التابع OnCellClick سهل جدا ووظيفته تغيير محتويات الخلية بكود عرض الصورة :

function OnCellClick(cell, row, column)
{
	var file;
	if (playerTurn == 'X') {
		file = xImage;
		playerTurn = 'O';
	}
	else
	{
		file = oImage;
		playerTurn = 'X';
	}

	htmlStr = '

في النهاية الصفحة موجودة هنا :

http://www.arabteam2000.com/atassi/tictac/table3.htm

سوف تلاحظ أنه يمكن وضع صورة حتى ولو كانة هناك صورة سابقة .. سوف يتم حل هذه النقطة لاحقا ..

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

الخطوة التالية هي ادخال تابع يتم استدعائه من داخل OnCellClick لمعرفة من هو الفائز X أو O ومن أجل هذا أرجو مراجعة الوصلة التالية لمعرفة خوارزمية اللعبة :

http://www.arabteam2000.com/vb/showthread....&threadid=14495