PDA

View Full Version : سوال: ساخت بازي شطرنج


ravand
یک شنبه 16 بهمن 1390, 17:41 عصر
سلام
من تصميم دارم چند وقت ديگه شروع كنم به ساخت يك بازي آنلاين شطرنج ، كه دو نفر از طريق اينترنت با هم توي يك سايت شطرنج بازي كنند . فكر نميكنم كه حتما نيازي به اكشن اسكريپت باشه و خود php با قابليت هايي كه داره مي تونه اين كار رو انجام بده . شايد به ايجكس و جي كوئري هم نياز بشه و البته اگه استفاده بشه خيلي كارا رو راحت تر ميكنه.
ميخواستم نظر شما رو در اين مورد بدونم. كارهايي كه بايد انجام بدم و مشكلاتي كه سر راهم هست. رو بگيد. در كل راهنمايي بفرماييد.
متشكرم.
MMSHFE
یک شنبه 16 بهمن 1390, 18:06 عصر
من قبلاً اسکریپتی برای این بازی نوشته بودم و اگه پیداش کنم براتون میگذارم ولی در کل، با PHP و AJAX میتونید به راحتی انجامش بدین و استفاده از jQuery هم کار رو راحتتر میکنه و میتونم با اطمینان بگم به Flash و Action Script اصلاً نیاز ندارین.
موفق باشید.
wallfa
دوشنبه 17 بهمن 1390, 12:43 عصر
یکی راه حلش به ما نشون میده ببینیم چطوریه ؟!
ravand
دوشنبه 17 بهمن 1390, 16:07 عصر
من تا حالا اين كار رو نكردم ولي ميدونم چجوري ميشه اين كار رو كرد. بايد با كتابخانه ي GD كار كنيم . بايد وقتي يكي از مهرها برداشته ميشه و در جايي قرار داده ميشه وقتي جاي مهره تغيير پيدا كرد مختصات اون قسمت ارسال بشه بعد در بانك اطلاعاتي ثبت بشه تا فرد ديگري كه در مكان ديگر هست و داريم باهاش شطرنج بازي ميكنيم بتونه تغيير حركت رو دريافت بكنه. اين يكي از مواردش بود فكر ميكنم براي اينكه كاربر برخي مهرها رو اگه درست قرار نده مي تونيم با جي كوئري يا جاوا اسكريپت بهش پيام بديم يا اصلا نذاريم كه قرار بده.
نظر شما چيه؟ درست گفتم؟
MMSHFE
دوشنبه 17 بهمن 1390, 16:26 عصر
با GD هم میشه، بدون اون هم امکان داره. میتونید تصاویر مهره ها و... رو بصورت PNG یا GIF با زمینه شفاف ذخیره کنید و با CSS سر جای خودشون بگذارین. بعد از انجام حرکات هم با استفاده از جاوا اسکریپت موقعیت تصاویر رو جابجا کنید. برای دریافت رویدادهای کلیک و کشیدن و رها کردن با ماوس هم میشه از همون JS یا برای سهولت بیشتر با jQuery استفاده کنید. موفق باشید.
wallfa
دوشنبه 17 بهمن 1390, 17:14 عصر
بحث خیلی جالبیه ! اما همان طور که میدونید شطرنج قوائد خواصی داره ، فکر نمیکنم پیدا کردنش به این راحتی ها باشه ، اگر مهندس قبول کنه بذاره ببینیم چطوریه ! چی به چیه به صورت یه آموزش
ravand
دوشنبه 17 بهمن 1390, 17:19 عصر
به نظرم اگه خودمون شروع كنيم خيلي بهتره كه دنبال يه اسكريپت آماده باشيم . حيف كه بايد امتحانم رو بخونم وگرنه استارت رو مي زدم :لبخند:
يه سوالي كه برام پيش امده اينه كه : چيكار كنم كه فرد مقابل تغييراتي كه من با برداشتن مهره انجام ميدم ببينه. بالاخره بايد توي ديتابيس ثبت بشه . اگه يه نفر يه الگوريتمي هم در موردش برامون بگه كلي بهمون كمك كرده.
e107365
دوشنبه 17 بهمن 1390, 18:55 عصر
برای هر حرکت مهره یه رکورد با فیلدهای -مهره-حرکت-رنگ-موقعیت- بساز و هربار تغییر موقعیت یه مهره اون هارو به جدول اضافه کن. و در طرف دوم هم یه اونت بزار هر موقع که یه پارامتر حرکت رو گرفتی صفحه ر با ایجکس بازسازی کن تا محل جدید مهره ها مشخص بشه.
قوانین شطرنج رو هم که باید پیاده کنی.
گود لاک.
ravand
دوشنبه 17 بهمن 1390, 21:31 عصر
پس حركت مهرها با جاوا اسكريپت باشه دريافت مختصات و ثبت مختصات توي ديتابيس هم با php بازسازي صفحه هم با ايجكس.
خوبه؟
Net So
دوشنبه 17 بهمن 1390, 22:04 عصر
این کمکی میکنه :
http://www.redlionwebdesign.com/phpchess.zip
ravand
سه شنبه 09 اسفند 1390, 22:01 عصر
با اين اسكريپت امدم مهرها رو جابجا كردم :


