Как создавать простые тетрис-подобные аркады на Флексе за несколько кликов мышкой.
To view this page ensure that Adobe Flash Player version 11.1.0 or greater is installed.
Свой день рожденья люди проводят по разному. Многие напиваются, блюют на себя и прохожих - и ловят в этом надолго незабываемый кайф. А мне делать что-нибудь созидательное в свой день рожденья просто не хотелось - приняв на грудь совсем немного - я развлекался за кампутером - и просто делал игрушку за игрушкой.
Ниже я покажу как за 50 кликов мышкой создавать простые тетрис-подобные игры (морской бой, солитер и тд) на базе DataGroup и ItemRenderer.
Итак, первые 15 кликов уходят на то, чтобы создать проект, перетащить на сцену DataGroup, установить цвет фона и размер игры. Буковок на этом этапе вводить не требуется - везде есть подсказки - нужно просто тыкать мышкой в нужные места на экране.
Смысл этих тыканий мышкой в том, чтобы создать DataGroup и заполнить у него dataProvider и itemRenderer.
Как видите, все удалось - есть и репитер и внутренний повторяемый контрольчик. Особо заморачиватся с внутренней частью не будем (хотя можно было бы заморочится - создать SkinnableDataContainer, DefaultComplexItemRenderer и много чего еще) - а я просто создам одно свойство - в котором буду запоминать индекс элемента. Этого тоже по идее можно не делать, но так мне привычнее.
Ну и когда мышка проходит над контейнером One, он "открывается" - то есть вместо фона устанавливается цвет - который хранится в объекте data (в виде случайного числа). Обьект data - это один элемент List1:ArrayCollection - которому соответствует один созданный нами ItemRenderer с именем One. Ну а весь List1:ArrayCollection, как вы видели выше, мы скормили DataGroup в свойство dataProvider.
Итак, с кодом повторяемого элемента заморачиватся не будем:
1: <?xml version="1.0" encoding="utf-8"?>
2: <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
3: xmlns:s="library://ns.adobe.com/flex/spark"
4: xmlns:mx="library://ns.adobe.com/flex/mx"
5: autoDrawBackground="true" width="50" height="50"
6: mouseOver="itemrenderer1_mouseOverHandler(event)" creationComplete="itemrenderer1_creationCompleteHandler(event)">
7:
8:
9: <fx:Script>
10: <![CDATA[
11:
12: public var Index:int;
13:
14: import mx.events.FlexEvent;
15: protected function itemrenderer1_mouseOverHandler(event:MouseEvent):void
16: {
17: BC1.setStyle("backgroundColor",data[1].rnd * uint.MAX_VALUE);
18: }
19:
20: protected function itemrenderer1_creationCompleteHandler(event:FlexEvent):void
21: {
22: Index = data[0].i;
23: }
24:
25: ]]>
26: </fx:Script>
27:
28: <s:BorderContainer id="BC1" backgroundColor="#FDF5E6" width="100%" height="100%" buttonMode="true"
29: useHandCursor="true" borderVisible="false" />
30:
31: </s:ItemRenderer>
Теперь осталось сформировать цвета. Это можно сделать чуть сложнее - например сформировать координаты фигур как я описал в топике - Модуль векторной графики для построения графов - но я для этой простейшей игрушки даже не буду заморачиватся с формированием фигурок (таких как для тетриса, солитера или морского боя) - я просто случайно раскидаю цвет по фигуркам.
Ну и теперь осталось как нибудь обработать клик - например удалить элемент на котором кликаем.
1: <?xml version="1.0" encoding="utf-8"?>
2: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3: xmlns:s="library://ns.adobe.com/flex/spark"
4: xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="800" minHeight="600" height="600" width="800"
5: backgroundColor="#FDF5E6" creationComplete="datagroup1_creationCompleteHandler(event)">
6:
7: <fx:Script>
8: <![CDATA[
9: import mx.events.FlexEvent;
10:
11: import spark.components.BorderContainer;
12: protected function datagroup1_creationCompleteHandler(event:FlexEvent):void
13: {
14: for(var i:int;i<=192;i++){
15: List1.addItem([{"i":i},{"rnd":Math.random()}])
16: }
17: }
18: protected function DG1_clickHandler(event:MouseEvent):void
19: {
20: var BC1:BorderContainer = event.target.hostComponent as spark.components.BorderContainer;
21: var One1:One = BC1.parent as One;
22: List1.removeItemAt(One1.Index);
23: for(var i:int;i<List1.length;i++){
24: var One2:One = DG1.getElementAt(i) as One;
25: One2.Index=i;
26: }
27: List1.addItem([{"i":List1.length},{"rnd":Math.random()}])
28: }
29:
30: ]]>
31: </fx:Script>
32: <fx:Declarations>
33: <s:ArrayCollection id="List1" />
34: </fx:Declarations>
35: <s:DataGroup id="DG1" width="100%" height="100%" x="0" y="0" dataProvider="{List1}" itemRenderer="One" click="DG1_clickHandler(event)">
36: <s:layout>
37: <s:TileLayout horizontalGap="0" verticalGap="0" />
38: </s:layout>
39: </s:DataGroup>
40:
41: </s:Application>
Ну 50 кликов мышкой на эту игру я уже израсходовал - и дальше мне эту игру уже продолжать лень. Для продолжения нужно сформулировать цель игры - например как у тетриса - если соседние элементы (или вся верхняя строка) в похожем цвете - то схлопывать их. Ну или например убрать все зеленые квадратики и получить приз.
Почитать еще о флексе вы можете на моем сайте - //www.vb-net.com/flex.
)
|
|