آموزش ساخت بازی یویو توسط jQuery و CSS3

آیا دوست دارید بازی یویو را آنلاین و یا در صفحات وب خود تجربه کنید؟ یک یویو انیمیشنی زیبا که از یک نخ آویزان و با افکتی زیبا همانند یک یویو واقعی بالا و پائین میرود؟ این روزها در فضای وب به واسطه کتابخانه قدرتمند و جذاب jQuery و همچنین امکانات گسترده CSS3 ساخت بازی های تحت وب بسیار ساده شده است. در هنگام آموزش ساخت بازی یویو شما با بسیاری از تکنیک های جی کوئری و CSS3 آشنا خواهید شد که می توانید از آنها در دیگر پروژه های خود استفاده کنید.

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

● پسورد : www.websiteha.com

ساخت بازی یویو با جی کوئری

از کجا شروع کنیم؟

اولین چیزی که به آن نیاز داریم، تصاویر بازی است. برای ساخت این تصاویر نیاز به یک برنامه ساخت تصاویر برداری مانند Corel و یا illustrator داریم اما چنانچه به برنامه های ویرایش تصاویر مانند فتوشاپ نیز آشنایی دارید، میتوانید از برنامه مورد علاقه خودتان استفاده کنید. برنامه گرافیکی خود را باز کرده و یک تصویر دست با حالتی که یک یویو را گرفته است، طراحی کنید. برای اینکار میتوانید عکس یک دست طبیعی را الگو قرار داده و خطوط را مانند آن رسم کنید.

طراحی بازی با جی کوئری

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

آموزش جی کوئری

بازی با jQuery

بازی آنلاین

بخش HTML

تکه کد لازه برای ساخت بازی یویو بسیار کوتاه است ، بنابراین درک آن بسیار ساده است. در کد HTML از چند عنصر <div> استفاده می کنیم که هر کدام یکی از تصاویر ساخته شده را به عنوان پس زمینه خود در بر میگیرند. برای اینکه بتوانیم این عناصر <div> را زیر و روی یکدیگر قرار دهیم، مقدار position را برای آنها Absolute در نظر میگیریم. برای اینکه عناصر <div> که مقدار position آنها Absolute تعیین شده در صفحه پراکنده نشوند و در ناحیه مورد نظر ما جایگذاری شوند، نیاز به یک <div> نگهدارنده داریم که مقدار Position آنرا برابر با Relative قرار داده باشیم.

کدهای HTML



    

کدهای CSS

#container {
	height: 550px;
	width: 331px;
	position: relative;
}
#hand-front {
	background: url(../images/hand-front.png) no-repeat left top;
	height: 169px;
	width: 331px;
	position: absolute;
	left: 0;
	top: 20px;
	z-index: 400;
}
#hand-back {
	background: url(../images/hand-back.png) no-repeat left top;
	height: 99px;
	width: 190px;
	position: absolute;
	left: 128px;
	top: 43px;
	z-index: 100;
}
#string {
	background: #79694c;
	border: 1px solid #3b2f1d;
	height: 20px;
	width: 2px
	 position: absolute;
	top: 47px;
	left: 243px;
	z-index: 200;
}

#yoyo {
	background: url(../images/yoyo.png) no-repeat center center;
	height: 150px;
	width: 150px;
	position: absolute;
	left: 169px;
	top: 47px;
	z-index: 300;
}
#yoyo a {
	color: white;
	display: block;
	font-size: 20px;
	font-weight: bold;
	line-height: 150px;
	margin-left: 27px;
}
#yoyo a:hover {
	text-decoration: none;
	text-shadow: 0 0 15px #000;
}
.rotate {
	-webkit-animation-duration:1.1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-name: yoyo;
	-webkit-animation-timing-function:linear;
}
@-webkit-keyframes yoyo {
	from {-webkit-transform:scale(1) rotate(0deg);}
	to {-webkit-transform:scale(1) rotate(360deg);}
}

    

همانطور که در کدهای CSS مشاهده می کنید، بخش عمده دستورات از خصیصه های پس زمینه (background)، ارتفاع (height)، عرض (width)، موقعیت مکانی (position) و اولویت روی هم قرار گرفتن لایه ها (z-index) شده است که با استفاده از ID به عنصر مورد نظرنسبت داده میشوند.

بخش غیر معمول کدهای CSS کلاس .rotate است. این تکه کد فقط برای مروگرهایی که اعمال خاص را بر پایه Webkit های خودشان انجام میدهند برای چرخش یویو استفاده شده است.(مرورگرهای Chrome و Safari)

بخش jQuery

برای اینکه حرکت های رفت و برگشت یویو واقعی به نظر برسد، از یک پلاگین جی کوئری به نام jQuery easing plugin برای اعمال افکت های انیمشنی و بصری است، استفاده شده است.

    $(document).ready(function() {	

	$("#container").hover(function(){
		$("#yoyo").addClass("rotate");
		$("#string").stop().animate({height: '400px'}, {duration:1000, easing: 'easeOutBack'});
		$("#yoyo").stop().animate({top: '400px'}, {duration:1000, easing: 'easeOutBack'});
			}, function() {
		$("#yoyo").removeClass("rotate");
		$("#string").stop().animate({height: '20px'}, {duration:600, easing: 'easeInOutExpo'} );
		$("#yoyo").stop().animate({top: "47px"}, {duration:600, easing: 'easeInOutExpo'} );
	}); 

	$("#yoyo a").hover(function(){
		$("#yoyo").toggleClass("rotate");
	});   

});

    

شرح کدهای jQuery

  • خط 1 : وقتی که سند کامل بارگزاری شود توابع شروع به کار کنند
  • خط 3: وقتی نشانگر ماوس روی عنصر <div> با ID برابر با #container قرار گیرد این تابع اجرا میشود
  • خط 4 : کلاس .rotate به عنصری با ID برابر با #yoyo انتساب می شود
  • خط 5 : عنصر <div> با آیدی #string با حالت انیمیشن در مدت زمان 1 ثانیه به ارتفاع 400 پیکسل میرسد
  • خط 6 : عنصر با آیدی #yoyo را با حالت انیمیشنی در مدت زمان 1 ثانیه از سمت بالا 400 پیکسل فاصله میدهد
  • خط 7 : وقتی ماوس از روی یویو کنار میرود این تابع کار خود را شروع میکند
  • خط 8 : با حذف کلاس rotate چرخش و حرکت آن متوقف میشود
  • خط 9 : عنصر با آیدی #string با حالت انیمشن در مدت زمان 600 میلی ثانیه به ارتفاع 20 پیکسل بر میگردد
  • خط 10 : عنصر با آیدی #yoyo با حالت انیمشن در مدت زمان 600 میلی ثانیه از بالا 47 پیکیل فاصله میگیرد
  • خط 13 : وقتی ماوس روی عنصر #yoyo می رود این تابع شروع به کار میکند
  • خط 14 : اگر کلاس .rotate به این عنصر منتسب باشد آنرا حذف وگرنه این کلاس را انتساب میدهد.
Jamy Golden in CSS-Plus

نظرات (1) -

Loading