<head>
<style>
.dragme{position:relative;}
</style>
<script language="JavaScript1.2">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
</head>
<body>
<img class="dragme" src="D:\aks-d\avatar.gif">
</body>
</html>


ولي مشكل اينجاست كه نميدونم چجوري مختصات xو y رو بدم به php?
wallfa
پنج شنبه 11 اسفند 1390, 13:21 عصر
یکی بیاد کمک کنه ، از این مسئله ها خوشم میاد !
ravand
پنج شنبه 11 اسفند 1390, 13:31 عصر
اگه يه نفر كه در اين مورد كار كرده بياد يه توضيح كلي هم در مورد مراحل ساختش به ما بده كلي بهمون كمك كرده. من مشكلم اينه كه اصلا نميدونم چجوري شروع كنم.
ravand
پنج شنبه 11 اسفند 1390, 16:58 عصر
امدم يه كاري كردم اين مهرها فقط حركت كنند! :لبخند:
حالا نميدونم چيكارشون كنم كه وقتي حركتشون ميدم ثبت بشه و طرف مقابل هم ببين:
83542
البته كارهاي زيادي بايد انجام بدم ، مثلاً اينكه اول بازي همه ي مهرها سر جاي خودشون باشن بعد اينكه اگه بر خلاف قوانين شطرنج گذاشته بشن به فرد اخطار بده .
ولي فعلاً من ميخوام كاري كنم كه وقتي مهره برداشته ميشه و جاي ديگه اي گذاشته ميشه ثبت بشه تا فرد مقابل بتونه ببينه.
متشكرم.
MMSHFE
پنج شنبه 11 اسفند 1390, 20:04 عصر
من هم دارم روی یک نمونه با AJAX و قابلیت Drag & Drop کار میکنم. البته معمولیش رو نوشتم و حرکات هم ثبت میشه و امکان Undo و Redo و Save‌ و Load و... هم داره ولی میخوام با AJAX بازنویسیش کنم تا قابلیتهای خوبی بهش اضافه بشه.
ravand
پنج شنبه 11 اسفند 1390, 21:02 عصر
متشكرم
ميشه براي ما توضيح بديد و بگيد مراحل ساختش چجوريه؟
من دوست دارم خودم بسازم و دوست ندارم از اسكريپت هاي رايگان توي نت استفاده كنم. ميخوام بفهمم چجوري كار ميكنه. دائماً دارم بهش فكر ميكنم ولي به نتيجه اي نميرسم.
متشكرم.
MMSHFE
پنج شنبه 11 اسفند 1390, 22:00 عصر
چشم. تکمیل که بشه، همراه با آموزش میگذارم.
MMSHFE
جمعه 12 اسفند 1390, 19:28 عصر
امروز یکم سرم خلوت شد تونستم کمی روش کار کنم. الآن حرکت کردن مهره ها و بدست آوردن مبدأ و مقصد حرکت کار میکنه. اگه خدا بخواد تو همین هفته روی منطقش و سایر امکانات بازی مثل شروع بازی جدید، ذخیره کردن حرکتها و... کار میکنم هرچند کار زیاد سختی نیست (البته در حالت دونفره).
ravand
جمعه 12 اسفند 1390, 20:44 عصر
منم تا يه جايي پيش بردم . تونستم قطعاتي كه حركت ميكنند رو مختصاتشون رو بدست بيارم. ولي مشكلاتي كه برام هست يكي اينه كه مهره ها درست توي جدول نيستن ولي چيزي كه مهندس ساخته دقيقا داخل هر جدول قرار ميگيره. ميخوام براي ارسال مختصات به كدهاي php از ايجكس در جي كوئري استفاده كنم كه خيلي ساده تر هست. مختصات رو هم با همين جي كوئري بدست اوردم. چون درست و حسابي روش كار نكردم كدش رو نذاشتم.
متشكرم.
ravand
شنبه 13 اسفند 1390, 15:59 عصر
من تونستم با جي كوئري مقدار مختصات x و y رو براي ديتابيس ارسال كنم تا بعدا با php عكس رو بر طبق اون مختصات چاپ كنم. وقتي عكس رو با ماوس بر مي دارم و وقتي يه جايي ميذارم به محضي كه عكس رو گذاشتم مختصات براي كدهاي php ارسال ميشه.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#asb").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$.post('http://localhost/shat/shatranj.php?x=' + x + '&y=' + y, function(data) {
alert("Data Loaded: " + data);
});

});
});
</script>
حالا موندم اين x و y رو چجوري به عكس بدم تا اون عكس بر طبق اين مختصات داده شده در صفحه قرار بگيره.
الان اين عكس مهره است :

