گروه مقاله : طراحی سایت
تاريخ انتشار : 1396/04/07 - 11:56
كد :7672

طراحی بازی توپ های افتان

آموزش طراحی بازی با جی کوئری و اچ تی ام ال بصورت کاربردی را با یک آموزش ساده دیگر ادادمه میدهیم.

آموزش بازی توپ های افتان

آموزش طراحی سایت -آموزش طراحی بازی تحت وب - آموزش بازی های ساده تحت وب

اجرای بازی

 

نحوه افزودن کد بازی به صفحه وبسایت و یا وبلاگ خود

<iframe src="http://www.sargonco.com/Uploads/Public/article/webdistut/sargon.html" width="100%" height="100%"></iframe>

 

برای اجرای بازی فوق شما باید jquery را به سایت خود اضافه کنید ما برای اینکار از jquery.min استفاده کرده ایم شما میتوانید این فایل را از سایت رسمی jquery و یا همین صفحه دانلود کنید.

دانلود jquery

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

کد های جاوا اسکریپت:

کد های زیر کد های کیبرد فشرده شده را میخواند:

$(document).keydown( function(event)
{

var keycode = event.keyCode;

رزولوشن صفحه نمایش توسط کد های زیر خوانده میشود.ما در کد های زیر اندازه عرض صفحه را 100 پیکسل و اندازه ارتفاع صفحه را 200 پیکسل کاهش داده ایم .

var width = screen.width - 100;

var height = screen.height - 200;

حالا باید با کد توپ های A-Z را ایجاد کنیم. کد های حروف A-Z از 90-65 میباشد.

کد دستوری Math.random() بعنوان متدی برای ایجاد اعداد تصادفی استفاده می شود.

کد دستوری String.fromCharCode() برای تبدیل کد به کاراکتر معادل آن استفاده شده است.

// Generating a random number between 65 -90

var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;

var ch = String.fromCharCode(k);

برای استایل دهی CSS ما باید برای حباب ها رنگ های تصادفی ایجاد کنیم برای اینکار از دستور زیر استفاده کرده ایم.
 

// Generating a random color

function randomColor(){

var color = '';

var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

for (c = 0; c < 6; c++) {

no = Math.floor(Math.random() * 15);

color += values[no];

}

return color;

}

});

کد نهایی جاوا اسکریپت هم بصورت زیر است:

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Getting screen resolutions and positioning the start button
var width = screen.width - 100;
var height = screen.height - 200;
var code = 0;
$('#start').css(
{
"top" : (height/2)+'px',
"left" : (width/2)+'px'
});

$('#start').click( function()
{
$(this).fadeOut('slow');
$('#score').show();
genLetter();
});

// Dealing KeyEvents and fading out matched bubble
$(document).keydown( function(event)
{
var keycode = event.keyCode;
$('.bubb'+keycode).animate(
{
"top" : height+"px", "opacity" : 0
}, 'slow');

$('.bubb'+keycode).fadeOut('slow').hide( 'slow', function()
{
code += 20;
$('#score').html(code);
$(this).remove();
}
);
});

// Generating a random alphabet between A-Z
function genLetter()
{
var color = randomColor();
var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65;
var ch = String.fromCharCode(k);
var top = Math.floor(Math.random() * height );
var left = Math.floor(Math.random() * width );
$('body').append('<span class="bubb bubb'+ k +'" style="left: '+ left +'; top: '+ top +'; background-color:'+ color +'">'+ ch +'</span>');
setTimeout(genLetter, 1000);
}

// Generating a random color
function randomColor()
{
var color = '';
var values = ['a', 'b', 'c', 'd', 'e', 'f', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
for (c = 0; c < 6; c++)
{
no = Math.floor(Math.random() * 15);
color += values[no];
}
return color;
}
});
</script>


کد های HTML :
 

<body>
<div id="score">0</div>
<div id="start">Start</div>
</body>

کد های CSS :
 

body
{
width: 100%;
margin: 0 auto;
padding: 0;
}

.bubb
{
position: absolute;
width:30px;
height: 30px;
font: bold 14px verdana;
background-color: yellow;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
vertical-align: middle;
padding: 5px;
}

#score
{
font-size:46px;
top: 25px;
right: 50px;
display: none;
text-align:right;
}

#start
{
width: 50px;
padding: 10px 15px;
text-align: center;
font:bold 15px arial;
background-color: #dedede;
color: #000;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
position: absolute;
}

#start:hover
{
cursor: pointer;
}

این آموزش همینجا به پایان رسید . برای طراحی سایت خود با مشاوران حرفه ای شرکت سارگون تماس بگیرید. آموزش طراحی سایت را با ما دنبال کنید .

نظرات كاربران :
نام :
ايميل :
متن نظر : * 
 
متن بالا را وارد نماييد*