Навучанне мая дачка кодэкса

Першая партыя падарожжа Даць Доктар Хто відэа гульні ў Java з маім 9-гадовая дачка.

[Абнаўленне: частка II , частка III і частка IV гэтай гісторыі даступныя ўжо зараз.]

Учора мая дачка Сафі папрасіла мяне паказаць ёй, як напісаць кампутарную гульню. Яна дзевяць. (Ну, толькі некалькі тыдняў ад дзесяці - у гэтым узросце, год яшчэ мае значэнне.) Яна ніколі не напісалі ні код, перш чым. Зараз, ёсць праблема, калі я калі-небудзь бачыў.

Я вучоны, і адзін з нашых праектаў з'яўляецца Greenfoot - серада праграмавання прызначана для навучання дзяцей (і больш старэйшых вучняў), каб код з Java. Пакуль што ўсё гэта было часткай маёй даследчай працы. Даследаванне праграм адукацыі, сродак праектавання і г.д. Я выкарыстаў Greenfoot з дзецьмі (у асноўным каля 15 гадоў), але часцей я раблю прэзентацыі і семінары для настаўнікаў.

Я часта пытаўся ў сябе, як нізка ва ўзросце Вы можаце ўзяць Greenfoot. Гэта Java, у рэшце рэшт, не Logo. 15-гадовых выразна працуе. Але 10-гадовых? Мы не ведаем.

Так што я сказаў, што Сафі мы пачаць рабіць гульню заўтра. Гэта было ўчора. Так што сёння быў дзень. Пасля гэтага, я думаў, што гэта можа быць цікава паспрабаваць запісваць працэс мы цяпер перажываем - паглядзім, што адбудзецца.

Дык вось мой (мы спадзяемся, на сталай аснове) Дзённік кадавання з маёй дачкой ... (Нашы вынікі, дэма і зыходны код, знаходзяцца ў самым нізе.)

За апошнія некалькі дзён, Сафі гуляў Midnight Mansion , платформы / скролерам гульня боку. Вось скрыншот . Гэта выгляд, што яна мела на ўвазе, калі яна, вечарам за вячэрай, спытаў мяне, ці можна зрабіць гульню. Таму я прапанаваў, што спачатку яна павінна ідэя ўмовы для гульні.

Зараз, Сафі вялікі прыхільнік Доктара Хто , доўгіх (і калі я кажу "працяглы", я сапраўды азначае працяглы: серыя пачалася 45 гадоў таму!) Sci-Fi серыі BBC ў Вялікабрытаніі . Калі вы не ведаеце, гэта - не хвалюйцеся. Дастаткова сказаць: герой "Доктар", які падарожнічае ў часе і прасторы і мае розныя прыгоды. Я магла вярнуцца ў падрабязнасці пазней, калі мы калі-небудзь знайсці час, каб рабіць што-небудзь здарылася ў гэтай гульні.
Так, Сафі вырашыла, што яна хоча зрабіць Доктар Хто гульні. Цяпер, вось вельмі важны момант. Калі вы заўсёды жадаеце навучыць вашага ўласнага дзіцяці (або дзяцей) у кодзе, гэта сапраўды важна: знайсці што-то яны сапраўды хочуць рабіць. Хай яны самі вырашаюць, гісторыю, выбраць што-то ім падабаецца. Яны прымаюць да ўласнасці, і ролі мноства. Гэта вам не казаў ім нешта зрабіць, гэта іх хто хоча нешта зрабіць, і вы проста дапамагаючы ім разам. Калі вам атрымаецца атрымаць іх у сітуацыі, калі ў іх ёсць ідэя, і яны сапраўды хочуць гэта зрабіць, вы палову шляху.

Сёння раніцай, калі я падняўся і сеў на сняданак (я заўсёды апошнія ўстаць на выходныя ў нашым доме, так што ўсё астатняе было ўжо скончана), Сафі была там давала мне спакою, каб пачаць. Такім чынам, пасля сняданку, гэта тое, што мы і зрабілі.