<img src="img/asb.gif">
width وheight و margin-left اين جور چيزا رو كه نميتونم بهش بدم.
پس به نظر شما بايد چي بهش بدم؟
MMSHFE
شنبه 13 اسفند 1390, 16:01 عصر
چرا نمیشه؟ تصویر رو سر برحسب مختصاتی که فایل PHP شما برمیگردونه، با کمک CSS و توسط jQuery در مکان دلخواه جایگذاری کنید.
ravand
شنبه 13 اسفند 1390, 16:04 عصر
مهندس مشكل من اينه كه نميدونم x و y چي هست؟ البته توي كد نويسي. هر چي فكر ميكنم هيچي به ذهنم نمياد. اولش فكر ميكردم مي تونم با margin-left و margin-top مشكل رو حل كنم يعني به اين شكل :

$aks = 'img/asb.gif';
echo "<img src=\"{$aks}\" style=\"margin-top:-{$y1}; margin-right:-{$x1};\">";
ولي نشد.
MMSHFE
شنبه 13 اسفند 1390, 16:07 عصر
یکبار دیگه به مثالی که من گذاشتم دقت کنید. بجای X و Y مبدأ حرکت از fc و fr و بجای X و Y مقصد از tc و tr توی کد استفاده کردم.
ravand
شنبه 13 اسفند 1390, 16:22 عصر
ديدم ولي شما حالا اگه بخوايد يك عكس رو براي فرد مقابل بر اساس اين مختصات مبداو مقصد چاپ كنيد چجوري اين كار رو ميكنيد . ميتونيد نشون ما بديد؟
MMSHFE
شنبه 13 اسفند 1390, 16:41 عصر
باز هم به کد مراجعه کنید. تابع drop رو در قسمت droppable ببینید چطور کار میکنه و تصاویر رو در محل مربوطه قرار میده. من اومدم سطر رو در 45 (ارتفاع خونه های شطرنج در صفحه ای که ساختم) ضرب کردم و با 25 جمع کردم (بخاطر اینکه از پیکسل 25 از بالا صفحه شروع شده). همچنین برای ستون، اون رو در 45 (پهنای خونه ها) ضرب کردم و با 27 (حاشیه چپ صفحه) جمع کردم. اینطوری مکان موردنظر محاسبه شده.
ravand
شنبه 13 اسفند 1390, 17:19 عصر
مهندس متوجه ي منظور من نشديد.
بذاريد اينطوري بگم:
مثلاً ما يك صفحه ي شطرنج داريم و الان مختصات مبدا و مقصد رو گرفتيم و عكس مهره ميوفده گوشه ي سمت راست بالاي صفحه ي شطرنج چجوري اين مختصات رو به عكس بديم ؟ تا عكس رو به همين شكل براي فردي كه داريم باهاش بازي ميكنيم چاپ كنه؟
متشكرم.
MMSHFE
شنبه 13 اسفند 1390, 17:40 عصر
خوب عزیز وقتی میگم به کد دقت کنید برای همینه. کدی که گذاشتم اینه:


