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

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

 جاذبه:

برای افزودن این عملکرد به سازنده محتوامون ابتدا باید یک ویژگی به نام gravity اضافه میکنیم و گرانش جاری رو با اون تنظیم میکنیم. سپس ویژگی دیگری به نام gravitySpeed اضافه کرده و با اون تعداد آپدیت فریم در هربار رو افزایش میدیم.

function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.y = y;
this.x = x;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.05;
this.gravitySpeed = 0;

this.update = function() {
ctx.fillRect(this.x,this.y, this.width, this.height);
ctx = myGameArea.context;
ctx.fillStyle = color;
}
this.newPos = function() {
this.gravitySpeed +=this.gravity;
this.x += this.speedX;
this.y += this.speedY +this.gravitySpeed;
}

اصابت با کف:

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

   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;
}
}

شتاب به طرف بالا:

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

<script>
class=”jsHigh”>functionaccelerate(n) {
myGamePiece.gravity = n;
}
</script
<buttononmousedown=”accelerate(-0.2)”onmouseup=”accelerate(0.1)”>ACCELERATE</button>

ساخت بازی:

توسط آنجه تابحال گفتیم یک بازی ایجاد میکنیم.

<!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;
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;
updateGameArea();
},
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) {
if (!myGameArea.interval) {myGameArea.interval = setInterval(updateGameArea, 20);}
myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown=”accelerate(-0.2)” onmouseup=”accelerate(0.05)”>ACCELERATE</button>
<p>Click the ACCELERATE button to start the game</p>
<p>How long can you stay alive? Use the ACCELEREATE button to stay in the air..</p>
</body>
</html>

پرش :

عملکرد دیگری که ما قصد افزودن اونو داریم ویژگی bounce هست. این ویژگی نشون میده زمانی که جاذبه قطعه رو به طرف پایین میکشونه، اونه به عقب پرت میکنه. این ویژگی بین 0 تا 1 تنظیم میشه. عدد 0 این خاصیت رو غیرفعال و 1 قطعه رو به همون نقطه که افتاده برمیگردونه. کد زیر رو امتحان کنین تا متوجه منظور گفته شده بشین:

<!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”, 80, 75);
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.interval = setInterval(updateGameArea, 20);
},
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.x = x;
this.y = y;
this.speedX = 0;
this.speedY = 0;
this.gravity = 0.1;
this.gravitySpeed = 0;
this.bounce = 0.6;
this.update = function() {
ctx = myGameArea.context;
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 = -(this.gravitySpeed * this.bounce);
}
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece.newPos();
myGamePiece.update();
}
</script>
<p>The bouncing property indicates how strong a component will bounce back, after hitting the ground.</p>
<p>Set the bouncing property to a decimal number between 0 and 1.</p>
<p>0 = no bouncing.</p>
<p>1 = will bounce all the way back.</p>
</body>
</html>

همچنان از همراهی شما سپاسگذاریم.

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

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

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