بازی سازی با HTML – بخش نهم

admin
>دسته بندی: آموزشی
برچسب ها: HTML, بازی, بخش, سازی, نهم
۱۳۹۵/۰۳/۰۳

سری مقالات بازی سازی با 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;
}
}

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

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

ساخت بازی:

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

} 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 هست. این ویژگی نشون میده زمانی که جاذبه قطعه رو به طرف پایین میکشونه، اونه به عقب پرت میکنه. این ویژگی بین ۰ تا ۱ تنظیم میشه. عدد ۰ این خاصیت رو غیرفعال و ۱ قطعه رو به همون نقطه که افتاده برمیگردونه. کد زیر رو امتحان کنین تا متوجه منظور گفته شده بشین:

<!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>

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

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

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