گروه تفریحی تیک تاک

اچ تی ام الجاوا اسکریپتموبایلطراحی یک بازی ساده با استفاده از HTML5 - قسمت اولمحمد حسین موسی‌ زاده - 2013-02-06 10:43ساختن یک بازی که تمام پلت فرم ها را پشتیبانی کند، درگیر نشدن با Java و Objective-c، رها شدن از مشکلات فروشگاه های نرم افزار (App stores) و استفاده از سایر مزایاهای یک وب اپلیکیشن، برای هر توسعه دهنده وب یک موفقیت و نقطه عطف محسوب می شود. در حال حاضر تعداد انگشت شماری از توسعه دهنگان بازی از HTML5 استفاده می کنند.Nutmeg و Lunch Bug نمونه هایی درخشان در این زمینه محسوب می شوند. نکته قابل توجه این است که آنها از یک کد برای بازی های تلفن همراه و کامپیوتر شخصی استفاده می کنند. اکنون سوال این است که آیا با استفاده از HTML5 می توانیم به هدف مقدس 'نوشتن یک بار، اجرا در همه جا' دست پیدا کنیم؟ پاسخ واضح است، قطعا می توانیم. امروز نردبان قصد دارد شما را به این هدف برساند، پس در ادامه مطلب با ما باشید. البته فراموش نکنید که این مطلب برای کاربران کاملا مبتدی نیست و برای درک خوب این مطلب نیاز است که حداقل HTML و کمی جاوااسکریپت بدانید.شروع کارقبل از اینکه کار را شروع کنیم بهتر است شما را از چند نکته که می توانند هیجان شما را برای ادامه کار کاهش دهند، آگاه سازیم:کارایی: برخی مرورگرهای گجت ها از موتورهای جاوااسکریپت قدیمی استفاده می کنند، که این موضوع تا حدودی برای ما مشکل ساز است. با ورود iOS 6 و مرورگر Chrome برای Android همه چیز به سرعت در حال بهبود است.رزولوشن: گجت هایی که از سیستم عامل Android و iOS استفاده می کنند، طیف گسترده و متفاوتی از رزولوشن ها و تراکم پیکسل را شامل می شوند.صدا: امیدواریم که شما از بازی کردن در سکوت لذت ببرید. متاسفانه پشتیبانی از صدا در مرورگرهای تلفن های همراه ضعیف است. حداقل می توانیم به مشکلات زیر در زمینه صدا اشاره کنیم:- تاخیر در پخش صدا- اکثر تلفن های همراه فقط یک کانال را ارائه می کنند- iOS تا زمانی که کاربر درخواست ندهد هیچ صدایی را بارگزاری نمی کندشما به عنوان یک توسعه دهنده وب باید با این چالش های فنی به آرامی و خونسردی برخورد کنید یا به بیان دیگر ما بیدی نیستیم که با این بادها بلرزیم :). سرعت پیشرفت مرورگرهای وب این مژده را به ما می دهد که تمام این مشکلات موقت هستند. زمینه مرورگرهای تلفن های همراه به سرعت در حال تغییر است به طوری که این نگرانی ها به زودی از ذهن ما دور خواهند شد.در این آموزش، شما یک بازی نسبتا ساده را از پایه خواهید ساخت و نتیجه چیزی شبیه به تصویر زیر است:این یک بازی نسبتا ساده است که کاربر باید حباب های شناور را قبل از رسیدن به بالای صفحه نمایش منفجر کند. مراحل مجزای توسعه و کدنویسی این بازی عبارتند است از: ۱. تهیه viewport های مختلف و بهینه سازی برای انواع تلفن های همراه۲. نگاهی مختصر بر روی Canvas API برای کشیدن حباب ها بر روی نمایش گر۳. کنترل رویداد های لمسی۴. ساختن حلقه (Loop) اساسی بازی۵. اشخاص بازی۶. اضافه کردن تشخیص برخورد و برخی عملیات ساده ریاضی برای ایجاد تنوع۷. پولیش و ریزه کاری بازی و همچنین اضافه کردن ذرات باقی مانده از انفجار حباب ها۱. ایجاد پایه و قالب بوم بازیبه اندازه کافی از پشت پرده یک بازی تلفن همراه صحبت کردیم، حالا ویرایشگر متنی مورد علاقه خود را باز کنید، یک فنجان قهوه هم کنار دست خود بگذارید مطمئن باشید که به آن نیاز پیدا خواهید کرد.همانطور که ذکر شد، گجت های اطراف ما دارای رزولوشن و تراکم پیکسل متفاوتی هستند. یعنی ما باید بوم (Canvas) را در مقیاس مناسب در نظر بگیریم. این موضوع می تواند باعث از بین رفتن کیفیت کار ما شود. یک ترفند هوشمندانه این است که شما اندازه بوم را کوچک بگیرید و سپس مقیاس را بالا ببرید این کار باعث افزایش عملکرد می شود.حالا زمان آن رسیده است که کدهای پایه HTML را بنویسیم:  lang="en"> charset="UTF-8">  name="viewport" content="width=device-width,user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0" /> name="apple-mobile-web-app-capable" content="yes" /> name="apple-mobile-web-app-status-bar-style" content="black-translucent" />  type="text/css">body { margin: 0; padding: 0; background: #000;}canvas { display: block; margin: 0 auto; background: #fff; }    // all the code goes here متاتگ viewport به مرورگر اعلام می کند که کاربر امکان تغییر مقیاس صفحه را نداشته باشد، همچین صفحه در ماکزیمم سایز ممکن باز شود. پس از آن پیشوند apple- به بازی اجازه می دهد که Bookmark شود. آیفون برای نرم افزار های Bookmark شده نوار ابزار پایین صفحات را نشان نمی دهد.حالا نگاهی به کد زیر بیاندازید: // namespace our gamevar POP = {  // set up some initial values WIDTH: 320, HEIGHT: 480, // we'll set the rest of these // in the init function RATIO: null, currentWidth: null, currentHeight: null, canvas: null, ctx: null,  init: function() {  // the proportion of width to height POP.RATIO = POP.WIDTH / POP.HEIGHT; // these will change when the screen is resized POP.currentWidth = POP.WIDTH; POP.currentHeight = POP.HEIGHT; // this is our canvas element POP.canvas = document.getElementsByTagName('canvas')[0]; // setting this is important // otherwise the browser will // default to 320 x 200 POP.canvas.width = POP.WIDTH; POP.canvas.height = POP.HEIGHT; // the canvas context enables us to // interact with the canvas api POP.ctx = POP.canvas.getContext('2d');  // we're ready to resize POP.resize();  },  resize: function() {  POP.currentHeight = window.innerHeight; // resize the width in proportion // to the new height POP.currentWidth = POP.currentHeight * POP.RATIO;  // this will create some extra space on the // page, allowing us to scroll past // the address bar, thus hiding it. if (POP.android || POP.ios) { document.body.style.height = (window.innerHeight + 50) + 'px'; }  // set the new canvas style width and height // note: our canvas is still 320 x 480, but // we're essentially scaling it with CSS POP.canvas.style.width = POP.currentWidth + 'px'; POP.canvas.style.height = POP.currentHeight + 'px';  // we use a timeout here because some mobile // browsers don't fire if there is not // a short delay window.setTimeout(function() { window.scrollTo(0,1); }, 1); } }; window.addEventListener('load', POP.init, false);window.addEventListener('resize', POP.resize, false); در ابتدا باید برای بازی یک نام انتخاب کنیم. وقت آن است که قوائد برنامه نویسی را رعایت کنیم بنابراین از نام های عمومی استفاده نمیکنیم و اسم POP را برمیگزینیم. ما تمام متغیر ها را در ابتدای برنامه تعریف کرده ایم، اغلب متغیر ها واضح هستند.متغیر canvas مربوط است به عنصر canvas در HTML، متغیر ctx به ما اجازه می دهد که با استفاده از جاوااسکریپت با Canvas API ارتباط برقرار کنیم.تابع POP.init یک ارتباط با عنصر بوم (canvas) برقرار می کند، سپس متن آنرا استخراج می کند و بعد ابعاد آنرا به 480X320 تغییر می دهد.تابع resize، که در زمان تغییر اندازه صفحه فراخوانی می شود و طول و ارتفاع بوم را تغییر می دهد به طوری که نسبت اصلی حفظ شود.اگر اکنون بازی را بر روی تلفن خود تست کنید، متوجه می شوید که هنوز نوار آدرس مرورگر حذف نشده است. ما با اضافه کرد چند پیکسل اضافه در صفحه یک اسکرول عمودی بوجود میاوریم و به این ترتیب نوار آدرس حذف خواهد شد.  // we need to sniff out Android and iOS// so that we can hide the address bar in// our resize functionPOP.ua = navigator.userAgent.toLowerCase();POP.android = POP.ua.indexOf('android') > -1 ? true : false;POP.ios = ( POP.ua.indexOf('iphone') > -1 || POP.ua.indexOf('ipad') > -1 ) ? true : false; در کد بالا جاوااسکریپت سیستم عامل تلفن همراه را شناسایی میکند، این قطعه کد را در انتهای POP.init و قبل از ;()POP.resize اضافه کنید.تابع resize با تشخیص نوع سیستم عامل تلفن همراه ۵۰ پیکسل به ارتفاع صفحه اضافه می کند. // this will create some extra space on the// page, enabling us to scroll past// the address bar, thus hiding it.if (POP.android || POP.ios) { document.body.style.height = (window.innerHeight + 50) + 'px';} توجه داشته باشید که ما این کار را فقط برای Android و iOS انجام می دهیم. در غیر این صورت یک اسکرول زشت و زننده ظاهر خواهد شد. همچنین نیاز هست که با استفاده از setTimeout در اجرای تابع scrollTo تاخیر ایجاد کنیم، زیرا بعضی از مرورگر ها این تابع را بدون این تاخیر، اجرا نمی کنند.۲. یک بوم خالیشما اکنون یک بوم خالی در صفحه بازی در اختیار دارید، اجازه دهید تا امکان اضافه کردن اشکال را به آن بدهیم.نکته: در این مطلب، ما قصد داریم که با شکل های هندسی پایه کار کنیم. در iOS 5 و Chrome برای Android می توانید بسیاری از شکل ها را در فریم های بالا ایجاد کنید. در Android 3.2 و پایین تر نرخ فریم ها به صورت نمایی کاهش می یابند. خوشبختانه، برای رسم دایره زیاد با مشکل مواجه نیستیم، بنابراین ما می توانیم حباب های بسیاری در بازی تولید کنیم بدون آنکه مانعی در عملکرد گجت های قدیمی تر به وجود آید.در ادامه ما یک آبجکت Draw اضافه خواهیم کرد تا امکانات زیر را برای ما فراهم کند: - پاک کردن بوم- رسم چهارگوش- رسم دایره- اضافه کردن متنکد های زیر را به عنوان یک تابع جدا گانه بعد از متغیر POP قرار دهید. // abstracts various canvas operations into// standalone functionsPOP.Draw = {  clear: function() { POP.ctx.clearRect(0, 0, POP.WIDTH, POP.HEIGHT); },  rect: function(x, y, w, h, col) { POP.ctx.fillStyle = col; POP.ctx.fillRect(x, y, w, h); },  circle: function(x, y, r, col) { POP.ctx.fillStyle = col; POP.ctx.beginPath(); POP.ctx.arc(x + 5, y + 5, r, 0, Math.PI * 2, true); POP.ctx.closePath(); POP.ctx.fill(); },  text: function(string, x, y, size, col) { POP.ctx.font = 'bold '+size+'px Monospace'; POP.ctx.fillStyle = col; POP.ctx.fillText(string, x, y); } }; بهره مندی از این آبجکت دو مزیت مهم را برای ما خواهد داشت، اول اینکه نباید دستورهای مربوط به Canvas API را به خاطر بسپاریم و دوم اینکه باعث می شود که به جای نوشتن ۵ خط با نوشتن یک خط شکل های مورد نظر را ایجاد کنیم.حالا وقت به کارگیری و تست آبجکت Draw است:  POP.Draw.clear();POP.Draw.rect(120,120,150,150, 'green');POP.Draw.circle(100, 100, 50, 'rgba(255,0,0,0.5)');POP.Draw.text('Hello World', 100, 100, 10, '#000'); کد های بالا را در انتهای تابع POP.init قرار دهید. حالا باید چند شکل در بوم بازی ملاحظه کنید مانند تصویر زیر.امیدواریم که تا به اینجا تمام مراحل را با موفقیت پشت سر گذاشته باشید. برای جلوگیری از طولانی شدن مطلب و خستگی شما عزیزان، ادامه کار را در قسمت بعد دنبال خواهیم کرد. شما می توانید تمام مراحل کار این مطلب را از لینک زیر دریافت نمایید. 

دریافت فایل HTML

برای مشاهده قسمت دوم کلیک کنید