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

در قسمت قبل از سری مقاله های بازی سازی با HTML یادگرفتیم که چگونه موانع رو ایجاد کنیم و اینکه قطعه خودمون با اونها برخورد کرد Game Over شیم. در این قسمت در مورد موانع بازی بیشتر آشنا میشین پس با ما همراه باشین:

حرکت دادن به موانع:

موانع اگر ثابت باشند خطرناک نیستند، بنابراین ما میخوایم به اونا حرکت بدیم. ما با تعویض ارزش ویژگی myObstacle.x  و با به روز کردن اون در هر دفعه شاهد جابجایی موانع هستیم.

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

} ()function startGame
;(myGamePiece = new component(30, 30, “red”, 10, 120
;(myObstacle = new component(10, 200, “green”, 300, 120
;()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
,{
} ()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
,{
} ()stop : function
;(clearInterval(this.interval
{
{

} (function component(width, height, color, x, y
;this.width = width
;this.height = height
;this.speedX = 0
;this.speedY = 0
;this.x = x
;this.y = y
} ()this.update = function
;ctx = myGameArea.context
;ctx.fillStyle = color
;(ctx.fillRect(this.x, this.y, this.width, this.height
{
} ()this.newPos = function
;this.x += this.speedX
;this.y += this.speedY
{
} (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 > otherrigh)) { i
crash = false;
{
;return crash
{
{

()function updateGameArea
} ((if (myGamePiece.crashWith(myObstacle
;()myGameArea.stop
} else {
;()myGameArea.clear
;myObstacle.x -= 1
;()myObstacle.update
;()myGamePiece.newPos
;()myGamePiece.update
{
{

} ()function moveup
;myGamePiece.speedY = -1
{

} ()function movedown
;myGamePiece.speedY = 1
{

} ()function moveleft
;myGamePiece.speedX = -1
{

} ()function moveright
;myGamePiece.speedX = 1
{

} ()function clearmove
;myGamePiece.speedX = 0
;myGamePiece.speedY = 0
{
<script/>
<“div style=”text-align:center;width:480pxb>
b <button onmousedown=”moveup()” onmouseup=”clearmove()” ontouchstart=”moveup()”>UP</button><br><br>r
b<button onmousedown=”moveleft()” onmouseup=”clearmove()” ontouchstart=”moveleft()”>LEFT</button>n
b<button onmousedown=”moveright()” onmouseup=”clearmove()” ontouchstart=”moveright()”>RIGHT</button><br><br>r
<b<button onmousedown=”movedown()” onmouseup=”clearmove()” ontouchstart=”movedown()”>DOWN</button>n
<div/>
<p>Avvoid hitting the obstacle, or else the game will stop.</p>
<body/>
<html/>

ایجاد چند مانع:

ما چگونه می توانیم چندین مانع درمحیط بازی ایجاد کنیم؟
برای اینکار ما به یک ویژگی نیاز داریم برای شمارش فریم ها و یک متد برای اجرای بعضی چیزها در هر میزان فریم که داده میشه.

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

} ()stop : function
;(clearInterval(this.interval
{
{

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

 تابع everyinterval اگر تعداد فریم ها با interval داده شده، مطابق بود عبارت true رو برمی گردونه. جهت تعریف چند مانع، ابتدا متغیر موانع رو یک آرایه تعریف میکنیم، سپس باید تابع updateGameArea رو یکسری تغییرات بدیم.

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

} ()function startGame
;(myGamePiece = new component(30, 30, “red”, 10, 120
;()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
,{
} ()stop : function
;(clearInterval(this.interval
{
{

} (function component(width, height, color, x, y
;this.width = width
;this.height = height
;this.speedX = 0
;this.speedY = 0
;this.x = x
;this.y = y
} ()this.update = function
;ctx = myGameArea.context
;ctx.fillStyle = color
;(ctx.fillRect(this.x, this.y, this.width, this.height
{
} ()this.newPos = function
;this.x += this.speedX
;this.y += this.speedY
{
} (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 > otherrigh)) {t
;crash = false
{
;return crash
{
{

} ()function updateGameArea
;var x, y
} (for (i = 0; i < myObstacles.length; i += 1
} (([if (myGamePiece.crashWith(myObstacles[i
()myGameArea.stop
;return
{
{
;()myGameArea.clear
;myGameArea.frameNo += 1
} ((if (myGameArea.frameNo == 1 || everyinterval(150
;x = myGameArea.canvas.width
;y = myGameArea.canvas.height – 200
;((myObstacles.push(new component(10, 200, “green”, x, y
{
} (for (i = 0; i < myObstacles.length; i += 1
;myObstacles[i].x += -1
;()myObstacles[i].update
{
;()myGamePiece.newPos
;()myGamePiece.update
{

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

} ()function moveup
;myGamePiece.speedY = -1
{

} ()function movedown
;myGamePiece.speedY = 1
{

} ()function moveleft
;myGamePiece.speedX = -1
{

} ()function moveright
;myGamePiece.speedX = 1
{

} ()function clearmove
;myGamePiece.speedX = 0
;myGamePiece.speedY = 0
{
<script/>
<“;div style=”text-align:center;width:480px>
<button onmousedown=”moveup()” onmouseup=”clearmove()” ontouchstart=”moveup()”>UP</button><br><br>
<button onmousedown=”moveleft()” onmouseup=”clearmove()” ontouchstart=”moveleft()”>LEFT</button>
<button onmousedown=”moveright()” onmouseup=”clearmove()” ontouchstart=”moveright()”>RIGHT</button><br><br>
<button onmousedown=”movedown()” onmouseup=”clearmove()” ontouchstart=”movedown()”>DOWN</button>
<div/>
<p>Here comes a new obstacle at every 150. frame, and we have 50 frames per second, so one obstacle every third second!</p>

<body/>
<html/>

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

موانع با اندازه های اتفاقی:

در این قسمت میخوایم بازی رو کمی سختتر و جالبتر کنیم.چگونه؟
ما بایجاد موانعی با اندازه های متفاوت مربع قرمز بازی رو مجبور به حرکت میکنیم تا با اونها برخورد نداشته باشه و Game Over نشه.

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

} ()function startGame
;(myGamePiece = new component(30, 30, “red”, 10, 120
;()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
,{
} ()stop : function
;(clearInterval(this.interval
{
{

} (function component(width, height, color, x, y
;this.width = width
;this.height = height
;this.speedX = 0
;this.speedY = 0
;this.x = x
;this.y = y
} ()this.update = function
;ctx = myGameArea.context
;ctx.fillStyle = color
;(ctx.fillRect(this.x, this.y, this.width, this.height
{
} ()this.newPos = function
;this.x += this.speedX
;this.y += this.speedY
{
} (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 > otherrigh)) {i
;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
;()myGameArea.stop
;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
{
;()myGamePiece.newPos
;()myGamePiece.update
{

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

} ()function moveup
;myGamePiece.speedY = -1
{

} ()function movedown
;myGamePiece.speedY = 1
{

} ()function moveleft
;myGamePiece.speedX = -1
{

} ()function moveright
;myGamePiece.speedX = 1
{

} ()function clearmove
;myGamePiece.speedX = 0
;myGamePiece.speedY = 0
{
<script/>
<div style=”text-align:center;width:480px;”>
<button onmousedown=”moveup()” onmouseup=”clearmove()” ontouchstart=”moveup()”>UP</button><br><br>
<button onmousedown=”moveleft()” onmouseup=”clearmove()” ontouchstart=”moveleft()”>LEFT</button>
<button onmousedown=”moveright()” onmouseup=”clearmove()” ontouchstart=”moveright()”>RIGHT</button><br><br>
<button onmousedown=”movedown()” onmouseup=”clearmove()” ontouchstart=”movedown()”>DOWN</button>
<div/>
<body/>
<html/>

همچنان از همراهیتون در مقالات کمال تشکر رو داریم.

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

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

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

برچسب ها

, ,