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

همیشه ساختن یک بازی در پروژه های برنامه نویسی محبوب بوده است. مخصوصا زمانی که شما بخواین امکان بازی کردن درسایتتون به کاربرانتون بدین. دراین مقاله قصد داریم به شما یاد بدیم که چطوری اقدام به بازی سازی با کد HTML بکنید .
ابتدا باید با مفاهیم HTML و جاوا اسکریپت آشنا بشین تا بتونین با تگ های زیر راحت کار کنین و با نحوه کارشون آشنا بشین. لازم به ذکر هستش که برای پیاده سازی و نوشتن کد ها نیاز به یک محیط توسعه مانند Dreamweaver و یا  ++Notepad دارین. ویا حتی میتونین از تسکت ادیتور یا همون Nodepad خود ویندوز استفاده کنین. منتها یادتون باشه فایلی رو که توش کد میزنین با فرمت html. ذخیره کنین تا بتونین با مرور گر سیستم خودتون تغییراتی رو که اعمال میشه رو مشاهده کنین.

HTML CANVAS

با عنصر <canvas> شما میتونین یک مستطیل به عنوان محیط بازی بسازین. CANVAS که به معنی بوم هستش و تمام عملکردایی که برای ساخت بازی لازم دارین رو فراهم میکنه. در جاوا اسکریپت بیشترین استفاده از قبیل کشیدن،نوشتن،قرار دان عکس و … در<canvas>هست.

(“getContext(“2d.

عنصر <canvas> شی گراست و دارای یک شی به نام(“getContext(“2d.که با خواص و رواش های اون میتونین طراحی کنین.

حالا استارت کار رو بزنین

در ابتدا باید محیط بازی رو پیاده سازی کنیم. با خط کد زیر میتونین بازی سازی خودتون رو استارت کنین

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

 }   ()function startGame
;()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
{
}

<script/>

<p>We have created a game area! (or at least an empty canvas)</p>

<body/>

<html/>

در خط کد بالا توابع یا اشیایی داشتیم که باید براتون توضیح بدم . شی myGameArea خواص بیشتری داره که در مقاله های بعدی باهاش آشنا میشین .
تابع ()startGame متد ()start رو از شی myGameArea  فراخوانی میکنه . متد ()start یک<canvas> میسازه و قرار میده به عنوان اولین گره فرزن در تگ <body> . 


……………………………….پایان مقاله اول………………………………..

ممنون که تا اینجا همراهمون بودین
امیدواریم که تا آخر همراهمون در این مقاله باشین.

****

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

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

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

برچسب ها

, ,