استفاده از draggable در کدهای جاوااسکریپت [بایگانی]

Salazar.mi

شنبه 04 آبان 1398, 20:17 عصر

سلام
ممنون میشم کمکم کنید
من میخوام برای درس یادگیری ماشین بازی چکرز را بنویسم
الان برای drag کردن میخواستم از جی کویری استفاده کنم
که با کلاس ها کار میکنه این امکان وجود داره که همزمان از جاوااسکریپت و جی کویری استفاده کرد؟؟؟؟؟؟؟؟
من الان هرکاری میکنم حالت drag کردن را نمتوانمم به dragred بدم
و یه سوال دیگه
میخوام بعد از اینکه drag شد تکرار میکنم بعد از drag شدن مقدار data برابر 0 بشه این امکان وجود دارد
ممنون میشم کمکم کنید
واگر دارم برای اجرای بازی چکرز راه را اشتباه میرم ممنون میشم راهنمایی کنید

<!DOCTYPE html>
<html>
<head>
<link href="assets/css/animation.css" rel="stylesheet">
<link href="assets/css/fontello-codes.css" rel="stylesheet">
<link href="assets/css/fontello-embedded.css" rel="stylesheet">
<link href="assets/css/fontello-ie7-codes.css" rel="stylesheet">
<link href="assets/css/fontello-ie7.css" rel="stylesheet">
<link href="assets/css/fontello.css" rel="stylesheet">
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<link rel="stylesheet" href="assets/js/jquery-ui.structure.css">
<link rel="stylesheet" href="assets/js/jquery-ui.theme.css">
<link rel="stylesheet" href="assets/scss/style.css">
<script src="assets/js/function.js"></script>

<link rel="stylesheet" href="assets/scss/style.css">
<script src="assets/js/function.js"></script>
<style>
root {
display: block;
}

body {
text-align:center;
}

p {
font-family:monospace;
}

table {
margin:auto;
}

td {
width:50px;
height:50px;
border: 1px solid black;
font-size:40px;
text-align:center;
font-family:arial, helvetica, sans-serif;
}

}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script src="show.js"></script>
</head>
<body>
<head>
<link href = "matchinggame.css" rel = "stylesheet"/>

</head>

<body>
<table>
<tr>
<td id="cell00" ></td>
<td id="cell01" ></td>
<td id="cell02" ></td>
<td id="cell03" ></td>
<td id="cell04" ></td>
<td id="cell05" ></td>
<td id="cell06" ></td>
<td id="cell07" ></td>
</tr>
<tr>
<td id="cell10" ></td>
<td id="cell11" ></td>
<td id="cell12" ></td>
<td id="cell13" ></td>
<td id="cell14" ></td>
<td id="cell15" ></td>
<td id="cell16" ></td>
<td id="cell17" ></td>
</tr>
<tr>
<td id="cell20" ></td>
<td id="cell21" ></td>
<td id="cell22" ></td>
<td id="cell23" ></td>
<td id="cell24" ></td>
<td id="cell25" ></td>
<td id="cell26" ></td>
<td id="cell27" ></td>
</tr>
<tr>
<td id="cell30" ></td>
<td id="cell31" ></td>
<td id="cell32" ></td>
<td id="cell33" ></td>
<td id="cell34" ></td>
<td id="cell35" ></td>
<td id="cell36" ></td>
<td id="cell37" ></td>
</tr>
<tr>
<td id="cell40" ></td>
<td id="cell41" ></td>
<td id="cell42" ></td>
<td id="cell43" ></td>
<td id="cell44" ></td>
<td id="cell45" ></td>
<td id="cell46" ></td>
<td id="cell47" ></td>
</tr>
<tr>
<td id="cell50" ></td>
<td id="cell51" ></td>
<td id="cell52" ></td>
<td id="cell53" ></td>
<td id="cell54" ></td>
<td id="cell55" ></td>
<td id="cell56" ></td>
<td id="cell57" ></td>
</tr>
<tr>
<td id="cell60" ></td>
<td id="cell61" ></td>
<td id="cell62" ></td>
<td id="cell63" ></td>
<td id="cell64" ></td>
<td id="cell65" ></td>
<td id="cell66" ></td>
<td id="cell67" ></td>
</tr>
<tr>
<td id="cell70" ></td>
<td id="cell71" ></td>
<td id="cell72" ></td>
<td id="cell73" ></td>
<td id="cell74" ></td>
<td id="cell75" ></td>
<td id="cell76" ></td>
<td id="cell77" ></td>
</tr>
</table>

<div>
<input type="button" value="start" id = "button1" onclick="drawBoard();">
</div>
<span class="icon-circle m_red"></span>

</body>
</body>

</body>

$(function(){
$(".dragred").draggable({
revert:"invalid",
});
});

var board = [
[5,2,5,2,5,2,5,2],
[2,5,2,5,2,5,2,5],
[5,2,5,2,5,2,5,2],
[0,5,0,5,0,5,0,5],
[5,0,5,0,5,0,5,0],
[1,5,1,5,1,5,1,5],
[5,1,5,1,5,1,5,1],
[1,5,1,5,1,5,1,5]
];

