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

ساخت قطعات بازی در بازی سازی با کد HTML – بخش دوم

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

افزودن یک قطعه :

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

<!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”, 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.interval = setInterval(updateGameArea, 20
,{
} ()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
{
{

;(function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

;()function updateGameArea
;()myGameArea.clear
;()myGamePiece.update
{
<script/>
<p>The red square is actually being drawn 50 times per second.</p>
<body/>
<html/>

قطعات خواص و متدهای برای کنترل ظاهر و جابجایی اونها داره که در زیر به شرح اینها میپردازیم
ّFrames:
برای اینکه بازی رو برای حرکت آماده کنیم باید صفحه رو پشت سرهم به روز کنیم درواقع این عمل 50 بار در ثانیه انجام میشه و این بسیار شبیه یک فریم در فیلم است.
برای اینکار یعنی به روز کردن فرم از تابع ()updateGameArea استفاده میکنیم.
در کلاس myGameArea تابع ()updateGameArea هر 20 میلی ثانیه (50 بار در ثانیه) اجرا خواهد شد. پس از اون توسط <> محتویات کانواس؟ رو پاک خواهیم کرد.
در سازنده component تابع ()update فراخوانی خواهد شد که مسئولیت ترسیم جزئیات جدید رو داره.
در واقع تابع ()updateGameArea دو متد ()clear و ()update رو فراخوانی میکنه.
در کد زیر نتیجه ترسیم قطعه و پاک شدن اون رو 50 بار در ثانیه خواهید دید.

<!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”, 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.interval = setInterval(updateGameArea, 20
,{
} ()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
{
{

}(function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

} ()function updateGameArea
;()myGameArea.clear
;()myGamePiece.update
{
<script/>
<p>The red square is actually being drawn 50 times per second.</p>
<body/>
<html/>

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

<!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”, 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.interval = setInterval(updateGameArea, 20
,{
;()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
{
{

} (function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

} ()function updateGameArea
;()myGameArea.clear
;myGamePiece.x += 1
;()myGamePiece.update
{
<script/>
<p>The red square moves one pixel to the right, 50 times per second.</p>
<body/>
<html/>

آیا استفاده از تابع ()clear الزالمیست؟
شاید به نظر برسه که استفاده از ()clear ضروری نیست ولی در صورت استفاده نکردن همه جابجای های قطعه رو بصورت یک دنباله نشان خواهد داد. کد زیر رو امتحان کنید.

<!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”, 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.interval = setInterval(updateGameArea, 20
,{
} ()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
{
{

} (function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

} ()function updateGameArea
اینجا——————————————————->;()myGameArea.clear//
;myGamePiece.x += 1
;()myGamePiece.update
{
<script/>
<p>If we do not clear the game area at every update, a trail of all earlier movements will be shown.</p>
<body/>
<html/>

تغییر سایز و رنگ
چگونگی تغییر اندازه طول و عرض قطعه همینطورتغییر رنگ در کد زیر نشان داده شده، شما میتونین از ارزش رنگ هایی همچون hex, rgb, یا rgba استفاده کنید.

<!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(140, 10, “rgba(0, 0, 255, 1)“, 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.interval = setInterval(updateGameArea, 20
,{
;()clear : function
;(this.context.clearRect(0, 0, this.canvas.width, this.canvas.height
{
{

 } (function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

;()function updateGameArea
;()myGameArea.clear
;myGamePiece.x += 1
;()myGamePiece.update
{
<script/>
<p>Look! A blue and long rectangle </p>
<body/>
<html/>

تغییر موقعیت
در محیط بازی ما مختصات X و Y داریم به طوریکه گوشه بالا سمت چپ دارای مختصات (0و0) هستش و ازاونها برای جابجایی استفاده میکنیم.
شما میتونین موقعیت قطعه هرجا که درمحیط بازی میخواین قرار بدین.

<!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”, 2, 2
;()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
{
{

;(function component(width, height, color, x, y
;this.width = width
;this.height = height
;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
{
{

} ()function updateGameArea
;()myGameArea.clear
;myGamePiece.x += 1
;myGamePiece.update
{
<script/>
<p>Position the red square at the coordinates 2,2</p>
<body/>
<html/>

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

<!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 redGamePiece, blueGamePiece, yellowGamePiece

 } ()function startGame
;(redGamePiece = new component(75, 75, “red”, 10, 10
;(yellowGamePiece = new component(75, 75, “yellow”, 50, 60
;(blueGamePiece = new component(75, 75, “blue”, 10, 220
;()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
{
{

 } (function component(width, height, color, x, y
;this.width = width;
;this.height = height;
;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
{
{

} ()function updateGameArea
;()myGameArea.clear
;redGamePiece.x += 1
;yellowGamePiece.x += 1
;yellowGamePiece.y += 1
;blueGamePiece.x += 1
;blueGamePiece.y -= 1
;()redGamePiece.update
;()yellowGamePiece.update
;()blueGamePiece.update
{
<script/>
<p>The three components moves by changing the x- and y-coordinates on every update.</p>
<body/>
<html/>

———————————————————————پایان بخش دوم——————————————————————
ممنون از همراهیتون امیدوارم در ادامه مقاله های بعدی همراهمون باشین.

****

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

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

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