Мы ўзялі трохі больш, чым гадзіну. (Я не думаў аб напісанні гэтай ўніз загадзя, так што я сапраўды не праверыць час. Можна было б крыху больш, але менш, чым 90 хвілін.)

Па-першае, мы пачалі да Greenfoot . Так як у мяне было ўжо ўстаноўлена, што было лёгка. Мы пачалі з стварэння новага сцэнарыя пад назвай "DrWho". Гэта быў наш першы экран:

Тады я сказала Сафі, што яна павінна вырашыць, дзе гэтая гульня мае месца. Яна сказала: "на Марсе", так што мы зрабілі падклас убудаваны ў "Мір" класа, называецца "Марс", і націсніце Compile. Вось што мы ўбачылі:

Сафі адзначыў, што свет не выглядае добра, таму што гэта ўсё белае, і занадта мала. Я распавёў ёй, як паглядзець на зыходны код Марс, і вось што мы ўбачылі:

Мы крыху пагаварылі аб тым, што свет ўяўляе сабой сетку вочак (з трохі пісаніны на паперы), і што мы можам паказаць колькасць і памер клеткі. Мы скончылі змены параметраў, якія вызначаюць свету:

супер (750, 450, 1);

Гэта зрабіла свет прыгожы і вялікі, але ўсё ж белы. Так што ў наступны, ён вярнуўся ў кантэкстнае меню класа Марс, выбраць Устанавіць ... Выява функцыі.

Пры выбары гэтай функцыі ў Greenfoot, дыялог ўсплывае паказваць вам бібліятэкі падрыхтаваных малюнкаў.

Сафі хутка знайшла катэгорыі "працоўнага стала", і пайшоў праз іх. Яна вырашыла на фонавае выява з імем "space1.png". Пасля выбару гэтага малюнка і кампіляцыі зноў жа, гэта тое, што наш сцэнар зараз падобны (той факт, што ён называецца "Марс", але на самой справе паказвае прастору, як уяўляецца, не мае значэння):

Добра, мы былі шчаслівыя з ашалелы фонавым рэжыме, таму рэальныя дзеянні могуць пачацца: Стварэнне доктар.

Спачатку мы гугле для вобраз доктара (Ёсць шмат !) Мы выбралі гэта:

Так як гэта для асабістага выкарыстання, без якіх-небудзь камерцыйных намеры, ці нават намер размеркавання, я вырашыў, што гэта падпадае пад "добрасумленнага выкарыстання" палажэнняў, і мы скапіявалі малюнка.

Затым з'явіліся сесіі ў Photoshop. Сафі выкарыстаў Photoshop раней (толькі з вельмі мала інструментаў рэдагавання, але па меншай меры гэта было не ўсё новае). Я Павялічыць малюнак трохі, і паказаў ёй, як выкарыстоўваць "Polygonal Lasso Tool", каб выразаць фон. Яна сядзела гэтым вельмі цярпліва, з выглядам канцэнтрацыі на яе твары, і атрымаў яго ў асноўным робіцца. Раз ці два я павінен быў дапамагчы ёй, калі яна зрабіла што-то выпадкова і не ведаў, што яна зрабіла. Вы сапраўды можаце заблудзіцца ў Photoshop, калі вы не ведаеце, гэта добра, так што просты графічны рэдактар ​​будзе добра. Але яна атрымала гэта зрабіць без асаблівых праблем.

Калі яна была гатовая, я паказаў ёй, як маштаб выявы ўніз, і гэта тое, што яна апынулася з:

Добра, гатовыя вярнуцца да Greenfoot. Я сказала Сафі, што яна можа стварыць доктар шляхам стварэння падкласа класа акцёр, якога яна тады без праблем. Зараз, у Greenfoot, калі вы ствараеце клас, вы можаце прызначыць яго малюнак. Мы назвалі клас доктара, абраў наш доктар малюнка, і мы гатовыя да працы. Пасля кампіляцыі, то можна адразу стварыць аб'ект доктар - вось тое, што яна зараз выглядае вось так:

