ساخت بازی آنلاین با php و کار با html و جاوا اسکریپت

saalek110

Well-Known Member
ساخت بازی آنلاین با php و کار با html و جاوا اسکریپت

مدیر محترم خواهشا اگر تاپیک را منتقل کردید اگر امکان دارد شورتکات را در تالار (( برنامه نویسی و الگوریتم آن )) باقی بگذارید تا باعث دسترسی بهتر و بیشتر شوید. یا اینکه شورتکات را در تالار مناسب قرار دهید و تاپیک را همین جا نگه دارید. یا هر روش بهتری می دانید عمل کنید.
 

saalek110

Well-Known Member
فهرست:
یک قسمت ثبت نام در سایت باید داشته باشیم
یک قسمت ذخیره در دیتابیس.
یک قسمتهایی هم محاسبات و بررسی با php است تا امتیازدهی بازی انجام شود.
قسمتهایی هم در مورد طراحی کلی سایت و قسمتهایی برای ساخت عناصر بازی با html و جاوا اسکریپت.

نتیجه کلی این میشه که شما اول ثبت نام می کنید و بعد به یکی از بازی های سایت می روید و کسب امتیاز می کنید که امتیاز شما در دیتابیس سایت ثبت میشه. اگر توانستم برای هر فرد یک پروفایل هم می سازم و در پروفایلش رکوردزنی های فرد در بازیهای مختلف ثبت می شود.
قهرمان روز داریم و قهرمان هفته و قهرمان ماه و سال برای هر بازی. بازیهای متعددی داریم که به هم شباهت های زیادی دارد ولی تفاوتهایی هم دارد تا تفاوت شرکت کنندگان بهتر مشخص شود.

این تاپیک محیط خوبی برای افراد علاقه مند به ساخت بازی یا یادگیری php است.
 

saalek110

Well-Known Member
اگر می خواهید همراهی کنید می توانید یک فضای مجانی php ثبت نام کنید. در گوگل سرچ کنید تا این سایت ها را بیابید.
ولی باید محیط کار لوکال php را هم فراهم کنید. می توانید xampp را نصب کنید. در سایتهای ایرانی بگردید پیدا می کنید.

در این تاپیک قصد آموزش php را نداریم ولی کدهای مورد استفاده را شرح می دهیم.
 

saalek110

Well-Known Member
در عکس زیر دکمه استارت و استاپ را در xampp می بینید:

a2.jpg
در زیر آن دکمه استارت و استاپ دیتابیس mysql را می بینید.

همچنین دکمه Netstat را در شکل فوق می بینید. آن را بزنید تا بدانید در بروسر چه آدرسی را باید وارد کنید. مثلا 192.168.1.1 ولی عدد مذکور مثال است ببینید در نرم افزار چه عددی گفته شده. وقتی دکمه را زدید پنجره ای باز می شود. اعداد انتهای پنجره را من استفاده می کنم.

معادل هارد شما برای آدرس فوق می شود پوشه htdocs از پوشه xampp
یعنی کدهای خود را با پسوند php در پوشه htdocs قرار می دهید تا اجرا کنید.
مثلا آدرس

http://192.168.1.1/games/login.php
ما را به پوشه بازی ها و فایل لوگین می برد و این فایل را اجرا می کند. پوشه games در پوشه htdocs قرار دارد.
 
آخرین ویرایش:

saalek110

Well-Known Member
کد پایه html:
تگ html که می بینید در ابتدا باز شده و در انتها بسته شده. ممیز علامت بستن است. تگهای head و body داخل تگ html باز و بسته شده اند.
یک head داریم که محل قرارگیری چیزهایی است که مثلا در اینجا با تگ تایتل عبارت learn html می شود عنوان صفحه ما.
و یک بدنه داریم که محتوای سایت در آن قرار می گیرد.

HTML:
<html>
<head>
<title>learn html</title>

</head>
<body>
<h1>In the name of God</h1>

</body>
</html>

a3.jpg
تایتل را در head نوشتیم و در عکس می بینید تایتل صفحه کجا نوشته می شود. یک بنام خدا در سایت نوشتیم. آدرس صفحه در هارد می شود پوشه games و فایل learn.php البته نام فایل دلخواه است و حتی می توانید با پسوند html ذخیره کنید چون هنوز کد php میان کدهای html اضافه نکرده ایم.
هر سوالی داشتید خصوصی با عمومی بپرسید تا بیشتر شرح داده شود.
همچنین برای اطلاعات بیشتر می توانید به آموزش های html که توسط هموطنان زیاد نوشته شده مراجعه کنید.
 