function drawBoard() {
for (var row = 0; row < board.length; row++) {
for (var col = 0; col < board[row].length; col++) {
var cell = document.getElementById("cell" + row + col);
var data=cell.innerHTML = board[row][col];
var datasbsb=cell.innerHTML = board[row+1][col+1];

if(data==2 && datasbsb===0)
{
var element=document.getElementById("cell" + row + col);
element.classList.add("icon-circle");
element.classList.add("m_red");
element.classList.add("dragred");
}
}

}
}

یه سوال دیگه من اگر نخوام مقدار داخل آرایه ها چاپ بشه منظورم همون عددهااست چی را باید حذف کنم؟؟؟؟؟؟؟/

plague

یک شنبه 05 آبان 1398, 17:59 عصر

که با کلاس ها کار میکنه این امکان وجود داره که همزمان از جاوااسکریپت و جی کویری استفاده کرد؟؟؟؟؟؟؟؟

جی کوئری یک کتابخونه هست که با js نوشته شده
البته که میتونی با هردو کار کنی چون زبون هردو یکیه

میخوام بعد از اینکه drag شد تکرار میکنم بعد از drag شدن مقدار data برابر 0 بشه این امکان وجود دارد

یه سری رویداد داره ... کنسول مرورگت رو باز کن بعد درگ & دراپ کن ببین تو کنسول چی مینویسه با این کد زیر

$(".dragred").draggable({
revert:"invalid",
start: function() {

console.log('شروع شد به کشیدن');

},
drag: function() {

console.log('در حال کشیدن');

},
stop: function() {

console.log('پایان کشیدن');

}
});

یه سوال دیگه من اگر نخوام مقدار داخل آرایه ها چاپ بشه منظورم همون عددهااست چی را باید حذف کنم؟؟؟؟؟؟؟/

متوجه نمیشم راجب چی و کجا داری صحبت میکنی

Salazar.mi

یک شنبه 05 آبان 1398, 18:05 عصر

جی کوئری یک کتابخونه هست که با js نوشته شده
البته که میتونی با هردو کار کنی چون زبون هردو یکیه

یه سری رویداد داره ... کنسول مرورگت رو باز کن بعد درگ & دراپ کن ببین تو کنسول چی مینویسه با این کد زیر

$(".dragred").draggable({
revert:"invalid",
start: function() {

console.log('شروع شد به کشیدن');

},
drag: function() {

console.log('در حال کشیدن');

},
stop: function() {

console.log('پایان کشیدن');

}
});

متوجه نمیشم راجب چی و کجا داری صحبت میکنی

خیلی ممنون که جواب دادین
با کدی که نوشتک مقدار هر آرایه هم دیده میشه
منظورم عددهااست
میخواستم اونا نوشته نشه

plague

یک شنبه 05 آبان 1398, 18:30 عصر

کدوم عدد ها ؟ کجا نوشته نشن ؟ الان کجا دارن نوشته میشن که نمیخای بشن ؟ یکم بهتر توضیح بده ما که تو ذهن شما نیستیم
آیا منظورت اینه که عدد های آرایه توی سورس کد نشون داده نشن ؟

Salazar.mi

یک شنبه 05 آبان 1398, 23:31 عصر

کدوم عدد ها ؟ کجا نوشته نشن ؟ الان کجا دارن نوشته میشن که نمیخای بشن ؟ یکم بهتر توضیح بده ما که تو ذهن شما نیستیم
آیا منظورت اینه که عدد های آرایه توی سورس کد نشون داده نشن ؟

:) راستش من از جاوااسکریپت خیلی بد میاد این کد را هم از جایی برداشتم یه مقدار تغییرش دادم تا بشه چیزی که میخوام
نمیدونم کدوم خط که میاد تو هر خانه مثلا همین 2 و5 و... که تو آرایه اولیه قرار دارد را تو هر خونه نشان میده

اما یه سوال اصلی تر هم دارم اگر ممکنه کمکم کنید
من تو همه کد هام برای چکرز یک کار مشابه انجام دادم
مثل اینجا
اومدم یه آرایه تشکیل دادم بعد با دوتا حلقه for تو در تو به عناصر آرایه دسترسی پیدا کردم
اینجا آرایه نشان دهنده صفحه بازی هست
عدد صفر نشان دهنده خانه خالی که مهره ها میتونن در آن خونه ها حرکت کنن
عدد یک نشان دهنده مهره آبی(مهره سمت خودمون)
عدد ۲ نشان دهنده مهره قرمز (مهره حریف)
عدد ۵ نشان دهنده پر بودن خانه است در واقع خانه هایی که مهره ها اجازه حرکت در آن را ندارند
حالا من به هر خونه از آرایه دسترسی دارم
امااااااا
مثلا وقتی میگم اگر خانه ای مقدارش ۲ بود یعنی مهره قرمز را داشت
و
خونه سطر بعد و ستون بعدش صفر بود خالی بود
تو اجازه حرکت کردن از خونه ۲ به خونه صفر داری
همه مهره هایی که اجازه را دارند حرکت میکنند طبق صفحه اولیه سه مهره اجازه دارند
اماااااا من میخوام بگم بیا random یکی از این خونه ها را حرکت بده
یه جورایی فکر میکنم باید دقیقا اینجوری بگم
بیا به صورت random از بین اونایی که شرایط حرکت را دارن یکی را انتخاب کن
دقیقا تو کد PHP ام همین مشکل را دارم
الان خوب توضیح دادم آیا ؟
خواهشا لطفا
اگر میتونین کمکم کنید
سخت گیر افتادم
ممنون میشم