Пятница, 14 Сентября 2012 02:20

Моя первая игра на Javascript

Written by 
Оцени эту запись
(5 Голоса)

В этой статье я расскажу как я реализовала свою первую игру на JavaScript, которую мне задали в виде тестового задания на собеседовании в одну прекрасную компанию.

 

Суть игрушки - сверху падают кирпичики, внутри каждого по букве (буквы выбираются рандомно). Когда юзер на клавиатуре нажимает букву, которая есть на кирпичике, кирпичик пропадает, а пользователю насчитывается +10 очков. Если кирпичик долетел до конца экрана, у него пропадает жизнь. Координата х кирпичиков выбирается по рандому. Кроме кирпичей, на экране две кнопки - play/pause и stop, а также поля с выводом жизней и очков.   

 

Превью:

 

 

 

Демо

 

А теперь расскажу подробно, как я эту игру делала.

 

HTML:

 

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Game</title>
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/script.js"></script>
</head>
 
<body>
<div class="wrapper">
    <div class="manage">
        <input type="button" class="play_pause" value="Play/Pause" onClick="MyGame()">
            <input type="button" class="stop" value="Stop">
            <p class="lifes">10</p>
            <p class="points">0</p>
        </div>
</div>
</body>
</html>
 
 
Здесь у меня есть родительский контейнер wrapper и в нем контейнер с кнопками и жизнями/очками.
 
CSS весь приводить не буду, там нет особо ничего интересного. Единственное, что важно, это у кирпичиков моих должно быть абсолютное позиционирование и top:0px. Левуй координату можно, на всякий случай, задать, но она будет меняться скриптом:
 
 
.item {
position: absolute;
top:0px;
left: 0px;
}
 
 
А теперь пройдемся по скрипту. Полный его код можно посмотреть здесь, потому в статье буду приводить части.
 
 
Для начала я делаю класс, который описывает каждый кирпичик:
 
 
function Element() {
this.letter = function(){
var numletter = Math.floor(Math.random() * letters.length);
var isletter = letters.substring(numletter,numletter+1);
if(letters !== '') {
letters = letters.replace(isletter,'');
} else {
alert('You Win');
StopGame();
}
return isletter;
}
this.coordX = Math.abs(Math.floor(Math.random() * window.innerWidth-170));
this.html = document.createElement('span');
this.html.className = 'item';
this.html.innerHTML = this.letter();
this.html.style.left = this.coordX+'px';
return this.html;
}
 
 
Выбираю случайным образом для каждого кирпичика букву таким образом:
 
this.letter = function(){
var numletter = Math.floor(Math.random() * letters.length);
var isletter = letters.substring(numletter,numletter+1);
if(letters !== '') {
letters = letters.replace(isletter,'');
} else {
alert('You Win');
StopGame();
}
return isletter;
}
 
Где переменная lettersзадается внутри основной функции:
 
 
letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
 
 
Для выбора рандомной буквы, я беру строку, которая содержит набор всех букв. Потом я рандомно выбираю число от нуля для длины строки letters.length и в виде буквы выдаю подстроку в один символ начиная с позиции, равной рандомному числу.
 
