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

saalek110 · Feb 28, 2024

صفحه ۵:

تابع راندم:

JavaScript:

Math.random();

تابع راندوم ، یک عدد اعشاری زیر یک می دهد.

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

اگر عدد می خواهید این طوری بنویسید:

JavaScript:

Math.floor(Math.random() * 10);

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

عدد بین صفر تا ۹ می دهد.
اگر یک تا ۱۰ می خواهید بعلاوه یک کنید.

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

saalek110 · Feb 28, 2024

JavaScript:

Math.floor(Math.random() * 100);

کد بالا بین صفر تا ۹۹ می دهد.

JavaScript:

Math.floor(Math.random() * 100) + 1;

کد بالا میشه یک تا صد.

saalek110 · Feb 28, 2024

JavaScript:

Math.floor(Math.random() * (max - min) ) + min;

بین دو عدد می دهد.

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

saalek110 · Feb 29, 2024

آموزش نحوه استفاده از کدهای جاوا اسکریپت در html

استفاده از کدهای جاوا اسکریپت در html + مثال کاربردی - درسمن

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

darsman.com

saalek110 · Feb 29, 2024

دستورات جاوا اسکریپت که باید بدانید – ۵۰ دستور کلیدی

دستورات جاوا اسکریپت که باید بدانید – 50 دستور کلیدی

دستورات جاوا اسکریپت کاربردهای فراوانی در کدنویسی جاوا اسکریپت دارند و در این مطلب از مجله فرادرس 50 تا از مهم‌ترین آن‌ها بررسی شده‌اند.

blog.faradars.org

سالک: لازم نیست همه دستورات سایت بالا را یاد بگیرید.. ولی با نگاه به مطالب سایت بالا یک مروری بر چیزهایی که بلدید بکنید.

saalek110 · Feb 29, 2024

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

در این مطلب از مجله فرادرس کدهای آماده جاوا اسکریپت به همراه توضیحاتی کامل برای مهمترین مباحث موجود در این زبان آورده شده است.

blog.faradars.org

سالک:مرور سایت بالا ، کمک می کند ، دانسته های خود را مرور کنید یا بعضی چیزهای جدید یاد بگیرید. ولی لازم نیست خیلی قسمتهای اون را یاد بگیرید. برای کار ما لازم نیست.

saalek110 · Feb 29, 2024

قواعد دستوری در JavaScript

learnsource.net

سالک: سایت بالا در معرفی چگونه نوشتن کدهای جاوا اسکریپت کمک می کند.

یک کد از این سایت نقل می کنم:

JavaScript:

<html>
   <body>
      <script>
            document.write("Hello World!")
      </script>
   </body>
</html>

نتیجه:

کد:

Hello World!

saalek110 · Feb 29, 2024

قواعد زبان جاوا اسکریپت

قواعد زبان جاوا اسکریپت | آتریا

آموزش جاوا اسکریپت, در این بخش از آموزش طراحی سایت به آموزش قواعد و syntax زبان جاوا اسکریپت (javascript) می پردازیم تا بتوانید از این زبان در طراحی وب سایت های خود استفاده کنید.

www.atriya.com

سالک: سایت بالا ، یک سری قوائد نوشتن را میگه. یک مروری بکنید بد نیست.

saalek110 · Feb 29, 2024

برای نمایش فایلهای gif

GitHub - blindman67/GIFGroover: Gif decoder for displaying animated gifs in the canvas element

Gif decoder for displaying animated gifs in the canvas element - blindman67/GIFGroover

github.com

یک فایل در صفحه بالا هست به نام GIFGroover.jsکه کارش خوندن فایلهای gif است.

اگر پروژه را نمی خواهید یا نمی تونید دانلود کنید بروید این لینک:

GIFGroover/GIFGroover.js at master · blindman67/GIFGroover

Gif decoder for displaying animated gifs in the canvas element - blindman67/GIFGroover

github.com

کد را می بینید...دکمه دانلود را بزنید بالای کدها.

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

saalek110 · Feb 29, 2024

نمایش فایل gif:

طرز استفاده از اون فایل GIFGroover.js. .. اول باید فایل را نام ببرید. در کد زیر هست این کار
بعدش متغیری ساختیم و مکان فایل gif را بهش گفتیم. فایل من اسمش a24.gif است و در پوشه images است.

JavaScript:

</script>
<script src="GIFGroover.js"></script>
<script>
const myGif = GIFGroover();
      myGif.src = "images/a24.gif";

برای نمایش عکس در نقطه صفر و صفر داریم:

JavaScript:

ctx.drawImage(  myGif.image,0,0);

البته سایز عکس هم می توانیم بدهیم. این طوری:

JavaScript:

 ctx.drawImage(  myGif.image,0,0,70,70);

سالک: من دنبال یک gif خوان تک فایل بودم که از پکیجی استفاده نکرده باشه. که این را پیدا کردم.

saalek110 · Feb 29, 2024

امکاناتی داره این برنامه ،که در دموی زیر می توانید ببینید:

https://codepen.io/Blindman67/pen/wpbaoR

در فایل js دموی بالا می بینید چطور از امکانات استفاده کرده.

امکاناتش را اینجا

GIFGroover/README.md at master · blindman67/GIFGroover

Gif decoder for displaying animated gifs in the canvas element - blindman67/GIFGroover

github.com

نام برده:

Use GIFGroover to load a GIF as a sequence of images (frames).
Use GIFGroover to play gifs on canvas.
Use GIFGroover to control gif play speed, including backwards.
Use GIFGroover to pause and un-pause a gif.
Use GIFGroover to add/modify individual frames.
Use GIFGroover to change the frame sequence.
Use GIFGroover to access the comment/s field (if available).
Use GIFGroover to infinitely loop, limited loop gifs.

saalek110 · Feb 29, 2024

در اون نرم افزارهای پیکسل ساز ، من یک gif ساختم که دو فریم دارد ، در فریم اول یک ۶ ضلعی و در فریم دوم ۴ دایره دارد. با نمایش دهنده gif فوق توانستم اون فایل gif را در بازی خودم نمایش دهم:

چون ابزار فیلم گرفتن نداشتم ، دو عکس از نمایش فایل gif گرفتم. در اصل این دو شکل مرتب پشت سرهم نمایش داده می شوند در بازی من.
اون شش ضلعی بزرگ یا اون ۴ دایره جلوی دماغه هواپیما منظورم است.

فایلهای gif می تواند بازی شما را جذاب کند.

saalek110 · Mar 1, 2024

اول تابع update این کد را بزارید:

JavaScript:

const currentDate = new Date();
const milliseconds = currentDate.getMilliseconds();

و آخر تابع update این کد را:

JavaScript:

const currentDate2 = new Date();
const milliseconds2 = currentDate2.getMilliseconds();

و برای چاپ:

JavaScript:

text="mil2-mil1: " + (milliseconds2-milliseconds);
ctx.font = "20px" + " "+"Consolas" ;
            ctx.fillStyle = "black";
           ctx.fillText(text, 3, 15);

من این کارو کردم. در بازی زیر:

http://saalek121.fast-page.org/test/save/car5/index.php?i=1

مقدار ۳ را نشان می داد، ولی وقتی فریم نامبر به ۱۰ هزار رسید این عدد به ۱۰ رسید.
فکر کنم بخاطر اینه که تعداد آبجکت های خلق شده زیاد میشه..

وقتی فریم نامبر به ۲۰ هزار رسید ، عدد به ۱۳ رسید.
وقتی فریم نامبر به ۳۰ هزار رسید هنوز این عدد به ۲۰ نرسیده است.
وقتی فریم نامبر به ۴۰ هزار رسید ، عدد ۲۱ یا ۲۲ است.
وقتی فریم نامبر به ۵۰ رسید ، عدد به ۲۷ رسید.

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

saalek110 · Mar 1, 2024

ساخت کلاس نمایش عکس gif

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

JavaScript:

const myGif1 = GIFGroover();
myGif1.src="../images/gif/a1.gif";
const myGif2 = GIFGroover();
myGif2.src="../images/gif/a24.gif";

کد زیر آبجکت ساز است:

JavaScript:

 x = canvas.width;
    myObstacles_gif_1.push(new component_gif(17,17,myGif1 , x, 252));
      
    myObstacles_gif_2.push(new component_gif(25,25,myGif2, x, 146));

کد بالا را مثلا هر ۵۰ تا ۳۰۰ فریم نامبر یک بار اجرا می کنم. تا عکسها به فواصل بیاید.
کد بالا دو سری عکس gif را با y هایی برابر ۲۵۲ و ۱۴۶ تولید می کند.
دو تا آرایه را دو خط کد بالا استفاده می کند. ولی در یک ارایه هم میشد.ولی چون فاصله از دوربین ممکن است فرق داشته باشه و بخواهیم اعضای یک آرایه را آهسته تر تکان دهیم دو آرایه مناسب است.

در عکس بالا ، دو سری gif را می بینید ، پایین و بالای جاده ، زیر جاده gif به شکل مستطیل های بنفش است و بالای جاده به شکل شش ضلعی های قرمز.

کلاس نمایش gif این شکلی است:

JavaScript:

function component_gif(width, height ,groove, x, y) {
    this.groove=groove;
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.update = function() {
   
ctx.drawImage( this.groove.image,this.x,this.y,this.width,this.height);
      
    }
}

saalek110 · Mar 3, 2024

پست قبلی را ادیت کردم...
من آمده بودم برای هر شی که انتهای صفحه خلق میشد یک groove ساختم ، که برنامه دچار اختلال شد
پس به این نتیجه رسیدم برای هر عکس یک groove ایجاد بشه ، نه برای هر شی.

پس در ابتدای برنامه تعدادی groove ایجاد می کنم..برای هر عکس ، و در آبجکت ساز از آن groove ها استفاده می کنم.

برنامه حاصل را خودتان ببینید:

http://saalek121.fast-page.org/test/save/car8/index.php