Вось гэта так! Першы вялікі поспех. Доктар на нашым прасторны задні план. Сафі была занепакоеная тым, што ўрач не мае ног, і што гэта можа выглядаць смешна у ён бегае, але мы вырашылі ігнараваць гэта цяпер, і, магчыма, вярнуцца да яго пазней. Затым мы паспрабавалі націснуўшы на спасылку "Закон" і "Выканаць", і Сафі адзначыў, што нічога не адбылося.

Час, каб пачаць пісаць код!

Зараз, я вырашыў даць Сафі даволі просты API, каб пачаць з. Так што мне прыйшлося яе ўзяць невялікі перапынак, і я хутка напісаў клас пад назвай "Mover" са наступнымі зыходны код (гэта сапраўды тое, што вы маглі б падрыхтаваць загадзя, калі вы лепш арганізаваны чалавек, чым я ...):

 імпарт Greenfoot .*; / / (свет, акцёр, GreenfootImage, і Greenfoot) / ** * акцёр суперкласса, які забяспечвае рух у чатырох кірунках. * / Сувязі з грамадскасцю Mover клас пашырае Акцёр {прыватных статычных канчатковага Int хуткасць = 4; грамадскіх MoveRight несапраўднымі () {setLocation (getX () + Хуткасць, Гётэ ());} грамадскага MoveLeft несапраўднымі () {setLocation (getX () - хуткасць, Гётэ ());} грамадскага MoveUp несапраўднымі () {setLocation (getX (), Гётэ () - хуткасць);} грамадскага MoveDown несапраўднымі () {setLocation (getX (), Гётэ () + хуткасць);}} 

Намер, як вы можаце бачыць, з мэтай стварэння чатырох метадаў: MoveRight, MoveLeft, MoveUp і MoveDown, якія забяспечваюць трохі прасцей абстракцыі, чым стандартныя Greenfoot API, з дапамогай убудаванай у setLocation і getX / Гети метадамі. Я зрабіў доктар класа Сафі падклас гэтага, і сказаў ёй, што я зрабіў ёй доктар "Mover", што азначае, што мы маглі б зараз сказаць яму, каб рухацца. Гатовыя да Сафі, каб узяць на сябе клавіятуру і працягнуць занятак.

Націск закона або Выканаць ўсё яшчэ нічога не робіць, таму мы адкрываем рэдактар ​​для класа доктар, і ўбачыць гэты метад:

    public void act()
    {
        // Дадаць свой код дзеянні тут.

    }

Зараз, мы мяняем гэта:

    public void act()
    {
        moveRight();
    }

Каб зрабіць гэта, я кажу Сафі імя метаду, а таксама, што інструкцыі заўсёды ёсць дужкі і кропка з коскай у канцы. Сафі збірае, стварае яшчэ адзін аб'ект Доктар, хіты "Выканаць" і ура! Лекар рухаецца!

Мы таксама імкнемся MoveLeft замест MoveRight. Яна хутка становіцца ідэя, што мы можам зрабіць яго рабіць. Затым яна кажа: "Але я толькі хачу, каб ён перамяшчаецца пры націсканні гэтай клавішы. Нам трэба, каб напісаць нешта накшталт: "Калі націснутая клавіша: рух" Wow. Я не мог бы сцэнар гэтага лепш. Яна не толькі заахвочвае мяне да наступнага кроку, яна нават амаль выкарыстоўвае Java тэрміналогіі!

Так што ў наступны, я распавёў ёй пра, калі-заяву, а таксама аб ключавых праверкі Greenfoot's. Мы пішам наступны код у дзеянне метаду:

    public void act()
    {
        if (Greenfoot.isKeyDown("left") )
        {
            moveLeft();
        }
    }

Now, she couldn’t have written this on her own yet, since she doesn’t know what the built-in API methods are, or how to look them up, or what the syntax is. But she quite easily understand the idea and the concept.

