HTML前端的前端。 Pomocíwebovýchtechnologiísedádnesvytvořitprakticky cokolivdigitálního。
V SUPERKODERS sezabývámevším，kdemůžemeuplatnitnašeznalostiwebovýchtechnologiíkdenámtodávásmysl。 玩游戏的人喜欢玩游戏的人。
Gamee je platforma prohraní她的prostřednictvímsociálníchsítí，信使ajejich aplikace。 Hlavnívýhodouje，ževšechnyhry jsouInstantní。 Métetedypřístupkestovkám为她的bez nutnosti鞋架安装了zahlcovánípamětizařízení，以及其他人。
Hrátsi vpráci？ Můžebýtněcolepšího？
Véjhodapro FEvývojářeje，zése hravyvíjív HTML5 technologii asamozřejměv JavaScriptu。 后续发布API时，请使用Gamer neklade dovývojepraktickyžádnépřekážky。 API je zdevlastněněcojakorozhraní，kterénormalizujechování和zobrazeníhryvmobilníchzařízeních，也可能是社交网站。
Říkátesi，要与budejednoduché对话？ Ano，samotnývývojje jen taktěžký，jak si ho samiuděláte。 Na konci pakpřijdejednovelképrozření，ale nebudupředbíhat，všakpěkněčtětedál…
Základníkoncept
Nápadna samotnou hrunámdodalopřímoGamee。 Zkušenostimajíbohaté，一瓶达沃杜尼语předáníkonceptuproběhlorychle。 Dobrébylo，zénámdodali和demo hry，以及jsme lehce pochopili celou logiku。
Nad konceptem jsme si sedli avšerozpadli na支离破碎，专业知识的人士potpoteeba vymysletřešení：
- 汽车之王
- Cesty，泰迪·我·斯塔瓦奇·米斯塔，můžoubýtidvě
- Cestamájednu，nebodvěvyhýbky，tzn。 větvíse
- Od toho odvozujeme，最大马克·波尼特变种（barev aut a dep）je est
- Nezávislostnarozlišení
- Levelizace —金·赫拉克·普洛基（alepředemdané，žádnégenerování），维斯·奥特，zrychleníceléhry
- Zvukyinterakčnía napozadí
- Detekcesplněnícíle— jestli auto dojelo dle barvy dosprávnéhohrníčku（depa）
- Personalizovaný涵盖水平。 Celáhra bylapřipravenáproRohlík.cz
- 状态栏
Tučněvyznačené身体dálerozvíjímv textu。 By ty tynejdůležitějšípointy hry，亲爱的作者proověřenínašichmyšlenek。 由podzrném和rychlémotestováníjsme的Gamee komunikovalifinálnípodklady设计。
技术的发展
SVG专家，技术专家，技术专家。 Možnásiříkáte，pročSVG，kdyžna hry jevhodnější画布。 Canvas je mnohemvícebestizovanýpro rychlost的一个anopravděpodobně布宜诺斯艾利斯人。 Jehardwarověvyladěnýahlavněnenítřebapracovat snejpomalejšíbestiívprohlížeči— DOMem。 通过SVG原型协议进行测试，并在最终设计中使用jsme komunikovali参数。
K SVGnástáhlyněkteréskutečnosti，pro sipojďmeukázatkonkrétnířešení，nakterýchvševysvětlím。
罗兹列尼
Gameeběžíprakticky kdekoliv akvůlitomu anirámcověnevíme，sjakýmivariantamirozlišenípočítat。 A to je vskutkuděsivé。 SVG tentoproblémvyřešízanás，bezjakýchkolivdalšíchprací。
stanom jenom upravitzápis
...
呐
…
SVG自动更新程序（viewBox）tak，by vyplnilrozměry（视口—šířkaxvýška），alezaroveň，bybylovševidět。 Obdobnějako CSS pravidlo background-size：包含；。 V Canvasu由Bylo dostprogramovánínavíc，tadyvyřešenojednímtahem创作。
DOM
Uz jsem tozmínilvýše。 SVG否定问题，请立即解决。 Tady jsme se inspirovaliřešením，kteréběžnědělajíknihovnypracující的Canvasem。 JednovelkéSVG插件jsmerozdělilinaněkolikmenšíchčástípodleurčitéhoklíče。 静态元素，静态和静态。
… … …
要对SVG bylo vsamostatnékompozitnívrstvě进行比较，
sty
Cesty jsouzákladnístavebníkámenceléhry。 Pocestějede auto会自动添加一个jejíhozakřivení。 Cestymajívětve是个vyhýbky，kterélzepřepínat。 Cestamájedenzačátekaaž3 konce。 Pocestěmůžoujet pouze auta，kterámajínadanécestědepo。
K tomu，aby autokopírovalocestu，námopětpomohlo SVG。 对umožňujevyčístbod nacestě。 Díkytomu budou levelizace azměnymnohemjednodušší，protoževšečtemepřímozezdrojů。
const getArrayBySize =（长度）=> {
return Array.from（Array（length），（d，i）=> i）;
}; const getPathPoint =（element，index）=> {
const {x，y} = element.getPointAtLength（index）;
返回{
x：+（x.toFixed（2）），
y：+（y.toFixed（2）），
};
}; const getPathPoints =（path）=> {
const length = Math.round（path.getTotalLength（））;
返回getArrayBySize（length）
.map（getPathPoint.bind（null，path））;
};
ZavolánímgetPathPoints（element_krivky）dostaneme polejednotlivýchbodů，pokterýchmůžeauto jet。 Jsou to pronáspozice，kam budeme auto pozicovat。
[{x：100，y：423}，{x：100，y：422}，{x：100，y：421}，…]
Zmíniljsem，ze autotakézatáčí。 K tomujižnepotřebujetezjišťovatdalšíúdaj。 身体要变浓，身体要变态。
const rotation = Math.round（
Math.atan2（curr.y-prev.y，curr.x-prev.x）* 180 / Math.PI，
）;
Abyvytvářenícest bylo conejvíceautomatizované，vse jsme hydratovali do jednoho configu。
道路：[{
路径：“ M107.5,999.6V631c0–26.5,21.5–48,48–48h8.3h132.1”，
细分：[{
路径：'M296,583 C322.5,583 344,561.5 344,535 ...'，
细分：[{
路径：“ M344,426 C344,399.5 322.5,378 296,378 ...”，
颜色：“蓝色”，
}，{
路径：“ M344,426 C344,399.5 365.5,378 392,378 ...”，
红色'，
}]，
}，{
路径：'M296,583 L295.8,583 C322.3,583 344,604.5 ...'，
细分：[{
路径：'M344,730v169.8l -0.2,6.3v50.7c0,26.5,21 ...'，
颜色：“绿色”，
}，{
路径：“ M344,730 C344,756.5 365.5,778 392,778 ...”，
颜色：“黄色”，
}]，
}]，
}];
Toto polenámřeknevše：
- 科里克·杰斯特
- 杰克·塞斯提·维捷
- Ukaždévětvevygenerujemepřepínačtam，kde na sebejednotlivésegmentynavazují。 Jejich pozice jejednodušeposledníobjekt pole z getPathPoints（）
- Kolik je dep ajakémajíbarvy
- Barvy pakpoužijemepro randomGenerováníaut nadanécestě
平整
我张贴了自动翻译，自动翻译，自动翻译和自动翻译。
const chainLevels =（prevLevel）=> {
回报水平
.reduce（（acc，levelConfig）=> {
return acc.then（（prevLevel）=> {
const level = getLevel（{…levelConfig}）;
level.on（'complete'，（）=> resolve（level））;
level.on（'fail'，（）=> reject（level））;
}）;
}，Promise.resolve（prevLevel））
.then（chainLevels）;
}; Promise.resolve（）
.then（chainLevels）
.catch（（level）=> {
console.error（'GAME OVER'，level）;
}）;
Nekonečnýcykluspromisů，kterýpřerušípouze chyba vehře。 Chybuošetřujekáždá实例levelu sama，protožejedinětaví，jakýje config。
祖维克
Androide的Gameepotřebujedobrouzpětnoukompatibilitu和jelikožpodporuje。 Proto jsme se rozhodlipoužíttrochuvětší，aleperfektněfungujícíknihovnu howler.js。
Zvuky jsme napojili doglobálníhoemmiteru，kterémuběhemhrydávámerůznésignály。 非常有趣，绝对不要错过。
on（'buttonClick'，（）=> {
tap.player.play（）;
}）; on（'carStart'，（）=> {
car.player.play（）
}）;
Přesněvpoločase
Fázivývojemámeúspěšněu konce。 Otestovali jsmefunkčnostnašehořešení，napsali celou hru vyladilikód。 可以通过Gamee API进行测试。 Podrobnosti odruhéfázisi alenechámeaždodalšíhočlánku。