<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chess Game</title>
<script src="jqmin.js" type="text/javascript"></script>
<script src="jquimin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var fc, fr, tc, tr;
$("img#board").droppable({
accept:"img.piece",
drop: function(event, ui) {
var item = $(ui.draggable);
tc = Math.round((parseInt(item.css("left")) - 27) / 45);
tr = 9 - Math.round((parseInt(item.css("top")) - 25) / 45);
item.css("top", (parseInt(item.css("top")) - parseInt(item.css("top")) % 45 + 25)+"px");
item.css("left", (parseInt(item.css("left")) - parseInt(item.css("left")) % 45 + 27)+"px");
$("#panel").html($("#panel").html() + "<br/><br/>tr = " + tr + "<br/>" + "tc = " + tc);
}
});
$("img.piece").draggable({
start: function(event, ui) {
var item = $(this);
fc = Math.round((parseInt(item.css("left")) - 27) / 45);
fr = 9 - Math.round((parseInt(item.css("top")) - 25) / 45);
item.css("top", (parseInt(item.css("top")) - parseInt(item.css("top")) % 45 + 25)+"px");
item.css("left", (parseInt(item.css("left")) - parseInt(item.css("left")) % 45 + 27)+"px");
$("#panel").html("fr = " + fr + "<br/>" + "fc = " + fc);
}
});
});
</script>
<style type="text/css">
img.piece {
height: 45px;
position: absolute;
width: 45px;
}
</style>
</head>
<body>
<?php
session_start();
//Pieces
define('EC', 0); // Empty Cell
define('WP', 1); // White Pawn
define('BP', 2); // Black Pawn
define('WN', 3); // White Knight
define('BN', 4); // Black Knight
define('WB', 5); // White Bishop
define('BB', 6); // Black Bishop
define('WR', 7); // White Rook
define('BR', 8); // Black Rook
define('WQ', 9); // White Queen
define('BQ', 10); // Black Queen
define('WK', 11); // White King
define('BK', 12); // Black King
//Globals
$gBoard = array(
BR, BN, BB, BQ, BK, BB, BN, BR,
BP, BP, BP, BP, BP, BP, BP, BP,
EC, EC, EC, EC, EC, EC, EC, EC,
EC, EC, EC, EC, EC, EC, EC, EC,
EC, EC, EC, EC, EC, EC, EC, EC,
EC, EC, EC, EC, EC, EC, EC, EC,
WP, WP, WP, WP, WP, WP, WP, WP,
WR, WN, WB, WQ, WK, WB, WN, WR);
$gTurn = 'W';

if(isset($_POST['action']) && $_POST['action'] == 'Move') {
$gTurn = $_SESSION['gTurn'];
$gBoard = $_SESSION['gBoard'];
$fc = 0;
switch($_POST['fc']) {
case 'A':
$fc = 0;
break;
case 'B':
$fc = 1;
break;
case 'C':
$fc = 2;
break;
case 'D':
$fc = 3;
break;
case 'E':
$fc = 4;
break;
case 'F':
$fc = 5;
break;
case 'G':
$fc = 6;
break;
case 'H':
$fc = 7;
break;
}
$fr = 8 - $_POST['fr'];
$tc = 0;
switch($_POST['tc']) {
case 'A':
$tc = 0;
break;
case 'B':
$tc = 1;
break;
case 'C':
$tc = 2;
break;
case 'D':
$tc = 3;
break;
case 'E':
$tc = 4;
break;
case 'F':
$tc = 5;
break;
case 'G':
$tc = 6;
break;
case 'H':
$tc = 7;
break;
}
$tr = 8 - $_POST['tr'];
$fpos = $fr * 8 + $fc;
$tpos = $tr * 8 + $tc;
if($gBoard[$fpos] != 0) {
if(($gTurn == 'W' && $gBoard[$fpos] % 2 == 1) || ($gTurn == 'B' && $gBoard[$fpos] % 2 == 0)) {
$gBoard[$tpos] = $gBoard[$fpos];
$gBoard[$fpos] = EC;
$gTurn = ($gTurn == 'W' ? 'B' : 'W');
}
}
}