The good Doctor, of course, moves only one way now. I just mention that she could make him go the other way with another if-statement. She then actually manages to do this using copy, paste and edit:

    public void act()
    {
        if (Greenfoot.isKeyDown("left") )
        {
            moveLeft();
        }
        if (Greenfoot.isKeyDown("right") )
        {
            moveRight();
        }
    }

Гэта сапраўды атрымлівае яе узбуджаных. Яна таксама кіруе паўтарыць гэта зноў уверх і ўніз. На дадзены момант, яна атрымлівае сваю першую памылку сінтаксісу ("; чакаецца"). Паказаўшы на паведамленне аб памылцы да яе, яна на самай справе кіруе, каб выправіць гэта. Добра, што мы атрымалі адзін з менш загадкавыя паведамленні, каб пачаць з! Паведамленні аб памылках у Java, безумоўна, будзе адной з вялікіх праблем мы сутыкнуліся з даволі хутка.

Наступная рэч, якую мы назіраем у тым, што доктар рухаецца назад, калі ён рухаецца правільна. Я прапаную зрабіць яго сальта вакол. Сафі згаджаецца.

Такім чынам, вернемся да Photoshop гэта. Адлюстраванне малюнка па гарызанталі да асобе права лёгка, і яна захоўвае яго як "доктар-right.png". Я прашу Сафі, дзе ў наш код, мы павінны пакласці інструкцыі выкарыстоўваць НАПРАВА малюнка, і яна працуе, што правільна. Затым я сказаў ёй, што імя метаду і ўгаварыць яе праз увод выкліку метаду і параметраў. Мы атрымліваем наступнае:

    public void act()
    {
        if (Greenfoot.isKeyDown("left") )
        {
            moveLeft();
        }
        if (Greenfoot.isKeyDown("right") )
        {
            setImage("dr-right.png");
            moveRight();
        }
        if (Greenfoot.isKeyDown("up") )
        {
            moveUp();
        }
        if (Greenfoot.isKeyDown("down") )
        {
            moveDown();
        }
    }

Гэта вельмі добра. Але калі мы спрабуем яго, яна бачыць вельмі хутка, што доктар зараз паварочвае направа, але не вярнуцца яшчэ раз налева. На гэты раз, яна можа на самой справе гэта выправіць сябе, капіраванне setImage лініі, уставіць яго ў патрэбнае месца, і фіксацыі выявы імя. Я шчаслівая!

Вось і ўсё. Мы вырашылі назваць яго ў дзень на сённяшні дзень. Канцэртная версія таго, што мы напісалі ў Інтэрнэце тут - паглядзім .

Праект Greenfoot мы пісалі (з поўным зыходным кодам) тут . Вы можаце ўзяць яго, і выкарыстоўваць яго для усё што заўгодна.

Так, у рэзюмэ: нам удалося атрымаць аніміраваныя графіку на экране даволі лёгка. Мы патрацілі палову часу стварэння малюнкаў, а пасля некаторы час напісання некаторага кода. Мы выкарыстоўвалі "скок-у-глыбокай канца" падыход: Большая частка кода мы пісалі мне кажа Сафі, што напісаць, але яна даволі хутка ўзяў некаторыя з канцэпцый, і яна была ў стане абагульняць і прымяняць некаторыя рэчы, якія яна назіраецца.

Гэта, як я планую працягнуць працу з ёй: ад канкрэтнага да абстрактнага. Па-першае, мы робім рэчы (нават калі б мне давялося расказаць ёй, як), і праз некаторы час мы можам спадзявацца, абмеркаваць асноўныя прынцыпы і больш фармальных правілаў.

Але спачатку: давайце паспрабуем, каб павесяліцца і зрабіць што-то!

Я спадзяюся, што ў мяне ёсць час, каб працягнуць гэты даклад на працягу наступных некалькіх тыдняў ці месяцаў, калі мы спадзяемся зрабіць гэтую гульню зрабіць трохі больш.

Вось рэзюмэ на сёння: