В этом уроке мы возьмем основную браузерную игру (которую мы встроили в урок Tuts + Premium ) и добавим индикаторы выполнения, предварительный загрузчик, заставку и многое другое.
Вступление
В этом уроке Tuts + Premium мы создали основную карточную игру с использованием JavaScript, изображения которой были взяты из Flickr. Проверьте демо:
Нажмите, чтобы попробовать игру, как сейчас.
В этом уроке мы добавим много нового в игру, реализовав предварительный загрузчик и индикатор выполнения, заставку и поиск по ключевым словам. Посмотрите, как получится игра:
Нажмите, чтобы попробовать игру с улучшениями, которые мы добавим.
В этом руководстве вы изучите JavaScript и HTML, необходимые для кодирования всех этих улучшений. Загрузите исходные файлы и распакуйте папку с именем StartHere ; он содержит весь код из конца учебника Premium.
В flickrgame.js есть функция preloadImage() , которая содержит preloadImage() строку:
|
1
|
tempImage.src = flickrGame.tempImages[i].imageUrl;
|
В целях тестирования измените его на:
|
1
|
tempImage.src = «cardFront.jpg»;
|
Это будет постоянно показывать изображения на карточках, что значительно облегчает тестирование. Вы можете изменить это обратно в любое время.
Теперь читайте дальше!
Шаг 1: addKeyPress()
Прямо сейчас у нас есть жестко запрограммированный тег «собака», но игра быстро станет скучной, если мы заставим пользователя постоянно использовать фотографии собак!
Поисковый ввод сидел там и выглядел довольно привлекательно, но все это время он был полностью неработоспособен. Давайте это исправим. Мы будем прислушиваться к тому, чтобы пользователь doSearch() клавишу Enter, а затем вызывал метод doSearch() используя то, что он набрал для вызова API Flickr.
Добавьте следующее ниже функции resetImages() в flickrgame.js .
|
1
2
3
4
5
6
7
|
function addKeyPress() {
$(document).on(«keypress», function (e) {
if (e.keyCode == 13) {
doSearch();
}
});
}
|
Здесь мы прослушиваем нажатие клавиши, и если keyCode равен 13, мы знаем, что они нажали клавишу Enter, поэтому мы вызываем doSearch() .
Нам нужно изменить функцию doSearch чтобы использовать текст во входных данных, поэтому внесите следующие изменения:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
function doSearch() {
if ($(«#searchterm»).val() != «») {
$(document).off(«keypress»);
var searchURL = «http://api.flickr.com/services/rest/?method=flickr.photos.search»;
searchURL += «&api_key=» + flickrGame.APIKEY;
searchURL += «&tags=» + $(«#searchterm»).val();
searchURL += «&per_page=36»
searchURL += «&license=5,7»;
searchURL += «&format=json»;
searchURL += «&jsoncallback=?»;
$.getJSON(searchURL, setImages);
}
}
|
Здесь мы сначала проверяем, что ввод не пустой (мы не хотим ничего искать), затем удаляем прослушиватель keypress . Наконец, мы изменяем tags чтобы использовать значение ввода.
Последнее, что нам нужно сделать, это удалить вызов doSearch() в файле JS. Найдите, где мы вручную вызываем doSearch() и удалите его. (Это сразу после функции addKeyPress() .)
Не забудьте на самом деле вызвать addKeyPress() . Я назвал это прямо там, где я это объявил.
|
1
2
3
4
5
6
7
8
|
function addKeyPress() {
$(document).on(«keypress», function (e) {
if (e.keyCode == 13) {
doSearch();
}
});
}
addKeyPress();
|
Теперь, если вы протестируете игру, вы не увидите никаких изображений, пока не выполните поиск.
Шаг 2: Связь с сервером
Когда мы делаем наш первый вызов Flickr API, происходит небольшая задержка. Мы покажем анимированный GIF («пульсирующий»), когда будем связываться с сервером, и удалим его, как только вызов вернется.
Добавьте следующее в doSearch() .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
function doSearch() {
if ($(«#searchterm»).val() != «») {
$(document).off(«keypress»);
$(«#infoprogress»).css({
‘visibility’: ‘visible’
});
var searchURL = «http://api.flickr.com/services/rest/?method=flickr.photos.search»;
searchURL += «&api_key=» + flickrGame.APIKEY;
searchURL += «&tags=» + $(«#searchterm»).val();
searchURL += «&per_page=36»
searchURL += «&license=5,7»;
searchURL += «&format=json»;
searchURL += «&jsoncallback=?»;
$.getJSON(searchURL, setImages);
}
}
|
Это #infoprogress div #infoprogress видимым. Как только информация вернется с Flickr, мы ее спрячем. Для этого добавьте следующий код в setImages() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
function setImages(data) {
$(«#infoprogress»).css({
‘visibility’: ‘hidden’
});
$.each(data.photos.photo, function (i, item) {
var imageURL = ‘http://farm’ + item.farm + ‘.static.flickr.com/’ + item.server + ‘/’ + item.id + ‘_’ + item.secret + ‘_’ + ‘q.jpg’;
flickrGame.imageArray.push({
imageUrl: imageURL,
photoid: item.id
});
});
infoLoaded();
}
|
Если вы сейчас тестируете игру , вы должны увидеть изображение загрузчика при обращении к Flickr API.
Шаг 3: Получить информацию о фото
Нам нужно получить информацию для каждой фотографии, которую мы используем. Мы будем вызывать method=flickr.photos.getInfo для каждой фотографии, а затем вызывать infoLoaded() каждый раз при загрузке информации. После загрузки информации для каждой фотографии игра продолжается, как и прежде.
Здесь много новой информации, поэтому мы разберем ее шаг за шагом. Сначала добавьте следующее в setImages() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
function setImages(data) {
$(«#infoprogress»).css({
‘visibility’: ‘hidden’
});
if (data.photos.photo.length >= 12) {
$(«#searchdiv»).css({
‘visibility’: ‘hidden’
});
$.each(data.photos.photo, function (i, item) {
var imageURL = ‘http://farm’ + item.farm + ‘.static.flickr.com/’ + item.server + ‘/’ + item.id + ‘_’ + item.secret + ‘_’ + ‘q.jpg’;
flickrGame.imageArray.push({
imageUrl: imageURL,
photoid: item.id
});
var getPhotoInfoURL = «http://api.flickr.com/services/rest/?method=flickr.photos.getInfo»;
getPhotoInfoURL += «&api_key=» + flickrGame.APIKEY;
getPhotoInfoURL += «&photo_id=» + item.id;
getPhotoInfoURL += «&format=json»;
getPhotoInfoURL += «&jsoncallback=?»;
$.getJSON(getPhotoInfoURL, infoLoaded);
});
} else {
alert(«NOT ENOUGH IMAGES WERE RETURNED»);
addKeyPress();
}
flickrGame.numberPhotosReturned = flickrGame.imageArray.length;
}
|
Теперь, когда мы получаем теги от пользователя, мы должны убедиться, что было возвращено достаточно изображений, чтобы составить одну игру (12). Если это так, мы скрываем ввод, чтобы игрок не мог выполнить другой поиск в середине игры. Мы устанавливаем переменную getPhotoInfoURL и используем method=flickr.photos.getInfo — обратите внимание, что мы используем item.id для photo_id . Затем мы используем метод getJSON в jQuery и вызываем infoLoaded .
Если было возвращено недостаточно изображений, мы addKeyPress() предупреждение и вызываем addKeyPress() чтобы пользователь мог выполнить другой поиск.
Поэтому нам нужно знать, сколько изображений было возвращено после вызова API Flickr, и мы храним это в переменной numberPhotosReturned , которую мы добавляем в наш объект flickrGame :
|
1
2
3
4
5
6
7
8
|
var flickrGame = {
APIKEY: «76656089429ab3a6b97d7c899ece839d»,
imageArray: [],
tempImages:[],
theImages: [],
chosenCards: [],
numberPhotosReturned: 0
}
|
(Убедитесь, что вы добавили запятую после chosenCards: [] .)
Мы пока не можем проверить; если бы мы это сделали, мы бы preloadImages() 36 раз подряд, поскольку это все, что infoLoaded() наша infoLoaded() в данный момент. Определенно не то, что мы хотим. На следующем шаге мы infoLoaded() функцию infoLoaded() .
Шаг 4: infoLoaded()
Функция infoLoaded() получает информацию об одной фотографии. Он добавляет информацию в imageArray для соответствующей фотографии и отслеживает, сколько фотографий загружено; если это число равно numberPhotosReturned , он вызывает preloadImages() .
Удалите вызов preloadImages() и поместите в функцию infoLoaded() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
flickrGame.imageNum += 1;
var index = 0;
for (var i = 0; i < flickrGame.imageArray.length; i++) {
if (flickrGame.imageArray[i].photoid == data.photo.id) {
index = i;
flickrGame.imageArray[index].username = data.photo.owner.username;
flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content;
}
}
if (flickrGame.imageNum == flickrGame.numberPhotosReturned) {
preloadImages();
}
}
|
Здесь мы увеличиваем переменную imageNum и устанавливаем index переменной равным 0. Внутри цикла for мы проверяем, равен ли data.photo.id в data.photo.id (помните, что data являются JSON-представлением текущего изображения обрабатывается). Если они совпадают, мы устанавливаем index равный i и обновляем соответствующий индекс в imageArray с помощью username и переменной photoURL . Нам понадобится эта информация, когда мы покажем атрибуты изображения позже.
Это может показаться немного запутанным, но все, что мы делаем, это сопоставляем фотографии. Поскольку мы не знаем, в каком порядке они будут возвращены с сервера, мы photoURL ли их идентификаторы, и затем мы можем добавить переменные username и photoURL к фотографии.
Наконец, мы проверяем, imageNum ли imageNum равен numberPhotosReturned , и если это так, то все изображения были обработаны, поэтому мы вызываем preloadImages() .
Не забудьте добавить imageNum к объекту flickrGame .
|
1
2
3
4
5
6
7
8
9
|
var flickrGame = {
APIKEY: «76656089429ab3a6b97d7c899ece839d»,
imageArray: [],
tempImages:[],
theImages: [],
chosenCards: [],
numberPhotosReturned: 0,
imageNum: 0
}
|
(Убедитесь, что вы добавили запятую после numberPhotosReturned: 0 )
Если вы протестируете сейчас, вам понадобится немного больше времени, чтобы увидеть фотографии. Помимо вызова Flickr API для получения фотографий, теперь мы получаем информацию о каждой из них.
Шаг 5: индикатор выполнения для информации о фото
На этом этапе мы получим индикатор выполнения, показывающий, когда мы загружаем информацию о фотографии.
Добавьте следующий код в setImages() :
|
01
02
03
04
05
06
07
08
09
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
|
function setImages(data) {
$(«#infoprogress»).css({
‘visibility’: ‘hidden’
});
$(«#progressdiv»).css({
‘visibility’: ‘visible’
});
$(«#progressdiv p»).text(«Loading Photo Information»);
if (data.photos.photo.length >= 12) {
$(«#searchdiv»).css({
‘visibility’: ‘hidden’
});
$.each(data.photos.photo, function (i, item) {
var imageURL = ‘http://farm’ + item.farm + ‘.static.flickr.com/’ + item.server + ‘/’ + item.id + ‘_’ + item.secret + ‘_’ + ‘q.jpg’;
flickrGame.imageArray.push({
imageUrl: imageURL,
photoid: item.id
});
var getPhotoInfoURL = «http://api.flickr.com/services/rest/?method=flickr.photos.getInfo»;
getPhotoInfoURL += «&api_key=» + flickrGame.APIKEY;
getPhotoInfoURL += «&photo_id=» + item.id;
getPhotoInfoURL += «&format=json»;
getPhotoInfoURL += «&jsoncallback=?»;
$.getJSON(getPhotoInfoURL, infoLoaded);
});
} else {
$(«#progressdiv»).css({
‘visibility’: ‘hidden’
});
alert(«NOT ENOUGH IMAGES WERE RETURNED»);
addKeyPress();
}
flickrGame.numberPhotosReturned = flickrGame.imageArray.length;
}
|
Это покажет #progressdiv и изменит текст абзаца внутри #progressdiv на «Загрузка информации о фото». Если было возвращено недостаточно изображений, мы скрываем #progressdiv .
Затем добавьте следующее в infoLoaded() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
function infoLoaded(data) {
flickrGame.imageNum += 1;
var percentage = Math.floor(flickrGame.imageNum / flickrGame.numberPhotosReturned * 100);
$(«#progressbar»).progressbar({
value: percentage
});
var index = 0;
for (var i = 0; i < flickrGame.imageArray.length; i++) {
if (flickrGame.imageArray[i].photoid == data.photo.id) {
index = i
flickrGame.imageArray[index].username = data.photo.owner.username;
flickrGame.imageArray[index].photoURL = data.photo.urls.url[0]._content;
}
}
if (flickrGame.imageNum == flickrGame.numberPhotosReturned) {
preloadImages();
}
}
|
Здесь мы устанавливаем переменную в percentage равную Math.floor(flickrGame.imageNum / flickrGame.numberPhotosReturned * 100) ; это гарантирует, что мы получим число от 0 до 100. Затем мы вызываем $("#progressbar").progressbar() и устанавливаем свойство value равным percentage .
Теперь, если вы тестируете игру, она должна работать так же, как и раньше, но с индикатором выполнения. Ну, есть одна проблема: индикатор выполнения остается после того, как изображения прорисованы. В игре мы сначала загружаем информацию о фотографии, затем предварительно загружаем изображения и оба используем индикатор выполнения. Мы исправим это на следующем шаге.
Шаг 6: Предварительная загрузка изображений
На этом шаге мы будем использовать плагин jQuery.imgpreload (он уже в исходной загрузке). Как только вся информация о файле из вышеперечисленных шагов была загружена, индикатор выполнения сбрасывает себя и контролирует загрузку изображений.
Добавьте следующее в preloadImages() :
|
01
02
03
04
05
06
07
08
09
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
|
function preloadImages() {
flickrGame.tempImages = flickrGame.imageArray.splice(0, 12);
for (var i = 0; i < flickrGame.tempImages.length; i++) {
for (var j = 0; j < 2; j++) {
var tempImage = new Image();
tempImage.src = «cardFront.png»;
tempImage.imageSource = flickrGame.tempImages[i].imageUrl;
flickrGame.theImages.push(tempImage);
}
}
$(«#progressdiv»).css({
‘visibility’: ‘visible’
});
$(«#progressdiv p»).text(«Loading Images»);
var tempImageArray = [];
for (var i = 0; i < flickrGame.tempImages.length; i++) {
tempImageArray.push(flickrGame.tempImages[i].imageUrl);
}
$.imgpreload(tempImageArray, {
each: function () {
if ($(this).data(‘loaded’)) {
flickrGame.numImagesLoaded++;
var percentage = Math.floor(flickrGame.numImagesLoaded / flickrGame.totalImages * 100);
$(«#progressbar»).progressbar({
value: percentage
});
}
},
all: function () {
$(«#progressdiv»).css({
‘visibility’: ‘hidden’
});
drawImages();
}
});
}
|
Здесь мы устанавливаем #progressdiv и изменяем абзац на «Загрузка изображений». Мы устанавливаем временный массив и добавляем в него URL-адреса временных изображений, а затем передаем весь массив в $.imgpreload чтобы $.imgpreload предварительную загрузку.
each функция запускается при каждой предварительной загрузке фотографии, а функция all запускается при предварительной загрузке всех изображений. Внутри each() мы проверяем, действительно ли изображение было загружено, увеличиваем переменную numImagesLoaded и используем тот же метод для процента и индикатора выполнения, что и раньше. ( totalImages 12 с тех пор, сколько мы используем за игру.)
Как только все изображения были предварительно загружены (то есть, когда выполняется all() ), мы устанавливаем #progessdiv в значение hidden и вызываем drawImages() .
Нам нужно добавить переменные numImagesLoaded и totalImages в наш объект flickrGame :
|
01
02
03
04
05
06
07
08
09
10
11
|
var flickrGame = {
APIKEY: «76656089429ab3a6b97d7c899ece839d»,
imageArray: [],
tempImages:[],
theImages: [],
chosenCards: [],
numberPhotosReturned: 0,
imageNum: 0,
numImagesLoaded: 0,
totalImages: 12
}
|
(Убедитесь, что вы добавили запятую после imageNum .)
Если вы сейчас тестируете игру , вы должны увидеть индикатор выполнения как для информации о фотографии, так и для предварительной загрузки изображений.
Шаг 7: Отображение атрибутов
Чтобы соответствовать условиям предоставления услуг Flickr API, мы должны показать атрибуты для изображений, которые мы используем. (Это также вежливо.)
Добавьте следующий код в hideCards() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function hideCards() {
$(flickrGame.chosenCards[0]).animate({
‘opacity’: ‘0’
});
$(flickrGame.chosenCards[1]).animate({
‘opacity’: ‘0’
});
flickrGame.theImages.splice(flickrGame.theImages.indexOf(flickrGame.chosenCards[0]), 1);
flickrGame.theImages.splice(flickrGame.theImages.indexOf(flickrGame.chosenCards[1]), 1);
$(«#image1»).css(‘background-image’, ‘none’);
$(«#image2»).css(‘background-image’, ‘none’);
if (flickrGame.theImages.length == 0) {
$(«#gamediv img.card»).remove();
$(«#gamediv»).css({
‘visibility’: ‘hidden’
});
showAttributions();
}
addListeners();
flickrGame.chosenCards = new Array();
}
|
Здесь мы проверяем, равно ли количество оставшихся изображений нулю, и если это так, мы знаем, что пользователь сопоставил все карточки. Поэтому мы удаляем все карты из DOM и устанавливаем #gamediv для #gamediv . Затем мы вызываем showAttributions() которую мы будем кодировать дальше.
Шаг 8: Показать атрибуты
На этом этапе мы будем кодировать showAttributions() .
Добавьте следующее ниже функции checkForMatch() вы закодировали в шагах выше:
|
1
2
3
4
5
6
7
8
9
|
function showAttributions() {
$(«#attributionsdiv»).css({
‘visibility’: ‘visible’
});
$(«#attributionsdiv div»).each(function (index) {
$(this).find(‘img’).attr(‘src’, flickrGame.tempImages[index].imageUrl).
next().html(‘<span>Username:
});
}
|
Здесь мы устанавливаем #attributionsdiv видимым, а затем перебираем каждый div внутри него. Есть 12 дел, каждый с изображением и абзацем; мы используем метод find() jQuery для поиска img в div, устанавливаем src изображения на правильный imageUrl и используем метод next() jQuery для установки имени username и photoURL на информацию из Flickr.
Здесь приведены ссылки на методы jQuery find () и next (), чтобы вы могли больше узнать о них.
Если вы сейчас протестируете игру и пройдете уровень, вы увидите атрибуты со ссылкой на изображение на Flickr. Вы также увидите две кнопки: одну для следующего уровня и одну для новой игры. Мы заставим эти кнопки работать на следующих шагах.
Шаг 9: Следующий уровень
В нашем обращении к Flickr API мы установили per_page в 36, чтобы запросить столько изображений одновременно. Поскольку в каждой игре используется 12 изображений, это означает, что может быть до трех уровней. На этом шаге мы получим кнопку Next Level.
Добавьте следующий код в setImages() :
|
1
2
3
4
5
6
7
|
function setImages(data) {
// … snip …
flickrGame.numberPhotosReturned = flickrGame.imageArray.length;
flickrGame.numberLevels = Math.floor(flickrGame.numberPhotosReturned / 12);
}
|
Нам нужно знать, сколько уровней будет в игре. Это зависит от того, сколько изображений было возвращено из нашего поиска. Это не всегда будет 36. Например, я искал «хмммм», и он возвратил приблизительно 21 фотографию в то время. Мы будем использовать Math.floor() для округления числа вниз — в конце концов, нам не нужны уровни 2.456787, и это лишит игровую логику.
Убедитесь, что вы добавили переменную flickrGame объект flickrGame :
|
01
02
03
04
05
06
07
08
09
10
11
12
|
var flickrGame = {
APIKEY: «76656089429ab3a6b97d7c899ece839d»,
imageArray: [],
tempImages:[],
theImages: [],
chosenCards: [],
numberPhotosReturned: 0,
imageNum: 0,
numImagesLoaded: 0,
totalImages: 12,
numberLevels: 0
}
|
(Не забудьте добавить запятую после totalImages: 12 )
Теперь измените drawImages() следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
|
function drawImages() {
flickrGame.currentLevel += 1;
$(«#leveldiv»).css({
‘visibility’: ‘visible’
}).html(«Level » + flickrGame.currentLevel + » of » + flickrGame.numberLevels);
flickrGame.theImages.sort(randOrd);
for (var i = 0; i < flickrGame.theImages.length; i++) {
$(flickrGame.theImages[i]).attr(«class», «card»).appendTo(«#gamediv»);
}
addListeners();
}
|
Здесь мы увеличиваем переменную currentLevel , устанавливаем #leveldiv видимым и устанавливаем HTML- #leveldiv div, чтобы прочитать, на каком уровне мы находимся и сколько уровней.
Еще раз, нам нужно добавить переменную currentLevel в наш объект flickrGame .
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
var flickrGame = {
APIKEY: «76656089429ab3a6b97d7c899ece839d»,
imageArray: [],
tempImages:[],
theImages: [],
chosenCards: [],
numberPhotosReturned: 0,
imageNum: 0,
numImagesLoaded: 0,
totalImages: 12,
numberLevels: 0,
currentLevel: 0
}
|
(Я уверен, что вам пока не нужно напоминать, но убедитесь, что вы добавили запятую после numberLevels: 0 )
Теперь измените showAttributions() следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function showAttributions() {
$(«#leveldiv»).css({
‘visibility’: ‘hidden’
});
$(«#attributionsdiv»).css({
‘visibility’: ‘visible’
});
if (flickrGame.currentLevel == flickrGame.numberLevels) {
$(«#nextlevel_btn»).css({
‘visibility’: ‘hidden’
});
} else {
$(«#nextlevel_btn»).css({
‘visibility’: ‘visible’
});
}
$(«#attributionsdiv div»).each(function (index) {
$(this).find(‘img’).attr(‘src’, flickrGame.tempImages[index].imageUrl);
$(this).find(‘p’).html(‘<span>Username:
});
}
|
Мы скрываем #leveldiv , устанавливая его видимость hidden .
Далее мы проверяем, равен ли currentLevel числу numberLevels . Если они равны, больше нет доступных уровней, поэтому мы скрываем #nextlevel_btn ; в противном случае мы покажем это.
Наконец нам нужно #nextlevel_btn . Добавьте следующий код ниже функции addKeyPress() вы создали в addKeyPress() шаге:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
$(«#nextlevel_btn»).on(«click», function (e) {
$(this).css({
‘visibility’: ‘hidden’
});
$(«#gamediv»).css({
‘visibility’: ‘visible’
});
$(«#attributionsdiv»).css({
‘visibility’: ‘hidden’
});
flickrGame.numImagesLoaded = 0;
preloadImages();
});
|
Здесь мы скрываем кнопку, #gamediv , скрываем #attributionsdiv , сбрасываем переменную numImagesLoaded и вызываем preloadImages() которая захватывает следующие 12 изображений.
Вы можете протестировать игру сейчас и сможете пройти все уровни. Мы #newgame_btn на следующих этапах.
Шаг 10: Начало новой игры
Вы можете начать новую игру в любое время, но после прохождения всех уровней это единственный вариант. На этом шаге мы #newgame_btn .
Добавьте следующий код под #nextlevel_btn вы добавили на шаге выше:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(«#newgame_btn»).on(«click», function (e) {
$(«#gamediv»).css({
‘visibility’: ‘visible’
});
$(«#leveldiv»).css({
‘visibility’: ‘hidden’
});
$(«#attributionsdiv»).css({
‘visibility’: ‘hidden’
});
$(«#searchdiv»).css({
‘visibility’: ‘visible’
});
$(«#nextlevel_btn»).css({
‘visibility’: ‘hidden’
});
flickrGame.imageNum = 0;
flickrGame.numImagesLoaded = 0;
flickrGame.imageArray = new Array();
flickrGame.currentLevel = 0;
flickrGame.numberLevels = 0;
addKeyPress();
});
|
Здесь мы раскрываем #gamediv , скрываем #leveldiv и #attributionsdiv , раскрываем #searchdiv и скрываем #nextlevel_btn . Затем мы сбрасываем некоторые переменные и вызываем addKeyPress() чтобы пользователь мог искать снова.
Если вы пройдете тестирование сейчас, вы сможете начать новую игру в любое время, а также после прохождения всех уровней.
Игра завершена, что касается геймплея, но нам нужно показать заставку. Мы сделаем это на следующем шаге.
Шаг 11: Заставка
Нам нужно внести некоторые изменения в наш файл CSS. В частности, нам нужно установить видимость #gamediv скрытым и установить #introscreen на видимость. Откройте styles/game.css и внесите эти изменения сейчас:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
#gamediv {
position:absolute;
left:150px;
width:600px;
height:375px;
border: 1px solid black;
padding:10px;
color:#FF0080;
visibility:hidden;
background: #FFFFFF url(‘../pattern.png’);
}
#introscreen{
position:absolute;
left:150px;
width:600px;
height:375px;
border: 1px solid black;
padding-top:10px;
color:#FF0080;
visibility:visible;
background: #FFFFFF url(‘../pattern.png’);
padding-left:80px;
}
|
Далее нам нужно изменить addKeyPress() . Удалите все из addKeyPress() и замените его следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function addKeyPress() {
$(document).on(«keypress», function (e) {
if (e.keyCode == 13) {
if (!flickrGame.gameStarted) {
hideIntroScreen();
} else {
doSearch();
}
flickrGame.gameStarted = true;
}
});
}
|
Здесь мы проверяем, нажал ли пользователь клавишу Enter, затем проверяем, началась ли игра. Если это не так, мы вызываем hideIntroScreen() ; в противном случае мы вызываем doSearch() ; в любом случае, мы отмечаем, что игра началась. Это означает, что в первый раз, когда пользователь нажимает Enter, он вызывает hideIntroScreen() , а в следующий раз, когда пользователь нажимает клавишу Enter, он вызывает doSearch() .
Теперь нам нужно кодировать hideIntroScreen() . Добавьте следующее ниже функции addKeyPress() :
|
1
2
3
4
5
6
7
8
|
function hideIntroScreen() {
$(«#gamediv»).css({
‘visibility’: ‘visible’
});
$(«#introscreen»).css({
‘visibility’: ‘hidden’
});
}
|
Если вы тестируете игру сейчас, вы должны увидеть заставку; нажмите Enter, и вы можете играть в игру, как и раньше.
Шаг 12: Лучшее оповещение
Прямо сейчас, если достаточное количество изображений не возвращено для игры, мы выскакиваем предупреждение. Хотя это работает, мы можем заставить его выглядеть немного лучше, используя диалог jQuery UI.
Нам нужно отредактировать index.html , поэтому откройте его и добавьте следующее прямо в #gamediv :
|
1
2
3
4
5
6
|
<div id=»gamediv»>
<div id=»dialog» title=»Sorry»>
<p>Not enough images were returned, please try a different keyword.</p>
</div>
|
Теперь нам нужно связать его. Добавьте следующее под hideIntroScreen() в файле JS:
|
1
2
3
|
$(«#dialog»).dialog({
autoOpen: false
});
|
Этот код преобразует div #dialog в диалог; мы отключаем функцию автоматического открытия .
Мы хотим, чтобы это диалоговое окно открывалось вместо того предупреждения, которое у нас было раньше, поэтому удалите предупреждение из функции setImages() и замените его следующим:
|
01
02
03
04
05
06
07
08
09
10
|
} else {
$(«#progressdiv»).css({
‘visibility’: ‘hidden’
});
$(«#dialog»).dialog(‘open’);
addKeyPress();
}
flickrGame.numberPhotosReturned = flickrGame.imageArray.length;
flickrGame.numberLevels = Math.floor(flickrGame.numberPhotosReturned / 12);
}
|
Теперь, если возвращено недостаточно изображений, мы получаем красивый диалог, вместо того чтобы использовать предупреждение, напоминающее веб-страницы 90-х годов.
Не забудьте изменить эту строку из preloadImages() :
|
1
|
tempImage.src = «cardFront.jpg»;
|
… вернуться к этому:
|
1
|
tempImage.src = flickrGame.tempImages[i].imageUrl;
|
… в противном случае игра будет слишком простой!
Теперь протестируйте финальную игру . Если что-то не так, вы всегда можете сравнить свой источник с моим или задать вопрос в комментариях.
Вывод
Мы написали забавную маленькую игру, используя изображения из Flickr API, и дали ей достойный слой-два для блеска. Надеюсь, вам понравился этот урок и вы узнали что-то стоящее. Спасибо за чтение и весело провести время!