بازی سازی با HTML – بخش پایانی

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

چرخش قطعات:

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

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

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

ctx.save();

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

ctx.translate(x, y);

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

ctx.rotate(angle);

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

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

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

ctx.restore();

سازنده 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. به طور پیشفرض قطعه به طرف بالا رفته و با تنظیم عدد ۱ برای ویژگی 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 برده باشین.

نوشته بازی سازی با HTML – بخش پایانی اولین بار در LeanFiles.Com Academy – Online Training Courses پدیدار شد.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
LeanFiles.Com Academy – Online Training Courses