saalek110

Well-Known Member
HTML:
<!DOCTYPE html>
<html>
<head>
<title>login</title>

</head>
<body>
<h1>In the name of God</h1>
    <form action = "verify_login.php" method = "POST">  Username:<br>
  <input type="text" name="Username"></td>
    <td>Password:
  <input type="text" name="Password">     <input type="submit" name="Action_login">
</body>
</html>

کد بالا هم کد html است و هنوز اثری از php درون آن نیست ولی پاس می دهد به یک فایل با پسوند php
این کدها فرم یوزر و پسورد را نمایش می دهد تا کاربر یوزر و پسورد را وارد کند.

a4.jpg

کدهای فوق زیاد چیزی برای شرح دادن ندارد. باید به همین روش نوشته شود. برای توضیحات بیشتر به آموزش فرم در آموزشهای html فارسی یا انگلیسی مراجعه کنید.
 
آخرین ویرایش:

saalek110

Well-Known Member
ما فعلا صفحه ثبت نام را نگفتیم. و کدهای بررسی یوزر و پسورد را هم در دیتابیس نگفته ایم
پس فعلا می گوییم اگر یوزر majid بود و پسورد 123123 مورد قبول است. بعدا کدها را اصلاح می کنیم تا در دیتابیس به دنبال نام مورد نظر بگردد.

PHP:
<!DOCTYPE html>
<html>
<head>
<title>verify</title>

</head>
<body >
<h1>In the name of God</h1>

<?php

// Always start this first
session_start();

if ( ! empty( $_POST ) ) {
    if ( isset( $_POST["Username"] ) && isset( $_POST["Password"] ) ) {

    $test=0;  
        // Verify user password and set $_SESSION
    if ($_POST["Username"]=="majid"  && $_POST["Password"]=="123123"  ) {
            $_SESSION["Username"] = "majid";
            echo "<br><br>";
            echo "<h4 >Welcome.</h4>";
             $test=1;
        }

if ($test==0){
      
            echo "<br>Incorrect username or password<br>";
        }

   }
}


?>

</body>
</html>

کمی شرح کدهای php:
تابع empty و isset برای بررسی های اولیه است تا فرم درست پر شده باشد. اگر این دو تابع موافقت کردند در مرحله بعدی به بررسی یوزر و پسورد می پردازیم که باید majid و 123123 باشد.
تابع echo در php برای چاپ یک عبارت است .مثلا چاپ بنام خدا در سایت.
همچنین طرز تعریف متغیر در php و مقدار دادن را به آن می بینید. یک متغیر به نام test تعریف شده و ابتدا مقدار عدد صفر به آن داده شده ولی بعدا اگر یوزر و پسورد درست باشد مقدار 1 به آن داده می شود. وجود این عدد 1 در متغیر test نشان می دهد بررسی ها موفق بود. و در تکه پایینی می بینید اگر test مساوی 1 نباشد می گوید یوزر یا پسورد اشتباه است. این پیام برای این است که صفحه تکلیف کاربر را مشخص کند و اگر اشتباه نوشته تذکر دهد.

تست آنلاین:
بروید به آدرس : ویرایش بعدا: فایل حذف شده. شاید بعدا دوباره اضافه کردم.
http://saalek110.rf.gd/amozesh/login_majid/login.html
تا فرم را با اسم majid و پسورد 123123 پر کنید تا خوش آمد دریافت کنید.
بعد می توانید اطلاعات غلط وارد کنید و پیام یوزر یا پسورد اشتباهی دریافت کنید.
 
آخرین ویرایش:

saalek110

Well-Known Member
کدی برای مرور و تمرین مباحث بالا:
در صفحه: پوشه آموزش اشتباهی حذف شده. فعلا مراجعه نکنید.
http://saalek110.rf.gd/amozesh/form1/form.html
از شما نام و ایمیل می خواهد و در صفحه بعد به شما می گوید خوش آمدی فلانی . ایمیل شما این است و هر ایمیلی در فرم قبلا دادید نوشته می شود.

HTML:
<html>

<body>

<form action="a1.php" method="Post">

  First name: <input type="text" name="name"><br>

  Last name: <input type="text" name="email"><br>

  <input type="submit" value="Submit">

</form>

</body>

</html>
کد زیر با نام
a1.php باید در هاست ذخیره شود چون در فایل بالایی این نام صدا زده می شود.