Для того, чтобы буквы не повторялись, я удаляю из своей строки тот символ, который только что выбрался:
 
 
letters = letters.replace(isletter,'');
 
 
Если же строка уже пуста, то заканчиваю игру - alert('You Win').
 
 
Кроме случайной буквы, мне нужна случайная координата х, но это проще:
 
 
this.coordX = Math.abs(Math.floor(Math.random() * window.innerWidth-170))
 
 
И теперь вырисовую свой кирпичик:
 
 
this.html = document.createElement('span'); //создаю элемент span
this.html.className = 'item'; //задаю ему класс item
this.html.innerHTML = this.letter(); //вставляю в него свою букву
this.html.style.left = this.coordX+'px'; //задаю стиль top, равный рандомной координате х.
 
 
Теперь у меня есть класс для кирпичика, осталось его вывести на страницу и заставить двигаться.
Для этого я беру элемент wrapper
 
 
var wrapper = document.getElementsByTagName('div').item(0);
 
 
создаю массив элементов
 
 
var items = new Array;
 
 
записываю в него объекты кирпичей и вставляю их внутрь wrapper'а
 
 
items[counter] = new Element();
wrapper.appendChild(items[counter]);
 
 
Причем, последнее я делаю внутри setInterval(). В моем случае, setInterval() - самое основное. Эта функция будет реализовывать движение элементов, регулярное появление, а также остановку игры при помощи clearInterval.
 
 
Реализация движения:
 
 
for(i=0;i<items.length;i++){
if(parseInt(items[i].style.top, 10)<window.innerHeight-55) {
items[i].style.top = (parseInt(items[i].style.top, 10) + 5)+'px';
} else {
items[i].style.top = -1000+'px';
items[i].style.display = 'none';
lifes = lifes - 1;
if(lifes>0){
document.getElementsByTagName('p').item(0).innerHTML = lifes;
}
else {
clearInterval(StopBut);
alert('GAME OVER');
}
}
}
 
 
Движение у меня описано внутри setInterval, потому все это происходит на повторе. Работаем с массивом кирпичей items. Для каждого элемента делаем проверку, не находится ли он внизу экрана:
 
 
parseInt(items[i].style.top, 10)<window.innerHeight-55
 
 
Если нет, сдвигаем его на 5 пикселей вниз:
 
 
items[i].style.top = (parseInt(items[i].style.top, 10) + 5)+'px';
 
 
Если же кирпичик все таки внизу, мы его скрываем и отправляем высоко в горы, ибо ему и дальше придется вниз двигаться:
 
 
items[i].style.top = -1000+'px';
items[i].style.display = 'none';
 
 
И в этом же случае, мы убираем одну жизнь:
 
 
lifes = lifes - 1;
 
 
где жизнь - это lifes = parseInt(document.getElementsByTagName('p').item(0).innerHTML, 10).
 
 
Еще у меня реалтзована реакция на нажатие клавиши:
 
 
var key;
document.body.onkeydown = function(event){
key = String.fromCharCode(event.keyCode);
for(i=0;i<items.length;i++){
if(items[i].innerHTML == key) {
items[i].style.top = 0+'px';
items[i].style.display = 'none';
points = points + 10;
document.getElementsByTagName('p').item(1).innerHTML = points;
}
}
}
 
 
Я реагирую на нажатие клавиши на элементе body и записываю букву с этой клавиши в переменную key:
 
 
key = String.fromCharCode(event.keyCode);
 
 
Проверяю совпадает ли клавиша с буквой в одном из кирпичиков:
 
 
if(items[i].innerHTML == key) { }
 
 
Если да, то скрываю его, отправляю наверх и прибавляю очки:
 
 
items[i].style.top = 0+'px';
items[i].style.display = 'none';
points = points + 10;
 
 
где очки - это points = parseInt(document.getElementsByTagName('p').item(1).innerHTML, 10).
 
 
Кроме этого у меня еще есть функция, которая отвечает за остановку игры:
 
 
var StopGame = function(){
clearInterval(StopBut);
for (i=0;i<items.length;i++){
items[i].parentNode.removeChild(items[i]);
delete items[i];
}
document.getElementsByTagName('p').item(0).innerHTML = 10;
document.getElementsByTagName('p').item(1).innerHTML = 0;
document.getElementsByTagName('input').item(0).setAttribute('onclick','MyGame()');
items[i].style.top = 0+'px';
}; 
 
 
Она вызывается при нажатии кнопки Stop, при выигрыше или поражении. В этой функции я останавливаю setInterval, удаляю кирпичики из wrapper'а, удаляю их же из массива, возвращаю стартовые значения очков и жизней.
 
 
 
 

Комментарии  

 
0 #2 kat-khmara 27.05.2013 07:55
Спасибо за позитивный комментарий!
 
 
0 #1 Александр 27.05.2013 07:41
Интересно вышло, хороша игра для увеличения скорости слепой печати, да еще на обычном js, и кода с гулькин нос
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов