Главная RSS Онлайн игры WarCraft Приколы Карта сайта О блоге Поиск Добавить пост Ваши посты
500 рублей помощь регистрации домена и на хосте и перенос сайта туда связь


Детские онлайн игры бесплатно без регистрации


0

Добавил: AlexMaster

Дата: 27.10.2015


В этой статье я расскажу как с помощью flash и action script создать “игру мозаику”. Цель игры мозаики собрать картинку. Пример можно видеть во flash ролики выше.
Или перейти по ссылке играть в игры без регистрации
Весь процесс создание подобной игры очень простой . Для начало нужно выбрать ту картинку, которую будет использована в игре я выбрал машину.
детские_онлайн_игры_бесплатно_без_регистрации

Вы можете выбрать другую картинку для игры мозаики или использовать мою. Чтобы скопировать себе мой рисунок, щелкните правой кнопкой мыши по картинке и выберите сохранить изображение. В любом случае для работы нам понадобится изображение 400 на 250 пикселей. Теперь приступим к созданию мозаики игры.


Разбивка изображения на элементы “Детские онлайн игры бесплатно без регистрации”.


Откройте свою программу flash и создайте новый файл, выбрав action script 2.0. Ширину нового файла поставьте 500 пикселей, а высоту 400 пикселей. Скопируйте туда свою картинку, просто перетащив её на холст документа flash. Она будет скопирована как растровое изображение, чтобы её разрезать нужно, преобразовать картинку в Shape, щелкнув по ней и нажав кнопки Ctrl-B. Выделите контур картинки, перейдя в инструменты и выбрав Ink bottle tool (Чернильница). Она находится там же где Paint Blucket Tool (Ведро с краской). Смотрим рисунок.


игра_мозайка

Перед тем как использовать Ink bottle tool, убедитесь, что цвет контура будет черным, посмотреть можно вот здесь, внимание на рисунок.


игры_для_детей


Если ваша картинка выделена, то нужно снять выделение, щелкнув мышкой по любому свободному пространству рабочей области flash и уже потом использовать Ink bottle tool (Чернильница) на картинке.


онлайн_игры_для_детей


Разрежьте картинку линиями на двенадцать кусков, используйте инструмент линия, который показан на рисунке.





Если линии выходят за пределы картинки, удалите их, для этого выберите конец линии и нажмите delete. Все картинка готова, чтобы убедиться, что мозаика работает, выберите кусок картинки и передвиньте, только не забудьте его потом обратно вернуть. Для возврата существует комбинация клавиш Ctrl-Z.



Все кусочки картинки нужно преобразовать в MovieClip и назвать их as0_mc, as1_mc и т.д. у вас должно получиться двенадцать мувиклипов, значит 11 номеров к мувиклипам (как в массиве номер начинается с нуля). Создадим кнопку, которая будет запускать игру и назовем её “старт”.


Для этого ниже нашей главной картинке нарисуйте прямоугольник. Заливка прямоугольника должна быть белой, а граница черной, потом создайте текстовое поле и разместите внутри прямоугольника. Все это можно найти в инструментах. В текстовом поле напишите “Cтарт”.


В свойствах текстового поля установите цвет шрифта черный, если конечно он не установлен ранее. Теперь выделите прямоугольник с текстовым полем и преобразуйте их в кнопку и назовите кнопку start_btn. Пример на рисунке.



Помимо кнопки нужно создать еще одно текстовое поле в котором будет выводиться сообщение, по завершению игры, например надпись “Вы собрали мозаику!”. В свойствах, текстовое поле нужно назвать text_txt.


Теперь приступим к написанию кода.

Написание кода для детской онлайн игры бесплатно без регистрации

.
В первую очередь напишем код нажатия кнопки. Щелкните по кнопки и напишите.

on(press)
{
text_txt.text = "";
start_btn._visible = false;
_root.makePuzzle();
}


On(press) – отвечает за нажатие кнопки, внутри которой эта функция прописана. Дальше следует очищение text_txt, на случай если там что-то написано. Потом нужно скрыть кнопку и запустить функцию makePuzzle. Об этой функции я напишу далее.



Приступим к написанию основного кода. Во временной шкале создадим еще один кадр для кода. Всегда желательно код и графику держать в разных кадрах, назовем кадр as.



В начале кадра as нужно написать переменные, которые будут использоваться в дальнейшем в коде.

pieces = new Array();
var maxDepth: Number = 100;
var draggable: Boolean = false;


Переменная pieces, в этом массиве будут храниться все кусочки нашей картинки, и после того как картинка будет размещена на свое место, то массив будет очищаться от этого куска картинки с помощью функции splice, но об этом позже.


maxDepth – содержит максимальную глубину по умолчанию равную 100. Глубина это что-то вроде слоя позволяет картинке находиться поверх других картинок. В нашем случая глубина картинки будет меняться при щелчке по ней.

Draggable – если кусок картинки переместили на то место, на которое нужно, то переменная draggable принимает значение false и эту картинку больше нельзя двигать.


Функция makePuzzle()

.

function makePuzzle()
{

var i = 0;

while (i < 12)
{
def_mc = eval("as"+i+"_mc");

def_mc.xtr = def_mc._x;
def_mc.ytr = def_mc._y;

def_mc._x = Math.random()*Stage.width;
def_mc._y = 400;

def_mc.xm = def_mc._x;
def_mc.ym = def_mc._y;
def_mc.swapDepths(99);
pieces.push(def_mc);
maxDepth = Math.max(maxDepth, def_mc.getDepth());
def_mc.onPress = pressFunction;
def_mc.onRelease = releaseFunction;

++i;
}
for(var __reg2 in pieces)
{
__reg1 = pieces[__reg2];
__reg1.draggable = true;
}
}


Функция MakePuzzle отвечает за разброс пазлов снизу, для этого используется математическая функция Math.Random.
Чтобы получить доступ к мувиклипам, нужно воспользоваться evil.
Начальные координаты наших мувиклипов хранятся в переменных xtr, ytr.



def_mc.xtr = def_mc._x;
def_mc.ytr = def_mc._y;

После разброса пазлов функцией random, новые координаты записываются в xm, ym,

def_mc.xm = def_mc._x;
def_mc.ym = def_mc._y;


swapDepths – это глубина картинок. Ранее мы создавали переменную массив pieces, теперь все наши пазлы нужно записать в этот массив, для этого существует функция push.


Чтобы захватить пазл мышкой, нужно использовать функцию onPress. Функция onRelease срабатывает при отпускании кнопки мыши. Позже я расскажу о функция pressFunction и releaseFunction.


Дальше нужно извлечь все элементы из массива и записать их в переменную. Каждая переменная __reg1 это пазл, у пазла можно вызвать значение draggable и присвоить этому значению true.


Функция pressFunction "детские онлайн игры бесплатно без регистрации".



function pressFunction(){
if (this.draggable)
{
this.swapDepths(maxDepth = ++maxDepth);
if(this.hitTest(_xmouse,_ymouse,true)){
this.startDrag();
delete this.onEnterFrame;
}
}

}


Первое что делает эта функция проверяет значение draggable, если оно равно true то картинку можно захватить. Дальше this.swapDepths устанавливается глубина пазла и выбранный пазл оказывается поверх остальных пазлов. С помощью hitTest проверяется захват картинки если картинка захвачена, то срабатывает функция startDrag(), delete this.onEnterFrame удаляет функцию повтора о которой я расскажу ниже.

Доступ к пазлу осуществляется через this, что означает выбранный пазл.

Функция releaseFunction()



function releaseFunction(){
this.onEnterFrame = onEF;
dx = this._x - this.xtr;
dy = this._y - this.ytr;
gip = Math.sqrt(dx*dx+dy*dy);
if (this.draggable)
{
this.stopDrag();
if(gip &lt 20){
pieces.splice(parseInt(this), 1);
this.xm = this.xtr;
this.ym = this.ytr;
delete this.onPress;
this.draggable = false;
}

}
if(pieces.length &lt 1)
{
start_btn._visible = true;

text_txt.text = " Вы собрали мозаику!";
}


Здесь запускается EnterFrame повтор функции onEf. Дальше идет расчет, конечные координаты пазла вычитаются от начальных, т.е. где они раньше находились по x и у. Пример.



dx = this._x - this.xtr;
dy = this._y - this.ytr;


Потом по теореме Пифагора рассчитывается переменная gip. Как и в предыдущей функции идет проверка draggable, если она true то идет остановка перемещения пазла stopDrag. Следующая проверка условия, это переменная gip должна быть меньше 20 пикселей если это так, то из массива pieces удаляется один элемент с помощью функции splice, а пазл автоматически подставляется в нужные координаты.



this.xm = this.xtr;
this.ym = this.ytr;


и удаляем функцию onPress. Переменная this.draggable = false, это означает, что размещенный пазл больше нельзя двигать. В последнем условии идет сравнение количество элементов массива и если их меньше единицы, то срабатывают следующие действия, появляется кнопка
start_btn._visible = true; и выводится сообщение “Вы собрали мозаику!”.


Функция onEF



function onEF(){
this._x += (this.xm-this._x)/5;
this._y += (this.ym-this._y)/5;
}


Это функция перемещения пазла срабатывает, когда пазл переносят на клетку и если эта та клетка то пазл размещается - если нет, то пазл возвращается на исходное состояние.
Посмотрите пример пазла.


Вот еще пазлы.
ссылка
На этом все скачайте исходники, если что не понятно.

Назад

Просмотров: 570 Скачано: 1

Комментарий к этой заметки:

Добавить ваш камментарий:

Введите капчу

 

Яндекс.Метрика