PHP:
<html>

<body>
Welcome <?php echo $_POST["name"]; ?><br>

Your email address is: <?php echo $_POST["email"]; ?>
</body>

</html>
 
آخرین ویرایش:

saalek110

Well-Known Member
a2.jpg
آنچه گذشت:
تا اینجا کمی html یاد گرفتید و کمی با کدهای php آشنا شدید.
دیدید در html چطور فرم می سازیم. و در php بررسی اطلاعات وارد شده در فرم را دیدیم.
ولی هنوز کاربر قادر به ثبت نام در سایت ما نیست. و بازی هنوز ساخته نشده و امتیازات به نام او در دیتابیس ثبت نمی شود.
در پست های بعدی به این مباحث می پردازیم.
 

saalek110

Well-Known Member
در پستهای قبلی با فرم آشنا شدید.
در کدهای بالا دو فایل داشتیم. فایل اول حاوی فرم بود و فایل دوم که اطلاعات فرم به آن پاس داده میشد و با کدهای php روی آن میشد کار کرد.
حالا می خواهیم هر دو کار را در یک فایل انجام دهیم:
PHP:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>

<?php
// define variables and set to empty values
$name = $email = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  Name: <input type="text" name="name">
  <br><br>
  E-mail: <input type="text" name="email">
  <br><br>
  <input type="submit" name="submit" value="Submit">
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
?>

</body>
</html>
فایل بالا را با هر اسمی می توانید ذخیره کنید چون به فایل دیگر پاس نمی دهد و خودش همه کارها را انجام می دهد. ولی پسوند باید php باشد چون حاوی کدهای php هم هست.
شرح کدها:
PHP:
$name = $email = "";
در کد بالا دو متغیر به نامهای نام و ایمیل تعریف کرده ایم و آنها را خالی مقدار دهی کرده ایم.
PHP:
if ($_SERVER["REQUEST_METHOD"] == "POST")
کد بالا اصل ماجرا است چون وقتی فایل به خودش پاس می دهد این قسمت فاز دوم است.یعنی اگر بعد پاس دادن باشد کدهای بعد شرط فوق اجرا می شود. یعنی این قسمت:
PHP:
  $name = test_input($_POST["name"]);
  $email = test_input($_POST["email"]);
در کد بالا می بینید که متغیرهایی که ساخته بودیم و خالی کرده بودیم را با مقادیر ارسالی فرم پر کرده. البته بعد پاکسازی با تابع test_input.
تابع test_input را در خطوط بعدی خودمان تعریف کردیم و از سه تابع php برای پاکسازی ورودی ها استفاده می کند:
PHP:
function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
در کد فوق می بینید چطور تابع تعریف شده. نامی برایش در نظر گرفته شده و بعد کلمه فانکشن نوشته شده و 3 بار با استفاده از توابع php ورودی فرم پاکسازی شده.
خودتان می توانید نام توابع فوق را سرچ کنید و بفهمید چه تغییری روی ورودی می دهد.

ادامه در پست بعد.....
 

saalek110

Well-Known Member
کد پست قبل از این آموزش است:
Tryit Editor v3.5 - Show PHP
من کمی ساده ترش کردم تا قابل فهم تر بشود.

در آدرس فوق می توانید کدها را تغییر دهید و نتیجه اجرا را مشاهده کنید.

برمی گردیم به ادامه شرح کدها:
در ادامه کدها می بینیم که کدهای فرم آمده. که چیز جدیدی نیست. چیزی که در این فایل جدید است همان قسمت اولش بود که بررسی می کند که اگر در فاز دوم یعنی بعد پاس داده شدن باشد ورودی ها را از فرم دریافت کند و پاکسازی کند.
در انتهای کد هم دو متغیری که اول فایل تعریف کرده بودیم چاپ می شود. اگر در فاز اول باشیم یعنی قبل پاس دادن فایل به خودش قسمت انتهای صفحه خالی است و چیزی چاپ نمی شود ولی اگر فرم را پر کنید و دکمه را بزنید آنگاه اطلاعات در انتهای صفحه چاپ می شود.

از فایل بالا می خواهیم برای ساخت بازیهای خود استفاده کنیم. مثلا اگر بازی کارتی باشد بین کارتها می خواهیم کارتی را انتخاب کنیم.
 

saalek110

Well-Known Member
برای اینکه نقش تابع را بهتر بفهمید من یک خط کد به تابع اضافه کردم. این خط کد مقدار را در 3 ضرب می کند.