$_SESSION['gBoard'] = $gBoard;
$_SESSION['gTurn'] = $gTurn;

function draw_board() {
global $gBoard;
for($row = 0; $row < 8; $row++) {
for($col = 0; $col < 8; $col++) {
switch($gBoard[$row * 8 + $col]) {
case EC:
break;
case BR:
echo '<img class="piece" src="images/br.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case BN:
echo '<img class="piece" src="images/bn.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case BB:
echo '<img class="piece" src="images/bb.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case BQ:
echo '<img class="piece" src="images/bq.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case BK:
echo '<img class="piece" src="images/bk.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case BP:
echo '<img class="piece" src="images/bp.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WR:
echo '<img class="piece" src="images/wr.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WN:
echo '<img class="piece" src="images/wn.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WB:
echo '<img class="piece" src="images/wb.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WQ:
echo '<img class="piece" src="images/wq.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WK:
echo '<img class="piece" src="images/wk.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
case WP:
echo '<img class="piece" src="images/wp.png" style="top: '.($row * 45 + 70).'px; left: '.($col * 45 + 72).'px;"/>'.PHP_EOL;
break;
}
}
}
}

function render() {
global $gTurn;
echo '<table border="0px" cellpadding="0px" cellspacing="0px" width="100%" height="100%">'.PHP_EOL;
echo '<tr align="center" valign="middle">'.PHP_EOL;
echo '<td width="360px"><img border="1px" height="360px" id="board" src="images/board.png" width="360px"/></td>'.PHP_EOL;
draw_board();
echo '<td>'.PHP_EOL;
echo '<div id="panel"></div>'.PHP_EOL;
echo '</td>'.PHP_EOL;
echo("</tr>\n");
echo("</table>\n");
}
?>
<table border="0px" cellpadding="0px" cellspacing="0px">
<tr align="left" valign="top">
<td height="58px" style="background: url(images/i_tl.jpg); background-repeat: none;" width="64px"></td>
<td height="58px" style="background: url(images/i_tc.jpg); background-repeat: none;" width="514px"></td>
<td height="58px" style="background: url(images/i_tr.jpg); background-repeat: none;" width="64px"></td>
</tr>
<tr align="left" valign="top">
<td height="366px" style="background: url(images/i_ml.jpg); background-repeat: none;" width="64px"></td>
<td height="366px" style="background: url(images/i_mc.jpg); background-repeat: none;" width="514px"><?php render(); ?></td>
<td height="366px" style="background: url(images/i_mr.jpg); background-repeat: none;" width="64px"></td>
</tr>
<tr align="left" valign="top">
<td height="58px" style="background: url(images/i_bl.jpg); background-repeat: none;" width="64px"></td>
<td height="58px" style="background: url(images/i_bc.jpg); background-repeat: none;" width="514px"></td>
<td height="58px" style="background: url(images/i_br.jpg); background-repeat: none;" width="64px"></td>
</table>
</form>
</body>
</html>
این قسمت از کد رو ببینید:

$(document).ready(function() {
var fc, fr, tc, tr;
$("img#board").droppable({
accept:"img.piece",
drop: function(event, ui) {
var item = $(ui.draggable);
tc = Math.round((parseInt(item.css("left")) - 27) / 45);
tr = 9 - Math.round((parseInt(item.css("top")) - 25) / 45);
item.css("top", (parseInt(item.css("top")) - parseInt(item.css("top")) % 45 + 25)+"px");
item.css("left", (parseInt(item.css("left")) - parseInt(item.css("left")) % 45 + 27)+"px");
$("#panel").html($("#panel").html() + "<br/><br/>tr = " + tr + "<br/>" + "tc = " + tc);
}
});
$("img.piece").draggable({
start: function(event, ui) {
var item = $(this);
fc = Math.round((parseInt(item.css("left")) - 27) / 45);
fr = 9 - Math.round((parseInt(item.css("top")) - 25) / 45);
item.css("top", (parseInt(item.css("top")) - parseInt(item.css("top")) % 45 + 25)+"px");
item.css("left", (parseInt(item.css("left")) - parseInt(item.css("left")) % 45 + 27)+"px");
$("#panel").html("fr = " + fr + "<br/>" + "fc = " + fc);
}
});
});

