آموزش ساخت بازی با کانواس و جاوا اسکریپت

saalek110

Well-Known Member
JavaScript:
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}

// Call the function
myFunction();

در کد بالا ، یک تابع تعریف شده، و بعد با آوردن اسم اون ، تابع فراخوانی شده...
داخل تابع فقط یک hello world در یک پاراگراف نوشته می شود.


در آدرس بالا می توانید با کدهای برنامه کار کنید و تمرین کنید.
 

saalek110

Well-Known Member
JavaScript:
function myFunction() {
  return Math.PI;
}

document.getElementById("demo").innerHTML = myFunction();

گفتیم که هر وقت تابع خروجی داشته باشه ، باید در متغیری ریخته شود.
در کد بالا ، خروجی تابع مستقیما دریک پاراگراف ریخته شده.

خروجی تابع عدد پی است. همان ۳.۱۴

در لینک زیر می توانید کدها را تغییر دهید و تمرین کنید:
 

saalek110

Well-Known Member
JavaScript:
<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

برنامه بالا یک فسمت در قسمت html است و یک قسمت در جاوا اسکریپت.
یک دکمه در قسمت html است و تابع در قسمت جاوا اسکریپت.

با برنامه بالا می توانید با گذاشتن دکمه هایی با کدهای جاوا اسکریپت ارتباط برقرار کنید.
در کامپیوتر که باشیم با نوشتن listener در کدهای جاوا اسکریپت ، میشه یا کیبورد فرمان داد ولی در گوشی میشه دکمه گذاشت تا با کدهای جاوا اسکریپت ارتباط برقرار کرد....
باید در قسمت جاوا اسکریپت تابعی باشد که وقتی دکمه را می زنیم اون تابع اجرا شود ، مثل کد بالا.
در اون تاپیک وقتی من سورسی را از github دانلود می کنم ، وقتی برای کامپیوتر طراحی شده باشد ، سعی می کنم با گذاشتن دکمه هایی و ایجاد یک تابع که به اون دکمه ها گوش بده ، برنامه را تحت کنترل بگیرم.

کد بالا را در لینک زیر می توانید پیگیری و تمرین کنید:

 

saalek110

Well-Known Member
ذخیره تابع در متغیر:

JavaScript:
const x = function (a, b) {return a * b};
let z = x(4, 3);

در کد بالا تابع در متغیر x ریخته شده...
و ما می توانیم با اون متغیر مثل تابع رفتار کنیم.
در کد بالا ، متغیر z برای دریافت ورودی استفاده شده.
تابع می بینید که دو ورودی دارد ، و حاصل ضرب ورودی ها را به عنوان خروجی برمی گرداند. ۳ ضربدر ۴ میشه ۱۲
در لینک زیر می توانید کدها را تغییر دهید و نتیجه را مشاهده کنید:

 

saalek110

Well-Known Member
غلط املایی باشه پرچم ها کار نمی کند

وقتی در تابع update غلط املایی داشته باشیم ،(یا شاید هر تابع دیگر)
فکر کنم یک خط اون تابع هم اجرا نمیشه.. پس گذاشتن پرچم هم بی فایده است...
یا باید خط دارای غلط املایی را با خوندن کدها پیدا کنیم یا بلوک بلوک کدها را بیرون بزاریم ببینیم چه زمانی تابع به حیات برمی گردد...یا یک راه دیگر خودتان پیدا کنید.
 
Surface Laptop انتخابی مناسب برای شما برای انجام مشاغل اداری، حسابداری، منابع انسانی، بازاریابی، وب و… چه نرم‌افزار سنگین‌تر مانند اتوکد و سایر نرم‌افزارهای طراحی باشد، چه یک طراح چند رسانه‌ای، سرفیس لپ‌تاپ 1 همچنان به شما بهره‌وری می‌دهد و یک انتخاب قابل اعتماد است. برای شناخت هر چه بیشتر این لپ تاپ استوک در ادامه با ما همراه باشید.
رایان مارکت
 

saalek110

Well-Known Member
JavaScript:
<table><tr><td>
<button type="button" id="up_down1" style=" font-size:20px;  " onclick="accelerate(-1)">up</button>
<button type="button" id="middle"  style=" font-size:12px;   " onclick="accelerate(0)">stop</button>
<button type="button" id="up_down2" style=" font-size:20px;  " onclick="accelerate(1)">down</button>
</td></tr><tr><td>
<button type="button" id="take_off" style=" font-size:12px;  " onclick="start(1)">take off</button>
<script>
   document.getElementById('up_down1').style.width =  window.innerWidth/ 3;
   document.getElementById('up_down1').style.height =  window.innerWidth/ 6;
   document.getElementById('up_down2').style.width =  window.innerWidth/ 3;
   document.getElementById('up_down2').style.height =  window.innerWidth/ 6;
   document.getElementById('middle').style.width =  window.innerWidth/ 5;
   document.getElementById('middle').style.height =  window.innerWidth/ 10;
   document.getElementById('take_off').style.width =  window.innerWidth/ 5;
   document.getElementById('take_off').style.height =  window.innerWidth/ 10;
</script>

در بالا ، با نگاه به عرض صفحه ، اندازه دکمه ها تعیین شده ، تا در گوشی های کوچک ، دکمه ها جا بشه.
 

saalek110

Well-Known Member
توضیح کلی در مورد این نرم افزارها:


نرم افزار اندرویدی ساخت عکس های png و gif. و غیره.

خونه های پیکسل را رنگ می کنیم و عکس می سازیم.


اولین نرم افزار:


Pixel studio

ساخت عکس png و gif .....
حجم ۳۷ مگا.

هم در گوگل استور لینک دادم ، و هم در سایت فارسروید.



 
آخرین ویرایش:

saalek110

Well-Known Member
نرم افزار پست قبل ، یعنی پیکسل استودیو ، امکانات خوبی دارد.
عکسهای png که می سازد ، دور شفاف است و من در بازی قرار دادم.
هر سایزی میشه ساخت.
لایه دارد.
لینک دارد و unlink . یعنی وقتی در یک فریم کاری می کنیم در فریم های بعدی هم عینا انجام می شود.
میشه عکسی از خارج وارد کار کرد.


تاپیک آموزش نرم افزار :



 
آخرین ویرایش:

saalek110

Well-Known Member

Divoom

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

saalek110

Well-Known Member
می توانید از divoom عکس دانلود کنید و در Pixel studio ادیت کنید و استفاده کنید.

یا از گوگل عکس پیدا کنید.
 
آخرین ویرایش:

saalek110

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

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

بالا