a1.jpg

البته باید در فرم عدد وارد کنید و اگر حروف وارد کنید خوب مسلما قابل ضرب در 3 نیست و کار نمی کند.


-------------------------
images.png
یک گام جلو رفتیم
خوب حالا یک فایل کد داریم که می تواند از کاربر ورودی بگیرد و روی آن کار کند
و بعدا نتایج را در دیتابیس به عنوان امتیاز ثبت کند.
کاری که می ماند طراحی بازی است تا کاربر انتخاب کند.
و قسمت ثبت نام و درج امتیازات بازیکن در دیتابیس هم باید کار شود.
 
آخرین ویرایش:

saalek110

Well-Known Member
حالا فرم را عوض کردم و به جای ورودی متن از آپشن استفاده کردم. چون در بازی انتخاب کردن راحت تر از تایپ کردن است.

PHP:
<!DOCTYPE HTML> 
<html>
<head>
</head>
<body> 

<?php
// define variables and set to empty values
$animal ="";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $animal =$_POST["animal"];
}

?>

<h2>PHP Form Validation Example</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
    options:
    <br>
  <input type="radio" name="animal" value="cat">cat
  <input type="radio" name="animal" value="dog">dog

  <br><br>
 
  <input type="submit" name="submit" value="Submit"> 
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $animal;
echo "<br>";
?>

</body>
</html>

a1.jpg
 

saalek110

Well-Known Member
تیبل در html:
HTML:
<!DOCTYPE html>
<html>
<head>

</head>

<body>


<table border="1">
<tr>
<td>1</td>   <td>2</td>
</tr><tr>
<td>3</td>   <td>4</td>
</tr>
</table>

</body>
</html>

a1.jpg

تیبل برای جدول بندی سایت استفاده می شود تا هر عنصر در خانه مناسب خود قرار گیرد.
در کد بالا tr به معنی ردیف و td به معنی ستون است. کلمه table هم شروع و خاتمه تیبل را نشان می دهد. کلمه border را اگر بردارید دیگر قاب ندارید. من برای این گذاشتم تا قاب را ببینید و آموزشی باشد.
برای توضیحات و امکانات بیشتر تیبل سایت زیر را ببینید:
HTML Tables
 
آخرین ویرایش:

saalek110

Well-Known Member
در قسمت head از فایل html می تواند استیل را قرار داد.
در فایل زیر تفاوتش با فایل پست قبل اینه که استیل تیبل در head تعین شده.

HTML:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
}
</style>
</head>

<body>


<table >
<tr>
<td>1</td>   <td>2</td>
</tr><tr>
<td>3</td>   <td>4</td>
</tr>
</table>

</body>
</html>

a1.jpg
 

saalek110

Well-Known Member
فایل وصل شدن به دیتابیس:
PHP:
<?php

$db_name = "xxxxxxxxxx";
$mysql_username = "xxxxxx";
$mysql_password = "xxxxxxxx";
$server_name = "xxxxxxxx";
$conn = mysqli_connect($server_name, $mysql_username, $mysql_password,$db_name);
if (!$conn)
  {
  die("Connection error: " . mysqli_connect_error());
  }
?>

هر فایلی بخواهد به دیتابیس وصل شود از این فایل استفاده می کند. یعنی اول فایل می گوید به این فایل نیاز دارد. به نوعی این فایل در ابتدای فایلهای محتاج اتصال به دیتابیس اجرا می شود.
اگر هاست گرفتید باید در کنترل پنل به دنبال یافتن این مقادیر باشید. من همه را با xxxxx پر کردم.
در هاست مجانی من دیتابیس هم موجود نبود و من خودم با افزودن یک پسوند به نامی که هاست پیشنهاد می کرد دیتابیس خود را ساختم.در کد بالا db_name نام دیتابیس شماست. یوزر و پسورد در هاست من خودش از قبل تعین شده بود. و بعد ساخت دیتابیس نام سرور هم داده شد. یعنی هر 4 موردی که کد بالا نیاز دارد را درون هاست بجویید. البته در هاست من این طور بود. ممکن است هاست های مختلف تفاوتهایی داشته باشند.
توجه کنید یوزرنیم و پسورد mysql است. دنبال یوزر و پسورد mysql باید بگردید.
در php my admin می توانید به شکل دستی تیبل در دیتابیس خود بسازید. و همچنین به شکل دستی ردیف هایی در تیبل می توانید اضافه کنید.

