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

saalek110 · Feb 19, 2024

صفحه ۲

معرفی قالب دوم:

JavaScript:

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

</style>
</head>
<body onload="startGame()">
<script>



function startGame() {
     myGameArea.start();
}
var myGameArea = {

    canvas : document.createElement("canvas"),

    start : function() {
document.getElementById("p2").innerHTML+="myGameArea start" ;

        this.canvas.width = 480;
        this.canvas.height = 270;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },

    clear : function() {

        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

}

function updateGameArea() {
//document.getElementById("p3").innerHTML+= "updategamearea" ;

     myGameArea.clear();
    myGameArea.frameNo += 1;
document.getElementById("p4").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
document.getElementById("p5").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}


</script>
<br>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>

saalek110 · Feb 19, 2024

شرح برنامه:
در خط زیر:

HTML:

<body onload="startGame()">

تا body لود می شود باعث اجرای تابع startGame می شود.

تابع startGame هم با خط زیر باعث اجرای mygamearea می شود:

JavaScript:

myGameArea.start();

در انتهای mygamearea این خط را داریم:

JavaScript:

this.interval = setInterval(updateGameArea, 20);

که باعث میشه updategamearea هر ۲۰ میلی ثانیه اجرا بشه.

saalek110 · Feb 19, 2024

و تمام کارهای بازی بعد اون در تابع uldategamearea انجام می شود.
مثل بررسی برخوردها ، تغییر مختصات اجزای بازی ، حرکت قهرمان بازی.
البته قبل رسم های جدید باید صفحه پاک بشه که اون هم در updategamearea انجام میشه.
اسم تابع دو حرف بزرگ داخلشه ، ای طوری updateGameArea ، من اگر رعایت نمی کنم ، شما مراقب باشید.

یک عدد به نام فریم نامبر هم داخل updategamearea افزایش داده میشه، یک عدد معمولی است...چیز خاصی نیست ، اونجا که نوشته:

JavaScript:

   if (myGameArea.frameNo == 1 || everyinterval(150))

عدد ۱۵۰ را به تابع everyinterval می فرستد ، کار تابع everyinterval اینه که ببینه فریم نامبر بر ۱۵۰ بخش پذیر هست یا نه... پس در اعداد ۱۵۰ و ۳۰۰ و ۴۵۰ و ۶۰۰ اکی می دهد....

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

توی اون قسمت که من نوشتم :

JavaScript:

document.getElementById("p5").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;

توی اون قسمت دیوارها هر ۱۵۰ فریم نامبر که میشد ۳ ثانیه ساخته میشد. چون خود تابع updatgamearea هر ۲۰ میلی ثانیه اجرا میشه و همین تابه اون عدد را بالا می برد، پس حاصل ضرب ۲۰ میلی ثانیه در ۱۵۰ میشه ۳ ثانیه.

saalek110 · Feb 19, 2024

http://saalek121.fast-page.org/test/amozesh/test/g4.html

لینک بالا حاصل اجرای اون برنامه است...

saalek110 · Feb 19, 2024

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

saalek110 · Feb 19, 2024

http://saalek121.fast-page.org/test/amozesh/test/g8.html

برنامه زیر را به عنوان نمونه ، در این قالب نوشتم. باز یک مربع آبی است که به سمت پایین و راست حرکت می کند:

JavaScript:

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

</style>
</head>
<body onload="startGame()">
<script>

 var  rectangle_x =50;
 var  rectangle_y =50;
 var  rectangle_h = 50;
 var  rectangle_w = 50;

function startGame() {
     myGameArea.start();
}
var myGameArea = {

    canvas : document.createElement("canvas"),

    start : function() {
document.getElementById("p2").innerHTML+="myGameArea start" ;

        this.canvas.width = 5500;
        this.canvas.height = 700;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea, 20);
        },

    clear : function() {

        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }

}

