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

saalek110

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




تاپیک زیر هم هست:

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

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

saalek110

Well-Known Member
خلاصه کدهای اون تاپیک:


JavaScript:
const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");


ctx.fillStyle = 'blue';
ctx.fillRect(30, 30, 50, 50);


          ctx.fillStyle = "rgb(200, 0, 0)";
          ctx.fillRect(10, 10, 50, 50);

          ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
          ctx.fillRect(30, 30, 50, 50);

ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);

var img = document.getElementById("scream");
  ctx.drawImage(img,10,10);
 
آخرین ویرایش:

saalek110

Well-Known Member
کانواس عناصر ساختمانی در دست جاوا اسکریپت:

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

saalek110

Well-Known Member
زبان php کجاست؟
زبان php از لحاظ توانایی و کامل بودن مثل جاوا اسکریپت است ، ولی محل عمل اونها فرق داره. کدهای php در سرور اجرا می شوند ولی کدهای جاوا اسکریپت در بروسر.
زبان php هم می تونه ساختار بازی بسازه ، ولی مثل مدیر کارخونه ای است که خودش آمریکا باشه... ولی جاوا اسکریپت ایران توی کارخونه باشه... php شاید ، یک مقدار دسترسی اش به بعضی چیزها کم باشه...
بهرحال مدیریت یا باید در php باشه یا در جاوا اسکریپت ، اگر از آمریکا بخواد مدیریت بشه ، مدام این فاصله آمریکا تا ایران مطرح میشه... البته اگر سرعت اینترنت بالا باشه ، احساس نمیشه ولی دسترسی جاوا اسکریپت به بعضی چیزها بهتره ، چون اصلا برای همین کارها ساخته شده . و php مثلا برای کار با دیتابیس طراحی شده.
پس نباید تعصب داشته باشیم که فیل را بکنیم داخل فنجون.. هر چیزی برای کاری ساخته شده ، با پتک نمیشه پشه کشت... پس بهتره php و جاوا اسکریپت را بهتر بشناسیم و محل کار هر یک را بدانیم. مثلا برای ثبت رکورد بازیکن در سرور باید از php استفاده کنیم.
 
آخرین ویرایش:

saalek110

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

ولی در بازی باید هر چند میلی ثانیه تغییرات بدهید... مثلا عناصر بازی جابجا بشن یا قهرمان بازی جایش عوض شود یا برخوردها یا اتفاقات دیگر مثل سقوط چیزها بررسی شود.


بازی سایت w3school:
در پست های بعدی ، یک بازی از سایت w3school را بررسی کرده ایم، در ساختار کدهای اون بازی ، یک تابع هر ۲۰ میلی ثانیه اجرا می شه تا کارهای بازی را انجام بده..مثل نغییر محل اجزای بازی و برخوردها و غیره... داخل اون تابع یک متغیری هر بار یک واحد افزایش پیدا می کنه ، تا مثل یک تقویم ، طراح بتونه از لحاظ زمانی و مرحله بازی بتونه بازی را مدیریت کند.
همچنین اون بازی یک کلاس داره که مثل یک مرکز مدیریت تمام اشیای بازی عمل می کنه. یعنی هر چیزی در ا ن بازی یک شی فرض شده....حتی اومده امتیاز بازی را هم در قالب یک شی گنجونده. که شاید زیاد کار جالبی نبوده و بهتر بود امتیاز بازی را جدا مدیریت کنه.

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

saalek110

Well-Known Member
اسنفاده از بازی ساز:
استفاده از بازی ساز ، خوبیش اینه که از امکاناتی که اون ارائه کرده می تونیم استفاده کنیم.
مثلا برخورد اشیا را براتون آماده کرده..
ولی بعضی بازی سازهای بد(یا سایت سازهای بد) ، دست و بال ما را کامل می بندند ، ۴ تا امکانات ضعیف داری فقط و دستت هم باز نیست که خودت کاری بکنی.

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

به نظرم بازی سازی خوب است که ما را از امکانات دیگر دور نکنه و یک سری امکانات بهمون بده....

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

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

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

saalek110

Well-Known Member
تغییر عکس ها ، موقع انجام کارهای مختلف:

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

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

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

کلا همین تغییرات عناصر بازی است که حس می دهد به کاربرو کار را جذاب می کند.


استفاده از صدا:

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

saalek110

Well-Known Member
ساعت عقربه ای که کار می کند:

کد:

JavaScript:
<html>
<body>

<canvas id="canvas" width="400" height="400"
style="background-color:#333">

</canvas>

<script>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  const grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();

}

function drawNumbers(ctx, radius) {

  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(let num = 1; num < 13; num++){
    let ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }

}
function drawTime(ctx, radius){
    const now = new Date();
    let hour = now.getHours();
    let minute = now.getMinutes();
    let second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);

    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);

    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {

    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

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

saalek110

Well-Known Member
کد یک بازی کامل:


کدش اینه:

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 myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(30, 30, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();

}
var myGameArea = {

    canvas : document.createElement("canvas"),

    start : function() {
        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 component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;  
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {

        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }

        return crash;
    }
}
function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {

            return;
        }
    }

    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 50;
        maxGap = 200;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));

    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }

    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}

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

</script>
<br>

<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

Well-Known Member
بازی پست قبل را من کمی تغییر دادم تا در گوشی هم بشه بازی کرد.

تغییراتی که من دادم ، دکمه هایی برایش گذاشتم. کد خودش رویدادهای ماوس بود که در گوشی کار نمی کرد. من از رویداد کلیک استفاده کردم.دکمه ها آخر کد است.




بعدا اینجا هم آپلود کردم:


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 type='text/javascript'>
var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
    myGamePiece = new component(12, 12, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();

}



var myGameArea = {

    canvas : document.createElement("canvas"),

    start : function() {

        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 component(width, height, color, x, y, type) {

    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {

        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }

    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;

        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            return;
        }
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 100
        maxGap = 150;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap)+50;
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
    myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();
}
function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}
function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>

<br>
<br>
<br>
<p>hi</p>

<p>Use the up and down button to stay in the air</p>

<center>



<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(-0.04)">up</button>


<button type="button" style=" font-size:12px; height:55px; width:120px" onclick="accelerate(0.5)">ground</button>


<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(0.04)">down</button>

</center>



<p>How long can you stay alive?</p>
</body>
</html>



این ۳ خط را من دستکاری کردم تا ساده شود:

JavaScript:
minGap = 100
        maxGap = 150;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap)+50;



قبلش این طوری بود:

JavaScript:
 minGap = 50;

        maxGap = 200;

        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);


Screenshot_۲۰۲۴-۰۲-۱۵_۰۷۰۹۴۴.jpg

دکمه وسطی سریع می اندازد زمین.



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

saalek110

Well-Known Member
تعیین جون برای بازی پست قبل:
یک متغیر به نام heart اضافه کردم به کد:
JavaScript:
let heart=200;
اونجایی که بازی تموم میشه این کد را اضافه کردم:
JavaScript:
heart--;
if (heart<0)
برای نمایش تعداد جون ، یک p تعریف کردم ، این طوری:
HTML:
<p id="the_heart"></p>
این هم برای نمایش جون:
JavaScript:
document.getElementById("the_heart").innerHTML="heart= " + JSON.stringify(heart);

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


JavaScript:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
  #the_heart {
    border:3px solid #fff733;
    border-radius:25px;

font-size:20px;

    margin-right:150px;
    margin-left:150px;

    padding-top:3px;
    padding-bottom:3px;

    padding-left:30px;

    background-color:rgba(250,130,30,1);
       }
</style>
</head>
<body onload="startGame()">

 <script type='text/javascript'>
var myGamePiece;
var myObstacles = [];
var myScore;
let heart=200;