و همچنین قالبی که برای تصاویر مهره ها گذاشتم:

img.piece {
height: 45px;
position: absolute;
width: 45px;
}

حالا دقت کنید که چطور با ترکیب CSS و jQuery عکسها سر جاشون قرار میگیرن (jQuery داره مختصات top و left رو برای مهره ها تنظیم میکنه).
ravand
یک شنبه 14 اسفند 1390, 17:01 عصر
مهندس بالاخره ساختمش.
با كمك يكي از بچه هاي همين سايت در بخش جاوا اسكريپت:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Dynamic Image</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.dynamicImage
{
position:fixed;
z-index:100;
}
</style>
</head>
<body>
<?php
$connection=mysql_connect("localhost","root","") or die (mysql_error());
$db=mysql_select_db("mokhtassat",$connection) or die (mysql_error());
$sql="SELECT * FROM meghdar";
$result=mysql_query($sql,$connection) or die (mysql_error());
while ($row=mysql_fetch_array($result)){
$x1=$row['x'];
echo "<br>";
$y1=$row['y'];
echo "<br>";
}
mysql_close($connection);
?>
<div class="dynamicImage">
<img src="img/asb.gif"/></div>
<script type="text/javascript">
function showImage(x, y) {
$(".dynamicImage").show();
$(".dynamicImage").width($(".dynamicImage img").width());
$(".dynamicImage").height($(".dynamicImage img").height());
$(".dynamicImage").css("top", y);
$(".dynamicImage").css("left", x);
}
function hideImage() {
$(".dynamicImage").hide();
}
window.onload = function () {
showImage(<?php echo $x1; ?>, <?php echo $y1; ?>);
}
</script>
</body>
</html>

كارهايي كه كردم از اين قراره:
مختصات xو y رو با ايجكس در جي كوئري براي php فرستادم و php اون مقادير رو براي ديتابيس ارسال كرد. بعد امدم با php مقادير ديتابيس رو خوندم و ريختم توي جاوا اسكريپت و جاوا اسكريپت مهره رو با كمك html توي صفحه چاپ كرد . اين كل كارهايي بود كه من انجام دادم. :لبخند:
ravand
یک شنبه 14 اسفند 1390, 17:04 عصر
اينم كدهاي قسمت ارسال مختصات :

<head>
<style>
.dragme{position:relative;}
</style>
<script language="JavaScript1.2">
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";

while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}

if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#asb").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$.post('http://localhost/shat/shatranj.php?x=' + x + '&y=' + y, function(data) {
alert("Data Loaded: " + data);
});

});
});
</script>
<style>
.zamine{
height:220px;
width:220px;
background: url('zemine.jpg') no-repeat;
height:220px;
width:220px;
border:2px #0E2DEC solid;
}
</style>
</head>
<body>
<div align="center">
<div class="zamine" id="asb">
<img class="dragme" id="ghale1" src="img\ghale.gif">
<img class="dragme" src="img\asb.gif">
<img class="dragme" src="img\fil.gif">
<img class="dragme" src="img\vazir.gif">
<img class="dragme" src="img\shah.gif">
<img class="dragme" src="img\fil.gif">
<img class="dragme" src="img\asb.gif">
<img class="dragme" src="img\ghale.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<img class="dragme" src="img\sarbaz.gif">
<br><br><br>
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\sarbazs.gif">
<img class="dragme" src="img\ghales.gif">
<img class="dragme" src="img\asbs.gif">
<img class="dragme" src="img\fils.gif">
<img class="dragme" src="img\vazirs.gif">
<img class="dragme" src="img\shahs.gif">
<img class="dragme" src="img\fils.gif">
<img class="dragme" src="img\asbs.gif">
<img class="dragme" src="img\ghales.gif">
</div>
</div>
</body>
</html>


