بخش مقالات آکادمی | Articles
آخرین آموزش ها

بازی سازی با HTML – بخش پایانی رسیدیم و امیدواریم که از این سری مقالات نهایت استفاده رو برده باشین و با هم محیط متفاوتی در برنامه نویسی تحت وب تجربه کرده باشیم. در این بخش به مطالب تکمیلی و نهایی میپردازیم تا قادر به پیاده سازی یک بازی باشید.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

چرخش قطعات:

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

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی rotate1

هر چیزی که درون canvas ها ترسیم کردین رو میتونین بچرخونین، نه تنها اجزاء خاص. ما با تغییراتی در متد ()update امکان این چرخش رو فراهم میکنیم:

ابتدا، ما canvas اخیر رو توسط شی context ذخیره میکنیم:

ctx.save();

سپس با استفاده از متد translate ما تمام بوم رو به مرکز یک جزء خاص منتقل میکنیم.

ctx.translate(x, y);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement1

سپس ما چرخشی رو که میخوایم رو با استفاده از متد ()rotate انجام بدیم.

ctx.rotate(angle);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement2

حالا ما آماده به ترسیم اجزاء درون canvas هستیم. ولی باید موقعبت canvas رو به (0و0) و با همون چرخشی که برای محتوا دادیم، برگردونیم.

ctx.fillRect(width / -2, height / -2, width, height);

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement3

در نهایت ما باید زمینه ذخیره شده رو در موقعیت جدید بازگردانی کنیم:

ctx.restore();

بازی سازی با HTML - بخش پایانی  بازی سازی با HTML - بخش پایانی game movement4

سازنده component :

در سازنده component یک ویژگی جدید به نام angle (درجه) وجود دارد که تعداد رادیان درجه قطعه رو بیان میکنه. متد update در سازنده component که اجزاء رو ترسیم میکنه، میتونیم تغییرات چرخشی رو که با اون دادیم رو ببینیم.

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
    this.angle = 0;
    this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
        ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
        ctx.fillStyle = color;
        ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
    }
}
function updateGameArea() {
myGameArea.clear();
    myGamePiece.angle += 1 * Math.PI / 180;
    myGamePiece.update();
}

چگونگی حرکت اشیاء :

 ویژگی speed در سازنده component که بیان کننده سرعت اخیر جزء می باشد، اضافه میکنیم و همچنین با ایجاد بعضی تغییرات در متد ()newPos برای محاسبه موقعیت قطعه بر پایه speed و angel. به طور پیشفرض قطعه به طرف بالا رفته و با تنظیم عدد 1 برای ویژگی speed جابجایی به جلو استارت خواهد خورد.

function component(width, height, color, x, y) {
this.gamearea = gamearea;
this.width = width;
this.height = height;
this.angle = 0;
    this.speed = 1;
    this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
}
    this.newPos = function() {
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}

ایجاد چرخش :

با ایجاد یک ویژگی جدید به نام moveAngle که نشون دهنده زاویه چرخش است و متد ()newPos که زاویه رو بر پایه ویژگی moveAngel محاسبه میکند، میتونیم به چپ یا راست قطعه رو بچرخونیم.

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.angle = 0;
    this.moveAngle = 1;
    this.speed = 1;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width,this.height);
ctx.restore();
}
this.newPos = function() {
        this.angle +=this.moveAngle * Math.PI / 180;
        this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);
}
}

استفاده از کیبورد :

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

<!DOCTYPE html>
<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;
function startGame() {
myGamePiece = new component(30, 30, “red”, 225, 225);
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);
window.addEventListener(‘keydown’, function (e) {
e.preventDefault();
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == “keydown”);
})
window.addEventListener(‘keyup’, function (e) {
myGameArea.keys[e.keyCode] = (e.type == “keydown”);
})
},
stop : function() {
clearInterval(this.interval);
},
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.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width, this.height);
ctx.restore();
}
this.newPos = function() {
this.angle += this.moveAngle * Math.PI / 180;
this.x += this.speed * Math.sin(this.angle);
this.y -= this.speed * Math.cos(this.angle);

}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.moveAngle = 0;
myGamePiece.speed = 0;
if (myGameArea.keys && myGameArea.keys[37]) {myGamePiece.moveAngle = -1; }
if (myGameArea.keys && myGameArea.keys[39]) {myGamePiece.moveAngle = 1; }
if (myGameArea.keys && myGameArea.keys[38]) {myGamePiece.speed= 1; }
if (myGameArea.keys && myGameArea.keys[40]) {myGamePiece.speed= -1; }
myGamePiece.newPos();
myGamePiece.update();
}
</script>
<p>Make sure the gamearea has focus, and use the arrow keys to move the red square around.</p>
</body>
</html>

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

تاریخ ارسال
9 خرداد 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

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