PDA

View Full Version : مبتدی: سلام یه توضیح مختصر درباره توابع این کد میخوام(بازی پازل اعداد به زبان جاوا اسکریپت)



amirgraphic
دوشنبه 11 خرداد 1394, 13:23 عصر
JavaScript Document
var memory_array = ['1','1','2','2','3','3','4','4','5','5','6','6','7 ','7','8','8','9','9','10','10','11','11','12','12 '];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>'
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
tile.style.background = '#FFF';
tile.innerHTML = val;
if(memory_values.length == 0){
memory_values.push(val);
memory_tile_ids.push(tile.id)
}else if(memory_values.length == 1){
memory_values.push(val);
memory_tile_ids.push(tile.id);
if(memory_values[0] == memory_values[1]){
tiles_flipped +=2;
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length){
alert("...با تشکر امیر ذلقی");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
}else{
function flip2Back(){
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background='url(images/checkerd.jpg) no-repeat';
tile_1.innerHTML = "";
tile_2.style.background = 'url(images/checkerd.jpg) no-repeat';
tile_2.innerHTML = "";
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}

MEHR4N
دوشنبه 11 خرداد 1394, 18:34 عصر
اول یه آرایه تعریف کرده که مقادیر 1 تا 12 رو توش قرار داده از هر کدوم دو بار
بعد یه تابع نوشته واسه بهم ریختن یا بر زدن (shuffle) آرایه، جاوااسکریپت خودش به صورت پیشفرض همچین تابعی نداره واسه همین باید بنویسی یا از یه lib استفاده کنی، اینجا کاری که کرده این تابع رو به پروتوتایپ Array اضافه کرده، این روش باعث میشه تا این تابع، متد همه آرایه ها بشه و بینشون share بشه
داخل تابع memory_tile_shuffle یه الگوریتم نوشته که شافل کنه، روشی که انتخاب کرده الگوریتم Fisher–Yates shuffle هستش، اگه راجع به این الگوریتم میخوای بدونی میتونی این لینک رو ببینی: https://en.wikipedia.org/wiki/Fisher–Yates_shuffle

بعد یه تابع نوشته newBoard که همه چی رو از ابتدا درست میکنه و صفحه رو آماده میکنه، اول اون آرایه عدد ها رو شافل میکنه، بعد به ازای هر کدوم یک div درست میکنه و اطلاعات مربوط به عدد رو میده به اون div
یه event هم داخل هر div درست میکنه که به محض اینکه کلیک شد تابع memoryFlipTile خونده شه. دو تا آرگومان داده به این تابع یکی this که اشاره میکنه به اون div element بعدیش هم یکی از اون عدد هاست ( 1 تا 12) که اون تابع بفهمه کدوم عدد انتخاب شده

بعدش وقتی کلیک شد، این عدد رو داخل یه آرایه نگه میداره، یکی دیگه هم کلیک شد به اون آرایه اضافه میکنه، طول آرایه که 2 شد متوجه میشه دو تا عدد کلیک شدن، این دو تا رو با هم مقایسه میکنه اگه یکی بودن یعنی درست انتخاب شدن، این دو تا رو نگه میداره، اگه نبودن بعد از 700 میلی ثانیه مقادیرشون رو دوباره قایم میکنه
وقتایی که درست انتخاب شدن به متغیر tiles_flipped دو واحد اضافه میکنه tiles_flipped += 2 این کار رو واسه این انجام میده که بعدا مقدارش به 24 رسید و با طول آرایه برابر شد یعنی همه تایل ها رو درست گفته و بازی تموم شده، بعد دوباره newBoard رو میخونه تا بازی از اول شروع شه

در مجموع ولی زیاد کدش تر و تمیز نیست متغیر های global زیاد استفاده کرده، بعد واسه بازی میشه از خواص شی گرایی جاوااسکریپت و mvc استفاده کرد. تنها نکته مثبت و خوبش همونجا بوده که متد شافل رو به پروتوتایپ آرایه اضافه کرده

باز اگه جایی رو متوجه نشده بپرس

amirgraphic
سه شنبه 19 خرداد 1394, 17:30 عصر
ممنونم مهران عزیز چک میکنم ایراد داشتم سوال میکنم :قلب: