371 Это простая игра-эксперимент в набор букв, реализованная на jQuery.
Главным критерием в ней было показать, как читать коды клавиатурных символов и показывать эквивалентные им символы на экране. Вы наверное заметите кучу ошибок в игре, но это всего лишь эксперимент, и ставка была сделана на разъяснение основ.
Давайте посмотрим, что получилось...
JavaScript код
Код, расположенный ниже, нужен для чтения ключа кода, во время нажатия клавиши клавиатуры.
|
1 2 3 |
$(document).keydown( function(event) { var keycode = event.keyCode; |
Узнаем разрешение экрана и отнимаем 100px и 200px от ширины и высоты.
|
1 2 |
var width = screen.width - 100; var height = screen.height - 200; |
В следующей функции генерируется случайный алфавит от A до Z.
Значения кодов букв A — Z находятся в диапазоне 65 — 90.
Math.random() — нужен для генерации случайного числа
String.fromCharCode() — используется для конвертации кода буквы в эквивалентную букву
|
1 2 3 |
// Генерация случайного числа в диапазоне 65 -90 var k = Math.floor(Math.random() * ( 90 - 65 + 1 )) + 65; var ch = String.fromCharCode(k); |
Генерируем случайный цвет для каждой буквы.
|
1 2 3 4 5 6 7 8 9 10 11 |
// Генерация случайного цвета 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; } }); |
Окончательный Javascript код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<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 код
|
1 2 3 4 |
<body> <div id="score">0</div> <div id="start">Start</div> </body> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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; } |
Вот и все.
Очень просто, но со вкусом.