function updateGameArea() {
//document.getElementById("p3").innerHTML+= "updategamearea" ;
   
 rectangle_x += 1;
 rectangle_y += 1;

    myGameArea.clear();
    myGameArea.frameNo += 1;

ctx = myGameArea.context;
        text="SCORE: " + myGameArea.frameNo;
ctx.font = "20px" + " "+"Consolas" ;
             ctx.fillStyle = "black";
         ctx.fillText(text, 240, 30);


       ctx = myGameArea.context;
    ctx.fillStyle = "blue";
ctx.fillRect(rectangle_x,rectangle_y,rectangle_w ,rectangle_h);



document.getElementById("p4").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
document.getElementById("p5").innerHTML=  "frameno= " + JSON.stringify(myGameArea.frameNo) ;
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}


</script>
<br>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>
<p id="p5"></p>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>

saalek110 · Feb 19, 2024

متغیرهایی به اول برنامه اضافه کردم:

JavaScript:

 var  rectangle_x =50;
 var  rectangle_y =50;
 var  rectangle_h = 50;
 var  rectangle_w = 50;

در قسمت اول کد زیر ، افزایش x و y مربع است،
بعدش پاک کردن صفحه ، قسمت clear از mygamearea این کار را می کند،
بعدش باز از mygamearea کانتکست را بدست آورریم با این خط کد:

JavaScript:

ctx = myGameArea.context;

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

JavaScript:

rectangle_x += 1;
 rectangle_y += 1;

    myGameArea.clear();
    myGameArea.frameNo += 1;

ctx = myGameArea.context;
        text="SCORE: " + myGameArea.frameNo;
ctx.font = "20px" + " "+"Consolas" ;
             ctx.fillStyle = "black";
         ctx.fillText(text, 240, 30);


       ctx = myGameArea.context;
    ctx.fillStyle = "blue";[
ctx.fillRect(rectangle_x,rectangle_y,rectangle_w ,rectangle_h);

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

saalek110 · Feb 20, 2024

معرفی قالب سوم:

منبع:

Move the ball - Game development | MDN

This is the 2nd step out of 10 of the Gamedev Canvas tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Canvas-workshop/lesson2.html.

developer.mozilla.org

JavaScript:

<html>

<head>
<style>

canvas {
  background: #eee;
}
button {
  display: block;
}

</style>
</head>
<body>
    <canvas id="myCanvas" width="480" height="320"></canvas>
    <button id="runButton">Start game</button>
<script>


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = canvas.width / 2;
let y = canvas.height - 30;
const dx = 2;
const dy = -2;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;
}

function startGame() {
  const interval = setInterval(draw, 10);
}

document.getElementById("runButton").addEventListener("click", function () {
  startGame();
  this.disabled = true;
})



</script>

</body>
</html>

saalek110 · Feb 20, 2024

تفاوت با قالب دوم:

قالب سوم با یک دکمه شروع میشه ، قالب دوم خودبخود شروع می شد ، با رویداد onload از body شروع میشه.

شباهت با قالب دوم:

setInterval را هر دو استفاده کرده اند.

به نظر من قالب سوم قابل فهم تره. اون دکمه را هم میشه حذف کرد ، تا شبیه قالب دوم اتوماتیک اجرا بشه.

saalek110 · Feb 20, 2024

شرح قالب سوم:
دکمه را که بزنی ، تابع startgame فعال میشه...
تابع startgame , تابع draw را به شکل دوره ای فعال می کند ، یعنی هر ۱۰ میلی ثانیه تابع draw اجرا میشه.

شما کدهای خود را در تابع draw بنویسید تا اجرا بشوند.

چیزی که الان در تابع draw هست ، پاک کردن صفحه است که بزارید باشه ، چون قبل هر رسمی باید همه چی پاک بشه ، و دومین چییی که در تابع draw داریم احضار تابع ball است. شما هم می توانید توابعی بسازید و در تابع draw اون توابع را احضار کنید.

saalek110 · Feb 20, 2024

من کد را آپلود کردم ، خودتان نتیجه اجرا را ببینید:

http://saalek121.fast-page.org/test/amozesh/3th_structure/h3.html

دیدن سورس صفحه:

کد جاوا اسکریپت را راحت میشه دید. در بروسر این را paste کنید:

کد:

view-source:http://saalek121.fast-page.org/test/amozesh/3th_structure/h3.html

view-source:http://saalek121.fast-page.org/test/amozesh/3th_structure/h3.html

پس هر لینکی من گذاشتم لینک را کپی بگیرید ، اول در بروسر بنویسید view-source: دو نقطه هم بعد view-source بزارید ،و بعد آدرس سایت را paste کنید و اینتر را بزنید. این برای گوشی است ، در ویندوز و کامپیوتر راحت تر است ، روی صفحه کلیک راست کنید و view source را بزنید.

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

saalek110 · Feb 20, 2024

قالب سوم بدون دکمه:

JavaScript:

<html>

<head>
<style>

canvas {
  background: #eee;
}
button {
  display: block;
}

</style>
</head>
<body onload="startGame()">

    <canvas id="myCanvas" width="480" height="320"></canvas>
<script>


const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = canvas.width / 2;
let y = canvas.height - 30;
const dx = 2;
const dy = -2;

function drawBall() {
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  x += dx;
  y += dy;
}

function startGame() {
  const interval = setInterval(draw, 10);
}


</script>

</body>
</html>

saalek110 · Feb 20, 2024

اجرا را ببینید:

http://saalek121.fast-page.org/test/amozesh/3th_structure/h3_2.html

برای شرح ، همان شرح قالب ۳ را بخوانید، فقط دیگه دکمه نداره و با رویداد onload از body اجرا میشه.

شباهت با قالب ۲ : هر دو خودبخود شروع می شوند و هر دو از setinterval برای اجرای دوره ای یک تابع استفاده می کنند.

به نظر من قالب ۳ از قالب ۲ قابل فهم تره.

خط:

JavaScript:

let x = canvas.width / 2;

یعنی تواسته از وسط پنجره کانواس توپ حرکتش را شروع کنه.

خط:

JavaScript:

let y = canvas.height - 30;

یعنی خواسته از ضلع پایینی شروع بشه ولی یک کمی بالاتر...

saalek110 · Feb 20, 2024

انواع متغیرها:

چرا قبلش گفته let؟ فکر کنم کلمه let متغیر گلوبال تعریف می کنه....یعنی متغیری که داخل توابع هم شناخته شده است. بدون let امتحان کنید ببینید داخل توابع draw یا ball قابل استفاده هست یا نه.

اون const فکر کنم اول کلمه constant به معنی مقدار ثابت است. یعنی قابل تغییر نیست. یک آموزش جاوا اسکریپت فارسی پیدا کنید ، اینها را بخونید. من هم وقت کردم می خونم.

saalek110 · Feb 20, 2024

ادامه متغیرها:فرق متغیر محلی و عمومی

اگر جلوی متغیر بنویسی var فکر کنم محلی است...البته داخل یک تابع...بیرون توابع بنویسی فکر کنم گلوبال میشه.

کد زیر را با پسوند html ذخیره کنید و با بروسر خود باز کنید.

JavaScript:

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>
<body onload="a()">
<script>

var value=2;

function a() {

var s1=33;
document.getElementById("p1").innerHTML= " s1 in a= " + JSON.stringify(s1) ;
 document.getElementById("p2").innerHTML=  "value in a= " + JSON.stringify(value);
b();
}

function b(){
document.getElementById("p3").innerHTML=  "value in b= " + JSON.stringify(value);
document.getElementById("p4").innerHTML=  "s1 in b= " + JSON.stringify(s1);
}

</script>
<br>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<p id="p4"></p>

</body>
</html>

نتیجه ای که من دیدم این که value در هر دو تابع شناخته شده بود...چون بیرون تابع تعریف شده ولی s1 فقط در تابع a شناخته شده ، تابع b اصلا هیچی در مورد s1 نگفت.

کد بالا برای فهم فرق متغیر محلی(یعنی درون یک تابع) و متغیر گلوبال یعنی بیرون توابع بود.

نتیجه اجرا درعکس زیر:

همان طور که در عکس بالا می بینید اثری از گزارش تابع b در مورد s1 نیست.