function startGame() {

    myGamePiece = new component(12, 12, "red", 10, 120);
    myGamePiece.gravity = 0.05;
    myScore = new component("30px", "Consolas", "black", 280, 40, "text");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        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 component(width, height, color, x, y, type) {
    this.type = type;
    this.score = 0;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0; 
    this.x = x;
    this.y = y;
    this.gravity = 0;
    this.gravitySpeed = 0;
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.gravitySpeed += this.gravity;
        this.x += this.speedX;
        this.y += this.speedY + this.gravitySpeed;
        this.hitBottom();
    }
    this.hitBottom = function() {
        var rockbottom = myGameArea.canvas.height - this.height;
        if (this.y > rockbottom) {
            this.y = rockbottom;
            this.gravitySpeed = 0;
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, height, gap, minHeight, maxHeight, minGap, maxGap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
heart--;
if (heart<0)
            return;
        }
    }
    myGameArea.clear();
    myGameArea.frameNo += 1;
    if (myGameArea.frameNo == 1 || everyinterval(150)) {
        x = myGameArea.canvas.width;
        minHeight = 20;
        maxHeight = 200;
        height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
        minGap = 100
        maxGap = 150;
        gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap)+50;
        myObstacles.push(new component(10, height, "green", x, 0));
        myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
    }
    for (i = 0; i < myObstacles.length; i += 1) {
        myObstacles[i].x += -1;
        myObstacles[i].update();
    }
    myScore.text="SCORE: " + myGameArea.frameNo;
//  heart.text="heart= ";  //+heart.toString();
    myScore.update();
 //heart.update();
document.getElementById("the_heart").innerHTML="heart= " + JSON.stringify(heart);
    myGamePiece.newPos();
    myGamePiece.update();
}

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

function accelerate(n) {
    myGamePiece.gravity = n;
}
</script>
<br>
<br>
<br>

<center>
<p id="the_heart"></p>
<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(-0.04)">up</button>


<button type="button" style=" font-size:12px; height:55px; width:120px" onclick="accelerate(0.5)">ground</button>


<button type="button" style=" font-size:35px; height:100px; width:220px" onclick="accelerate(0.04)">down</button>
</center>

<p>Use the up and down button to stay in the air</p>


<p>How long can you stay alive?</p>
</body>
</html>

نمای بازی:

Screenshot_۲۰۲۴-۰۲-۱۶_۱۰۵۲۴۴.jpg

اینجا بازی کنید:

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

saalek110

Well-Known Member
این بازی w3school , طراحی جالبی دارد.

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

saalek110

Well-Known Member
JavaScript:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript This Keyword</title>
  </head>
  <body>

    <script>
      var myVar = 100;
      function printMe() {
        this.myVar = 200;
        this.display = function () {
          var myVar = 300;
          alert("myVar = " + myVar); // 300
          alert("this.myVar = " + this.myVar); // 200
        };
      }

      var obj = new printMe();
      obj.display();

    </script>
  </body>
</html>

کد از :

سالک: کلاس در جاوا اسکریپت است.خط زیر خلق شی از کلاس است:
JavaScript:
var obj = new printMe();

و شی می تواند تابعی از کلاس را صدا بزند:
JavaScript:
obj.display();

در برنامه این پست ، متغیری به نام myvar بیرون کلاس مقدار ۱۰۰ را دارد ، در this.myvar یعنی عضو کلاس ۲۰۰ است و داخل تابع display مقدار ۳۰۰ را دارد.


در برنامه بازی چند پست قبل ، component یک کلاس است و داری توابعی است.
توابع component عبارتند از:
update
newPos
hitBottom
crashWith

و آبجکت های کلاس component قادر به صدا زدن این توابع هستند.
مثلا در خطوط زیر :
JavaScript:
myScore.update();
    myGamePiece.newPos();
    myGamePiece.update();

قهرمان داستان یعنی همون myGamePiece و امتیاز یعنی myScore توابعی از کلاس component را فراخوانی کرده اند.
 
آخرین ویرایش:

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

بالا