فایل بالا باید برای شما هم بدون دادن خطا اجرا شود. یعنی Connection error چاپ نشود. اگر خطا داد باید ببینید کدام را غلط وارد کرده اید. می توانید از راهنماهای هاست یا فروم هاست کمک بگیرید یا در فروم مجیدآنلاین بپرسید.
 
آخرین ویرایش:

saalek110

Well-Known Member
حالا فایل لوگین:
HTML:
<html>
<body>


<form action="go_login.php" method="Post">

  First name: <input type="text" name="username"><br>

  Last name: <input type="text" name="password"><br>

  <input type="submit" value="Submit">

</form>



</body>
</html>

فایل بالا فرم را نشان می دهد تا کاربر نام و پسورد خود را بنویسد و بعد به فایل go_login پاس می دهد تا آنجا دنبال یوزر و پسورد در تیبل کاربران بگردد.
می توانید تیبل users را دستی بسازید و چند نام و پسورد به آن اضافه کنید تا قابل گشتن و تست باشد.
 

saalek110

Well-Known Member
و این هم فایل go_login.php:
PHP:
<?php

session_start();

require "conn.php";

$user_name = $_POST["username"];
$user_pass = $_POST["password"];

$mysql_qry = "select * from users where username like '$user_name' and password like '$user_pass';";

$result = mysqli_query($conn ,$mysql_qry);

if(mysqli_num_rows($result) > 0) {

echo "login success !!!!! Welcome user";   echo "<br>";
$_SESSION["Username"] = $_POST["username"];
}

else {
echo "login not success";  echo "<br>";
$_SESSION["Username"] = "";
}

?>
فایل بالا به دنبال نام و پسورد وارد شده توسط کاربر در تیبل users می گردد. اگر پیدا کند سسیون یا جلسه را پر می کند.
کد بالا ممکن است اشکالاتی داشته باشد. و مسلما از لحاظ امنیت هیچ دفاعی ندارد. دوستان خواننده اگر اشکالات را بگویند ممنون می شوم.
ولی برای شروع کار و تمرین خوب است. چون کار می کند. بعدا می توانید از منابع دیگر کد را کامل کنید.

همین طور که می بینید این فایل به فایل اتصال که چند پست قبل نوشتیم نیاز دارد. یعنی با کمک آن فایل ابتدا به دیتابیس وصل می شود و بعد با کدهای این فایل به جستجو می پردازد.
پیامهایی که فایل می دهد را می توانید حذف کنید یا تغییر دهید و اهمیت ندارد.

اشتباه کد:
فکر می کنم عبارت:
PHP:
$_SESSION["Username"] = "";
مناسب نیست و باید unset کرد سشن یوزرنیم را.
PHP:
 unset($_SESSION['Username']);

خودتان تحقیق کنید تا من بعدا اصلاح کنم. من در بازی خودم از unset استفاده کردم و کار می کند. قبلا که از کد قبلی استفاده می کردم تعارضاتی بوجود می آمد. چون فکر کنم وقتی برابر دو تا دابل کوتیشن می گیریم هنوز ست شده است و اگر بگوییم آیا ست شده است احتمالا جواب مثبت است. ولی unset که استفاده کنیم دیگه تابع isset اشتباه نمی کند.

ضمنا بزرگی و کوچکی خروف را اشتباه ننویسید. دو خط زیر با هم متفاوت هستند:
PHP:
unset($_SESSION['Username']);
unset($_SESSION['username']);
 
آخرین ویرایش:

saalek110

Well-Known Member
ممکن است در پست قبل سسیون را اشتباه خالی کرده باشم. منظور خط:
PHP:
$_SESSION["Username"] = "";
است. شاید درستش جور دیگر باشد.مثلا تابع unset. این خط را از خودم نوشتم. بعدا از منابع اصلاح می کنم. فعلا با همین شیوه ادامه می دهیم.

حالا در صفحات دیگر سایت سسیون یوزرنیم بررسی می شود و اگر با خط فوق مقدار دهی شده باشد می گوید لوگین کن و به صفحه لوگین پاس می دهد. :
PHP:
<?php
      echo "one page of web<br>";
session_start();
if ( isset(  $_SESSION["Username"] )      ) {
  echo $_SESSION["Username"] ;
   }//login
  if (   ! isset(  $_SESSION["Username"] )       )
   {

    echo"Please login.<br><br>";

echo "<a href='login.php'>login.php</a>";
   }
?>
 
آخرین ویرایش:

جدیدترین ارسال ها

بالا