بعداً كه كاملاً ساختمش و كارش تموم شد نتيجه رو همين جا براتون ارسال ميكنم.
ravand
دوشنبه 15 اسفند 1390, 09:24 صبح
نيازي به جي كوئري يا جاوا اسكريپت نبود با همين css هم ميشه مختصات رو دريافت كرد:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>شطرنج</title>
</head>
<body>
<?php
$connection=mysql_connect("localhost","root","") or die (mysql_error());
$db=mysql_select_db("mokhtassat",$connection) or die (mysql_error());
$sql="SELECT * FROM meghdar";
$result=mysql_query($sql,$connection) or die (mysql_error());
while ($row=mysql_fetch_array($result)){
$x1=$row['x'];
echo "<br>";
$y1=$row['y'];
echo "<br>";
}
$aks = 'img/asb.gif';
echo "<img src=\"{$aks}\" style=\"top:{$y1}px; left:{$x1}px;position:fixed;\">";
mysql_close($connection);
?>
</body>
</html>
اين كد رو فقط براي حركت مهره ي اسب ساختم. آزمايشي است.
MMSHFE
دوشنبه 15 اسفند 1390, 13:22 عصر
بله بدون AJAX هم میشه. هدف از AJAX‌اینه که با هر حرکت، صفحه نخواد Refresh بشه. به زودی کد کامل شده خودم رو میگذارم. موفق باشید.
ravand
سه شنبه 01 فروردین 1391, 18:48 عصر
مهندس من بازم كدهايي كه شما نوشتيد رو ديدم . موندم چجوريه كه وقتي مهره رو حركت ميديم دقيقا مياد توي هر جدول و مثل چيزي كه من نوشتم نيست .
از اين كه بگذريم من كدي نوشتم كه مختصات x و y رو دريافت كنه و بر اساس اون مهره رو براي فرد مقابل نمايش بده. نميدونم چرا هر كاري ميكنم بازم اين مقادير xو y
كه همون left و top هستن وسط صفحه رو در نظر نميگيرن و گوشه ي سمت چپ بالا رو در نظر ميگيرن.
الان اين كد رو ببينيد:

<div align="center">
<div class="zamine" id="asb">
<img src="<?php echo $aks; ?>" style="top:<?php echo $y1; ?>px; left:<?php echo $x1; ?>px;position:fixed;\">
</div>
</div>
من اين دستوراتي كه گفتم گذاشتم داخل div كه براي وسط صفحه تراز بندي شده ولي با اين حال مهره مياد سمت چپ صفحه.
متشكرم.
MMSHFE
چهارشنبه 02 فروردین 1391, 01:52 صبح
خوب دوست عزیز، اگه ببینید من بعد از رها کردن، موقعیت جاری رو دریافت میکنم و بعد، خارج قسمت تقسیمش رو بر پهنا و ارتفاع خونه ها بدست میارم و دوباره این خارج قسمت رو ضربدر پهنا و ارتفاع میکنم. اینطوری، مهره در لبه بالا و سمت چپ خونه قرار میگیره. حالا کافیه نصف ارتفاع و پهنا رو بهش اضافه کنم تا وسط خونه قرار بگیره. دوباره اگه به کد تابع drop نگاه کنید، متوجه میشین. موفق باشید.
ravand
چهارشنبه 02 فروردین 1391, 09:17 صبح
حالا چجوري مشكل خودم رو حلش كنم؟

<div align="center">
<div class="zamine" id="asb">
<img src="<?php echo $aks; ?>" style="top:<?php echo $y1; ?>px; left:<?php echo $x1; ?>px;position:fixed;\">
</div>
</div>
nanosi
جمعه 15 شهریور 1392, 00:11 صبح
اين بازي كامل شطرنج در همين سايته در تاپيكي كه خودم شروع كردم. يه سر بزن. زياد بي ربط نيست. خالي از لطفم نيست
http://barnamenevis.org/showthread.php?417864-%D8%A8%D8%A7%D8%B2%D9%8A-%D9%83%D8%A7%D9%85%D9%84-%D8%B4%D8%B7%D8%B1%D9%86%D8%AC-%D8%A8%D8%A7-MATLAB&p=1868665&posted=1#post1868665