{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3mgkt"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":54,"offset":16}],"inlineStyleRanges":[{"length":77,"offset":0,"style":"BOLD"}],"text":"<Первая часть — Java Script. Космическая стрелялка. Туториал. Часть 1. ©HD4E>","type":"unstyled","key":"c3v54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2udbg"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":53,"offset":16}],"inlineStyleRanges":[{"length":77,"offset":0,"style":"BOLD"}],"text":"<Вторая часть — Java Script. Космическая стрелялка. Туториал. Часть 2. ©HD4E>","type":"unstyled","key":"3ure"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":0,"style":"BOLD"}],"text":"7.Добавление динамического заднего фона.","type":"header-two","key":"brl4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь игра начинает выглядеть интересно, но хороший задний фон сделал бы вид игры определённо лучше. Космические игры обычно имеют черное, звездное небо на заднем плане. Мы могли бы использовать статический спрайт для этого, но я думаю это выглядело лучше бы если он начал двигаться вниз(создавая впечатление, что всё остальное движется вперед). ","type":"unstyled","key":"cn9k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак давайте используем статическую черную картинку для заднего плана, и немного движущихся спрайтов для звёзд. ","type":"unstyled","key":"8fvni"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":83,"offset":0,"style":"BOLD"}],"text":"(< Для этого мы создадим спрайт с изображением, в котором будет только черный цвет.","type":"unstyled","key":"50g7m"},{"data":{"image":{"id":"5d7335021ee34f00aef1344c"},"images":[{"id":"5d7335021ee34f00aef1344c"},{"id":"5d73743880879d00ad85597d"}],"contents":{"5d73743880879d00ad85597d":"ship.png","5d7335021ee34f00aef1344c":"back.png","imageId":"ship.png"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"back.png","type":"atomic:image","key":"4kqfj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":136,"offset":0,"style":"BOLD"}],"text":"Загрузите это изображение, как обычно в папку images, назвав его back.png. Также добавьте код загрузки к остальному коду в функции load:","type":"unstyled","key":"32m6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":1,"style":"BOLD"}],"text":" wade.loadImage(\"images/back.png\"); ","type":"unstyled","key":"btsca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"(c)HD4E>)","type":"unstyled","key":"8ps45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":19,"style":"BOLD"}],"text":" Добавим в функцию init следующий код:","type":"unstyled","key":"5v019"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создаем новый спрайт, с нашим изображением","type":"blockquote","key":"ekcgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"BOLD"}],"text":"var backSprite = new Sprite(\"images/back.png\");","type":"blockquote","key":"4eamk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// устанавливаем размер спрайта равный ширине и высоте текущей области прорисовки","type":"blockquote","key":"eaffg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"backSprite.setSize(wade.getScreenWidth(), wade.getScreenHeight());","type":"blockquote","key":"f3iuk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создаём новый объект с нашим спрайтом","type":"blockquote","key":"79sqh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"var backObject = new SceneObject(backSprite);","type":"blockquote","key":"b31j8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// добавляем объект на сцену","type":"blockquote","key":"mp39"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":"wade.addSceneObject(backObject);","type":"blockquote","key":"2d8g7"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":178}],"inlineStyleRanges":[{"length":8,"offset":159,"style":"BOLD"},{"length":8,"offset":178,"style":"BOLD"}],"text":"Теперь давайте добавим немного звезд поверх нашего заднего фона. Я буду использовать один крошечный спрайт(16x16) изображение которого я размещу в нашей папке images, назвав его star.png. Затем я загружу его как обычно:","type":"unstyled","key":"8fa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"wade.loadImage(\"images/star.png\");","type":"blockquote","key":"7h30k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":12,"style":"BOLD"}],"text":"И в функции init я создам немного этих звезд в случайных позициях, с случайной ориентацией и размером. Я поставлю их на тот же слой, на котором находится наш задний фон(10 слой) на данный момент, но мы вернемся к этому еще, но чуть позже. Код:","type":"unstyled","key":"jfjo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"for(var i=0; i<15; i++)","type":"blockquote","key":"5vk7q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"{","type":"blockquote","key":"bt3nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":" // определяем случайный размер звезды между 8 и 16","type":"blockquote","key":"4fd0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":3,"style":"BOLD"}],"text":" var size = Math.random()*8+8;","type":"blockquote","key":"d2irk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":5,"style":"BOLD"},{"length":10,"offset":6,"style":"ITALIC"}],"text":" // определяем случайное вращение между 0 и 6.28","type":"blockquote","key":"2cuul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"}],"text":" var rotation = Math.random()*6.28; ","type":"blockquote","key":"4jio7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":6,"style":"ITALIC"}],"text":" // определяем случайную координату по оси X, на всей ширине области прорисовки","type":"blockquote","key":"5jlmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":" var posX = (Math.random()-0.5)*wade.getScreenWidth();","type":"blockquote","key":"db4vf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":6,"style":"ITALIC"}],"text":" // определяем случайную координату по оси Y, на всей ширине области прорисовки","type":"blockquote","key":"13tjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"},{"length":54,"offset":3,"style":"ITALIC"}],"text":" var posY = (Math.random()-0.5)*wade.getScreenHeight();","type":"blockquote","key":"evspa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // создаем спрайт звезды со слоем номер 10","type":"blockquote","key":"dh4u6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":3,"style":"BOLD"}],"text":" var starSprite = new Sprite(\"images/star.png\", 10);","type":"blockquote","key":"7568s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // устанавливаем размер спрайта","type":"blockquote","key":"eq3oq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":" starSprite.setSize(size, size);","type":"blockquote","key":"5q399"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // создаем объект сцены с координатами posX и posY","type":"blockquote","key":"9unts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":" var star = new SceneObject(starSprite, 0, posX, posY);","type":"blockquote","key":"5dqgb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // устанавливаем вращение","type":"blockquote","key":"6jo52"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":" star.setRotation(rotation);","type":"blockquote","key":"4q7u4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // добавляем нашу звезду на сцену","type":"blockquote","key":"c660"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":0,"style":"BOLD"}],"text":" wade.addSceneObject(star);","type":"blockquote","key":"e5ojn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"}","type":"blockquote","key":"75lbt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь наша игра должна выглядеть немного получше.","type":"unstyled","key":"6im8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":214,"style":"BOLD"}],"text":"Теперь давайте заставим эти звезды двигаться навстречу нижнему краю экрана, и когда они будут там мы подберем им новую позицию вдоль верхнего края экрана, и заставим их опять двигаться вниз. Итак внизу нашей петли for, после добавления каждой звезды на сцену, мы напишем код:","type":"unstyled","key":"e6nv9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// здесь мы заставляем звезду двигаться по заданным координатам","type":"blockquote","key":"2ms0p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"star.moveTo(posX, wade.getScreenHeight()/2 + size/2,20);","type":"blockquote","key":"8804g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// здесь мы говорим что по окончанию движения, должен выполниться следующий далее код","type":"blockquote","key":"dl7bg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"star.onMoveComplete= function()","type":"blockquote","key":"2fhjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"{","type":"blockquote","key":"7helj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // получаем старый размер звезды из текущего спрайта","type":"blockquote","key":"b7slp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":3,"style":"BOLD"}],"text":" var size = this.getSprite(). getSize().y;","type":"blockquote","key":"eccdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // создаем новую случайную позицию по оси X","type":"blockquote","key":"70iac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":3,"style":"BOLD"}],"text":" var posX = (Math.random()-0.5)*wade.getScreenWidth();","type":"blockquote","key":"e1df0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // устанавливаем новую позицию","type":"blockquote","key":"942uo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":62,"offset":0,"style":"BOLD"}],"text":" this.setPosition(posX, -wade.getScreenHeight()/2 - size/2);","type":"blockquote","key":"digpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // заставляем звезду двигаться","type":"blockquote","key":"4l2am"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"BOLD"}],"text":" this.moveTo(posX, wade.getScreenHeight()/2+size/2, 20);","type":"blockquote","key":"dga40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":0,"style":"BOLD"}],"text":"};","type":"blockquote","key":"4ifi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это даёт впечатление, что мы постоянно двигаемся вперёд. И это является приятным штрихом.","type":"unstyled","key":"304kp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"8. Рейтинг.","type":"header-two","key":"6rjt4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":191,"style":"BOLD"}],"text":"Теперь давайте также добавим счетчик баллов. Мы сделаем его простым, так что это будет простой текстовый спрайт в верхнем правом углу экрана. Я определю пару переменных в верхней части нашей App функции:","type":"unstyled","key":"4gt6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"var scoreCounter;","type":"blockquote","key":"1u28a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"var score;","type":"blockquote","key":"4t880"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":22,"style":"BOLD"},{"length":7,"offset":99,"style":"ITALIC"}],"text":"Затем в нашей функции init мы создадим объект для этой переменной. Я установлю выравнивание текста направо, и я размещу объект в верхнем правом углу экрана:","type":"unstyled","key":"a8i7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"score = 0;","type":"blockquote","key":"3u1q3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создаем новый текстовый спрайт","type":"blockquote","key":"3d8o9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":83,"offset":0,"style":"BOLD"}],"text":"var scoreSprite = new TextSprite(score.toString(), '32 px Verdana','#f88','right');","type":"blockquote","key":"bei51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// создаём новый объект с этим спрайтом","type":"blockquote","key":"a180u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":104,"offset":0,"style":"BOLD"}],"text":"scoreCounter = new SceneObject(scoreSprite, 0, wade.getScreenWidth()/2-10, wade.getScreenHeight()/2+30);","type":"blockquote","key":"2apmm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// добавляем объект на сцену","type":"blockquote","key":"2lrcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"wade.addSceneObject(scoreCounter);","type":"blockquote","key":"9d2rl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":69,"offset":116,"style":"ITALIC"},{"length":23,"offset":116,"style":"BOLD"}],"text":"Теперь давайте наберем несколько очков, код для этого мы разместим там где мы уничтожаем вражеский корабль в нашем \"главном цикле - fire\", до того как мы удаляем вражеский корабль. Код:","type":"unstyled","key":"9nrdo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"ITALIC"},{"length":12,"offset":0,"style":"BOLD"}],"text":"score +=10; ","type":"blockquote","key":"9aejh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"ITALIC"},{"length":41,"offset":0,"style":"BOLD"}],"text":"scoreCounter.getSprite(). setText(score);","type":"blockquote","key":"56hl8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":0,"style":"ITALIC"},{"length":47,"offset":0,"style":"BOLD"}],"text":"9. Смерть и возвращение обратно в главное меню.","type":"header-two","key":"1d9sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Игра почти полностью функциональна, но тут отсутствует одна небольшая жизненно-важная деталь: мы должны умирать, когда ударяемся о вражеский корабль или о вражеский снаряд. Чтобы сделать это, нам прежде всего нужно знать какой объект является вражеским кораблём, а какой снарядом врага. ","type":"unstyled","key":"3nkeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":33,"style":"BOLD"},{"length":13,"offset":116,"style":"BOLD"},{"length":15,"offset":177,"style":"BOLD"},{"length":43,"offset":193,"style":"BOLD"},{"length":27,"offset":193,"style":"ITALIC"}],"text":"У вражеского корабля есть флаг - isEnemy, который мы можем проверить, таким образом мы можем добавить похожий флаг (isEnemyBullet) для снарядов врага, при их создании в функции enemyShip.fire (которая находится в функции this.spawnEnemy) :","type":"unstyled","key":"9pvua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"bullet.isEnemyBullet = true;","type":"blockquote","key":"3sh1s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"(< После строчки :","type":"unstyled","key":"321hj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"var bullet = new SceneObject(sprite, 0, startX, startY);","type":"unstyled","key":"cf02m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"(c)HD4E>)","type":"unstyled","key":"4p36j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":25,"style":"BOLD"},{"length":3,"offset":59,"style":"BOLD"},{"length":5,"offset":112,"style":"BOLD"},{"length":7,"offset":230,"style":"BOLD"},{"length":13,"offset":244,"style":"BOLD"}],"text":"Теперь мы создадим новый главный цикл(который мы назовем - die). Хорошее место для размещения, это наша функция init. В этом цикле мы видим, какие объекты перекрывают наш корабль и если любой из них имеет установленный флаг, либо isEnemy, либо isEnemyBullet, то мы создаём взрыв и удаляем корабль со сцены. Код:","type":"unstyled","key":"4k560"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"wade.setMainLoop(function()","type":"blockquote","key":"emu9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"{","type":"blockquote","key":"124or"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // получаем объекты, которые перекрывают наш корабль","type":"blockquote","key":"fn052"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":" var overlapping = ship.getOverlappingObjects();","type":"blockquote","key":"dbdai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" // запускаем цикл перебора этих объектов","type":"blockquote","key":"66b5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":0,"style":"BOLD"}],"text":" for(var i=0; i)","type":"unstyled","key":"jd0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":184,"style":"BOLD"}],"text":"Конечно это немного расстраивает, что когда мы умираем, чтобы сыграть снова, мы должны обновить страницу. Чтобы решить эту проблему, мы должны будем переместить некоторый код. Функция init в том состояние в котором она есть сейчас, делает много вещей: ","type":"unstyled","key":"5saft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Устанавливает параметры разрешения","type":"unordered-list-item","key":"6o4kq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создаёт и инициализирует объекты","type":"unordered-list-item","key":"9vk9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"И запускает нашу главную петлю.","type":"unordered-list-item","key":"fe7m0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":66,"style":"BOLD"}],"text":"Давайте переместим некоторый код в новую функцию, которую назовём startGame. Код:","type":"unstyled","key":"2844a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"this.startGame = function()","type":"blockquote","key":"8tst8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":0,"style":"BOLD"}],"text":"{","type":"blockquote","key":"8maai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":0,"style":"BOLD"}],"text":" var sprite = new Sprite('images/ship.png');","type":"blockquote","key":"fjseh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":" var mousePosition = wade.getMousePosition();","type":"blockquote","key":"10dm5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":74,"offset":0,"style":"BOLD"}],"text":" ship = new SceneObject(sprite, 0, mousePosition.x, mousePosition.y);","type":"blockquote","key":"k3k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":32,"offset":0,"style":"BOLD"}],"text":" wade.addSceneObject(ship);","type":"blockquote","key":"8gh3n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"crf3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":" wade.setMainLoop(function()","type":"blockquote","key":"b048r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":" {","type":"blockquote","key":"a28j4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":53,"offset":0,"style":"BOLD"}],"text":" var nextFireTime = lastFireTime + 1 / fireRate;","type":"blockquote","key":"erkpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":6,"style":"BOLD"}],"text":" var time = wade.getAppTime();","type":"blockquote","key":"1bdsh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1feua"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":47,"offset":7,"style":"BOLD"}],"text":" if (wade.isMouseDown() && time >= nextFireTime)","type":"blockquote","key":"79njc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":6,"style":"BOLD"}],"text":" {","type":"blockquote","key":"4jv0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":9,"style":"BOLD"}],"text":" lastFireTime = time;","type":"blockquote","key":"3ad5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":38,"offset":9,"style":"BOLD"}],"text":" var shipPosition = ship.getPosition();","type":"blockquote","key":"2qm70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":9,"style":"BOLD"}],"text":" var shipSize = ship.getSprite().getSize();","type":"blockquote","key":"ch8rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":49,"offset":9,"style":"BOLD"}],"text":" var sprite = new Sprite('images/bulletmini.png');","type":"blockquote","key":"11usr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":94,"offset":9,"style":"BOLD"}],"text":" var bullet = new SceneObject(sprite, 0, shipPosition.x, shipPosition.y - shipSize.y / 2);","type":"blockquote","key":"bg17v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":9,"style":"BOLD"}],"text":" wade.addSceneObject(bullet);","type":"blockquote","key":"94hk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":9,"style":"BOLD"}],"text":" activeBullets.push(bullet);","type":"blockquote","key":"6ib1h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":9,"style":"BOLD"}],"text":" bullet.moveTo(shipPosition.x, -500, 600);","type":"blockquote","key":"2dsvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"eefnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":9,"style":"BOLD"}],"text":" bullet.onMoveComplete = function()","type":"blockquote","key":"fq6gm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":9,"style":"BOLD"}],"text":" {","type":"blockquote","key":"f9l6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":12,"style":"BOLD"}],"text":" wade.removeSceneObject(this);","type":"blockquote","key":"erbqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":2,"offset":9,"style":"BOLD"}],"text":" };","type":"blockquote","key":"54gar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":6,"style":"BOLD"}],"text":" }","type":"blockquote","key":"337bb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":6,"style":"BOLD"}],"text":" for (var i=activeBullets.length-1; i>=0; i--)","type":"blockquote","key":"c5bdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":6,"style":"BOLD"}],"text":" {","type":"blockquote","key":"blqfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":9,"style":"BOLD"}],"text":" var colliders = activeBullets[i].getOverlappingObjects(); ","type":"blockquote","key":"c973h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":9,"style":"BOLD"}],"text":" for (var j=0; j < colliders.length; j++)","type":"blockquote","key":"1k6rf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":9,"style":"BOLD"}],"text":" {","type":"blockquote","key":"2bo74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":12,"style":"BOLD"}],"text":" if (colliders[j].isEnemy) ","type":"blockquote","key":"a8fbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":12,"style":"BOLD"}],"text":" {","type":"blockquote","key":"ercb6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":42,"offset":15,"style":"BOLD"}],"text":" var position = colliders[j].getPosition();","type":"blockquote","key":"4d5im"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":15,"style":"BOLD"}],"text":" wade.app.explosion(position);","type":"blockquote","key":"7lhre"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1mr8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":15,"style":"BOLD"}],"text":" score += 10; ","type":"blockquote","key":"3qb48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":15,"style":"BOLD"}],"text":" scoreCounter.getSprite().setText(score);","type":"blockquote","key":"781t5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"1bel1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":37,"offset":15,"style":"BOLD"}],"text":" wade.removeSceneObject(colliders[j]);","type":"blockquote","key":"6l3s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":15,"style":"BOLD"}],"text":" wade.removeSceneObject(activeBullets[i]);","type":"blockquote","key":"8ui35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":52,"offset":15,"style":"BOLD"}],"text":" wade.removeObjectFromArrayByIndex(i, activeBullets);","type":"blockquote","key":"5o0hi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":15,"style":"BOLD"}],"text":" break;","type":"blockquote","key":"373k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":12,"style":"BOLD"}],"text":" }","type":"blockquote","key":"74vae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":9,"style":"BOLD"}],"text":" }","type":"blockquote","key":"49cul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":6,"style":"BOLD"}],"text":" }","type":"blockquote","key":"983q9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":3,"style":"BOLD"}],"text":" }, 'fire');","type":"blockquote","key":"e6e8t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8eag1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":3,"style":"BOLD"}],"text":" wade.setMainLoop(function()","type":"blockquote","key":"epj13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":3,"style":"BOLD"}],"text":" {","type":"blockquote","key":"5ab41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":6,"style":"BOLD"}],"text":" var overlapping = ship.getOverlappingObjects();","type":"blockquote","key":"4foci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":6,"style":"BOLD"}],"text":" for(var i=0; i)","type":"unstyled","key":"43mls"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"var backSprite = new Sprite(\"images/back.png\",11);","type":"blockquote","key":"7i8eo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"11.Постоянный счет.","type":"header-two","key":"11dus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":808,"style":"BOLD"}],"text":"Сделав игру, у нас осталась одна последняя вещь, я бы хотел добавить к этой игре-примеру: постоянную доску рекордов. Я сказал \"постоянную\", но я не буду загружать рекорды на сервер; вместо этого, я сохраню их локально, но таким образом, что рекорды будут всё еще там в следующий раз когда пользователь перейдет на страницу игры с тем же браузерм. Конечно это в действительности не \"постоянный' способ сохранения рекордов, поскольку наши пользователи всегда могут решить удалить кэш браузера и локально сохраненные файлы браузера(иногда они это делают) и в таком случае их рекорды будут потеряны. Но это все еще очень полезная техника для использования когда вы хотите сохранить не жизненно-важную информацию без необходимости прибегать к внешнему серверу для загрузки данных. Прежде всего, в нашей функции init, мы собираемся попытаться извлечь локально сохраненный объект названный shooterData. Этого объекта не существует когда мы в первый раз запускаем игру, но затем игра будет сохранять этот объект в локальном хранилище. Итак мы видим существует ли этот объект, и соответственно, устанавливаем переменныую рекорда.","type":"unstyled","key":"bb9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Извлекаем данные","type":"blockquote","key":"9susi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":58,"offset":0,"style":"BOLD"}],"text":"var shooterData = wade.retrieveLocalObject('shooterData');","type":"blockquote","key":"7pit2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":9,"style":"BOLD"},{"length":9,"offset":59,"style":"BOLD"},{"length":61,"offset":105,"style":"BOLD"}],"text":" // Если shooterData существует, то достаем из него данные highScore, либо если объекта нету, то ставим 0\nvar highScore = (shooterData && shooterData.highScore) || 0;","type":"blockquote","key":"b9qkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"(< Добавьте код выше, в функцию init (c)HD4E>)","type":"unstyled","key":"bs47k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы хотим отобразить эту доску рекордов, возможно ниже нашей надписи \"Нажмите для старта\". ","type":"unstyled","key":"1encq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":86,"offset":0,"style":"BOLD"}],"text":"(< Добавьте следующий код после создания обьекта с нашим основным текстом. (c)HD4E>)","type":"unstyled","key":"527po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":0,"style":"BOLD"}],"text":"clickToStart.addSprite(new TextSprite('Your best score is ' + highScore, '18px Verdana', 'yellow', 'center'), {y: 30});","type":"blockquote","key":"3l568"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":137,"style":"BOLD"}],"text":"И наконец то, когда мы умираем мы проверяем эту переменную снова, и если мы получаем доску рекордов, мы сохраняем новый рекорд в объекте shooterData.","type":"unstyled","key":"b5ldl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":79,"offset":1,"style":"BOLD"}],"text":" (< Добавьте следующий код после удаления нашего корабля при смерти. (c)HD4E>) ","type":"unstyled","key":"b4clr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":119,"offset":0,"style":"BOLD"}],"text":"var shooterData = wade.retrieveLocalObject('shooterData');\nvar highScore = (shooterData && shooterData.highScore) || 0;","type":"blockquote","key":"ee0f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":25,"offset":55,"style":"BOLD"}],"text":" // Если данный рекорд больше лучшего рекорда, то ... \nif (score > highScore)\n{","type":"blockquote","key":"254lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":12,"offset":20,"style":"BOLD"},{"length":37,"offset":44,"style":"BOLD"}],"text":" // Записываем в shooterData новый рекорд\n shooterData = {highScore: score};","type":"blockquote","key":"1smlv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"},{"length":67,"offset":24,"style":"BOLD"}],"text":" // Сохраняем данные shooterData\n wade.storeLocalObject('shooterData', shooterData);\n}","type":"blockquote","key":"3qk17"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь если вы сыграете в игру, затем обновите страницу, вы увидите, что доска рекордов будет сохранена в других сессиях, что является тем, что мы и хотели.","type":"unstyled","key":"9ckdf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"12.Исправление ошибок.","type":"header-two","key":"59pf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы откроете консоль браузера в то время когда вы будете проверять игру (что является хорошей практикой), вы вероятно заметите что игра идет с ошибкой: ","type":"unstyled","key":"3s1gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"ITALIC"},{"length":67,"offset":0,"style":"BOLD"}],"text":"Uncaught TypeError: Cannot call method 'setPosition' of undefined. ","type":"unstyled","key":"4a5mm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":69,"style":"BOLD"},{"length":12,"offset":316,"style":"BOLD"}],"text":"Это случается поскольку, когда мы двигаем мышку, выполянется функция onMouseMove в нашего приложения, и в этой функции мы пытаемся установить позицию объекта корабля. Однако пока игра не стартовала, объект корабля не был еще определен - отсюда ошибка. Чтобы исправить это, мы можем изменить содержание нашей функции onMouseMove на это:","type":"unstyled","key":"2rmur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":81,"offset":0,"style":"BOLD"}],"text":"ship && ship.setPosition(eventData.screenPosition.x, eventData.screenPosition.y);","type":"blockquote","key":"fp5k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом, функция не будет пытаться установить позицию корабля, если корабль не определен.","type":"unstyled","key":"ch47g"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":6,"offset":228}],"inlineStyleRanges":[],"text":"На этом мы заканчиваем пример стрелялки с видом сверху-вниз, я надеюсь вы нашли полезным это руководство, поскольку мы рассмотрели немало различных тем здесь. Если вы хотите загрузить полный исходный код то он находится по этой ссылке.","type":"unstyled","key":"c4e3d"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":6,"offset":133}],"inlineStyleRanges":[{"length":155,"offset":0,"style":"BOLD"}],"text":"(< В данной ссылке код может быть немного устаревшим, так как туториал писался давно, вместо этого я привожу обновленный мною код по ссылке на яндекс диск.","type":"unstyled","key":"5u1ns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"(c)HD4E>)","type":"unstyled","key":"ecu53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"MvPIyYL2mKbPjjEKakLz"}],"entityMap":{"0":{"data":{"href":"https://zen.yandex.ru/media/id/5d6eb18d61d88c00adc803b2/java-script-kosmicheskaia-strelialka-tutorial-chast-1-5d6eb18d61d88c00adc803b3?integration=publishers_platform_yandex","url":"https://zen.yandex.ru/media/id/5d6eb18d61d88c00adc803b2/java-script-kosmicheskaia-strelialka-tutorial-chast-1-5d6eb18d61d88c00adc803b3?integration=publishers_platform_yandex"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://zen.yandex.ru/media/id/5d6eb18d61d88c00adc803b2/java-scriptkosmicheskaia-strelialka-tutorial-chast-2-5d73470fe4f39f00af2a6af7"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"http://clockworkchilli.com/assets/demos/shooter/images/star.png"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"url":"https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"http://clockworkchilli.com/assets/demos/shooter/shooter.js"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://yadi.sk/d/pobG1_YJxSfLQg"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}