درکد بالا ، تابع a بوسیله رویداد onload از body اجرا شده و تابع b بوسیله تابع a اجرا شده.

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

saalek110 · Feb 20, 2024

خلاصه قالب:
یک تابعی اول باید شروع بشه ، معمولا اسمش را start می ذارن. حالا به هر روشی شروع بشه ، مثلا با دکمه یا رویداد onload از body .
بعدش تابع استارت یک تابع دیگر را به شکل دوره ای ، با تابع setinteval فعال می کنه. معمولا اسم تابع دوم را update یا draw می زارن.
تابع دوم می تواند تعداد زیادی تابع را صدا بزنه ، که یعنی همه اونها انگار دوره ای فعالن.
کدهای شما یا باید قبل فعالیت دوره ای اجرا بشوند ، یا در دور ها اجرا بشوند.
اونهایی که قبل شروع دوره ای اجرا میشن ، کدهای آماده سازی یا setting است و اونهایی که داخل دوره ها اجرا میشن ، کدهای رسم و آپدیت شکلها هستند.

البته در دوره ها هم میشه با گذاشتن شرط هایی کدهای خاصی را اجرا کرد... مثلا در قالب دوم با شمردن یک عدد ، هر ۱۵۰ شمارش یک کاری می کرد. یا مثلا شما می توانید بگید اگر فلان شرایط ایجاد شد فعلا کارو بکن ، مثلا یک دکمه pause در بازی ها هست که می توانید به آپشن هم بروید، اینها وسط بازی هم قابل طراحی است.

مطالب پست حاضر یعنی پست ۳۶ ، از پست ۹ لینک داده شد. چون شاید بهتر باشد قالب ۱ و ۲ ندیده گرفته شود ، و از قالب سوم ، با یا بدون دکمه استفاده شود.

saalek110 · Feb 20, 2024

سایت github سایت سورس همگانی است.
یک سورس جالب در صفحه زیر هست می خواهم ببینید:
من خودم کدش را می زارم لازم نیست بروید لینک زیر.

GitHub - Dev-Zisko/TRexGame-Jun26-2020: Dinosaur google chrome game project. Technologies and languages used: HTML, JS and CSS. Own learning.

Dinosaur google chrome game project. Technologies and languages used: HTML, JS and CSS. Own learning. - Dev-Zisko/TRexGame-Jun26-2020

github.com

ولی اگر کسی خواست خودش دانلود کنه ، در عکس زیر گفتم لینک دانلود بسته کجاست:

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

saalek110 · Feb 20, 2024

ادامه بسته پست قبل:
این فایل html اونه:

HTML:

<html>
    <head>
        <script src="juego.js"></script>
    </head>
 
    <body onload="inicializa();">
        <canvas id="canvas" width="700" height="300" style="border:2px solid #000000;"></canvas>
    </body>

</html>

در کد بالا ، پنجره کانواس با نام canvas معرفی شده که در فایل بعدی بهش اشاره میشه.
همچنین دقت کنید که تابع inicializa که در انگلیسی میگن initialize یعنی شروع . مشاب همون تابعی است که ما میگیم بهش start.
پس در کد جاوا اسکریپت که نام فایلش juego.js است، تابعی که پیشرو است تابع inicializa است. و تابع inicializa من انتظار داشتم تابع principal را فعال کنه ، به شکل دوره ای ...ولی یک کد آزاد به شکل زیر این کارو می کنه:

JavaScript:

//--------------------
//BUCLE PRINCIPAL
//--------------------
var FPS = 50;
setInterval(function(){
    principal();
}, 1000/FPS);

فایل juego.js:

JavaScript:

document.addEventListener('keydown', function(evento){
    if(evento.keyCode == 32){
        if(nivel.muerto == false){
            saltar();
        }
        else{
            nivel.velocidad = 9;
            nivel.muerto = false;
            nube.velocidad = 1;
            nivel.puntuacion = 0;
            cactus.x = ancho + 100;
            nube.x = ancho + 100;
        }
    }
});

var imgRex, imgNube, imgCactus, imgSuelo;

function cargaImagenes(){
    imgRex = new Image();
    imgRex.src = 'img/rex.png';
    imgNube = new Image();
    imgNube.src = 'img/nube.png';
    imgCactus = new Image();
    imgCactus.src = 'img/cactus.png';
    imgSuelo = new Image();
    imgSuelo.src = 'img/suelo.png';
}

var ancho = 700;
var alto = 300;
var canvas, ctx;

function inicializa(){
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    cargaImagenes();
}

function borraCanvas(){
    canvas.width = ancho;
    canvas.height = alto;
}

var suelo = 200;
var trex = {y: suelo, vy: 0, gravedad: 2, salto: 28, vymax: 9, saltando: false};
var nivel = {velocidad: 9, puntuacion: 0, muerto: false};
var cactus =  {x: ancho + 100, y: suelo - 25};
var nube = {x: 400, y: 100, velocidad: 1};
var suelog = {x: 0, y: suelo + 30};

function dibujaRex(){
    ctx.drawImage(imgRex, 0, 0, 128, 128, 100, trex.y, 50, 50);
}

function dibujaCactus(){
    ctx.drawImage(imgCactus, 0, 0, 128, 128, cactus.x, cactus.y, 38, 75)
}

function logicaCactus(){
    if(cactus.x < -100){
        cactus.x = ancho + 100;
        nivel.puntuacion++;
    }
    else{
        cactus.x -= nivel.velocidad;
    }
}

function dibujaSuelo(){
    ctx.drawImage(imgSuelo, suelog.x, 0, 700, 30, 0, suelog.y, 700, 30);
}

function logicaSuelo(){
    if(suelog.x > 700){
        suelog.x = 0;
    }
    else{
        suelog.x += nivel.velocidad;
    }
}

function dibujaNube(){
    ctx.drawImage(imgNube, 0, 0, 128, 128, nube.x, nube.y, 82, 31);
}

function logicaNube(){
    if(nube.x < -100){
        nube.x = ancho + 100;
    }
    else{
        nube.x -= nube.velocidad;
    }
}

function saltar(){
    trex.saltando = true;
    trex.vy = trex.salto;
}

function gravedad(){
    if(trex.saltando == true){
        if(trex.y - trex.vy - trex.gravedad > suelo){
            trex.saltando = false;
            trex.vy = 0;
            trex.y = suelo;
        }
        else{
            trex.vy -= trex.gravedad;
            trex.y -= trex.vy;
        }
    }
    else{
 
    }
}

function colision(){
    if(cactus.x >= 100 && cactus.x <= 130){
        if(trex.y >= suelo-25){
            nivel.muerto = true;
            nivel.velocidad = 0;
            nube.velocidad = 0;
        }
    }
}

function puntuacion(){
    ctx.font = "30px impact";
    ctx.fillStyle = '#555555';
    ctx.fillText(nivel.puntuacion, 600, 50);
    if(nivel.muerto == true){
        ctx.font = "60px impact";
        ctx.fillText('GAME OVER', 240, 150);
    }
}

//--------------------
//BUCLE PRINCIPAL
//--------------------
var FPS = 50;
setInterval(function(){
    principal();
}, 1000/FPS);

function principal(){
    borraCanvas();
    gravedad();
    colision();
    puntuacion();
    logicaCactus();
    logicaNube();
    logicaSuelo();
    dibujaSuelo();
    dibujaNube();
    dibujaCactus();
    dibujaRex();
}

زبون نویسنده که شاید اسپانیایی یا زبان دیگر بوده ، دقیق نمی دونم..من فقط می خواستم قسمت زیر را ببینید:

JavaScript:

function principal(){
    borraCanvas();
    gravedad();
    colision();
    puntuacion();
    logicaCactus();
    logicaNube();
    logicaSuelo();
    dibujaSuelo();
    dibujaNube();
    dibujaCactus();
    dibujaRex();
}

تابع بالا یعنی principal حکم همون تابع update یا draw را داره که مرتب تکرار میشه.
ببنیید چقدر تابع را صدا زده!! از پیشوند های اسم توابع تا حدودی میشه فهمید کارشون چیه ، با وجودی که از یک زبان ناشناخته است.

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

بازی بالا فکر کنم کار می کنه و اشکال نداره. فقط کیبورد کامپیوتر و دکمه space را باید زد. که من فعلا در گوشی هستم و نمی تونم چک کنم.
من نمی خوام با کد بالا کار کنید. فقط خواستم ببینید چه تعداد تابعرا در تابع update خود صدا زده.
من کدهایش را خوندم و فهمیدم چطور کار می کنه.
یک پوشه با نام img کنار کدهاست و ۴ تا عکس داخلش است.

اون قرمزه اسمش cactus.png است ، اون ابره اسمش nube.png است ، اون مربع آبی اسمش rex.png است، خط هم اسمش suelo.png است.

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

نکته جالب دیگر اینکه ، همه ملت ها با همین کدها کار می کنند و در سایت مثلا گیت هاب سورس می زارن. سورس ایرانی هم دیروز دیدم. ولی svg بود برای بالای سایت. با همین کانواس هم میشه طرحهای زیبای متحرک برای قسمتهای مختلف سایت ساخت. من خودم یک ماشین ساختم و در قسمتی از سایتم داره حرکت می کنه.

http://saalek110.fast-page.org/?i=1

نکته ای که شما از این سورس می توانید برداشت کنید ، اینه که حتما لازم نیست تابع start تابع uldate را به شکل دوره ای فعال کند، در سورس بالا ، با یک خط کد ، تابع principal را به شکل دوره ای با تابع setinterval فعال کرده.

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

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

برای اجرای بازی ، کدهای جاوا اسکریپت را اون اسمی که بالا گفتم در یک فایل ذخیره کنید، کدهای html را هم در فایل با پسوند ‌html با نام دلخواه ذخیره کنید. یک پوشه به نام img بسازید و ۴ فایل بالا را درش بزارید. یا کلا از سایت گیت هاب بسته را دانلود کنید.

در کد صحبت از کد ۳۲ کیبورد شده که دکمه space است ، همون درازترین دکمه در پایین ترین ردیف کیبورد.

من در هاستم آپلود کردم..... فکر کنم با space کیبورد در کامپیوتر بازی میشه ، من در گوشی ام فعلا ، و تست نکردم:

http://saalek121.fast-page.org/test/amozesh/cactus/index.html

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

saalek110 · Feb 24, 2024

برای اینکه در گوشی های دیگر پنجره کانواس اندازه مناسبی داشته باشه ، باید به فکر ابزارهایی بود.
شاید چیزی که در این پست هست کمک کند.

JavaScript:

 window.innerWidth;
 window.innerHeight;

گویا برای بدست آوردن صفحه است تا اندازه پنجره کانواس را تعیین کنیم.

از:

Resize HTML5 canvas to fit window

How can I automatically scale the HTML5 <canvas> element to fit the page? For example, I can get a <div> to scale by setting the height and width properties to 100%, but a <canvas&g...

stackoverflow.com

JavaScript:

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

how to make canvas 100% fit to the screen?

I have a program for moving an object on a canvas on mouse drag. However, I want the canvas to fit the screen. I am not sure how to achieve that. If I make the canvas "width:100%; height:100%;", th...

stackoverflow.com

البته نه اینکه کل صفحه را استفاده کنیم ، می توانیم درصدی از عرض و طول صفحه استفاده کنیم.

saalek110 · Feb 24, 2024

میشه چند تا کانواس در یک صفحه داشت. هر کدام برای یک کار.

در قسمت html:

HTML:

<canvas id="myCanvas" width="400" height="250" style="border:1px solid grey"></canvas>
<canvas id="myCanvas2" width="400" height="100" style="border:1px solid grey"></canvas>

و در قسمت اسکریپت:

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
     canvas.width = window.innerWidth;
     canvas.height = 370;
const canvas2 = document.getElementById("myCanvas2");
const ctx2 = canvas2.getContext("2d");
    canvas2.width = window.innerWidth;
    canvas2.height = 100;