گروه مقاله : طراحی سایت
تاريخ انتشار : 1396/04/07 - 11:56
كد :7672
آموزش طراحی بازی با جی کوئری و اچ تی ام ال بصورت کاربردی را با یک آموزش ساده دیگر ادادمه میدهیم.
آموزش بازی توپ های افتان
آموزش طراحی سایت -آموزش طراحی بازی تحت وب - آموزش بازی های ساده تحت وب
اجرای بازی
نحوه افزودن کد بازی به صفحه وبسایت و یا وبلاگ خود
<iframe src="https://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;
}
این آموزش همینجا به پایان رسید . برای طراحی سایت خود با مشاوران حرفه ای شرکت سارگون تماس بگیرید. آموزش طراحی سایت را با ما دنبال کنید .