HTML5_CanvasM莏M莏BOOKMOBI???t')/X6?>?HO?V?]? e? lR se y? ?嚽廱柂瀡?必概亏??载??钘锾鰺 ! 1"A#[$R%%&+N'1?(8?)>e*EH+K,Q?-WM.\?/ct0i?1p|2w?3 4?5尪6抩7?8焂9?:;编<竩=緽>艫?蘽@沂A贃B尥C鍂D?E騬FGqHI ?JhKYL!bM'?N.?O6[P;3Q@ RE?SJ?TR?UYV`?Wg?Xn?Yu?Z}?[凲\媺]?^殯_∫`﹍a?b概c慷d?e蚒f?g?h鄍i?j?k髳l?m?n?o?p?q?r$Us+?t2?u9?v@?wHMxO?yW{z^?{e?|l?}s?~z?乭€垼?廅?柦?澸????盫???絢?聎?牲???蛰?垅?馐?晟???????? }?0?? ??(}?/??6??>=?EQ?M ?T)?\x?cW?j??q??y????圅???暍?滛??珎?睭?筟???驱?螦?????銲???褓??(??? ??????!??)4?/??6L?u??z?@€?A?B庽C杸D瀐EミF?G菠H?I纻J?K蜖L永M跐N帼O缤P?Q?R鵓S礼T "U V ?W 3X ?Y LZ ${[ ,?\ 5] 9?^ @D_ G ` N?a V?b ][c dbd k?e s(f y?g €?h 囧i 崸j 旫k 溮l m 瑨n ?o 簬p 羻q ?r 嗡s 宇t 跓u 鈣v ?w 駮x 鵛y ?z 6{ | !} "~ #Z )y€ /b? 6?? =m? C"? H?? M?? Vs? _? d ? i}? n?? t? y? }?? 偵? 垑? 嶃? 撠? 樐? ?? ? ō? ?? ?? 穧? 架? 耺? 歉? 铁? 彝? ?? 萘? 銋? 桁? 铉? ?? ? ? ?? p? 9? ?? ?? ?? $?? *?? 0?? 6?? ;?? @?? E?? J?? P?? V?? \ ? aH? f?? l? q?? v?? {?? 亯? 嘪? 屬? 抁? 梙? ?? ? ?? 瑒? ?? 儿? 硷? ?? 寝? 蛖? ?? 亻? 甍? ?? 鐨? ?? ?? ?? 齕? ? #? ?? ?? ?? 8? #?? )^? .?? 4G? 9?? ?T? Ds? IR? Nf? S?? Y? ]?? cX? hy? n?? s?? x?? ~t? 兛? 塛? 幐? 栱? 洿? 爳? ?? ┚? 甕? 餐? 稸? ?? 纓? ?? 杉? ?? 银? 變 蹳 ? 謇 陒 ? 蠡 ?  ? ` ? ?      ? .? XX 梎 ?\?r?卙?皶纐Bn0x???鐔驊 ?!?"?#?$雑%"o&?'VE(禆)壅*颵+h(,-!8. iG/ t?0 ?1 ?2!A>3!o?4!}5!6!进7"k?8"m?9"o':"樚;"咨<#=#繘>#??$W@$\A$?B$?C%nD%;E&愫F&G(?H(I)]?J)環K)蟸L)?M,?N, O,?P,?Q,?R,1~S,wT-?U.?V.謓W/?X/6\Y/@Z/_?[/\/?]/?^/諪_0u?`0wAa2*b2Grc2_?d2k?e4'[f4m g4h5?i5?j7?k8m?l9癉m:?n; ?o;?p;@qWau>tv>㎝w??x?i?y?zD){D~U|E?}Fa?~F噫G歇€H0??I唆?J8??K阰?L枇?L鬝?M??N`??N俢?P軬?Q希?Q枵?Q預?Q铄?R*?R1??RP?R毴?T??V瑪?V迟?W1v?Xi??[7x?[se?[联?[躁?[鏖?\??\??\m??\q??\??\??]??](?]壉?^mZ?^墺?^幚?_!??_1??_gZ?_??c玧?c皘?c??c釶?c鈢? ? MOBI??S| P???EXTH?eO'Reilly Mediam,Copyright 漏 2011 8bitrocket Studiosm,Copyright 漏 2011 8bitrocket Studiosg?p>HTML5 is revolutionizing the way web applications are developed, and this practical, hands-on book puts you right in the middle the action. You'll learn how to build interactive multimedia applications with HTML5's Canvas, using this new element to draw, animate, compose images, and more. You'll also learn the best way to use existing JavaScript libraries, as well as how to incorporate related aspects such as audio and video.

d!Steve Fulton; Jeff Fulton?HTML5 Canvasj!2011-04-25T16:00:00+00:00l3calibre (0.7.44) [http://calibre-ebook.com]h9781449393908iZDC:YWSJiZDC:DNWLiCNTY:USAq,ba82eced-738f-401d-a998-6c7b85fe1d23? EBOKj!2011-04-25T16:00:00+00:00? ? ? ?HTML5 Canvas
HTML5胊nvasNative蓛鵤c€`ity醤d羘im€鄌n鎜r鬶e譭b冾凣凣凙3凣??効劯6€xi勓Ste?Fulton傐€競?倹????傹Jeff傳傳傳?傳?壏壋張">Editor坃????Sim?St.蘟u?t亸兦亸兦兦兦兦兦兦??Mike蘯uk敻戉乷儳乷Copyr€?漏 2011 8bitrocket呧udio?a梄侴4侴撓??O鈥橰eilly鈕oks韆€Pe饀rchased掹educ搄al,鈛siness,飏骯les餽omo?鮯e.蟦l?伬i€眘醨e恅so醰ail潚偭most濩s (壵a锜€="http://my.safari?o偸.com/?portal=or?嗊嗆??blue€榰>偡偡偡mO'悷ia乺hr?1%??凤勾凩c﹛er?DEDICATION籚bl竓quote侽侽侽侽恮狏To苐ash夎犨/傔><伹?3??Firefox???5???????Internet舩plorer (version 9飏鑱纄r)??/ol>W喠慖N?Know偘乤€8庍庍倵Ide??埍k佮€I抶摳arou?rogram捫?n鬂閗i€葞萴妶rn靉ngu唸?C,?+€(#,羉孉ScriⅧ2€噣?,蔭va,爜€I€?萶wち,揹鈥櫄(new?抸sp榅巄?rodu橉·??徱摐famili庁ze?愗峐?g≒帾擯?ime?屪奊奊?b╭渱f?a噛剚HTML拪嘜勍ila??pick鮬欑佉run傘it澐劅劅庂Ёa苐ash?嫵?偵尟€?仾梙i慁垙廬?Ado叏t?愐欂ert欂?偪忋?嘺呈??t嚶仮勛.蓡#?ex咅ie珷?抩喛€pm埩鎒el劙漲竴ep鈇ckward?????Sil卲l倸昘C#奼盃爅€悅鶠◤釆爫豱嵏bo瞃抁嚚嘸壈SP.NET/?比n傿厈?ho??app枹VB堓煩勨?胶癐?i?ar?oooooo垏ooh?詴B?Is蟫gan?d???偪偢??€@o?瀴o 11?p喞s.働疈ir?毟封€薀(lk?thg痑e沜燶API弧?侹to?s撹幇價clu纲ext癉?draw牥伈祱兌c嗋a?fぐfinish侶岮,鈱恗€饡皝@s磝﹒demos€0践璳榅珚厷f峹?箓?呧囋ollo凲?x?bui篩p?伔嚄p?仭?c昿傹禐?厾lic?length浫倐噺啫玐喝cuss嗋?phys夾?n丳v礁o夬udi€8g±妉mob〃嶿nal傹?苛cou勦焏m柪丠梄as: 3D侹ultiplay糊???痳on睝t繗嵭€@櫤儵?dow幚玵etell?壌publ廋W3C媜?╯?拻穰悎a佂寜儤de憼l?℡€豬凥s頾??墯.苪r佽rm┷can陁抪坔?寪ocu?嶒乭e:垈獌bor?園"鯽ヨn="椚澿tr€弨媎€弨奱鑢ef="http://.w3.?/html5/2d?檟犗犐2€}colo冃blue€榰>侴侴侴侤聽C僪ta€皝BShow尟叡o吀呧揁?a凁hould鈋嫴d靑夝ally鈟?user啛啛啛儚啛啛?啛啔i毀啹啹啹啹?啳??repl?d亁?呇-suppli€槓{哤哛€g儈1?儑€`卙gn="c?er??1€x屫€抍olor="#000">NOTE喥嶉€]冿冿冿噂妵妵">This閿€€榞nif棬岍(p?ugges?旘gen嶢顐鴩▋??囨em?囘囘剋囘囘囒WARNING儳圇儫??圇圇儑圇囸ia鱝rning嚛caon噰?>?St戉苪lt僪侎Jeff€??).澃pyr? 2011 8bitr洶Studio縃978-1-4493-9390-8.鈥潐??">If溾feel???摟?栘utsi?ai丏鉴垚審鏸ve哫bov?偑fre漁? ??亁慃猳猳猳猳?猳猳猳猯We岠d蘨k嗿Hear栍??傁側Plea奝addr?棻潁€筺ce便櫹儼嬺?:僢tab汬borde墣0"龈詔op吶tr€弨媎€弨妵W禝聽?蚭dia,煛.聽?td€)r傜傜傜傜傜聽1005莚a懆ste?H?w盄N瑯h????€弮'?Sebas€豲?CA 95472傋傋傋傋€弬讉?800) 998-9938 (秱e課it磋Sム欂?煥ada)儻儻儻儻€弮瘍?707) 829-0515儵t愋??僷local僶僶僶僶€弮o僶僶-0104 (fax傋傋€(摫桹="4桹琟h廆?web饻0綂杶??e€痨?錼矤揾?any檃掂噝in?m囮.浬鉧pcc歒傄傿at樭a/>To?mme刪or醩k鬳chnical駏estions醔out鬶is壢ok,骵nd錷ail鬿:NOTE僋儳/儚冿冿峯喦僶?啱啛啒椐萵巋-d樞digi琀靑brary█潏lets鵲u錫sily灎ar?over 7,500獘?gy熩c?tive騟牑€陃ideos獱鏈ath牗nswer?needick?囘囘嶹"1em嚄旡ith狍ubscrip,偛c?劏d僗y饝0刏w杛€檮rom圐o?.襾賳椚倛r鉫ll餳o?俌mobi班devi?.羉€8s?鬷tle舶e?e噥?€Hav?矈€鲤rint┧get鍃clus?a侹墄?u喕s瑺僘elop堵伖post鎵餬ack偄娳uthor剤Cop岆pas懆code骯mp勜,咐gan慇嗃favor環€萪ownlo囪chap?€槇9mark雴Hsec酬?彙e顛€p唞奨t媕皵benefi??t哗of飬0匵ime-saving?atur??弚">O鈥橰?汀 鑑s鮬厑?綹夅圷??ser崏.詏侌媥fu幐?嬬俹咺參怹sim??opics営効乷饀blis伖笭牁匑?fr?腐?my.s厒摬擠各??伩伩伣╃?╋╋╋╋╋╋??╉Acknowledg斸s?谗帍俫缄rs?St栘鱫uld淧k櫊?ank鑼1e枲i岪佖fe,腶w?梿maz?p?I,鐄ida€R宷suppor厛乣lo搧?pr€P憽?椄u?g亾af椑?〃s鳂鴗en.卂匵also厙厗girls鈥擱achel厑phni剕K?€鑵鵤撔?ir錸th燄滺ic厲亂???t?toォustr涏d瀣惌牃`?sk€癶i泀餷a攱Dadd澬aid, 鈥淪沗?eah,⒐j俻?co欻e韎nu瀳鈥潏郼aus硏啝h▉圛b塇?伬儓€锜r.葐?檲棃梺騧?砵a?p€瞫iだ橓M??Carol嚔喪?嚈喩tau?鮯;丣侚unc厐Rir?o?n蕂hn??徣婁瓁匭?焭Su垬Mú岰La?n蜑癳r;蔱€繣ric昲ar壯?Pai踩Garnica;膇et?h;脗娶亞袓竻y礃€IJ媹?FulЁ???Jeff樳娤?楉標Jeann揇€駎wo佇nder欓boy媊??欳pu掦?w簤?棏孄峐ec侤榹徺側??T毟乚毎勆?僐?rgy-?su掵g€坉e硲咺t陡稝ds?仮u叡st€X??ho搥凁cl€I僪x琡t愢痵tempera?甉?.垹夻旓?旓旊焂緼€@旤旝旘Omora?稡abys?卆濙嗏檻n?檺?佉cruci??塜奨敊盽pe€陻鐏橮er烪僡B縣?cla簚for醠l飂伄€勽heir靜ve醤d髐pport.

Th亐uthors鱫uld醠so靑ke鬿醕knowledg?ll?鎖ne餰opl€爐?鈥橰eilly,錽peci丠y蛡Loukides,鱤o個ok?chance飊鮯鎜r€╥s鈥?呹Sim€郤t.Laurent侞?亖out飂侭wilderness;€竢鉶pyeditor,蚢rlowe觝aeffe€悅!mad喞佖text髉ark?in?r飛n€槅 鱝y刢偭producti劏傹Kristen耾rg,?埜ishing?job嬬嬬嬬嬥We壺嫃媻t堌k儶technic刞reviewer?Raffae厴Cecco,嗮elley袊X?厬Andres衋g€郺????儛s冡everyo庤幇Electrot€鄮繋窲obe娻ka?t嘪w譭isn?凂Te冭a胊rrigan?捜凥€A喒friends?Jett蛫an,胷eati曫Bottle,袐玱怈udio嗚儊el€@ochi,羋刞€picrosof?Zynga,詫SPIL莚oup,莍l垁Thom?from L丱並劙ri芿ldm啯垖r?ato€坧l?A椸?up摪V欂ai€郆勷Al彁nt喐egdcltd唒ony倫rn俬彂euJog€HHay毶Jose莂ra涾Ri毿rd腶v悹(@Pho儼S晥m)佇quiz狊nGfx?Gam哷Y尭Way?€贌1岮o庁峸峱墽墸8bi?cket墢墢墠?墂塿.懾7?g怉儀u0sh煀€ 橋€坕mp擧€恠旔d泭eam?444膃?堷暓伈?ire芕乴嘝€笷oo茦蓹痧od!檞檞檞">Fin偂e'd澐澆壼f?壚!?pヘalo犱⑧,cl柪€業an蘣gl?Br?n榩Ⅷ,舝ic惱rth,塜s烸橜w徃Ken惛Br??Fot槰Ev俻P唒彔c歱?hns擓€{Lu掕Kur€€冹Ry刉仮蘨渃浹葃€0,謅run詤B?k擷l湼Ja?蝒if楕劕Pe娨楤囆Alarm???鈥?靉st鈴衝ot€p,婼奞W3C捸奞up侤th疯ch?kickass?HTML5へnvas?div擯€2mbp:pbk/€祤*a€x厙9厙厓椨s氳="6€xb>Chap嚾聽1.聽In??吶?as佉閳篒ur?閮h???塈e 仚y?T穒峇?Langu??.乥攢ǜir媓殥?哫d副1993牷it?偙fuel孉兏gn冃歋Wor?W縫昉b傇?a梱嚬de?浑c噣吀皥f?eb饎惥铻jag傾傴app玿帤刞pointy鈘a?< >嶽???夻嬑?棎€衖mm救ate韔d堏鈏tm?澣悎匭jcre堪匉璈鈦恆nipul佽d擉JavaScript.蓚蟼染Pf榶曯埵坹剴€鑞d?ixel堗?儠妰呿梺pl氊﹁redraw層収匘?惊am??API冃l働笟叿.翇筽rog伆m爄yΑjob撀o骵t沘?鋓spl唜b⒘玴a?儯亹喫劚㏑甈?曍ct噓w?妐痻wn帍帍帍帉Th傌mak矩堢喞噦dif婸樫嗞F?Sil€餷倝,飏覸G瓾h拱餀8?揌悁ret紭厫恾嶱寉儜€悩槆杔璈bj唜s噥kepダ庛?p??奾歽乽掄俇僷彑姟ac??o娥tri╜噋嬹?c拤(i.e.焠x曇posi燼,€檡€焵毧pha舫Xsp?nc簆淗憍劜).璥?ep捗恄釙ow-l掟窢夆傴湪瓂靳s嵢r焣ro?嬥??垖嗼氫曶棨????伻as??栰?凱a 2D#?⒂l咅?喴?歅鯽riou??e啇匔魜鑹麖読mエs€x朅淧?岪】嗂紷s?wi拱w.賝u→噚伻colors;騩t?;??ie€皺b乗剺叆t痯l?呧?孹尠ox€9乊f汬?augm?搾嘾?嗢熑餷ace嗴岋岋岋岇櫊itself???専?姷嵮us博o嬢??a??摀傪欻侤熽littl瀂瑿徴o銇悷(嫻ic?车?techn宍gy.聐醖涥cross-?-伻b?笜n菌a冐橒⒇keybo篜妀m屶剚pu盗ti搚秇erval€垰(竓牜嵏s寔sound,彁哺?亯tc煥屷can靍arn伝€€勽o鬭ke萒ML5胊nvas醤d鉹eate髏unning€爄mations,醦plic€v乸games.

Here鈥檚鱤€P鬶is鈕ok鉶侙閚.譭醼豨o儭勮b?k鋙wn亁e?API乸€鴇igestible餫rt呟丠n饀t閠鈇ck侤ge€╮,鋏m厾tr呧?how?use乊€P嚞?ns.蚢ny飂?techniqu卲you嗚ll靍arn剎唶鑑ve鈋?tried劜?d髐ccessfull偁n飫桂latform妉n劯w圕凲y圸hem峧?exci?ne?剻ology?a/>BROWSER覷PPORT芆R慐ANVAS囉izr.js?测a』m乹靜ok靑呅?filepos=0000023687笩笩笜Exa哘聽1-1矾穜剹剹4剹礑i??.聽?<html靉ng="en">Exa?聽1-1?勏€恖i啅啅単啅啅啅??Sav溋吿?CH1EX1.html戵d孒c噚y欰廍os????3???????Und撗?F妜nu剳怣慚悎慺sh栮f侁op煵?侷.胠ickぃs?c?.賮鐏竛€貥鵥ox暠o侎幟. (On抓bs杧榊劌?m唝?鞍Ctrl+O侽侹)???4???????Lo?庣庢圍厑jus斃?ed帡剹剹5剹剹剹剹剹??嬎孮僌僌/ol侘侖?屸s嫄嬸simila?涚涗8345涚涚涏Figur涍涍涃Ⅻ?勂4勄?align="c眬er傂imgc?ex?0098?ba搻敞奧3廆倀108"儬堊埿€g仏6?????剙?锄剱"囷-1.聽?Hello護rld!坣屃礉効効効12勄勄n佄€?"center">WARNINGThis閟飊e飂€8ly魒o鍃ample€鄋魜!厁ire鈕ok€坅t偍ll鱫rk€Pth蓡ynet舩p呅er 8飏錫rlier.厙厙<€?gt;椚?fo俬?炛婑傌mo嬸b橶嫅:惽惽惲淍惎????嘊仐亾吳吳瀢瀢倴5?▇8e001僗劮?ǚ灍?堬?Л圔a寈?υ変忛?.€譼峲posit?坃坃坃坃夓亪濭 堢吙吙堜a鎖le儤=鞍0030835??blue丠u>E?聽1-2咇s釁梾棅穮厃堏噊?o烮鈥淗ello護rld!鈥潌錽?en?s?n奩??530???Figur??扥窂窂4壏壊醠ign粐?刧刞??仹仸50亀乹ixe?from?噋辊匢ω?????佮塓侴岀盖歰?盖’盖厂牊高高?僄傽Ourk?兎??揋嘖岗benef膏噝usin憨e懄?€蔀hod僟僟磜磜僂?plac抪厴侘侘匫?匥insi敤懽佅兛伔?彌嗮凓help?斃triev?nforma嗼,髐c??rel€皝??mo糷€癷百鱤e?柊ppeΩ飗€╝銌2?勅剤€2mbp:?break戳€瞼*抩抩?抩嚚6抝熧Docum毄Object蜐萳 (DOM)嚭C?抔抔抔?偗偗l垁pres€笭笂H圦o?嚑爓爒○癌u€€-刏徣t媃-neutral尷w搈狏乆ヲ?g??鮬dated醘嬔嫧??€à榿yweb?.詥qOMccessib側through蔭vaScript?h徯be巟a?aКJavaScript佹€?腍TML,醤d肧S鋏velopment骾nce鬶e靉te 1990s.

T仒canvas櫁屪屪櫁倗倗冏冎?搎婣top鞚欙f?W??te彉?侓€爉ak堾u媔丳佡asse婙嗁c?斠load?befo乆?婝o抪櫟ppl毿昍?噂噂噂噂夌夌噖厑灩a榵協?搧?掄憗撟L撌??look釄W圱f??奰?懛懛懛椩?栕?柷柭垻亹€2mbp:?b?k愗€硛*慦夞9夨夡勏="6€xb>???b匁寚寚倵"?└?promm欓langu?洯o┨??,?be騯nsi扨n㏎y?rㄑexiste嫚.蒮鵲u峩a騟fres爃幣桺ic,€繿d陌竘兝Crock斎d鈥檚 N嵸tt姁ル?嘔倕,鵲u侢€勩an餷ace閠閚lin€Pn鬶e萒ML餫ge飏靜ad醤 external .js鎖le.詠榗ode鎭|ing亼亊JavaScript亽韎ght丳ok靑ke儬is:

<s?聽typ€萾?/j冟€?聽src="嚾€榓pp?">佈/?€yNOTE?妵儚冿冿"3冪廤廤>In塕5圸no?nger鑑v嬥o髉ecify姃帗魫`嘸?凗div€悁2mbp:嬮break?€硛*敊徬9???6坖?C? 鈥淗媓o護rld!鈥潏w€8?傜囩備A峇崼m嬥ioned,飸╫f?fir€鄵Xneed?do憖e?utt?刲on慳?烔is鬳?壭e昘he偘r傏儊揚?h佮拋傝捹a抶晍ele劻s敘pres€h鈋?俙?tart餰r€坢昁y飥€a哬s∩?旘becom儴s?i朄咜?曢?with閙劆儬凱sounds??枺崡姺姺漎?!,?壃??v喩?傪澐.艀覝;ispatch?b喰bjec€袇赼鋏f烒d鍋侊ccur嚇O?乚list乭┝儖啇嬹y?s埌廁鈇s俬?岅乮.訅萴€競t?佮?呯榋儻?k僷嶀se垁mous?ov幩,?唺刉恞嗀is嚵?嬒嬒嬒嬐晼垼晱劎r敗a 毞?windowt>?鈥檚亸亸勝?亁儾瑺hich寣嗐?梪?????捤ad橒?唻er?媃?,鯆儜厽厼侙掹L侓()???o墍?beз張o抳忋潽櫊?DOM.耬ca児儫娍娍?re瀌倷堊秞瞙€╰op靻坙僄M??????囎囎劅鎢nc々醕cep勈rargu旿:冞?冞冔?:凎凎慱戴戴唚唙垁垳nam焴彂揅?寵??桾er熽x€皝犗k?匫峸堖傭l道dy%孒咃埧埧?埥棸ndlへ婾塆?ǔW?L皞?壙壙壙儫儦C??幭淣﹪﹣縺our?d擑奰眗?n?€S匞匞皃App??僷?俽??ma﹢applic?尷ecu€Q姉姃妛妛嗆剋剉浶Capture刼t>?乢>tru??r??fals丟嬜嬜嬜?晭se炣嬾?c?尰type炑宬緶燄pro燩at?low憍増燈魷憗爾$.讔|alway儾傡o啩啩啩啢嫥嫥啹啹">B╜w??al憡憜珤喝e池€@s匑搙糝?刼汫剋>昂ed?悘勶悘傳傳w.ЁГ"?",聽汫汥€爥);
嵟乄乂聽()聽{?聽聽聽榦侓}喦€9??咷咶Altern樌y,鵲u憳n幉up二?β婘??婄佦涢顄mb侌扐?戀嫃単匫匫嫃儚嫃w.on冄聽=妏??塛壏€儔鐗鎬粖??勏勏勆or哋仧亣亣哋哋哋哋咹??劮劮劮?wid?媭€卼h="0pt">We鱥ll鮯e鬶e鎖rst韊thod€坮oughout€Xis鈕ok.

Encapsulating賝ur蔭vaScript胦d剤or胊nvas囪?App(),猕皤憵l?磸懭r颠荤匙棧蒋????H??昳笂f儉h?憓╣?繃亃恑橈勎:怤b堷kquo?剠4剣剝壪壩儅聽?)聽{
聽聽聽婄();€聙??..€焵泜焷讉O乯?€飥殅€弣帡€9嘩?噵9噺噺噸5€xb€攃olor="#8e001圥Addㄑ?慭慂P慀冏?徬徬兦?媷?<body>喛?癭徽旂姜add?俫俫俙嵆倃倀tag鮯啞?suchΡ瞶og戠姉戠啛奯???聽id="€cOne"聽佨500€h塅€p匷?Y枿聽browse€Hdoe侶漙聽suppor€H?5聽屗?儽/嚳嚳愮愩?唎唋Now,靍t鈥檚猡╧堌滺礹嵭o鮪de花?w熝?d?磯庍??勄?g??榟矸?i>attri?es€鷥W姱姱姱俹姮€?嗰pixels,≥?.詇e width鱥ll鈋 <€y乷乮500乢乆pixels.
偪偩乧傋€9p><偗倂3倃俿Th€?閚剬,飂魛衏anvas.詟`兦兦兦囷囷亀乺3囷囷囷囷€噮?卛呄€`align="center埛儊1€xb€攃olor="#000">NOTE??€^?冿冿壇?嗭">HTML5錶em刪夎including ?亣坢娪垏??,鑑ve韆ny韔re醫tributes:偳仧偰tabindex傋?傊€莯莵黫tle佺?佺€莯菃沴as啑?佺€莯莵鉧ccesskey?丟?€莯莻dir佔?佔€莯莵觬aggab嚪丟??€菢%idden侊?侇etc?揼揻?1em??Between?open抮傁凊<抂>?汎and鉲os佔佔佋/佭佭佖tag?you?饀t鬳x€(hat?displayed椤cbrowser鍃ecut儽€睒狃ag亪oes頾?upport芒霧or飖r€勧pplication?we儞use倐凧鈥淵亼儩傔傑湏?鈥澣owever啹adjus啓is嗢o骯y壈y€爊g崍?琠琠?廤姼4*U媧docu燼偐referenc咞媼珣JavaScrip狜冮兿?兲W埓now?ke堹DOM兦兣匴?戇??峱efin庨n妀.襡ca儛?倵倵歒嚰俫俙object剎pres?鍖Hy?叞寈?af畝閠s靜aded実垷垷垷ne厛a囎?卂卂勷愛匫匫s仭桝?k?wh倫倅棿偤晞API幐lls仦寬from庯t????Firs粿侲?啇new鯽ri?頰m?啩he喛瀏澁hold吺??俹?俉?哃???N歱?re祱廻専儞僿边價On?儔by娛伹伷getE扖ById()?侙func??佺晈晈仸,┎p禓儹媞侘侘厳?侙which?攛Ⅷ?id滮俫淲淲淲琕俼creat渟檖:挾部?屪?冞冓挵聽懳聽=聽埮.婏婈"嚍")?锭钉??9???5€揷olor="#8e001勮Tes?o觘e議e?r囼BS痥s淟剋勏昗昗刧N炐焑ha昈樳?墽徿????楤ず倅啒?唨唫c?ain啡 €q?.裕7€膮 挔勼draw?surfa叏摰櫺a冐b?児豢缓Simply抉,??簡exinei卹€露??ɡa€ sal鱝y勼噅吼??f€砽ook?圤幩媑?etC垥媷韥╫d匊s鈋fo?橝?姞u?嘢灎?l歅dy??崸毀毀毀毀枃収叆if聽(!毌爘|聽€嚉羻?聽{
聽聽聽﹫urn;€拀噰??枟剋則Actu?y,嬟媧€0w慽垐宍?嚫€鋵7?唚卜卜剰?曯佔佔fals?伇(婭valu瓣嘸昜佺???倓暭笚?孲d?叝柤)曻n坥攇攇倃t>getCont?杸卐xt()
鎢nction鍃ists.

The <佡骾ze="2"><倄return傋傂stateme丳breaks飖t醤d€萶ps儉ecu円if魝皌est鎍il?a/凮凮凬Ano伆r韊thod鈥攑opular劙d鈟蚢rk衖lgrim飊鑙s萒ML5鱡bsite, We醨e鏾浟⑾杘杘?beca?w?nk闆筬er沋e€鴽pproap灴弊汫汧搎?箔?呯"9呯奼奺5€xb??#8e001?Retriev??2D冒C塷壡??儫Fi橜le頴o纾竌騟?enc埁撊?c?篜亖ymanipul壈.氣5垏鋏sign偦work綋multip湗倓朒?啈a餽o?d 3儢傂owever,緑綥s?暪鈻0咮only唎唄咓俛?挓拠?導???栘俴聽=聽?嚊紵t("2d")焀??恎恎兦兦恎恎恎>T嗋drawS备en()茮魞瘎恎恎儫It鈥櫁爄m彚碈醕tu猉帳API?.艑py飌er答嬋€`岎m?亇will??rough姉朂塷颾ject,釖Ht攚湥€雰I€q畺????労delv氨斮ri瀶?,鐁aphic敯?im側儼o栵栮n靾鴕?p€@乸槹旈now??攂spe侶a鰤憇h??咟耿?堬堬>庽??嬝晶嚄嚄毖側鈥湸?鈥潄P?櫂?熻兪defi滻僸?€鄤?喰歝who濊働ndow.譭?塝崘?su﹫熜墾噵?傸gam?媋?lic拏s絠?岏e?t厵e嚢ve吥喞?喠嬸嘒€€庩?鋓spla伾at???囏???妡fir鞍啈?嗚a嵃僠d囏s鉲ea?妛ea.詠蒾llo€w恍嫚??乹?ye?x?啌吇?€殙☉B婭?.??f?Style??set佷ⅸ梴??侙R嫧侘侐?嵢徃ctang悹?pu偘?呯en??э??癏唂"#ffffaa";
NOTEc€恊xt.詇e傝?no骳reen颾jects,嘯€€`anyth?else侎is閟€稿xample劦immedia嚑mode?de傴ibed錫rlier.墂墂
韊thodざ伹喛?伃?伕?餫r桺???傇?槖st?g,??x傳傪posi爥,??亊y??n?婏娮娮?偪嘩?塓?("聽",聽195€080)師師師兿兿兩Let鈥櫐dd髈狆graphic◥o庲??労疲籰?load??imag渻pli亐W珫vn傴丅伻仛manipula?俛C聽4璖f?now厙ju暟g渀厧?詏咡??c昂,鵲u皑磆唄伆礗乊ns?恍?庣庛I俼椷?妶坹?佭佭佡.src侊摫ropy凲礪疘?呝€葝矖?筼悪?€`も="cゐer?剚1€xb宱宨OTE?宊儚冿冿肚槯僶囪Y媓嬋剺so簀ano嗻r宼飏?video峋儑螏D?糠e疾p棄搱?s 叚??勏尨?攪>?湳攑佺佲ⅲ僶僶0666305亸僶僶僲6僶僶僶佷忇宊狅?em??Be櫢e?濿椏娰wai氹嫃揢脴湒??谤back?朆func燆倽佭???佭佖ev?承欒t匙?侟on佭兎兂潡伔儻e伅撤乷乷嗭仐亹撢be鍃ecut?wh筦儚????occurs朻來嫵h棬亼ed?€衝?傦傦插draw僔,?ss??樖庤p獂彣╣涴:??墽墽?乷化丱?化?化?化?风??偪倛va?h穪穤?聽=聽new聽塡;
?瑸丷"€蕎€?gif"亀亀e.廂亰擋绝)聽{亃縤聽???€偪?60€130劶}埾焀焀坃坃圶Fin慩y?儥澬box醨ou?廼剄寬撈笴乷with籋l,??媁?.StrokeStyl?帿搻ho?竬aЙ犖s伮 (€abord癏濘?)懨????.俴R斷?????r?angl兘?€癴our橤s鎜r ?硛€卼he strokeRect()韊thod醨e魜豼pper靍ft??x佭佖and??y??coordinates,亽?low?righ?????????:

傋傊c€恊xt.墸Style聽=聽"#000€";
Examp?1-3崳its騟sul€@慟illu嚫媝€鄡g僥60615僩僩僠Figur僟僟>.嵠埱埱峿i厀?.聽垼Canvas堖堌<唅骾z帎2剦€攃olor=?">Figur枿1-3.婌脢Z葲Q驻矆謧(??婸€悁2mbp:p溞break?€瞼*奩p?9??厪厛6€xb>烦稰丂th胦n攑e?凐刉p偪挊偪偦There閟飊e韔€`th倷to鋓scuss鈋f€羨e鍃p堭e鈏籷醤d€鑤妧伀乊yo€?鈥湁d!鈥澤n??ook,俛hav兝mplem寵d狯ery?€′嗩method尭gy鮯勨he ???⒏?晱妾湊ty飂?dern?b鈿ss.詣駚]靍ts鵲u靜儉?ss嵢s堁?Java憼兪€熏p鏂葛rob嗋s (or餄unities!)??秬卛th鵲ur鉶de.羘y鈘owser鬶at鑑s崾avaScript丂nsole (Chrome,蟨era,觓fari,苅refox鱾褉ibug閚stalled)鉧n韆ke鮯e飂 ?.log.萶wever,?s?out?????髐pport嗻?嗋nasty錼ror.

To埁nd?this佀,鲉媋鱮ap垚醨ound勏勏勏勏勆媯only?s€€e塸ll閒€bfunction閟?ed.詟貎璫reat佖a鉲ass嗋me??>D尮ger?t>,釁垉Pn侴髏atic冪倵倵倵倫喛喛懓彴b唟侙f懶僪ywhere愯?,靑愢娧:宯blockquote尪4尫尦剹剹剹g("Drawing聽Canvas");?€9?忳僄僃H厭岇厛鎜橯e垷?廜g()僿垹妢ality嘜???嘜僄傿var聽噓聽=聽?聽()聽{聽};
欰2D脌纄xt榚胾rre乆S楬e凥劎崹???佮HTML5偐墄偑(慦?嘆敚Render??2D?懆object),騟tri℉d鈟焂?to?傜傖get倓?倐me┼d?佔佔劧仹?,?濍冣侙a狖tヒplac瞙?偪偪噊噊噊僈墤a备?卻€€尷proti僗ne圥?d??圱???????> (炧嵻ㄨ僯wi剙歌?after)﹜Casicoordin懆髖stem笓0,0岢楸€瓪lef搆corn€€寍咞瑳俖s﹉s厴┝valu﹑嚀俈down禵??簠唩兯?婘俽嬑弍?d兞埁j皶喓c橪睉橦i瞾両燅?must?grasp曬e╄e?喞l疯拱拘t冑h?嗚work?殝嶃庅兎婹敻擧u侭碘ck喠愌墤?刪箞?glob乺?俋i剺戫Y勜彃manipul??俓?n傼?撟匇丱嵗lude痝尶?≥rans堌m回偁€8rix伿?幆侘侒M崉瓷s昉籂ro?,魝涂\€y啞??匃匃?>Clipp噛reg匄勄勄勄伹>C?t彴嶫湻箲傕??d???僕僐P?歶?単単単??嵨厀厀strokeStyl?厽,乬乬f?乄乄乄瓎敋Alpha乬乬乬€鄉ineW吜乄乄乄乀Cap丟丟丟丏Joi幐丱丱丱>miЮLi€8乢乢乢堿haOffsetX亀亀亀亀乺Y亀亀亀乿Blur乢乢乢乛Colo乬乬乬?Compos嘓O恜渏佅佅佅廇€悂/??€鄶aAlig?丷湣亀亀乸Base屬亸t>?杇槸枱枱枠Don鈥檛猧ry;?hould頾t靜ok鎍miliar▂j瓚yet.追躣iscus?盻橠浏Ph€I洐n叞€Hre涴hap慼s矗???Rememb?earli€@俠?珄??磇mmedimo?秔susへta塸佃€?盞?n伔伋?urfac〩whichX?鍌爕??nee堗?re伇n€im妏o両厐nge?瞲官€獒dvanta€爻媔s;瑽examp璔撁娗sk独t喲y埨s礪惦effect俓垫sc嫚n.匣袔*ge?our嬂ad刞o?閠,鬶e ?線卆ct飂騟drawing鬶e骳reen鍁ery鬷me€眗e閟醤鮬date韆kes亃process侫?o€襝anvas髏raightforward?d骾mple.

On俲o?鑱?厐tained韔d劼wh厛a骵唞objects€蓅to嗚鈟€饎鮯urface凚manipul啇d儴th?isplay靑st.苐as€皝XSil垚l?鱫rk閯蓛 ?.覄爣剽e鰥useful鎜r鉹eat?applic€`on?at啝ly飊韚lti堗?労囪ir飛n儼depe€(nt嗮吶s.蚢n佮f嶓a崍?傹coul噛ke鎢ll劑仌?(g佇s,醕tiviti€bnim?)釔oft愌asi宍?c嘺壞尟€o媕,錽pecial?圦beginners????u夃h佽eng強?哸advanta€▎limmedi???慞i娻add€眆un噃onalit梄o飪A伭€`help閠垇俙囪li儓€垙閽鑞嚄?Throughout惷book鲏媭挵cu?榠t囙欔尷€陜Z唫伿??ope仩?晹???侙??娝div>T媂HTML5脩驩時傐濕ete敔y?ㄊurr?偮俠佀┫嶫?d?d€箰嚿昛穈憟漲n幈椀锤⑷€?/i>俙ad-only;?e.,?垊慧d懼剳ò冣擾冑W?do?ean?剚€Is?偙dynam盤re?喿緲啅偛痁?礹oa?戇懫1慽懴€`獺gn="c姲er?屬1⒙€揷olor="#000">NOTE?昰儚冿冿檹僶怈漘漍竡CSSyl墤濊娐簱堷筼堃.課澛墷園,???嫛?妉bitm祭峘彔a嶊侌am縛?愨f€8in夺児宨躬fi?圏唎楓楓??榢€還邩/?ttribut厁坙墳.凭爀x唕暔o壃墬€ 400脳€(?,?m殥?旴倿╬廜廚揥弌?弌呯?偛="?:聽?px;聽?:€z"?兿?儻儻儻儻儸W紷nclu漅堩壻慯?報毶?tr滆form績€8rix焷劌a?lepos=樴0202278兦噇?="blue€榰>Chap洦聽3,鱤ich鳗啦!earlier縶俋?垇〩c伆inu擛爟湙趁仮book€鵵e尷ev嘪€Xf嚴踞澕帉2D倞劯髈?玶raw乀?se乸府y噂噂嗀toDataURL嘷淀?婣唊?ur﹁歚r揧摪编?氨repPへはim?烄?????噽メ姼Й瞶富?鈥檚飑墑恘apsho?screen.聐髐pply厑dif娐t虸ME魕p0?a碄ra嘝er←姽寏倅???殐婰bas敇€泤亖鴩?png?,鈴垁秊pe€邯o?r倳寂?嘪抦????奟斒e顟檶x櫺?憄expor€皀??睋an勠brows€@window见div?€2mbp:綫break/>?苺?/div>
Another舩ample:莡ess詇e蘣tterI伇偘?,髣俁Figure聽1-4報player?s阰b?嚚g塟€鵯塟嫅€qalphabe啞e働mpu€閔啇chosen騛ndomly.婤嬕keep俙ra幦??any?e??侸mad嘪list?ers?€鷄lread侕d,醤崰怈侽侶whe?€恘eed啩鑻P€?toward?飏搥w€Я)岀blockquo忨?4??剺ign="cen匟嫚img騟cindex?0112?baseline"彠26倊500"儴/兎??"6???澐澃2剦愡愘#憪"惽-4.聽HTML5旛檊檉橸巕扊偁€]?枃匥11匴勢5勥勝8e墍厾H?巵G??ks?冏?欙僩T櫿柀s暔up?th偸s€翆pic髏ruct坔釃猗发?収妠tt>c塉App()H噥巋a騯?v偉滴嬹揳y囑彊廅?initi漍z€€????崌璈so?y?礨sco?嵷儭encapsul?d専场t??捽??囩?勄劼璡劎?熥奯??壘l琿umb蔡im??pr???矉璌??磮???寲??囎囎囎囎囉勑sagЦ囎囎囎囎??c亹扄圤掙dis噴?答i幮厵拃r咗か巄湴供?亂??????>簂?????嶮arra??婣喞ea焁偹?alpha尠???哷b?驑纎mly鉮oo?set倕f艰嶦縗o娴绎ut€鈘e楄夞pos?塸??怽劍???噺??today夨夨夨夨俹???cur?t錇.蓆愊惿瑢??鈬悧no?pur嚚?啛啛?啛啛悵To?嗊嗊嗊嗊偗嗊嗊嗊嗂嶉鈥櫦!庣幜?nee乹恱??d唚唚唚兿唚唚>h乆erOrL唚唚唚唚偗唚唚唗?硏H??斷€€僐€ydep篨ing嵄w箳?as?嗃敒埂曁???I?€穪詂l彉夬o凂a,冑疕?劅潰?on倖侽侽仩z侽侽噂俉n???奯???搄ed????偡揼僪塜燌?帛搏?already?pri佽?li崁浨浟?help倃r嵿me?w?儅?傸Ιse墖墖墖喿墖墖恍權Ov朹塛塛塛倗塛硹s骵t鬿?蝷?falseHere閰 佽code:

.蒮髈,凒?inu?﹪喴w塰┐鈥u;€bnex亪w皺n愋肯姎d侤purpos媓?仚仏get?冃-儕啫l劙from?,惛d厵?亪i孊慞alphabetic痌咉嗻€饗Sith癵r髏or?擑墬墫?凱壸t>玂灴玂弌瀲傋傄?r澰ぢString.噏CharC垹(e.坔€Q边边凎凎揯?媁婸夘坓劲owerca楡s怈夛夒upp€臬|闊儬躸nin├洨∴y?Caps虆P锏壙壙呄壙壙審墬睆€?toL?C?????兎兎">N塜槖in畑嘺?刧?碵??cou牜dis垺昁⒖??Array.push()俉侾m燌o⒗柪dⅨ?屃俫俫堨?倃ray:

guesses++;
lettersG€瞕.push(€r€?;剳equal?佅佅伿To垔佅t>.蒮髈,勄r鑑s鱫n€殕q:

,渧key饒摈煷會欩?n?卄err棃恡??夨夨?劘?聽<聽0?広h涄Or洩庲"泚聽is聽厴聽a弽"幾幾幾勭勭勧T殥梡欯幷s♀simple????兛廁gre多r?佔シ桹佭屔i?伩伨坃圶佅儬tex糕ろrCon瀽sel??倧????伩??伹??伩??儚据玍咗??????儂扄?搣g搚唃x撓佉??擔€Z揱乢€瘋?????€b€*}堊?????Fin廐?≮垙垘drawScreen∵孄o餫i亁嵣s?嬿?凎凎嬿僶僶僱溈啛啛偗偗偐He?擷劑fu啒cod€P?€搉ctio匫匫匫偋匫匫匥侻?ventKey盌(e悘帍扖!gameO氿??€Dva弨匙倫忷String.fromCharC啫(e.琍€Q动侽高侴?€?to?Case媮???es++?€飪7s?偍push圭逛昇伩堖堌亣匰區脚墬佔€W?娷?true厀?浄浂??喿?夨rs.篹??儣?€W?俖俖?墢俖?€2Debugg瓈logわx伔乬€W棺棺佅亸€W簵簵簵倗??剹嫹侘€W€W勭??侊仧凮恄€蟺W€W?瑹瑹侘仐??€蟺飥莯屁G溓€鱽讇e¦¦㏑a/>The鋜awScreen()苪nctionY媓Got蓆!?€!€!//Background€飥鞉?聽=慼#ffffaa";亸亸亷Rect(懕€!50€130?伅?ox€穫_俍stroke凎"#000€凎仧仧仒?5儼凁€049?9?侘侘恩遏儞僿吙D漙€總?墽叿叿亸亸?乧1摾聽_sans亣亣?灟tod??50聽,1?伹//M灷ag厽倵倵厽"#FF厽亸亸厽"14厽亣亣?厼m剆叐2?3叝厽s€莻梾焻?10991厽亸厽厼6厽亣亣?厼'剕'?s捝1?5?俖//H澬er聽O€ Low???唶唶懛亸亸唶唶唶亣亣唶癦勏勌癴h€襉r€矑?岪??/矎??冿嗺嗺?亸亸嗺嗺嗺亣亣嗺稯勄稯稯稯稯種?€3if偘?獁?剋???伩伅伩嚡?嚡伔仹伔囘囐法嚫o€p犯"?€08喦?}€梹`窂?菌磥哆9???5€xb€攃olor="#8e001?Export媥胊nv估to醤蒻べ兤?簭簭兎Earli?繅briefly鋓scu幯邯勄羹toaUrL()??property飂佭佭佡叄伔伆obj砐.譭峋餲o嗎啫use?at偪€〒貍趢鑢鉹e?囻i囻兘?蠼t€鴣衖me.詇is醕t€(lmost靑k侙乨-captu?utili儀for俠s韆d傪n嫈.姫?娤娤>唒ne?o?鈛tt?in?HTML饏羾2喎唨pr氊佱g噭唡?.譭鱥l?鰛卨醖d鬶is鈛tton鬿 <form>醤d鏸ve閠?€8d??createImageData?t>:

傜勥勥;
PNGNOTE儣冿儚冿冿"3冪嵂嵂>ǜwill惄cus搚?proc峹?depth€I儘?ilepos=劯0202278偗怲?而楬€榰>Chap噣聽3聽??聽聽function聽initGame()聽{
?€!€!var聽letterIndex聽=聽Math.floor(€Zrandom?*乵s.length);偀倻?ToGuess倐仠[僄x]伹伵g亖e亾0€偪?偛ed?[??嘪Ove啺?false??wi唨w.addEventListener("keyup",e€盞eyPr僢,true嘜夌夅formElem亹儦docu€i.get€腂yId("createImageData"倧値俫t勶勴'click',聽俉俁?噟偳偲drawS伆en(€鱻纝€b€彂?爤傟(e戺傁爄f聽(!嫕??塤?倲塲String.fromCharCode(e.?€Q卂侽怶侴?€?toLowerCas棬??搘s++?€飪7搮.push(僄€槀軄侊堓亣匰區橍墬佔€W杦杝?厀?嶼崢忚倕??喿?夨瀽槹exOf叴?儣?€W?俖俖俖墢俖?€WDebugger.log(偳伔乬€W婥亀聽<?娺乷€W€VhigherOr憭?"Tha瀀ino€Ha喌"凮?€W?剹剷g剳嫹x勭?€W勭勭勫€Z凮乷€W凮?€飥W???H€殐/亀€W∵?€飥雬嚖G??佔€g€彜鱾O侶嘒?//Background€飥靋ontext.fillStyl塒嚬#ffffaa嚽亸亸lRect(0玚€!50€1300唚?/Box€穫_俍stroke凎"#000€凎仧仧仒?5儼凁€049?29?佅佂€)B╜lin僱top僌厳/瞤e€總??厪厪亸亸亰€@乧10p?_sans亣亣?lT€H€?today嗀150聽,1?伹//M??€讉梾焻?FF厽亸亸厽"14厽亣亣?厼m剆叐2屷3叝佔//矉s€讉瘏?10991叝亸叝叜6叝亣亣?叜'剕:聽'聽+钙挶1?5?俖//?聽O€ ♀??唶唶懬亸亸唶唶唶亣亣唶唫ヴ勏r喰"喴€皰?峆??/L禖聽奎?冿嗺嗺?亸亸嗺嗺嗺亣亣嗺嗴勄劽嗩惶€?toString()嘔?6嶰?礳ameOver猒?剋???伩伅伩嚡4燺伔仐伔囘囓You嚫紤It!"?€08喦?睪睪睪睩?Im澑оaPr夠(e圴伔偺window.op池theCanvas媥侚URL媭"c€?,"left=0,珮€0width=崜傔傑???",he暩t仱?€粈?傌olbar傴咗izable=0");??€)€_></script>?€ead€梹恇ody€弨坉iv聽s怸="posi妷攑absolute凁嚇€?張€h?€u"侽侶墈擷d=壾One噚塪?€h?籤侘聽悹?brows煛doe侶n?suppor€HHTML5聽壖?僛刉€爁orm€弨坕npu?typ?button刞匤懴徰€皏alu?Ex兓儍昤?偡冑僄€晩h€弨墜寲tml€?/tt€(毠€8blockquote>
?儉€?/div>€磤*p鑕ight="9pt"鱥dth="0€`>What鈥檚蝒xtpath壢i>偍hich拞discus抭?upco喓s卨?愥blockquo丠?1嵸?€`align="c啫er懐懇1應剣剙#匑">NOTE儢憦/儚冿冿??僶2">T煬拞API嶚we奾cover媹奾m崄on寕慪恅佡W3C俙儊佖庁exhaus溣??t?up擛俙ref偁nc?漻detail潛f?u曺剶2D臋膭琚€埿僗be鰅ew倶?坿a鑳="http://dev.w3.org/html5/牜-api€]2d€q.€鶊飯鞂?惪u>傜傜傜傜傜€鴳弽遖儑儍?幏幎捒幾幾幾俹俲Howe嶘,嵻嬿lack殣on?偘exampl嬦n??媯R?峹?i?p▲t?傪朒?specif瑋?€府Iu?甂佡儲氳痯la揁嫄?s摶惼€垈牰2spa?案?壪塐??1em夌夌b樖B╞FSetup椦椄噲淲岟??A呪proce晿through?栵I瑎浮€▓姒J儛乖糭?a妧瓝Ρ??,縴w?low.諄b?od姠伾仭s唞儔泟儲瑼.賝u儧?y嬠嫨恅g??t?奧?tt>瘉S籖()if?!儣儛()儚儙€W冔僈€穧e堌伅€絭a彉榅蝶聽=聽斬um墣.getEle€YById("?"堻??氷x垁?倴?C€?"2d侊劉?€嫑飳/€顗W?嬤刼聽澢€8??﹫//mak椮犮嚴报e?佺佺佺僩懠嗠.lSty氶?'#aaa€'?亸亸Rect(0暼€!20€30?伅伅?僁000€僄仧仢€@乧20px聽_sans亣亣亜€)?伱top亣亣劅lT徛旽"彸!"啢唀侘彫忂牚/€攂ody€弨坉iv?垇="posi?聽absolute;擧op€?囆€hleft€u侷栛聽id=?聽瓺500€h?€q佫聽硺椮brows╅do抜no狚HTML5?槂?僀?€垁弨墖焾侗崟O€8磄>The耡sic襡ctangle觝ape塓?(x,y,乥,侞),??y?t>?兒岺d則媂?嫥坃匫坃?t>慴e坥坥坥坥坥坥?坥坔?ular?t斝垏垏刧垏垏?垏垏垏垏.詇is韆k枲懶飂挌cur橰c€恊xt.侜e()醤d仹仹仴set?佔佉methodsC俴聽4孈吳a>)鈋ing韆nipu?d飫e眉Sc乆╜釁?咹埾sav伕峧.詤閹y榇rta剎featu?噝allow鮯进鋜aw?凐m侙囸dividual颾jects剗c剒?儓€榷槇?138288???S剎l喍Transfor儴侶s埛埐鮰il慔?圤?叐apply魝?€蒾n€翉w髬竐?夽?uc?噾囐n,靍av€鶃箁es姦噞顢 僔ed棲a桹桹搰桹桹垪桹H?Do讝袔劒R?擸嚳椃椃椃?椃椀o惵 (push)埧勝奤戧tack,噣ll:嗹?4??ぷひ昫.兩()みみほ吙偡吙???by 鈥減opp峘鈥潃鈒a峹哻?啑啈use啅凎冞冞啅啅啅唸劀啩啩啣櫪€悁2ǒǐ€硛*戇戇??綵戀Us旕Pジ?C倶?Line櫒恛恛恛偳>??a韊thodя婅?燨ny櫆煣煝A┟⑷s?y?li檆points礳l劚俼be汒€Htwee俰o傽乧倅︾︹処濌h楯?ng彉暅彊?,鳝趧P溠尓瀤s???夐?wh凚???暻?娚塽皦????媬C喣〃吅s?a鉹iti?嚵cep⑿o鮪der?nd,塸ca寔it刺nab?you栚?斗岎崸崱

Starting醤d舗d€Z衋thbegin倯()close倗倗倗個ends?倎.議en鵲u?nnect魒o餺in儬inside冝it閟騟ferre?o釀?i>sub?
.馏€{乹偘?亖鈥渽d鈥濋f?final儃?勮o€鋜st€??a/峹lockquote媬1?媷€`align="center彑塝1彑彏000">NOTE幾幾儚冿冿廹?僶尷徺cu墍€╰ransforma宺€8rix佽尐aff嬦everyth揳drawn?圶?峜As鱡亱se€H嵸€坋xp咹e壀upcom?s個?€兦€憇,?alway偁a勯o仒€8?亣匞x尩巋ntity (or恅仩)巌倶do頾t俿any??appli懠唭???歘1em???巊?濝嬃Actu掟D奝垚僿庯澘巁僩?mo?basic參枩troll哷by哷series飂湩湩moveTo湉湂?乬乫lin乬乪巟m亐嵃沨sho惈Example聽2-2毲?4?嫓i??.聽?i€侅厫埪熝俠巁倧倧?囘囑?聽椓Screen()聽{
聽聽聽嬃ext.s嬸keSty剦聽=聽嘸ack";聽//need聽list聽of聽availab乤埵s倵倴?W?倓10;???Cap?'square'乄乄)€€悿20,聽0??僙?10???ke?€鐃.癘€鼆*}捛洴洬忳峯峬揥揝8472揥揥揚Figur揙揙>曇県n抁檡σoutpu???劎???mgcindex??5?澿e妝"倊€鄠l90"儛圵??="6????東楶堶昌堖???塪欰??????爂??濷??剻y呈竟10-pixel-僠坔oriz乆獉參?)鎟om紷si疊柛0?€帠10??玱?W?ave婅s?dd盦?婏?淐杦獥乢乕e?亂t稑butes.蘣t鈥檚鬭k凁猱hf靜ok??variou垬伄穛c朻稒稝秹埅be穢亨惫哫毁喊om€亐繿dvanc喨?磹棷埱梘﹐喍4穵?剣s锭?偀偀偀汞?55篨g婞?嵾嵾倗笲?岹岹嬑焾姍e峹?壖坹n塺€貏=蓞?b夾鞍宲朻s:劎?劎壙剣>塜t刼塡??俫?default;厾fl惾edge剱€P啒perp啒icular彙??吅?弍僶呯呯呯呯呭round咃咃咃咃俹俬emicirc厞will沝鋓ame?哵卹ength呯呯呯呯?呯呯?笿咃咃咃咃倃呹tang呧wi劆??愷仮?€檧s?hal?€紁la??嵡嵡嵡囩卂氱?厳???Joi潎潎潎偋偋潎潎潎潎?潖潖娍倧潖峅潖係峗惀鈥渃orner鈥潙ncreat奾whe濊wo墏s韊e?T抉?all?a 溉j傭i>.恋翀爮倗乹,幉珓se兏ts鈇sic餽o?ti瑏愬lineJoin胊nvas醫tribute.

<伭傁偵miter偡€9?blockquote俷3俹俴The鋏fault;醤錮ge閟鋜awn劏魜j厾.詟P冪冪冡Li€8?喐?佡maximum醠lowed騛tio飂韥轨ength鬿靾鄤?(伾劕侫10)埁唚堶堶堶??bevel勶堶堶堶俹俬A鋓agonal埾埾執勥勥勥倃勥勥round勥勥勥勥俹勞佲勄勄勄勄
Exa?聽2-2氋姺坱9坵姺圲5姴僌僅#8e??僉嵑More羋vanc嚑L?D?ing凗寃寃寃??噊噄12251?噊噊噄3噊噅?ow?se珬妟acとn;媯res斃岎?敵?嫙?3949???Figur??>猂傂傫倛ew飀diti凘when濺??on挘?,?ich?拪p烜t飖t?o仒丵way師姛橭姖i塛?.聽?cap敳?fun姴聽啞Screen()聽{Figur瑚瑚乎垳?堶劸界剋籨These縫簣靷羵ン檍s骽ould?lp閘lu?a?some飂佖刞ombina?s€ttri昤侌w匭n鮾)o浣桊庰?n佦殜.咺Join閟顔垍r.

Sa?2騟ct娰孒僠probl尡嗻?1鈟囬setting?beg峹€q?儵€yaway鎟om?鞂 .詇勷allow僀?i娦岀屻恈?,釓賚l€A廏廋垷垷?Cap垪垚a恱佨姰佭佭妛佹????3骽啯us錶im??extra儑儑卂卂媭favor妿efault呞utt,悅唜c?嬥?傜傜唃傦姼夣.侶嗂div?€2mbp:pageb暩k/€祤*a€x?9???="6€xb>Advanced衋欯MethodsLet鈥檹恆k欯?ep牥look榶some?滰€衜??瀳???饎?滳€鑦as,婡clu淍昘rc敇姍urv楘???comb奌戰o銏皌€殢€x閙塒s慃堶堶唃堶堭5堯€揷olor="#8e001嵗A凱堽塛塛塛傳>T國鎜ur鎢n濰on坃坃噂嘾?o埧Arc圐a噒嚬irc?斎any姌rt??€聢7匜4匞??4?c€垬鑺 噊a鑢ef="http://dev.w3.org/html5/匥-api€]2d€q.€?dom-偞€聄c兦兦嬿嬸b璈€皍>乭x俹??y??穵s?挋溔?敼慍甴琝倧値噵偡偘wi擧亼€麩禂剈p灷whic絗?曖仴?僌僌姀僶嘒亀乻嫊乬乤泋璛劇an粖eg????峠峘俉絪帮仐>tru丱両涁??fal倧學?宻够d籃犑?塦???F內ex?└f⒐w唜ⅶ宔wi疨€p徝p宠t璦posi兟100,€ 婤乨帶20縅?n娧燞file佽=0018280澴澴澬Figure聽2-4?澓,?ould?懮ode慀low﹢r€渽恘t凚???Sen煛媁:煼煼沖?煼傁煼煶堥聽€3坄聽(M蹈.PI/180)*€梹?6€?;効燂燂剹剹剳??7763???E???閘lustr歌揝?necessary惯弨si?憣擏???i冪冟.聽A搮瓓i嚐俖俖??欝筶聽?()聽{).聐鮯ing <€戵ize="2">
W佮an醠so鋜aw?segme?of€h俒鈟頾剺pecify嗎凅tire 0鬿 ?咶d€Pop唻s.詇is鉶de鎜r嗭嗭兩S?en()??wi唓嗐one-qu?er勥勜侀n鉲ockwise,堎sho€爄n <垚ilepos=0000119439>?color="blue?u>Figure聽2-5:奦b?quo剙姖4姛姏??c€恊xt.arc(100,?€3€)(扺0)*€梹?€檉?e);堶€9剋匃匃匃匃"廝ign="c嵿er勷img驇皀dex?0095?baseline"倊23倂€X儤??€g亷6???塷塴i岋岄#剤"屪-5.聽A恄怷?娦埦??匃?劘崪If?wa內朮楤everyth?i>but偭棽0鈥?0栿搘搘搘20183啅搘搘啝6搘搑瀷湪employ儮?挦卙i椂惽犪rgu?淩et閱簜'?tru佭佖桹壪抇壏桹倧桹桹桹柨桹€棗O爠櫁G?桮勶勶勶揋揋桮桮147桮桮倉6倂€X桮桮?挓??桮塯桮桮桮悽桞th-fourth?梂梂??勥勥刧刟4€xb嵕?倴a鑢ef="http://dev.w3.org/html5/?vas-api€]2d€q.€?dom-偞€聄cto冏冏?橈u>亁To樋嗼€_a??绷??岹慓坥坥屜??To(x1敯y€)x2€Q€)radius礸?儚儚儔T?儻瀤嚊倧韊thod瑁only夤闋爀為ed犪l葛st鈘owsers鈥攑erhaps亹cause?戰apabilitie€in€铇€plic侙d?勏勊挤勈function.散萢k倛刋a餺i佽(??x1?t>,??y??)ペ珹s偫stra奿鞚 鎟om卋curr?p?冟s嗀o垚o€鑙s頴w€?詇夅t倽卲rc俇a?呉佢?匃匃???2??倠us冰偂giv?懟???3???斶斶憌憌d?ll鱫rk懀if塤塢拤嚑lea懓篨髐b€?觨,€竧鈥櫠╰?倄亪a嬒婫0,0墘€啹q痐媆簈凲build飖r髆a€€吚懖€阬ook傟ttlik﹁敻匑wir叏o?h??(for桯c喐f?t酷descrip?)糤糤糤2勜8糤7?炵炏崯??峹move墵敦br/€螉蓘裙^€?(350,€!???_???????138??倈272倊244???碐???????峩?濲?)鍃aㄙ高堶刧浛剾11劎??5??8e抭">Bezi?Curves僕儻懭僄??侟溊侙,鱤ic汙棬far韔€Ilexib樌???com甴o湴灻bic゜qua︵t€ptypes曌ul??噇li鯽楡圥庍屸??巓俫?壪嶗楓t昰溔href="http://dev.w3.org/html5/簇vas-api€]2d€q.€?dom-偧€羈??to??嶗煙伀嵰?崉?熝俉俈(?t>cp1x,鉷1y€12€b2€`€Hy<€1??)?€9blockquote€hl侌li鯽lu亰鑕ight="0pt"鱥dth€c><伹?3??凎凊c€恊xt.?€8a鑢ef="http://dev.w3.org/html5/canvas-api€]2d€q.€?dom-偧€羜uadraticcurveto??€渃olor="b噋">伷C伭To?匫Figure聽2-8峹巊a>,宷嚒simplest,?ly頴ed厫€趮?(last)嬺啑€覄垘3to噾釃韋ir侌:囶扺?4?澢攪澢澙mo樶(0,0);
挌揁??亄5亣亐.詳葥邠趙湶?crea?our醨c?偋偊惓偡偝乣偧s騩ugh榟牏媟飂€r偙湗壢ally剆??0叿?秗妤睕殮 ?児pull湏?out唩mak€€n錶ong喰d?寃??ョョoff韔r€`pt⒗s≒ca夞?ha?勛?処work?th嚊resul塟th嵢傭s鈥攕u?壥s??S愳???5268????9??儬a唄eas?墧曪灧塯?15€輇娐0,?,3捜175,亖€`歐勶勶勶煙煙029惻02倊92''?炃??'塷'''峽"?机th??_墢?汞?11匞?勍5€xb勏勈8e?樣C?胠ipp穉Reg榅兛???儳Combin箄?扚s殘()?乄乂殘t湴乷乯func?壋呯c呧怘吜靑mi?€甬爓剚槧汎a餫佇儽?sub€乻.讈ho仩?by淧?骵tt侎??ect勶勱沨a攁ta燡encomp熇e剝?⑧would匵伻匒?,勈丠n悛€奧?湑噣?堬傪will?d?儀b匇剄卪剤def檂d娮兎嚪嚪兊metho?厁.蝟w,睿﹖?w?傎嗰乸?珹rr欚梻⌒,孒卥on?displa砙po踩厬侫啒??咾嘊nk碨€皭0a髞榾憁ask伱you勷n笒?€€r惼ope勘拹.??6632櫡??Exampl灇谷??畳s鑟w劵盦s,餽odu帗寔p媓蹦???8256????1鸿??竷?猒漺?-5ば爂?卶媍?偁?傁傁_懴懯斿聽嬔Screen()聽{?€*聽聽聽聽€!//?聽a聽big€(ox聽侎夃聽s侜伅伂碪?lSty喒=聽墍ack"祂乷?亂R柫10,聽€*2道€2?伅聽co?鰛卬text.save();
聽聽聽聽€!co?beginPath?乄乀//clip聽the伕anvas€ho聽a聽50脳50聽squar€鴖tarting€鑤聽0,0倃兦兟rect(0,??€*??亅????red乣ircle€鱾嘩嘩??墄trokeStyl唒=聽"傂";?ne?lis喨of?vailab丄colors偋偋偄lineWidth倰5冿丱並arc(10坅€3€3(M厾.PI/180)*€梹?6€alse喯堢/full堬€冞嚻堊??ose??乄庌stor俷丟?e挏?捄enti?掻仐傋????捵捲€3掔亸喿掔?卬draw梛blu?巕叡?i楶no€H?ped侘?呄呄??撶撴儔擄擄擄擄偗偗擄擄丱丱擄摽湥揥撶€棑鐡鐐蠐鐡鐎冏撶??撶??€*}
<唅骾ze倶剦€攺Z="#剺">Figu櫃2-10.聽The脵蜚攊??gion堟???p勄勄劼?鎖lepos=儬0126632刼刬?>Examp攭2-5?rst錃Hs犰arge 20编€(鈒ack媺tangle飊to魡x爇.螑,鱡骵t飖r嘒嘒嘆鬿 壸売愗爘0,枅??t>.詢8仹仸爴乢t>刪ll劚n兒s?€X厃?髉懓ficat剎吶W亂吚嚿吺榶卲d銟掅rc喪only嗮e偛po?唜insid€檌s堶.苅n刋y垘凧圵圧b姂?嗊?坄€!垙?and卻a頴w屫u傝卋塧凥time冓囙厲啳孮嶗1.0?侙(?let?opaque)壀檮緛from俖俖0俖俖俓戯t)鬶rough ??font骾ze="2">1.0
勄勂globalCompositeO凘ation卭€9p>Simple吪T儫儥,鎜r韾)in?)彑彏€噷鐚鐚鉏懶呚following靑st,€?鈥渟ource鈥潛A€玾??bout撋???,??destin?俌refer倄崸崱峫display姼o動枏嗺喿喿柗柗廹廲copy?€9侽偗偗?偔Whe嚾劺y飗erlap,厺?墥囼no堣€槆n?儣儣?儣??倧n-atop啛啛??啛?">D倃醾p?e.讎厗蟙啅亹?€聸惿opaque堊?伌imag傪D??€邝兞傌€讇諗H傷鈸閭蟼蠒j?p刪nt僄€穘cy錶se傿尫壇壇尫壇尫尫?n-i?導??導?導啗楥寱唃囘囘壪宩???姧€墠塯塯塯唎唎塯唎塯塯塯塨?塷塷??塷?塷攝悹塛塛?塛?€€揋墴??壙壙壙壙喛喛壙喛壙壙?壐呚壡壡??壡?壡??夛夛堶夛夛€夛拠??e堬堬呯呯堬呯堬堬l乊埀埀偳偳埀偳偭S?plus喛??um飂啑欶坥,?淴繗鯽繕s醦proach粔哶哵1.0?t>醽惣萴it塤啛啛塤啛塤?叓辩?傜傜傜??蔼苯囷墴徸?埿€?佭偗姉?€€擏?凎澾澾僶澾澾旝埧埧嫙埧嫙嫙嫕跋嫃傋傋嫃傋嫃哎囘????挨€暦?哀????咷咷咷???????傔傔?傔?呧徹喎????€讙W?嫙塐??塷塷塷啑啑啑塷塷塷塷塳?墂傜傜墂傜傗(Default.)訅虉Q?壸壸壸壸€讐讘鳛o傁?堊咓咓咓堊堊堊堄xo垪垪偋偋垪偋?傔傔傔唃?Exc报ive蟁帮垪醤?儉€卍鋏stination閙age.Example聽2-6骽ows鑟w髈me飂鬶ese鯽侌s鉧n醘fect?hap€癮re鋜awn鬿亖?vas,餽oducing ??6716???Figur匉11??垐p嘸/坓="4坓坉i??.聽C剛僅m?i?g鍋func崄聽?Screen()聽{醤d????仧>脠+箻倫ties.議en匒ass?倞str簔偳偱しr偳t>嘕?ess?ially?樌婤?俹???厳b?繒default厾姁吂禭a懜some儀d蟥:s亖demon咹?a鎒w飂?variou怬?op兞s姃€纀堭Notic僸at??シъ呥>髲8ch剏兏new垹慩hap€竨?r€阠urr壚岧bitmap,?冃?凎??兲廃y飊儬affs兊倞峚刢af殣閠閬e娻T?mea坸帹don鈥檛???s€?)?斣乄乂屫tor乷乲嗛囂st峺?凱壌xt壇p€鈇奱魊?p咢ncy帬lue.Si?幗T?冄玂崯崯傋佔孠o?嬎嫎f?犽?he丄cal醖justm殹煾phys€骇莯箤ˋT?two韔s睮m▲?孭⒏撣刧?s偘??ro曖嶺hich帋foc叞罢撃嬰娍囷囷>U?hood爔?唅€@rixム┘醦pl嗁?冟厙Luckily,禋do頾t攈?搼僡涾匑?s嶨媭倵倲珸?dis嘆s匑溔凁凥?垜?伮l€l?壔?妺by鉮ang瑧兿祰祩壪攪壪攪攨5攤€揷olor="#8e001?R?劉揨?晱晬昹暻暻嵾?>An颾j晽咺?ai嫆b懤0?g噃墠?多瑳fac??left (?€?or崢丠f?儠h傽窅伿;飦纑wise,鱡??儉€卛ll鮯e鬶is醼鐄ide).胦nsequently,閒鱡鋜aw醤錻uilateral鈕x (a?four髞鑲0r倯e骯me靍ngth)?t鋙esn鈥檛鑑ve俌initi?facing飦竢佮€衞ne飂侭f僪傑丏to€蔿eft.蘣t偁s匊佮t劒for騟ference:

//now聽?聽a聽red聽squ嘪
c亹ext.f姁Style聽=聽"?";??Rect(100,€!5€0);Less慇1:詨o塱÷appli墐shapnd饏槦 n醘P?彲m()飏?偳攽func€J?ced?唎媊?3??If鵲u?code鰁rb傕m,€鈝?s嶻僘ny8sul??i>慼h
!詡€b掽???喦喠嬤t>唃咺?ly垁f滧墈??熶凘壊?珹痠婥.桩羍w敳鏌觽n煯姧凓prop朻ie啿嚕嵢in?惝ge熀佒)劦?僰. <壐ilepos=0000141166懩color="blue堌u>Exa?聽2-7鏸v國嚥?凘€cc洦rd愌o呇duc?x澵叐咉,?巋us厾哾匃匁683匃匃勷Figur勱12匃勻.灕揼檊檈i??.聽S瑩湭?€x巠偮渿傦傦淥揋揃抦睹Scn()聽{爳€*聽聽聽聽€!???乬€!朹仧€3シシシシシ?儫?俉?亣亣綗綗綖乢乷??晋墬亗}澐€噸弽弽娀癷gn="c?er愰mg旲cindex?0065?baseline"倊71倂36"儤??€g亷6?????撠?="#剤"?????曻堲?塐?勭勭杒エgとa澨瑘e,鈛?t焋bab?di?r鎟om鱤at燇??焢boxㄑ?d俈looks靑k。獪w€ 乀僠th丳係墄i??did▁t乗,瓝?po垬锭叮??栂柺皬皬侶剦扼.觨,?嚬de?匑?翰move飂flef〩€x横爎?啔orig╔€詭v儜谤妜€?鈥渘剺?l埞鈥潌w唚熻??i倅,巇筯吋儖€笉jop卭嫥嫞玙?究╱28朝8倡夝er簆髾pht揯剱?enario:??black?????磤?fin幐側?丣昫again廻e斔夳?弹嗹353簾嗺弹潥3嗺弹奧?奧弹?煱R哅咇勓C榗s撋掸?傜傜掸?掸掸掸?禒祘嬟祑?癬癩仾皁??発20,€25€癬仹癸癸癸??癸癸癸秓癸癸癸癸癸癸>聽聽?唨?犅犅犅犅燾ontext.rotate(angleInRadians);
乪亣t.fillStyle聽=聽"red"乷乷乷Rect(100,€!5€0傯伔爙
<哸骾ze="2剚€攃olor="#剱">Figur奝2-13.聽R宎ion醤d鬶e胊nvas髰場侾塐?p勥勥勞>T俋small鈒ack髊uare鱾豼naff?ed鈟儮悐?,髈鵲u鉧n骵e€鑑t飊l?shapes鋜aw厐f嚑€簢繃粠笓W揜)廹t>鎢nc嚉刬c?凥we勮劷.L侁 2:譭韚st?姙匨?嫻峅巶溭€聞h?€賵{閠釃z€P悎柊亙?洀擾擾厙Let鈥櫀@h獂墍a鎖le嵗=焢0142883??blue喨u>Examp2-8???45鋏gre淍嫄le雃ep?t?咥柡儉旊嬊咷咷咰Firs?儓ak兂number傽柛摚姷?惗??嶘烝侚cre啽?ew鯽riab愷€裩ol?噖娨attributes?澤€溼nec愋ary,鈛囪t唨?m咠cod憗敤easi?ad玆峾?r:??塐?囩団?聽x戈穲稴€€b€?€?聽儍€茒'療療勛勛">N沊,涁恞?匴?.欮??峿恟泭塼偐汓殘?娧b嫭泦嶹乘翅剎栂?瞃幋冝?倶僩僩僤獼ccep獞??x啩啝傾??y??檈??』??癌噭desi€鵷op-砆摪rn佇儚劮儚儚n瞆?obj欨 (佔佒?佺t>),餷?hal堄?卪侰.諓F???濺泭汍嵂噓筁wou丠look靑ke?斍敮敮??圞+0.5*?喛桮桮偀偀桭斿fi??僕?嫙嫙?件綛攂tim囪?縜傜傜傜備va?恛恔橱仇攜?嘂仢€鈯讏W??娮劎劊+.05*亾?娺娺偋偋偁椺偳偲????s?懧唚冿冏冏唚兎凁x?伜,噖t勄??儻儻扲濰tha毙勑av吚僝?矉豪?poin??鋙?Ι?充h佖礗d垏匃勥勥垏垏垏垁?(偍leInRadi叏)抱????炕n嵷?唒ne犆晱.讎J哘simply?樑sam?椸?rom <救ilepos=0000142883唋color="b乸唸u>Exa倄e聽2-8ca??漷嬺娾盜厞诚殅焇whe筹嗭〨賝u嶣?sid?125,€ 岽Kstart獃冸?棄俢per陛塒get?嶇俬?櫻??ㄟ??by鬭k?up働⑶噊窜弊倗100)醤d醖ding鑑lf閠s鱥dth (<伕25飏igin餺sition.詠穪穞>translate()??method鉧ll醕complishes凁is.

叞wi佇need鬿鋜aw吢objec?tart垯wi圚€蒫orr€製pper-left€榦r壚勦s嚶咓咑x収厾媃?埾?t>姉is鈟髐b?c刯?刬?of飖r厺from?娪僌剋僌t>,剒倿塠偋偋偋偋偋咃偁:嬄a/>Figure聽2-14閘lus嵭愰橋itua桼旂旂劘">Conside欰at勧wa冟?岏squar倶???top斖rner.蓭l沒i侤挵亁125,€!伵靵羳醕?lly 100,€ .萶wever,凲hav亁湑d傳n鬆+canvas頾w?咰s僽?be 0,偘To咞?box嗞唃?n僄偞?侶侒乸鈥搨鴢2飊侁鈥渷?鈥潅嬜嬜嬜嬓T洝濸c崰u嵏嫙?喞ug爧嚹妰啝,厾娢re俙e叞hen?e?噹洂€眱?m懓冭?9?潏s骽ow儴淴旼旸302旼旼旼旳旼旲垼潡潡檱?醠ign="ce?r傌img騟cindex?0021?baseline"倊262倊475"儴漁滺€g仦6?????i??#剺"??.聽矷new??橂埰?????????劆50?????????????????D??a塯塯塯塯勶勶?Iummary棐??chang椧磓?€稷鷨姷5‥o椹Hould騩t?醨ou娥?俍.聈?淯縸??偛cod?滰煙乺(烎)猤﹩(?)珰?d爎壇n價c卹焗€麄傷冴嚙嚙嚑(€锠7?祑??祑??吶俉係50241俉俉侾Exampl俍9俉访dem诽汉岃rk?cre?挩喠resul敯??112??唃哹6?漐????-9梮R懮鉴戇嬛梽桰傂???傸泧泜tt>func?聽撻S圥en()聽{
鬭kes Example聽2-9<倃俽and骾€鴜醖ds鎜ur骵parate 40脳40髊uar儴to鬶e鉧nvas,騩tating錫ch飊e髄ightly.詠@仒ult閟骽own閚吙吔4007吙吙吀Figur叢17吙吅.

<哸骾ze倶剚€攃olor="#剤">Figur婐2-17.攈ultiple驆Jd髊uares埼???p劮劮劜>N屫,鱡€╨l鍃am嚴骳a?抌?ations.鎢nc僸鬭kes閫Hwo餫rame屝s:魝╢irst閟€j坽attribu?厫€聏-axis,醤d丆e內d伔伔伔e鶃?詟`valu??>1収厾倲n塓l偺倅an颾j毃俽re€爀,閒帄a偁to鋙ub凙乚鈥檚僢徍c€扩x鈕th剆僗o剹剹2剹t>.誷ing劜code鈋low奿佔佒drawScreen宊喓produc儜?○杽骽own俲a孒lepos=?155288挆拺b厴?u檊-18:曋樂挧??拠蚕蚕蚕?摽摴2,2€签嚛嚛噥?盭,€ ǜ50€侤壡烇?喛喛喛????80??倈刪倊€a??????婫???幊?A亐m??憤??剰?劎弉If鵲u鬳焢th汙杚,€ⅷ抐ind鬶at?杸咉cale鱫rks閚狍imilar韆nner醩騩tation.譭鋓d頾t魊anslate鬶e飏ig侌of€r偅poin丂o鋙ub€€€襥z乭?quare;騛€pr,鱡鮯ed€鈚op-left鉶r?仠canv剤€儻僀.詟恟esult閬a冟€歞僒醦pear€鄌韔ve鎍r冄?w嚾n冃o仛兩嘸?劆would靑ke偭for偪偦伆rema凱刬lac働俴圕from閠s鉫nter?僎倄by奛ing?並塆?be冟剎婞,??draw佲乢arou??俤宬(just夰?嶪厛Example聽2-9).俉俇6413俉俉俉俀11俖俍餽oduce?帨sh?厙?7074???Figur?厙?.

€醼!€!context.translate(x+.5*width,聽y€i?)侊侊侂rot佈angleInRadi俬亣亣亜scale(2,2?丱丱丣fillStyle?"red"偡乷乷Rect(-?€Q?唒喌啅冿俀}
<唅骾ze傴剦€攃olor="#剺">Figur?2-21.聽S?醤d驇裔頾nsquare颾j??個墖匴墖厀卲12????厊b>FINDING訦E肊NTER螰罭Y親APE兏?儣凎凎"3冿冴僿僺The嚀ion圍旿飂??t?飏€鄖飔her骽ape鱡鋜aw飊魝 canvas醕ts韚ch靑ke€衋t俢奡.蒼鎭(,醩靜ng€A俋?s寑鬿魷艀j傖塉侫ou凖befo亁佖厞,嵓,匶?巊,?w橷骵劇噽esul匬€纄xp?鎟om傷imp侌??m堃s.薳ep閚頄绬脗I鈥渼?鈥潎J??儊b儃峬嬤廕浫x???鯽lu?is鑑lf閰殗傦侊傦y傦?傦傦傦懩.譭頴e?o鮯?侽汍>boundi巂box丵or冃?亣兪when彋ttemp?o鎶@廫point.???桮桮桮丠偢lepos=焵0161777刼呾犌む垐€榰犨-22擇悩ty▉?奟se摏曈???愊愂糷s憍擔earli廯i?奒憾?懅傌n珗?our呯呯呯呯>.翍8xa侸is:尪塮4塯???歚text.僴聽=聽"red";兦寚??Below娚a靑s范us购囒濔姪va摳?rom?HTML4髉?fica烕A燴?wr?ng?乯5倕仧???絡幐?渶bs钾??ny灕al俴-?灛僄4?⒙work?弨侐孲t?borde梹???top媺r€弨媎€弨妽?聽Black = ??"1?穿€聽?€9td€)r儳儳儳儳儳聽Gr壯儳?儳08儳儳儳鯽lign="t?卭p">聽Silver = #C0C0C0聽NOTE兙?€^儙冿冿"3冪冣僶囒All鬶ese僺?ues亹€纖ork€Pth?堢??堘strokeStyle堶乄乀醾辅8€A倗?倗f冭倃丟丟">.??€?/i>?倸封horiz?al,鰁rtic€Q儼?go旕摎pattern;泏i>?偑variety偋亾that 鈥渷R€?鈥潖{a銊r傂poi刞?circular?珋€呮ashion.蘣t鈥檚靜ok醫髈me鍃amples飂錫ch.

Linear鐁adients乥儀op?i>堿poi劰alo?the靍ngth墤€qobject鱡啺sh鬿鎖ll奊囘奊奅?奪儾="#555垘嘷堢姙婑娍娍傜E?聽2-14鉹eat?a張?勏勏?s骽own婛冞冘9355冞冞冐Figur円23冏円????i咓咇.聽A鞀匫匤帯偤blockquot唨傜傜??2€xtt>funct歱聽drawS堗en()聽{)?ref别nc僑new?.葊泻j儊?閠:唎?哤???焪撉焪焪???吳??冪冪?啇f?parame?堷凰e 勶勵凮凮冿t>韊thod鉧ll峄纻A瀳-left横x簱絟€hy€jcoordin?嫎start伮巜残we倯?倝wo鈕ttom-r嗛箭侌e傂佺?O?e胞傘?刋嗙嗗奝哶哫?go劔?亊嬟亸t>.蝟ti慫???娔垑吚h 0鱤en懇斨?呮;?op?i?wh鈧鴕u€h?栐er冭侘t观?3??O柟?have鋏f帹夈?飂飰袑'丳€鑞醖d?熀妶卑噷ak層?嚮.該Q淛i?毃lati儴喪篜飵8偁?@ong?冭惪wi夝冓惃廫se?劆愩劽亪use冇?儅犚奝爜?鎟om 0.0伖1.0?歐???愡秝汞秝睂?筄筄丟丟革?????呄呄?ore,巵E歿?14慗挌▉廼爌將浄塯洶呯t佽a彣e?仧仧仢.5仹滰(徍?)惓an??冪侽侽?侴濝Th??緼楘shap浹摪暻ly鍁?債憪厠眏涽涽涽嬿N塨ne?墄匞?劰Style吳?佮牨檱?e陾!狊d枏愡惽勛枏???徺答gr撓撓撓???F痟lly囼?rectang??帓anvas呥傦傋傋呥呥呥呠R?氿聽€!?€2???僩僩?痮哋撪哤€涞 c勩?W噝鉮伬嶽丒?utput偳靑玒昿堶叝厳pt"鱥dth?畝?"0pt">c€恊xt.fillRect(0,聽10€15€\);
Example儴-15醖ds鬶ese魒o頴w偵led騾恆ngle?o 儚儖6863儚儚儚儖4儚儖俙create偀?3308偀偀倶Figur倰2倵倱.蝟tic?hat哬鐁adie?哘s鮬€瞐vailable髉ace,妧th€襢inal儧仛ing飖俢a卄靉rger?n€猟e仒?僋?.Apply1a??a髏roke儳牐僟3僟僛潁s悭竍?i⒗倅ny骽ape鈥攅veΤ?ound儜?.??4214??︹6璆ak瞐珚??from僕动动僕僕动僕丢?ビs咢惎é嘯檘?t>嚀閚stea?f佽卂匸垏垏985??悼揧??show坽very鋓ffer弝res摠????圤嫎杧A?l帩扷瞋氝傜傜瞋壙瞋瞋瞋ⅦⅣ矎矎矎矎矎矎倗部部部瑹乪?诧??仧仧??仹仹仹砄??哶哶?????侊奺庴晨晨乬乬棔媤镑伩伩伩伩?伹伹伹伹???侖磑獥獥晣晣晣癬癬磑磑12磑磑01倊2€`磑磑???磑?磑磑磑?濔H濈濈?匙塆劮勶勶匙?匙匙匙匙亪?x冞??儣儛We骋als?傾俙嫨籬??鈥渃losed鈥潿$made鮬?poi囸,醩n???5680??盬?7??.怜8onsid?辫剒鱤杠fin埜凴丵箁am筦€dtart??堬晈勏勅忕?僪o????敆???????湡?????⒎?倗???乬?仧仧仧??仹仹仹p(1,'rg?秬卋(255,0,0)');
€*聽聽聽聽€!//聽Use聽th€(gradient聽for€illStyle.侊侅context.?聽=?僣丟乄beginPath(剬??moveTo(吜???lin?5????100,5丟丟丟倁乆丟丟丟勠???????stroke圤?娗ll???close妛??}
In鬶is鍃ample,鱡鮯e€╡ <俌骾ze="2"><傴匫匢儣t>鉶mmand鬿鎬痖n飖r骽ape儤th偄curr搥傜傜挳偪t>,鉹eating侜outpu伬hown?傠color="blue?u>Figur晲2-26.

弐s忷new拲堭av拃愸ed?points.羢靜憪a伋€会r亁?d,€簳2w€*ork乮偍expect悋??嘄b唃?555">Vertic姧ts壙€ 偢偀3偀倹侊來叧?棃a鰁ry廯milar韆nner嘙帡鯽riety.詟纃iffe浉ce閬Qat嘫mus懆噚ify偫?湒y淲?va峢侒?no?仧>0仧濋爦乄t>x乄傢s劊bo巂b伅伅?仼.??8230尫??E??18???掻from傳傰568傳傳傳傮7傳傮?喨??r甈嶐姌幧嶗渿猦produ嵭?勭79194勭勭氱氠勥桹桹敺桰i?夐○昈??俬狅倵倵倲幾unction聽drawS墭en()聽{稧竾聽?聽g€ =各?L玴arG勀紭聽€!€!?倗倓//dd聽?倯?聽stops.乬乨gr.addC?S??'rgb(255,0,0)'?仧仧仛.5仯0,伈仹仹仹仱1??哶哶哫Us?哯?聽f啓€⒒V嗙來???gr?乄丼beginP朠(???moveTo噚???笰?5????巂,5丟丟丟倁徔?丟丏????勭?嫎?stroke坃?娮ll????妵??}?糋糃?€嚊邲邲卺lign="c悩er炨mg虬 ndex?5?base嚵"倊?倊€a儴??€g仦6???爂燿??喊剺"??xA?e?堫塆?勏ご筜only箛e?tw珖砏砏珖癵砏珡癮笐俹蚕俹俹俹蚕俹俬緍e鞃 ?ing€朼r堫?囘3囘囘?婑s琡 (匴匴匴匴匴匴匴a>):砃宱???惂?瘡檁瘡瘡瘞?€P?櫑恎恎??垕new揋垷垷怶垷垷垷怶垷垷垷垷剰垷垷垷垷ontex?苺卼.createLinearGradient(0,聽€!€!100);All飂鬶e骯me騯les鎜r髏rok€`on鑟riz偢al鐑黶醦ply鬿鰁rtic€鄌nes. <劰鉶lor="blue">Example聽2-19鬭凒勔hape鎟om傳傯78230傳傳傳傭8傳傭,?ing閠垚th僐嘄閚stead堘儉l丆,餽oduc€q乹out€袇own仒匃囧166囩匃勸Figur勱2勶勲.

Diagon僶ts傜Λ偀3偀倹You鉧n錫si祒?徜偗?by鯽rybo皘se惱d ?◣x恎t>醽(乬乬乧y乬乣par籋嬭贺凰仧仦﹐﹐()侴侤瑵:眓媁?垏僩僢璴璤璤凎璤炆璵剣廜廕寳??To?perfect寃寀,醩嚎嚎杭351嚎嚎嚎昩9嚎郡兏square嬥a縃s廠尃埡兩€墑焺?詟竎ode仭provided??82766??匄綗-20?靠???靠?渹卭卨繃惂偀偀惂惂繃繃繃ě繃??????倵織織織乬糭糭織糭?仧仧織織仹仹仹織?織伹哶織織織織侊辞妑?繃乄乄繃???繃??儳lR滧?获?亀亀棺兦圤棺ハ??登登棺棺浉63棺棺怪0棺€`棺棺?戴??棺櫡棺棺棺漌漌亐e瀞惯塆劮牽勶勶?剅4篟R?僄供筿傇汞汞俹defini?cess鎜r騻撤墜ar?üvery?milar.羖though珮伳嚩take?ix竾o獂儬婸琀r抈er?n瑨four頴e刌a?杯it鮯偫畺宩鬂x閐ea?踌?€骳?ge⒗堊堊堉叝叒睶儴d傖壀備?餺i噋墆€﹨Ii亢w凥ircl兝猜firs戉€毚?鈥渟tar?蝷卼鈥濄ircle,醤d鬶e骵co€X€婚s€?鈥渆nd?.蘣侌檚靜ok醫侙鍃ample:

var聽g€ =聽刞text.createRadialGr€8ent(50,€25€1€100);夿a騾us伅伅乆25仐t>;嬁d兿兿??兿兿兿兿伅仾?仧t>.詇?will錰fectively銒j魒o鉶n刬ric堒s.廁妎3妎妅W唅奝olor髏op?same鱝y鱡鋓d仒th€蔿inear鐜磗?嶗嵾僿???gr.addC?S凐(0,'rgb(255,0,0)'?br/??.5丆拺丳丟丟丅1?倉姧摟摟呄呄匬a摌lepos=0000185411唡夆="blue丠u>E氂聽2-21饀t?漄oge姁r€H??resul?hown閚 冏冊6064冏冏冃Figur兪3懾兿內怟岮???i咃呴.聽A峱€墪Zal徫聽聽聽聽€!context.?聽=聽gr;乄乄丷arc(100,聽€3€3(Math.PI/180)*€梹?6€alse)傜傜?(??爙<唅骾ze倶剦€攃olor="#剺">Figur寴2-32.聽A騛dial鐎A侶醦plied鬿徙ircle?倫墬単p???妏鎖lepos=凐0187906勄劻blue丠u>Examp憏2-23鬭kes鬶e厪厡from 僄僁66僄僄僄僁2僄僀and?s閠?le骽ap凒?r凱an€貜坱ang€?詇is€癿ov厎奰square匰€ackgrou僠of€拋?/p妛="3妛妔We銉筶s劯?y飖r垙垖厾倸troke???呥??樶,醩凁own閚??9563????4??俹俴90289俹俹俬斂3忂俢埑湵堊渙揈i剣剚栙塇嚚?堳?倛?偡偡偞殫殥function聽drawScreen()聽{??聽vag€ ?仩ateR嵅G劶(50,€25,ч€!€ タ偗€!//嗮dd琝奪聽stops瑆乪gr.addC?S?(0,'rgb(255,0,0)'┻仧仧仛.5仯匇伆仹仹仹仱1??哶哶哫Us?哯?砏砏侊?妷?砱砱乬砱砱€1嫧蚕砡€棾_砙傋傋?e砱砱砱┳砱€嚁O擮疻疻砱砱6砱砱倈102倊€a砱砱?甇??砱樧砱砱砱灚湉湉湆诧?勶煰劎诧?凮?狑湏痌?t楱萴alle鰁rs燄ゞ凎哆凎凎凎?凅,蟓嫯G瓹woul编鮬飫 €q妧.蒮鱡靍f厴?am€(岃匞匞匞匞匞匞匞匒?劊hav傌吚lid??鈋caus夐唃唀奱乿娻??me抪錮g問?div冃€2mbp:pageb峆k?€瞼*白?9??昒6€xb敻l?g踊乭th衋t凱ns撪嚙紀紀傁糷w嚬c縓r鮯倷bitmap閙匵s崫綐v孈憻宂340937宊宊孹C勷剺聽晈孍but鎜r頾w,徖t鈥檚鬭惛a駏ick靜ok?戓刲??匑?s崜p嚧俽s坾屓缎环???奞?are?it徣媝d娝???洆嫶()?t>婊搱hic?喰?wo僗r憶s.詡萬irs掆嗋??I囇傔傌objec亹nstance,伻d檽e?d俍俉俉Str庿俖俋repres栢徚婣to枑splay嚡??仒嚢??夓剳id欅孊.讘蕧亜榣oad姁嶼?飏嚛凒嫲o伬r揈€?屩庲a幉n傯庯庯庯庪?傌帺curr働ly侾u╤y慉潃剘ls:倰ul??淒li鯽栶?催测??磑俫?灖婄婄婄??/l??笀?傳???????-x????"3?????????y????"4????ei?迉単ht="3pt"鱥dth="0€`>no-repeatModern鈘owsers鑑ve閙plemented鬶ese鎜ur魕pes鬿鯽rious鋏grees,鈛匄tandard 厀卾卂匽骵em俲be?韔st鉶mmon.蘣t鈥檚靜ok醫閠頾w醤剛n鱡?ll鬭ke釁餴ef乶俼o€(厛h匄.Figure聽2-34娻嬒a啇h?刾s夲鈏tmap傎l餫tt?th?呰can鯅竾鴗e嚴this鎢nctionality.蓢競y20脳20鐔Xn鉯rc傕on€萾ranspar岪鈇ckground,髱d醽?i>.gif?頰m€鄝竸筥20x20?塁a/>NOTE<€g鑕ight="3pt"鱥dth="0€`><伭骾ze="2">Each鈘owser丂ll骽ow鬶ese餫tterns閚徜iffere侌manner.??Chap刾聽4獉p>C?t嵮Shad痯飸Panv?€恜es帛€8凘傳?傯?彴醖d惏俿??壢鋜aw??丠?us冡four寚s.羴€ith丷t?d?城廘previous攑ction,€癷宍啒橒鑳not鈋?ful書i帺m沋d凲a偍HTML5-co€衖a堭番s嫽姀嚐嚐嚈噛a噷鈟刞t妸啰奬properties:偠ul偪偪岲li鯽愋⒏???俫?彠榳榪卥Off卄X槸爂燾/l?刉2刉刉刉刉刉?刉刉刉凴Y刉刉刉刉"3刉刉刉刉刉?刉刉刅Blur????"簮?????????C犪凣凣凣?l斶傦傤T╓?嫍忕亸亸?亴?s煝b渉ositive飏頴gve.蝷T乵獵)e?o瀝left?top騛th傝?bottom睹嚒.試厳巁巁瘚??儴佮伇?傭亁瞴錰f俢咢on乚shre噽榇0伮⒗??個?trans?m坸傕€8rix?????媎抽?哸鰅a?4€onst?鈥攦笚gb()傜傕佇丟丟gba丱両個乆?Ю?儥tain€Ya敇x弡?旼旼???2?94???E汲聽2-27???俹俵0俹俹俲Fig?俛39俫俢sh甴俙ew鋓幦嶳box??n圎var雏弊??4?〕align="c穿r勅img騟cindex?0010?baselineO4€駛|304"儴€g仦6???し??="#剺"夛夎.聽Add忈灄?obj槰s娹チ?????徸徯儚儚儚儖僎??墴??噺棽func滱聽偣Sen()聽{聽聽聽聽聽context.shadowColor聽=聽'black';??亊Blu乻4丟丟丄fillRect(10,€10€!0)亄仹仹傛OffsetX傶-?乬乬乨Y乬乬乬???????丟??5??伅伅吳?10?乬乬?乬乬乬??rgb嬥劮?佔佔?8丟丟丄arc(2俬聽3€2偵聽(Math.PI/180)*€梹?6€alse)傁傁奃(壌}As鵲u鉧n骵e,閒鱡醖just鬶e <倎骾ze="2">鯽lues醠ong?th???壣??,?create€坮ious髞俿.讇貐X垹o?€滏or鉶mplex€凥drawn凨p娦勑nd醨cs.

What鈥檚螎孒導儬俉3俉係嗎overe?靜t飂鐁ou厾in奝is銌纓er?ntroduci婬?ways魣爋nstruct餽imitiv巋?埾埳,€ow媄妧塈€rans奝m偙m飪羴va嬻嬕discuss匟?兒mposit嶈rot尠,骳al€8倞l€挄i冇嵶嵰?s€妱?聈t勑?咅only陻qbegun鍃p滺嚵HTML5脛銲匸n嫚?嗻w儼妏ok醫厏?刌manipu?魜賝bjだ劌囌?????????b>C卥犩.聽T儬喦as詣〢PI扜扜扜?????嶈l媮developer憵render圁氊n侁檲ge摿捰枠奾re鍤h乹ricky飏媼?i?sible岺?佽?invention?堬呑呑?a伻provid?刪in-dep?analys?樃屬??I冟cau扻it閹1?亄mo?asic檔?era檂桵How??囀don湀me剦亐儛亂fir偍?凂f捓u??d斅f?楕塰損y鈘?嬭?俒?靉倛par壻潙m夝?彑壪壪彋儼俛a鬷m嵤倅rec?倛偘whe庅壇壄suppor墣n勵俲spotty櫳best溊苦偭n,鮯?mo戰nizr.js娚t乸噦挭傰woula灗be刞a鏾o︵dea嫍僫€ t烜c嵢?€葹@僰?鰠H掄s (?侤s蒃)儐?噰噧嘆s偘怚斍??婠?醦plica?頰m鈥渻Srоger鈥潏ヾem戦慶传擹桜渁nci€皸7??.詣憙叻)劙pla崍?ng淧li捾伾嚢冠楻infin瓐顄mb啺?樄傇傞疘a廆eful?o€)骵壈he?婨廚?om?醼(gb拞.虈萺禬妕you呫傃況屢倐?n?噃?朾倔璒?戲睭孒楯??D奒?B嬔??憦倵倫?嶰??s??糧奎?€P冮? .匹懜莚evie笜或僰???s构岻裹mak?m灅rk椃棸旝墽???"5?嗺嗮#8e嚢2">審膵;????僩??ㄉ檺?槓撛€xb?傷寛?嶔榋揷吳="匄c€悅8.€?/€垊俭ty曫┿st婬ard鯽嵢s?CSS€@倅丣at籃bu獂:??€?丷?t>,乢乢乑w坺乬乬乬偩€悂W丵惞亀亀乹?亀乸弿??縲サcuss錫chЪ攑囩楖detail督up燻?ec橑橋23059橑橑橊Sett準晻F?橭橨A勅you頴ed ?顎卼o雗ow頾w閟鬶at徭ont鋏signation飂髈me魕pe丄required.萫r€抋骾mple鍃a€B仚etting€?0-poi偍serif?:

<剼size="2€xtt>c€恊xt.€?聽=聽"50px聽?";醫tribu圥and冴it俻?st€╝rd肧S剫,飏?th€饍g僨CanvasGradient僌僅伬亸亸亰P?ern亣亖bjec嚚We儉ll鋓scus憠e靵傯wo飌憏s€檧恑n夈hap€x.弾?3??Finally妅c€X奊卂奊奀T€H()厙厐method,餫s夠嵔帯be咘play嵷婣??俙x倵屬丠??y??posi?慱t飯D婒????Bel湅an殢f斬垇ree鈇sic靑ne僙code湲????HTML5脛J?橈樧剹?囘????
C珦櫢滰仺婣formElement鯽riable.詇en鱡鉧ll???addEv?Listener()俹俬method飂佺佺??仺,骵tt?儭e傫鬿??keyup佭儉and伔鑰xler侎€ゝunction俖俖textBoxC仒ged偋剏which圛have鵨剒define:

兦兤媝聽圤t聽=聽docu€i.get€腂yId("?");
刋pte孒1.蓺s餫ss偢o啫para柊挵w橓?s?娦擑噺噺匓??objec?hat吂univ??y顐饌/?e??becaus媭t鈥檚錫sy嬌r恅mb壢敽?3????匴匴匭c€hains狃ropert匰d??tar暼??嘡hold?referen戣溙HTML鏂h鍠s亙巙扜?傕c??戸崹Жurn,佔佔?佔佇????潿懶???儭new嶺?d獝亁橫??嶲タⅡoccur (i.e.,????t>).譭娻tri?倄斃円敼d髏or憗皸偗偓messa姉皐皃汍汄JavaScrip媞?偂?y髺傳傳傳傳傭杬nsid∠??draw儴een’??o滒i姾旦nvas.蝟w????o澀????癒蝉庿幆?嘷嘷?wi僷appear 鈥渁utomagi?y鈥潰鄥縮部瑹瀘部?痕玹e)聽{标聽聽聽聽€!?槼?e.€k?丟聽嗆??.圧乄乁?(祙€脈埧晨晨???栘jus?p?a靜t殥i揾des擷bing?w廔媕八?s暠焬rol报ith睴睰??彾n鋓spla獺岪results嵐偵5脫渽`?re弍攓橓yp憆co?s儓r?m湙?凘h礹?咥T嵃羠r呝?How仚,嗘?r梄鎟ox劯in伭?dep啺ag€?殹tead嚴cus?厴dif?仇ay綒€hd稜嘺c竓u勅塉data€渤s墐嘗?嵡9嵡旂斿5€xb??#8e钾暔U勞m禜冐囻?慻锭锭僟丁孫a?伆夾?inclu慲戰唄fu?÷???刅??庿恆suppli╤垔a魞Isng嫎堿??髈?泊i?bou伜ba??ur屖呿set悜s (?fac畧匶,錿c.)畢峳?a唚唚?M把cs唃决.見欘欒????娰h媝on窐a伕ng朠?:倃倃嵅侴姪嶉乄乄乄償荐噂仧卂卂卂匷giv?you粙xa€爟2奍pixe牗絓?w弎橌?岔T炠€h夥鞉虂猘ttemp瀦?c帹?偂櫹杦櫹喼4櫴C?倆勆瀔????偪>Fo????戳l碭睉?煈????????€I倛r慫€鈯p曑??荡傦傝ol孫孠Firs璛呚洜ri﹉зanc????僊by餫s婜?佔?伔伆?iab椮(甡ch碭ld扚剱go悇瞝)€a????僨ニ旹2D祂stori?巰卬g閠閚狯ariable頰med metrics:

偋偊儼聽偺聽=聽c?ext.measureT€`(message);冞€9儫>餽operty飂亸亸圵仦,鱡鏴t?仧?亸>傎乤噏?pixels醤d髏ore屜屜屜傜倫?W?屵屵屵??屵偡屰傓岅嚹.佉寃寃寃僌僌僆N倛塨calcula劏?ce徃r垾screen鈟鬭ki?姱?姱??canva妅divid?妰half (俫?heC伈嗴/2偳t>).茠 a咉subtract們?偀??彠彔?仐媬?凕We鋙佽is鈋caus?on噺s閟鰰纈婅ly醠ign憳t伾e靍ft鳂p圸s埿splay?without墍伂m寈鋏s€Xati?(m敊僯佇a鈧嶉r勜So,????ne凔mov枈塺its飛n惢勶f仒崏劆c惎惎橫€aabsolu戉??塲will鮬d?厾佋n?sec啿坖?塸ow€鷬绬o?l?兤鈥檴讐?楓椷椷?弴?xPosi剚?(擮擫)聽-€翋绋W涚涘剄????4€xb>W枲妶?噛佊嫰xt??僩噲?3?傷恆w倧fin涒傁傁孉o鵲u嵐鈘eak€硾)?long拪€鴣檻儚_棅n採ultip?lines,飏惻摌??愗ll晉悜pose朼痟m.詾??t>?M瘲瀘bj?do?not銆癮瓪嘰?傆嗏傱伩gi樴?fu晿pict防鍦榚r槓??▉欻嚛accou俬倰glyphs売d儼?枙ba朻埨壨亖?hi墍€厔摍歨elp尓estim欛h侷烚a亱???,厀卲off仒much閒偛爫???wo嵐??墶澅??pac拋would淍?倴?堣﹁堶?hi凁€h亐?吚波嶺ky.濐枃枃杽F劏our╜mons瘶滱?€`ead姠ry?o♂姉姃€▔O?朩﹝?夽傅攐攏y擾擷ia?冟??simp冐??one-灯溈刼晪defa毿??挱??冡慄嵏伔伓middl仹仩,?渏works鐕醾J塳叀??talk憙儑???癎癋?狾?悷?僌?屩?妅係€g兾1僸冏€`陈="堐凮処1甖€揷olor="#000">NOTE儣冿儚冿冿極嚪僶嚢I曚exa?す 傹???=?1486735?壧卭="blue€榰>Chap嗮聽11textThe魜梏o騟nder飊魛癱anvas.x劅劅劅劅侽劀俹俹俹t>餺siti匵of卹?呑呑呑呑儚呑僶僫y僶呑呑呑侽呑俹俹呑呑呑呑呑呑呑儚呑僶僯maxW?儳???倗??imum€脜/?as?ed厪厞翏?ime仜is鱮嘆ng,髐pport鎜r€觩roperty鱾榡ust鈋丳醖d傌擯browser圵圫a/??埧?醠ign="center埜img呅ci呧x?0067?baseline"埛49倊501"儴??€g仦6???岹岲i€攃olor="#剺">Figure聽3-1.聽fillT嫳in醕憠巒侌€]刧慓?幥斚慻t>c€悆.stroke僸()懬昤fun冓 (岺shown剏)閭爄milar,鈛嘝匄p?fies抸out屬拻圷匔€鄌擄撹嗰兟鮯??仯僢e妀€﹫g坓坓亐C倅坃澒暏;??價傁傁傁傁.€褌梻梱?媈call靜oks靑ke:濌椬撉椬廜??庯([処],[x€ y€ ]彿挿挿僶僶僫wh燲???劅劅祑儣???俫祑祑祑┳呯劮劮劮劮?劅劅劅劅侽氝俹俹呑呑呑呑儚呑僶?呑俫呑侽呑俹俹俹呑呑呑呑僿呑呑呑僶祑祑?????祑祑祑祑厪祑祑祑祌??dono倄ppea磋mplem??ny禑?禑唃堢唃睆睆禑禍75禑禑堓50禑禑禑?????峯禑?禑禈妐?妱?弴???弴崰n笟?a數儌Arrang爔add便abili?f案€伃h嶒壺ect椣攇粫攇t>,丱丱嘒乢乊働亀乿bo?丄.觿堸????w劯鏸v晙潖仐吳伔伆?鈒ack鈕r℡(??唶??).蓹籋TML伹伹<婙m>佔圦we吇宲?佭佭佖孲侊呍box佽瀐冑id侘侘噾OrS吅佺兪hich冧llow忂徹mak?冇?s瑚????刜刏F僗聽Or聽剓:
,鱤ic?€卙韊ans詄xt羠ranger鱥ll醠ways骽ow f?伇鎖rst:

傔傓var聽?OrStroke聽=聽"€?;儑€9?>囆and?e鎢nction妎???()兦姲to鑲坙崯?娺娺剰娺兎兇剶??d(e)聽{?聽聽聽聽€!敽tar嬸寊e.€k媰丟偋曟並.value?亇drawS墄en(嶌€脈??孄囘囘囏1噥囩€`align="c墾er坃圿b>EVAL媺b僌傁??"3??偗>Whi峘we?d殬separ恞怴沋each????applica乊s淪is溕p?,€墏豯ity韆ny飂仼m鱫rk€閍n閐偢?l鱝y.萶w僅佖some鋩`lopers韱♀焬clin卲搙us?昿垖?扆e嶱???嘚儛u?as楰ollowing,€攊???滊勦ad棤o佉HTML⑤€坅t銉坮ol樞???嶹橶嶹?琽琲t刞Box?槑?keyup壃?聽?檞爯賧漇('messa仭}ミ?吳吳吳??侊叝叝??叿叿厀厀'?k厽厽兂ぶ佭?(孈iable伡?€!攤?聽+聽'?V'尫GG€校棐燨????扆T暲co?above毐s毀乄毀毀??榊铂?execu€`Java?ip槞僪㈣沍l煾It鋣nam營ly侓淸€皝`∈氾氶s泬?€蒻ultip???s鋙頾t頴∷Лindividu兩??醨ar?us犘?囷?????caラit飌e?upcur℡holesH夃mak?debugg儭壥mo刞diffic嚫.炸1t鵲ur飛珮isk.愮愮.颖恫ha朻th吚髏抸(????,??s呑??乄乂both丟t>)堚礏??switc亸垯卋斌o朙?choices檂榗€冮漍偳??厈?se?亣?eStyl?刬橸lack夁伅>#000€亸噚?h?l綒笽厒ol暲d凎侽?搁俉嶩聽聽聽聽€!context.€鵖tyl乆=乸#FF0000";亸亸亷T€H€?message,€ixPosition,y€U)??break€總绤;stroke匫兦兡?卂卂仧仧仧e卭卬卂卂?卂卂卂?both匫兎?姉?侽亸亸??????噂?兝儽兦仧佅佅?凎凎凎凎?塐€飥絵Examp噳3-1骽ows鬶e鎢ll佖d€Por試P羠ranger.€xst閠飖t鬿骵e鑟w伮user伬n?ls閚萒ML醘fec乣?canvas?here醼 not韆ny鱝y冭o鉮傾乺媞嚫re,鈨hyou?儝€鵧i側rence鈋tween 嚝size="2噲妏慹娺t>醤d乬乬幾亀t>.蒼儕n剚s哷?鱡?堾updat剳is醦plica?哹onfigu嘫儓匵d?喼?multi寑囼.聽聽聽聽€!}<€憖*€弨弨坒unction聽textBoxChanged(e)聽{丱倢var丳arget聽=聽e.€k;乄乀message??.value乄乁drawScreen()€鲄g単協fillOrStroke厪厪傦厪厪厪丟偋偂叿叿?叿叿叿叿€_></script&g冹€ead€梹恇ody€弨坉iv聽style="posi?:聽absolute;匟op€?0px€hleft€u"侽侶canvas聽id="€cOne"聽width="500€hheight="3€p侖聽You夽browse€Hdoe侶no姞suppor€HHTML5聽C傄.?僛俧€蝔orm€穵 T?咗?inpu偫厃斾?placeholder="y劜€閫??侤奪r?€臚?聽O伕廢:仹仩selec兇悧ke坥乁op攃?乲?€I囀?伹伹伹="s?€[佺佺佺佺佮both佉€I伹伹伵/喕€菈?崓屜€縺笖@?€墪W杗tml€?tt><侶n€9blockquote><偵骾z?6€xb>Setting鬶e詯x苼冃?p倵栬倵倱Now佮at鱡鑑ve饟9d魝aon偮朇,閠鈥檚鬷me鬿鍃plore髈€€of乑basics€qs勏 吙="2吀?c€悆.€褖痶>餽operty.羢鵲u卲ll俻e,髉ecify偟偑崢鋓s叞€聞咁湏閟騟ally頾乭ffere佡rom鋙倉sa喒h€yin葹犪nd肧S.?屵屵奜屵?5屭€揷o?="#8e001囪?觼8,茓P讉?僢S聤"?巁巁巁?It嘠very錫sy?╆坽?奱be坸n???ベ蓆€豵uire嬨?e佱堷厷w卼偸叓?哬壐a墎-complia€纼跒饗+??ap€钃o愶愶愶愶愶愵T搈?m側looks靑k?s:崷tab?bor┦0"鯽lignop儁r€弨媎€弨妳?聽[寘€?1吽€珗?/i吶咓亣侸]踿蟼O侽€儌W亸俉俉€蟼W劄€▊G?侴侴€蟼G侲廞侴?侴>]晭td€)r€)??="4?曽Ana懭e韥旲?猈????扥扡聽=聽"it庎c緢篐聽24px綡erif"叿儻儸or?仧亣亣?????n枡絟?hte綈50匒cursive匴匴匴冏冏円On?洀??洀洀泲澚燩????惱悜珦?af?ward鈥攗ntil?????冦僫an縳er???????????Hπlォ瓇瓛?籖Arranger孫導璚璚?I??惑i?m答?a髐b囻?avail吢options??夿藏偒chose疛s绞ma?俬琎ca?鱫rk?s?ny鈘ow樔瓁s餺ssi儬.葞槷"骽or眕undown匁剗唜?唦岋埧?岋岊4岅A噖感婳婳婳倵>慇鋏fin秬?禂俢嗮?盬盬癎盬盬€彵W┓?濻杦ゞ椞?€蟻鱽螗k侘?侘€蟻鱽髈bliqu環???€蟻冴n汸i?疅疅?帍桮桮桮桮桟▲鈛t牊牊??t>扴儻3pt"鱥?卍th="0pt">Here閟鬶e韆rkup鱡鮯ed鬿鉹eate€阥ont髏yle <€cize="2"><select>鈕x閚萒ML.變1d倱id飂備rm銇prol錻ual冮??€慡??t>偛will吂個唒傌when哬list€P?醾焸焎hang倗厬event,?ich堘dispatch垹偛厵僗r鮬d堷夒value唻仒唋勥do€藙B€€仚?厁偂€鑦ersion?Text羠r勯r:

聽?opt?聽唕="n屓al?€[?/?佔佔佔italic佉€[佔佔佔佔"obliqu動€d佺佺€煄€9?壔p墂墂墂塽4€xb>Availab桯€趙佉s偍?宲偀3偀倹CSS鋏fin愡攬俹ts醩帶t僢border?"亗gn="top嶚r€弨媎€弨妴"1弮峩埀€8?惄?€蟻鱽骲old佺?佺€蟻鐏鏴r侘?侘€蟻鱽髥癶t????€蟻?00佭?佭€蟻邅?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻?佭?佭佭€蟻輎nherit???€蟻侞auto聽侘€9td€)r€)澭燺Ⅶ燸hav簩only?漺?,??溈?????and乢乢沷愤碢匙承.賝u鉧n醖do€(u︷as鶃seーit.ㄏㄏ坵">Her扛ǐmarkup?堚縺cre簆€戛gt呑呑??box?HTML??峎勭癎??狗共W?箍??箍箍?佔佔佒嶚伮€I伔伔伔伔伈er伷er佔佔佔佔"?佢€d佺佺籵嫍籵籵籵???籵Gen?c彄face籓籓拠?倅Beca戰??not鈋髐?which?ill€羇揪??brows朻at?y鬷me,俌潑limit斄攗勧鉮oi???曺tho刋th倅?defin??鈥済?鈥潈魿SS髉ecifica媔:梂??if?煰??ans-乢乢乢乚cursive丟丟丟€鄁antasy丟乬乨monosp?亀t>爇悋??爮爮爮爮?e??滸旓????昗勛昗??爚t?F?爋??"屄?€R??伹伹"幆侂€~????"廳侜€d佺佺佺佺"?佲€d佺佺佺佺"悊侐€v??⑾嶇⑾⑾扥???⑾屟€姇矏 5驖i銆衦o粈?傳>To漒?攈偛of斘》implemen≌new冘?拞剅嚄昿f県匌.仧仧仧綆?n乢乢娧inpu娗仢typ?秬卐鬶at鉹eates狍lider飊€萫萒ML餫g?o靑mit€簄umerical閚pu€爋?specified€纴Jrange.?€?/€P僶僴min僟€9?blockquote俕3俖俒T嚾佮imum鯽lue?咈?剹剹剹剹剸ax剹剹剹剹俖剷ax剹剹剹剹剹?剹剹凱step劅劅劅劅俫劀曅b桖f鮪it嵗o髠€鱤e???攬moved??????囮厙厙厙厙俹厔default?吀?劎劎??Her嬭橂marku噋e鮯?囻?偳岴Text羠€燡柉冏坃兛坃坃圸<泭聽湙="傟"聽id="t儉S乸"
聽杧侾€vax?0€啀?"1€}堹="50"/>?€9厀塆厪厧I婋brows噽do灨no?uppor?喎???,閠?ll牘ren拹嫚¤a魥閎ox.恛?勸1剻?€`alig垚center?処1€xb€攃olor="#0塦>NOTE?垪儚冿冿?巊僶嚢A?tim敎埲writ璛, ?仧塐塐??鋓d嫆塩擨Firef?呑呏?墥em叝叝傮4?C查瞾?ecessary氞riabl弜椳瓳vasApp()鎢nctio?崱兿墂扢???傁)圙憣ain嚑儅,?ne?斧常卬鈥攦?€憵1?t>尃丱丱ntFac丱丱丱丮W嘮乢乊and???tyl傁乸卄?榡hol啺?潽s箉縴€懀1济?籌r.讔垞a??乮each髈紦巜缄捥涷€賔irs€P朅崡??drawS僷en崯崥峂called.羏溫兪奧俫俫俫俢?侰飊ly磱a??ch欸?ev牥凲€豥?妧on眴€麁銚潬e冔?夢?ol涍?椷洤??r聽斀聽=聽?;€鏀Q€惬豬f€€麛?n勮al?傡摍???∠∠???∠∩Set÷奜奌灄帢????>Ju摳lik??О侾v倫拋1.0嵙棫棤爓爓刢li窹∪波渶廼associ?d?徢徛橉?s?浵pa筐忕涶櫓i硥ac濕th丷5脟簵悜饟/剣剙below€剴跂o愾杘杘侹勌?擾擾擾??僶ゆrmElem?慫docu€i.get€腂yId("?晊")?佅t.addE?L嘥('?',聽伵C€抎€恌alse?俖????F??????伱???????涚?????佔凣凣凣凣凣凣凣??????佁??摕狑狑捛捛捛狑狇Defin?泧泤僩僤B?ar贷?r牊??櫠.蝟tic?笀€鷧upd?蝷卆tes鬶e鯽riable醩soci€纃鱥th餫rt飂?lid肧S鎜nt髏ring,醤d€鵱鉧lls <€雐ze="2">drawScreen()髈偸new鬳xt?n鈋儴in???€纕as:

凣凢function聽僸S€谻hanged(e)聽{
聽聽聽垁?arget聽=聽e.€k;?爟??€??ue?聽囘()€脈€2€*剣剚F個剣剣剣剣剣?剚Fac剣剣?剣剣剣剢俛W娨剹剹剹剹剹??劎劎劎劎劎劎劎媭tyl嵂劅劅劅劅??剹剹剹剹剸暻€8?攱p擥擥擥擡4€xb>Sett櫺栆€阨n€b兎()鎳膬`兛楕僕3僕僑Fin?y,倕冏淲?淲淨儅,鳒ut醠l熋i?o?her€H鉹e狆釥w爓啟at?apply亖凮凮兝c€悧?€褎O凥property無媑?囘????廽攚聽+聽"€€J悷€縺綖鷢眕x€菦;;吙悧悡?匫?gur3-3??515???4??sho岎剎ults.嫃嫃咷咷咥慀ign="ce?r?img侶cindex?0089?baseline"倊503倊501"儴??€g仦6?????i圵圦#剺嬽聽姁.聽淕淒侎娳f?塮侾??塛匞匞匞匞塛塛劯70塛塛塛塛塛塛?????塛塛塛塛塗4塛塛as鈕ld塲it?c??勶??11??劦5?劮劚8e001厁?脌﹥?儣?????傟€Xπ尭尐red飊萒ML5胊nv嘸?€0simpl?€P侽︼_^ill⒁?僷仹仹仱狜oke伔ㄇS褿B?.誷e嗆rm?鈥?RRGGBB鈥澁喇e襌唅熁d伻mpon惱墵xad敯mal傞ue,荊乚g眽乷乷乷怚BB亶A亣亣亝.葎ia€ some鍃a娰s?_慦夛夛嫃壺 = "#FF"璒?斍慻?慺哻愐偵嬔墾〡?匫匫匫匫匫??區FF卂卂卂卂僄卂區傐卛pur姩厙厙厙侴厙厙娤娤卹厑厀厀厀厀?厀娤娞yellow単¨厙俉厙厖4H??g烑r亹th蔛?傦r詤Arranger?e?厁a匶?use∝o爛lect喎湆W?u?have順 ?錇p-down爍a伀box,鈛t閚stead儖a咹?働傶newぼ圇峷<input>岋●type飂伅伅卋乷t>.詤)h奰y儌咹n捜l鱫rks鋓?tly卄労web鈘ow垁燻??堸廯o鰅su€皔鉮oo哖arom€hbeautifu?des祊も?picke奨A婔i咢?wri?,瓁伻Oa叞璸m穛d?嚡嚠 墖墖?bj帀僐e媽sp?fication昉???Howev垜sinc?恷re坖帯a頸€貒o拡磥撨撨撠嗈懇hird-pa癌?乹梩 (<垐ref="http://js斢com/">http://js€?com/).詇e <€夡ize="2佖tt>jsC仼儯厽厸Figure聽3-5卂匸,?milar鬿魠皁ne€@at鱥ll髈meday鐁a劆browsers髐pporting萒ML5.

To閙pleme匄埾埾埾埼and剴圵圥f€XText羠ranger,?rst鋙wnloa仜靑brary偑put閫n乥same偢ld傪as傦傞嶫n,醖偭is?堷of劆de??唦<head>啩啝?inclu侌伩??仏??餫ge:媄a/>嵡???嵡倵垪垜聽?="?峱id?F潗?€爒a熻="FF犻"/囅峎峎峎凮凩W峇you?峹渒with嚪??僔,壻︾匒鰟椋3look毠ke 鈥渽{鈥?騟pres廐幜?佦cho€?萶w?,鱡醠?dy雗ow?e掟e澬o醦pepou€P(#)呚g忴?fr唅炐佉?o鱫rk噑胊n?????卄Ch抷d坥曢v曎€萪l揌do垹⒙bば?噏圚#?勢刱勞儻儻儻嬤僼棛??徸徔徔???func梣“儚?(e)聽{
聽聽聽聽€!var亐arge暩=聽e.€k;乄乀偗偍乥"#朄+価.?伹伵draw咐een()€?聽}圵??嚽嚽嚴Oh鵨s熋let鈥檚頾t奞?堌listen??mu??箞撴can鋓rect倆幇c塨庂?s摫m幙媷幙垖 ▏濿▏▏俉俉俉崌()?斍斆慱壏墴墴慱儚慬摾E劵嶳docu€i.?€腂yId(シゲ?侘t.?E勝L媩('?',憲喛ed€竑alse俋???唃唃">Finally具嗙?App?沜橖=惉俖俖屒澫俷櫢iabl縪學學咓學???僄氜ff笆???僌僌蔼eヘニ梾叧椧be鮬d囸d﹂€鵤幦幉?€皳煋槢搧0n閙p忞?w€墐亀┥c?┭娍嚙>牀??冭姺噰噊噊姺??s皭ch(f姞OrSkscase??":€钎が檶?€鵖tyl乆尐??伅伅T€H聽(message棬xPosi擔y€U╳?b攛k€繀>s?匫儳儰?卂卂卂伩伩伜卭卭卭卭?卭€繀nboth卂儳?姧匫匫仧伅姧??聽匫匫?噖????仧仧仧冏冏?兦??€椒濷濷栫栫栣Notic?祿スニ澺???汍汄st亹碦Сd供詥嗔rrr鰁rs唄 1.0≈it鮯乸僄?嶗?僯in皜ad飂牋rdco吜values.萶w→憗釀鴭Y?a鎮ㄡrhosest€﹔ender鬶e髏r?髝€卭ke醩鈒ack (鈥?000€鈥?.譭鉶uld鑑v丂dded醤€Iitional€鴏or餴cker鎬Xthe str僗C乹,鈛t仩at閟髈mething鵲u銉Pdo閒€rwa倶to髏art鍃pand丵儊applica剻. 剾卹="blue劯u>Figure聽3-5閘lu叏ates鲄t靜oks靑墵now.

(儔grid鮾I堾?斄?out厵s)?抺€騺P烉der帹橦昪,?hs,ンlowerc哖 煾p澭愂€hy€j嵑ц?斃幇傌 ?be侙埪刌,盤歋侌??槳?tell婼椺wher€竜咹仭媉?h僇o匑傋嚮伮湪伕屘垐?face掔恛恛恛烵劇API淎厑h€xa頴圶graphic埫attemp棬?碄la冃?篃€0py檻??崥掕t尃w?稰k??e峹?o???d鈟姫o燄妬伆?h晛o?旍m?偫s摡偢wr?€裈淨Arrang傌?n堐埧埧埧ㄎ警??c€悆 .€)杘杊prop毎﹢re:寚焔兿焔??偋烖??俖?佮?ず????榬伈?h傽e┄搝搘搖觘l?耕?椌will饀sh?佉ar?潹own (傰??湗勛餺s湭)歐恱fエl€拑舠??嫰嫰嫰儳儱h憼摬冏嬒嬒嬒?嬋瞸鈼Z櫳墜僩???歡I櫊?*鎟om榯many??e搽?ら乥??帡ir喎塆塆塆呯呭middl戇???倃?dead城?t塦?戲会冿冿冿夊囆help亹偩偺槛n犵犪???叝??>alphabe僠刉???倵?bott?尭坒wr?歚scrip活su張?rabic,苔xn,漴Hebrew哤哤哤兦哤哤>ideo疶哶哶哶哶偀哶哱暉唎唎唎葮豂冚?Katakana,萯rag€R?峘ul??????>勼嗭嗭嗭嗭倃嗭嗢瀇?猳猳敧亜亃囥.胔o﹐﹐﹐亾﹐up (¦?¦¦¦㏒夨夨噰噰">So,汾exampl?if鵲u鱝劇o餷∴€憵罋awit巔劮劮??噄,們ould?嚀l嗻埩cod篃??弴弴冞??兓聽=聽"top";All鬳xt鋓splayed飊鬶e鉧nvas醘terward鱫uld鑑ve?is鈇seline.詏鉮ang€蒭€?鵲u伌€餽operty:

<卂匞匞匔<喒骾ze="2€xtt>c€悈?€)B儰聽=聽"middle";Horiz€╝l醠冟ment墭夨偍倧3倧倠T幦偗??tA偣寳t>怴喐哫s儛s?h刧刦飂€鈬b嫨旴i亹兛兙x??osi?旲h?孃俌avail帹呑?>厳俖>鯽lues曌垪??偋坱咢er倧娂斍?倃?dea涾堢倇埾婡诐迈惐??to傪lp伓昉奲in詟AArr?r?剰?????star懜????俹>?厛?d桯ct洏?忥兛兙y儫弴n哤哤哤冿哤偀>end偗咷咷咷俖獓唃哹be狓摮?儚???????偀倻lef宱???俫宱?幦ら咥儑?僶?n?搒€a勓most?(ju€xlik傋傋捛傰)埾埾埾唎埾?>r乊?堊堊堊俹堊堊垙僄垙?垙グ???塤塠垪傔傔?垏垏垏??F?exampl?牥se犺儹€袃喀?冊?d<?ode?勄?劘?僟辩辩gn俱?剧剧囩??滙?愁€`?,囏澰哻b珗??匞?刉?嶨姍东poin瑻However?刟do緲not韊佒wi剺凘鈥渷骵d鈥澐羵奱nvas定o?€恆?孻ne厛嶐fin€@冏劋伝噚€饙僡?oca?卨????Θ厀??呞労嗻??愗??穡勑籯秱also圦modifi獕y匞匞匒备匴匬attribu撹?仹仸C垻伩伕obj仇 (inherit儤from?DOM??docu櫻??).亸亸匴乧ch堮?冯牅how钵敟;丅?id塙寉僄僄僄垞碢?ǒtl??(摳?抜瓑撪)懞侊砡t?來仭佱?侀徝牂忕?燱傤4€xb>H儬l翅?base€pe凴?爋掞掞?旔?g淗倶o鑲鐑?▉much瑂w仮汒o€(??ⅲi宍棫棨苅rs?侌橁ad喊om?riabl徤檨岀?>潾App()??fun?儀whi?儻儴飫xat挗?兟ho﹁?嗊扄.蝟tic爺?ve蚌劘劗劅犚唟?伅?仐?help宨u琍i蠢ifyガ?屚坄?挴彠挴凮凧匑聽偭B弰阐mid幮缠br/??????凣凣">N俙?忨娍勏偁<剱燌>?弞orm錶e嵄焮ea彔new醫trib?卽te鬿鬶e萒ML餺rtion飂€age:

Text聽Baseline聽<€`ec€癷d="t?€?>
聽聽丵op剦聽valu偁middl?€[?/?佺佺佺僅op伿€@伔伔伔伔伆hanging佉€d侘侘侘侘侌alphabetic?€?????ideograph?€噦7????bottom?€[佺佺佸/?€莯腷r€焵槑跘lig傽幥幥€趲瘎邉邉豤enter?€[勥勥佺佺佮start佢€R佔佔佔佔佇end伮€@伔伔伔伔伆lef儃€I伹伹伹伹伬r檳伿€R佔佔??€??叾?堬堊堊????E咞聽=聽docu€i.get€腂yId()嵒侊t.媝E喒L喆('c e',聽佺neC€瞕€癴alse俆?刧刧刧刧?凮凮凮凮凮佀??婘揥揥妵妵">N倄,懇need忛crea擦???ins?廹宊廹廹刾?劮劅劅?偳?冧孏孏d(e)聽{?潻r丠ar嫚?e.€k?侴冻??.煀丱?rawS埁en(峊}?勄尶劘劘劘劘劘劘?剹剹剹剹剸媜忂忂婫婫?apply強new鰞y瀲実宔??瀼瀼弚弚?弚??€悎P.??€張攣_壸奊n槯埾埾劅劅剻Finally樅浰o棬that惴Bー€皟a鑟riz?伖飰踫?.耬ca?俰€8?娍嚡嚚偄厙妶a?爥?仹仹圇噭?t>灣o靜?r?subt癆灷lf刯囑飥k唞?侌retri?叐rough???measureT€`愊咮lik圍did餽evious堾?乮羠r?r 1.0戠峠峅峅戠剋剅?m吜cs恇??messag溣€繵傎仾?.僯?爔Posi煁?(増C並/2煚-€羵m€悢??喿喿喲Inad?緓sim?扐擹慾餺景嵳?僕?????嘒嘒嘒喎喎喎喎?億R而mber,扜兿?懳is歨やdefault槸槳暆?you墥澪?wi?揼揱,梠婜till鈋傮梹斷differ僆way?hil傮ar濹ing?ica塱.嬧?3?媩a鎮0pos=0000261780?color="b丠u?g晉聽3-6骽owsw釄(夾e潬o姱姱s?t姧喒埍a伔伔mid繕伩伕b韱釃眅ar撣圎撨撨恎坒凜="彸兏imgcindex?0039?冺"倊504倊501"儴??€g仦6???榞圖i屜屔#剺百尪.聽F??婤婄醤d塒?壷?側櫱厽壣戠11?漡?5">?巰?font鉶lor="#8e0012">Text羠ranger謊rsion 2.0Now,魊y鬶e頴w鰝tof詢?er,骽own閚 卂匵blue">Example聽3-2.賝u鉧n骵e?at鱡鑑ve醖ded狒凨劻opt劯s丆did頾t鍃ist剻叺1.0.蟦e伇啈mo?striking€悁0s閟鑟w鎙uidl囉t嘫grows醤d嘪rink€`儊e鎲裺ize佡updated.螇賗magi儉scri??亸側o鉹e亪偫乣?.葍鴚ould鶊do啿?脌瀬︶pplic伿俰record嗐倫pul偅€抲s恱makes?th??喲?n餷a嚭m鈇ck?儀l鬷me?憡a/懐懐懏Also,?ic崍哷al侌?alignme囪峿affec€x?a亪her.舩per僠???ch?夶宺di嘸嚭??廐儼卙僞.胔oose亪丂r偙孃fac園巖掵??y剭俛basel嶈.膐嫴丮嬁?like奼洟暠help伜und擑t婞?棏x姞屼hips攭?嗿pro?ti??HTML5胊nv摌寑傴intera?榿nd鈥攄are?say€pfun鱝y崗崗4崗崑<!doctyp?html>
</script&g冊€ead€梹恇ody€弨坉iv聽s劚="p窋:聽absolute;匟op€?0px€hleft€u"侽侶canvas聽id="€cOne?width="5夹聽h崅="3€p侖聽You?browse€Hdoe侶no妶suppor€HHTML5聽C傄.?僛俧€蝔orm?壭縔呅€醝npu倶匭卉勜pl?holder="y剨€閫?侴侤?r儚€弄?聽O伕禡:仹仩爃ec兇窂ke圙乁op?愙乲?€I嚔?伹伹伹="s?€[佺佺佺佺佮both佉€I伹伹伵/喕€菈€煁雺??坵?€賵W劮劮啈erif唻€Q勄勄佔佔佈ans-?€?????cursiv妺€d侘侘侘侘?antasy嶬€c侘侘侘侘侌monosp??€v??屪屪€莟;br>?搥€?
聽聽Text聽Size:聽<inpu€恡ype="range"聽id="t丳丄"佹€!€3min="0€讇譵ax="20€鐎?爏tep="1€還遶alu?50"/>??br€焼Color??class="c€褑'tFill乺€爟<偵蠛?"6€xb>悏醤d鬶e胊nvas脕(€竸刜p偳="3偳偯We鈥檝e醠剺dy鋓scussed徙oupl傛c傘餽operties冃a?ff夎?c丼in佽global鎍sh嬋: ???塸f鸿?夌t>啔乷乶stroke?亅.萶wever,?r咹€ two€A刋?visuall嗚emon侶ate鑟w悖)咥o咜喿飂唻嚖喨嘒e錸ti?HTML5堻:?魊ansp冭nc侫唅shadows.孼????嚾5?€揷olor="#8e001垚G婓A儮?恞擏忳忳忳?Us?呍i卲傽ol鱝y垯make颾j嚢s骵em€゜?熰i妭or鎢€I嚪t飊埾埲.詨悊菐帒 ?帍??傪??孼?u旟f冭th€ppurpose.羏僕僕僕僕僎噾pplied,闁M€爈l鋜aw堎唄栂,髈鵲u頴?坘c嚚?鱤en?tt伇it弌嬿嬿嬼埳id€1u憄啞??囓.咷咷檼擿numbers剺twe刋0.0 (尶t)?1€眔paque),№y釚缷a餰r氨??犐愰?.苺╡xam牳侙 50%?ue鱫uld埐od?li??:坴ㄇ埦4埧????儥聽=聽0.5嬤??A 10咁(n?澢y)哋哋哋哋哋??哋哋哋哋咺屓哋哋哃扜僄僄僄傽4—H庁l擰僄みほ??旼??Besid痾揁ow-familia怷lem憍?weclu墤戱mos爌?o?figurab哺紦眗禯Ar?g甃?夌唃?requ?疀ink?b炧mo百bou?漄卄?煵?癮€Xw磤?e個??灮塤塤塡First,債c?愯樫ri噴nam埿喯單悜喛[亣?刡App()仐亹func姟啟ini?伬嗃th俖俖1?t>吚hich韊慔鬶e鬳xt ?杸厀ill鑑ve頾魊ansparency鱤en閠閟鎖rst鋓splayed:

var聽textAlpha聽=聽1;鎢nction,鲊衑ed鬿骵t侴侴侫global厇侴侤property魒ice:飊ce鈋fore傃凒倸background醼 €殌qing€Hx鎟ame鈥讑讎飮飱讌G匒喤聽冑Screen()聽{
聽聽聽聽€!//B劍€陙?c傪婙.囩峗?峗峗厀厀>嗮囓n醙a崱搻圚value髏墵d嶻喛喚慺冏t>,陁敻媡暔der妬偂亯?canvas暞厙卭卭娺??埾堖堖堐匜???兎兎儽Th沨湌re攊?擮儣?擧so搧嘪摟摟,鈛濰t傘st€1allow鮯?use徙onfigurabl€x?屲?倞?婜.妸唚3唚唖W?僎傭no?r萒ML5喦喦Pge啑啇?rol悜our?m咰t?tim?潵匰?儼th唨m佈f 0.0洟€坅x€?.0,?epp憅€?鍁er?偂俰??mov?懽懽?懽嗙嗕峳:聽<input慔yp?傿"聽id="戅"淥搯哫傴.0€鐎鐔?"啝€鐎鐕1伿1€鱻鲏?>暓暓暓噰噰暎嚙潡Ch?d??鱫rks濳lik孄慬尃偍侌dl€p亶??reat恓chapter峅呯呄呄峅叝?咟e???禝arge帬?e.€k;乄乀穡丄(?.?)亀乽(€鱻纝???嘩嘩嘝Also,鋙n鈥檛欼冐婮?li?n?烡堊?咠樸?漁嬿効劎劎嬿?嬻?Elem劆?docu€i.厁€腂yId(檁"堨佔t.addE喒L喆('愷厴',?幍€榝als?啅娗娗??椲璈ultlook?Fe聽3-7?姛姛?剘瓨ig?c囪er傂img匄ci咐??91?baseline"倊647倊497"儴圙園€g仧?????i??#剺"圇-7.聽T搅?稯a醦plied堉侶峗?塈?11?摟剠5€xb剣剛8e001匟G冓觝adows标劻儳???儚穝Canvasclude個鮪iq祊滇磤properti€販﹃囱a髣€矤憖╯.詽欦t>?急仯枃玱┼are頾t?控仭航ey鉧n??so竊覆goo繈錰fec梑?€鈒ittlf?t晈垷垷櫏o嗻??咉E僇?t>,匇呰?four壇s?ケ?圖€榓t頴??be啺nipul绷?歐慜勏??C憫?怲攇?傔¨搨吔倠幑禜us唨€瞐孁鈥?RRGGBB鈥潗1m啒伡???Styl忛曬乷婳瓨ke?亇娗巟啅幥墴喦墴?墴?Off梹X僶壇壇壇傦壃??x俹呅o??姛姌枒忴a餺sitive飏惱g?€`number嘷嘷嘷剋嘷刉嘷嘷凴Y匃嘷嘷嘷傦嘷??y俹嘷嘷嘷嘷嘷嘷嘷quote>c€恊xt.shadowBlurH媭ling鏻obal?s偘?墄偋?偆Just婓w揦aw?僕壠?Alpha?t>巿??re嵟慣?鈋f?乆dr??backgrou憟€鄡梼棄馎rrange氝儤;飩rwis晲儑呅ll醦ply敟enti兏image.苅rs?in€鈨彁遖nvasApp()儑t>鎢nct毴嘼槮噏?variabl?儴ho書劅€鑜ue暓暓暓??勏勊?聽坺孂?1?€覂k旙€莯艛珋莯艛杸還輼?#70707槺垪暦暡掲唃哾W潻en韆?su宍屟ur﹂塇?rend???埾??崬?仧仜?S?en?仚.讛餺n鈥檛鑑v匷枾俉俈塯冪槖but哘nk椹rgood槇a扏c傄upd?晿elati儴櫙€鑱xany?ch噛?C暍悖k揥?岟岟揥啩怗怗︾э0????攇€驃_揋揋哤哤">L奰r彥啛弿弿弿フ搘擵as穐圾€t?s拝f禔煑爚d嬒厳??嬒?嬒嬒嬑€噐壪丱嬤????牰???€寚寚寚??熌also頴奰昉┈?HTML枓ll媝€憉s?槥実孇滀殤嫧?th巿弚奊燽収燲?rols,釐懕!s殌?€鑺瑞ick€hus泀偗偖js?偧弿垷垏垏弿偋偄S?聽X:<input?yp??"聽id="幀"峳聽聽聽聽€3min="鈭?00€€max="€鐎讇 step€鑰還叩殌?>??br€~呎Y呑呑呑揇??呑匃€呑€鐓讌讇邊讌讌讌讌諙?聽????僩僩??€讌飥鐓飬飥邊飬?聽???咗攋??class="杬?≌€悆???炞炞朩朩">Fin澬y╆烏ad€8澃eve?li?ner?d€さ榙l?fun?ons蟮麪r捐m錶em乆禭an湼mmunic爜焺玐穁.訜泄ul亪a鎖lepos=0000283420洿垻="b?浶u?gure聽3-8formElement.addEv€HListener('change',聽shadowC佡C€猟€╢alse侻unction乚X?(e)聽{?聽聽聽聽€!var聽target聽=聽e.€k俴丟倊??.value乄乁drawScreen(劕€脈€b€?爡g傠Y単単偳単単単丟倊単単乄単単単単単単owBlu??傔???乄?倰厳厳乷厳厳厳厳厳厳懐厽乷厽厽厽厽厽偀収収亀収収収
<唅骾ze="2剦€攃塧="#剺">Figure聽3-8.聽Text倶th鏻obal髪蜥pplied?俋塤?div€悁2mbp:pagebreak唅€瞼*妷p?9??吙吀6€xb>劮Gradi嗻s醤d衋t嘓ns?剣p傦="3傦傠We鈥檝e塜劺dy鍃p坔ed鬶e 冏墜悙fill掆?t>冴乷乶stroke?亇properties飂僐Canvas孭峆嗋by骵tting€餺se鰰耵o肧S-com嬸a嵳s.萶wever,乽er?ame僕傕an鈋偭侫refer€Ia鎒w飫(r颾jec奰def擿d閚勶s罰I亯檋a摠so傴stunn?叡eff侚.詠▊eare:??檞孫>L儛ar鐜寔殥_?伹伱A靵訄b?慃two飏韼悏d??剣剣偰R侤梹剣剣剣剣剣鉯rcul剹剹剹剹剹剹剹傋">Im欨饤#剣剣剣伔>An斪斪俠敡敔崈鮯徖廻惛桺僿僟嶹潎儣潎儂5潅??8e001凘彅??炠???儫T斁a恾嫿,韆k€羉a唨?枒汥熦s堶堶俢?匌()?墄me沊?兿侽侽來佭媀?仹冿冿冿冿冿醕cep壚four峆r焾峢s?atl濪噿埍?傟刉刉凴?x0冿乷乴y乷劮燞凃s紙σpoi?劎e,傜傜凪1傜凮乬乬凘乬乪repres?僫end??氉氉渿桮冿冸var聽娕聽=聽揟.幏幏(聽?€8倗唎>[x0]?乄乄丷,???俁y俉乄乄俉??俉劇1俉乄乄俉??俉劆俉乄乄乀);?犑牽??F玃exa筽掄if鵲u鞴翝俊嚟=欜?暊憙begi稢憀穤(??淍t 100,€ )?h?n??倸i溕e?侫刪?侷乸display俬o唬絧粻,厷m嗼鱮i厐€醘ollow剏cod暞暞暞垷暞婏暞牆(rics暓暊measure瑱(mess睒孒br/仜?W傎仾?.僯?榳傋榳榳榩?聽€3傛€搻??噊噊枫fP?hav姞儾▍屄犧?鼻伭ne亖o醖d絴伀w搁form仸ations?抳??忦€do儼wi??実宖傽C?Stopd,鱤ich叞qui吚魒勷rgum?:偋偋offse??乄齿olor:

<仭骾ze="2€xtt>gradient.addColorStop([offset],[c€);So,閒鵲u鱝卲black?垁傭irst儚峯nt,妀€恘塜€H仸seco€衼珚Z巣s鑑lfway鋙w俖徠,?oul佮rea坧two鉧ll憼o ?妦棫棤)娗毲婏婏峎峎傔毲毲?0,聽"#000€"毃br/乄乄丳.5乑FF乚勶?岒€g?1劚?€`忇gn="?er厪厜1€xb€攱??">NOTE儣冿儚冿冿?堶僶堭I憑fai橦o醖廫s仺th ?伅峸?峸乷乶,愱tex滅rende?invisibl淎唶梍?em?{?sul瀴○sh?枿Figure聽3-9剙摋姧摋刼巼巻img勮ci?x??7?base?"倊653倊501"儴?幏?仒????崉i?挆圇9.聽T?彔勸a?瀦applied場俬峯?塱崗11?撓劌5?劍8e001卙R兏G凕庿x勸兎??儳梘??俬茬sd韚c嘺k盰嚐╨excep怠i摈彬█e鈥攏o堌佉?€箖德defining枫屸餺i啳€眱慽掂diff樌埄ircle?瑝┅???儕壔壍湕堿鎢nc粔僇?Canva匵€鑺泉巼梠姱嶨??var聽夗聽=聽傇.勭勭(勥倃晀[x0]揔乄乄乂,???俁y俉乄乄俉??俉侾咘us????????1俉乄乄俉??俉?俉乄乄俉??俉????亅?燺戺戺戲Let鈥檚骯y呈wa側橙慘殘潡潛﹣d飊浱.蓜Htar?€笝b漜h柊i€貨o?t 100,€ 浐?us榠20,€⒋垳牉墏t傗俉俉2俉俉侾5?d佽ould靜ok?this?塛???嫃?????t(嚁,?厹,5崸崸崸刼刼?ddy璊嬥ops崙峗峕work€貓0sam巂???墘偙movalo﹎猨nstea忚カ??呯呄呄????.addC冑S唨(0,聽覆€€P堾br/乬乬乣.5乯FF乮乊姛姛笚匂9匃匃笍笍笍笅Image衋t擛n?儫凎??儚A禈h朻op癰f嬂fi曹狂€燞TML5褒秇廆us嶺n诚奼勈?矦object.讱 ll?v???Chap噣聽4剾竲堛API,髈囆r內冧onl?iscus敨ic漛how喺揂嘪a饗埐a垉堥.搸娤娤="0pt">?畝匱o鉹eate醤閙age餫ttern,鉧ll鬶e 伀P乕()韊thod飂侁Canvas銆豦xt,傴ssing狎eference鬿凒??I剳傦傝objec?and仭option鎜r??repeti??t>:

偪偩var聽?聽=聽嗢.埛埍儳€8??[嫆]<c儾>愖?噲be鮯?佽s鱡ll.憻憻??憻?昣僟懬懬懬倵倫?鈥渢il孁鈥潱u??i尠hav媃€ f墭ur搚ues??儣儣????焵??偪偪哋偪咾捇厫唜?廝b?唫x擝攑xes媷傳傳叝傳叝叝叓-x吙吙傁傁吙傁吙吙枆y呩吅-ax€?horiz?暔y)????????y??傁傁?傁???€貀?v燲涴咓??咓?咓咓咇no-懛?倃傋傋???頾??湉???o瀥櫁刊app?i倫o???fillColor??旳乷乶stroke?獹獴ies澼?,陁st?you鱫ul縃劒a???噊?嘩?劅剼絬咥Style??ё屜妵???劮劮劮亣劮劮劮劜墜勄勄勄勄勄僄僄>F癄example,灯?nam椑兩ure.jpg€?src?"坃g"??絻?func笛()聽{?聽僩僤巺cr焢eP€???,儉爏"剕伩旓???...€B}嬁悷悰壇壇墾1塓壏€`align="ce儼r??b>PATTERNS譏TH諭DEO:訦E翧D蜤WS內?儳??嵂儑儉HTML5胊nv?API髉ecif捄曫?儹?徠ideo堬??錶em噽銈hbe╕梹?e曫urce鏅葋飦餄d帶帬)僟亀僝inste洦?浥.萶we藏玴ll€褍犪俬mpt?o鋙?emi€燿労following蔭vaScript錼rJ嬶???櫡??嗧Uncau乸聽E?聽TYPE_MISMATCH_ERR€燚OM?xcep楺聽17?刼怶凮凮凮凮凩Accord噥|儉騟feren岠怈僓a鑰?"http://www.gnu.org偗嗸€z?="blue€榰>仐цu?€So閠醦pears鬶at韔st鈘owse€榟ave頾t閚cluded髐pport鎜r鮯ing鰅deo醾e餫ttern€?/僸儳儯createP乧().萶wever,鵲u鉧n髏ill靜ad醤d餷ay?on胊nvas,鱤ich鱡鱽idiscuss?鋏pth€I儏a鎖lepos=0000666305?叅€zcolor="blue€榰>Chap?聽6儁?.jpg剾扥扠u儴栙仮屵柶€悅8.???鎢n匷ality唫do個i暕?侞釂 w亞頰m卲兎兌橒ntAssetsL啔儣儝嚺傗?漞伮坧懶帎喛??on塝偋偁併of仧仧仚I夞仐亹object刲凲hol嬰徏.議en?悆h匟?堢ca€(儚嬤?App囷兒愗?s夎鳌P侤?奝from俹俹嗱Window姉偗:檅澭濿櫸4櫹???帴聽僕僔聽{
聽聽聽va??聽=聽悹聽婜();丱?.src丅"枏g"丱丱幊乥??亙}€2€*厳乬搗厱?爩?}???€g℅壯?€`檟gn="cr姱姪1ㄇㄆ甔">NOTE儣冿儚冿冿н?僶?W溫腹go?犐杇n鯽riabl摖搥瀦搱擸is灃,淚?do?俼なscop┼暬腐?棁棁娮乄丵僨氳叧mly?冭??兞?卄avail咼be?唫嘺it???禵?I啘?唃唃唃咃燋ㄔthr??谗?┣獸兛?倫Typ?儭秬crib偍how厞碆凃b册♀(a騟gular摀€聨€靑ne€ǘ鮻檧Yal€燂r€皯L)?埊匃t磦C傖F傌2??掝嘪﹃e橙d凾礯礯冨?stop.苅堗ly,尫???冏冏檂冸佔勦黄哼椸w絶峰n?stance?榵僄懬懬僿?烇烇?烇偳偰愼猭壥孮猏??€:2並Qi?>...€B????洍洍嗊嗊嗀Now,靍t鈥檚陁mp?崱HTML姽our娗?<懾m>兿內.觟寜崢νdiff⒏??渞夐欙亐YdisplayH瀶彆build槓sel?潗?斷ow﹉?桯choice燺側???倇?擳box?th?d??犨犨佭刕purpose揋寚宱宱揋??戓聽傾:聽収聽id="?"?赫?op糞valu俬斶丵攂聽€亖a/乲???="セG?侸L€?聽€瓊w倃倃倃俻倃亁R€殏w倃倃倃倃俻樚?€d侘侘侕/徬嶗櫙櫙岹岹岪?斦ad斆??抉玤玤?s晣?﹪怗?js嵅?揾picke盚冃昑佅????
Text聽Color聽2:聽<inpu€癱lass="c€?聽id="t亁Fill亰2€╲alue聽?00€"/>
聽聽俰br€?僪,鱡頴ed鬿鉹ea坸the鍁e?listeners鎜r飖r魒o亁w€乵錶em?s:

<匞??姱勶勱囐聽偂E倹?聽docu€i.get€腂yId(姱姭)??伭addE咥L?('change',聽??C€耫€纅alse倲偪偪勭勭勭("f偁Type劮?劮劮劮劚侕剣剠崸??媁媁">We醠s崏??旽oci€pd廫儓dler鎢nction彌乊????????t>???嚢(e)聽{夨?櫻洂tar嫄?e.€k婫乁偡偙乯"#涏+?.?佅佂drawS?en(?€纝?巹?崡呯呯呯呯呯呯乄倕?厀厀乢厀厀卻憃憃憃岹岹慾慐?髐pport€y??冞?僸懍is懗?ality.苅rstus?傋傊measure?傔傏method飂佢c€爜 ??€殕r?€閮`hich儜w姼兓??gradi枾枾枾塯塯吳吰??rics嶁?.啅t(messag惈€繵傎仾?.僯煰嶨嶨勭勭勧Then噚decid唄ow€q濹at産鈥湹Z鈥潫n喿漺壺Style?宲亐乬乫stroke亀乿嵂垺蒼?instance,閠鉧n猡孛SS乆勑,€h?,儥?im?餫ttern;偤?佇l?prov噋s韔re傴噞?.?夌夌変鎳垇r嫍仦3仧仜If媋a僪doing厛simpl嘺俥宺oper摫ju卄lik勯卲evious龌 塇慟羠rr.習葞w?閱餫???temp?嬿嬸equal侀塱傾?侢y伩t>墣?壙壙?Linear峍夌夌夌伹>F摤l?廠噰曱wh暔丄媢g媟瀢??.蠗亾熱揁??beginn?t (垪垨xPosi?-漀/2?婅beca?€hs歡?倅c勑e岋?ㄨgn毫)梡nd騯?horiz€鴄lly嵧e€鑵?????t>).讐╨stw墾旉stops (埁0冓60%)鈥敐S?s婻???or1僩唝侤仐仐仐紭仐????憏R幮朄?????愜伭??抇抇a帀埲懞園懨嶜??噊懐on嘒t>,丱泧丱丱)呰禓a厒犩僘伇兘?兛倃€慡€垈o忊皥唻楤厾扞??癸喿????厪厤?1幏幏幏岟">P甋巜巜巜亣巘?op壯?嵨凹?帤哫€晢o唍睷哋曡紣iab偁?傷d?侧潃僸祼憼偳偲rep亐傁側涁亁?ti??傴櫃?tic€y壸壸圵圵">Here鈥檻code:??嬒?侞呑呏?聽?;
if聽(?Type聽==聽"狉瀥")聽{?聽聽聽佹丠€q煰倀}聽els侤偪偪癈G?傜傘勱濏?柊?.??侕(?侭匔xtWid?脌€卼h/2,聽yPosition€`textWidth€莖n);
聽聽聽gradient.addColorStop(0,佈Fill€梺梺梺?6仧€?仹仩temp€?聽=??}聽else聽if聽(f?Typ€x=丳"丵alG亴")聽{偪爒a倛倁傏con?.createR侘?(x堊坵€`倵偛€!f侤Size€饋?妛??1噂??姉?仐仐仐姉仧姉姉姉姉姉姉姉?pattern奯奛偀奧奤P伋(侓,"rep€?劋儢偀倗們唃€悂?/tt>Now,鱤en鱡骵t飖r <偫嚵Style?t>飦g乬>stroke亀乼傽e鮯e仧仧嗹亸傴instead飂仹仹?伹伮.詇is?ll啔the餽oper魜犳€蒫hoice€郺t丼be鋓splaye儛n伈canvas,醩骽own剱 ?c刌="blue?u>Figur嶩3-10:

<峎????圑挐屩愄奓;垪?恵儻儻儻儺醠ign="c榅er儴img騟cindex?0023?baseline"倊65€饌|501"儴??€g仧?????i嬁嫻#剺"嫥嫚.聽T彂with閙ag怘洠醦plied?俙塯?div€悁2mbp:p?b?k唓€瞼*姂?9?嶗吪6€xb>葋?觕ale?nd鬿DataURL()襡viɡ?b?懜僩3僩僣I??018263塤??Chap垁??漴briefly樕cuss樔檪you樫氼?咈劵潐?欪we?€@€箂噏 (s暕炏栕倆?燞傎丱丯僺乄t>)冞冑灂釐?鋣nami凁啒濸code.譭?so??嗎嗀examp匄倄using偑??C傿?ībject鈥檚亸亸?)伔伆metho忶冐port?鈥渟眻en勜個潌鍍ca构.丧墽╯冐篈嶑r?€餺fun?侌宐y?l磹兞橰Arrang㏄3.0.?搰栫栫?5栤揙湣8e?囙D嬬柪亐姯?涰?桹桹兿噿廐?噄devel?d幯圸c栛圸幻d姩refereno幆?幆?幃芭HTMLge鈥敘鈥﹊?俫>擪On竉倄伕枡竓厁屶o劯t沗v磯e 2D喐彎傁????沧???傋傄va爛儼?埠docum?.getEle€YById("嘅");
餽?rt吶惙伅???囻篊魭蕶鼘廴ц?,偳偳偳偳偳╆include⒏夃h?區煱嬸倵倲?b??堗侱i傌硲b巘嶻欚傎呯僕呯僕呯?dem儼?hy鱫ul?w???is?詥ǎi??仩y凲憼suc粪s洺ul曄汿li鯽蝗="1"?€賮??楪俫??Upd攍穌杁敌喰垈?a靜ad?埱烜ideo埧埦淿淵/li呥佱呥劮呥呥呥??癘几nim咷咲af?€埆炠?効効劸3効効効効効??O暪,韔re鉹ea?脌€卼ive鮯es靑ke鬶e飊e鱻ill鍃periment€€th頴xtResizing?canvas?€rfly閟駏ite錫sy.詏鋙閠,骾mp?set乥?
<墽?4????倐.?聽=聽600;
2?朑a???340937???4??.滄極極湡?4€xb>Dynami嗀撀δ喰T堿Ar?捸汬僟??ㄧ?姁玓ad醔ility鎜槝戇?儕屶桯仼,鏸v?慳a鏾od瓨a槧?f鑟w?work櫒墾wh侙曡?偫佽r錃 栦堖呄呄吿Firs?盷?a?u冮new??堦擏擆儔rol凚噏HTML佔佔<掗>?.羢囼m?鑑秞alr∴y鐄ess淵?€悕壏,p?僫5僿僿匞匞匓礃濔?檭@椄滙fi姲?many簁€h敔sib坄嶪it鈥攅v盽though€?櫢)劏t僸nti挏l?偣匊疍?寃寃?悎?娭€hid沨嘒嘐掋W△△??亄H?亜??殶匴殶傁?s聽凴:聽聽弫inpu缎typ丳寶"聽id="吙h"穵亼€!€3min僗€讇譵ax="1€飥锍恜€饊還弋竨??"/???br€巵螁}塖:€茊瘑瘑瘖飔??喎€讍穯穩飭穯穩蠁?喎喎喅?€8庣擮?廅Nˊ洑爥棛t洶?n瘔Ν涶瀥錶em锯硉愶摲埵App()剰?fun椽擏???擏??処E凜聽=聽docu€i.get€腂yId(撉摾)墈佺t.噲E噥L噟('ch?',聽佭h佛€╠€╢alse侺倃刉刉刉刉憂刜刜刜刜刜佹刧別?彑彑姧姧癚nメ彾嶪徲傴dl徣.蝟ticぱ蒂e骵t弴?寉傄凣?丱並剝乄丳法丱丯僅湜乬乣(?varia?劆c??rep关斱匞偡ギ偀凒bject髠hen)虼篿nsids皜暷埁嫺o榵瘬ma带sur塆c娙冿冿統S?樂?欯each?祲俲阿厷閟嗻繈?渼斥?禭圚.蒮?did頾t鋫9is,侴雕€rpag?ould鈒ank鈇ck唝white?抴抇抇?嘷滬員??(e)聽{︾χr?ar櫢欱e.€k?乄愞.?乺乧.仐仌嬜(浱€脈?厳沢沠厽偪厽厼叝?叝叚奀亴吳吳伅吳吳聽?苺?聽}
We醠so頴ed鬿鉮ange鬶e鱝y鱡鋜aw€俠ackground鎜r€歛pplication閚€??骾ze="2"><劆?Screen()?t>鎢nc佲?i仺upports狎e?d鉧nvas.讋@o?is鈟鮯ing僿僿僸嗱??a厫丱丯垼乄丵ttributes飂仹仹儬C剼伩伕壛reate飖r塆d円b€Q厑box:

仮僌僅?rol偸?HTML餫g孫孫孫埾孫僩僣毘聽︳W宭聽<inputyp亪劜"聽id="?仮亽"↗伖€!€3min兏€讇譵ax="1?€飥飐tep€饊還遶alu?伻/>匰br€巵螁邌贖捗€???伱剣剣?€讎?€飮?€蠂3?卭?惽槜槜徬徬">N攈?se??ev╤dler妗ach攐?攐攐攋.萶w侤栬犼time?○шa€皟E鈥攦厩媑S€繡?d()儻t>佇?bo旔棢棢囎囎棢儑儊侶mElem??docu€i.get€腂yId(???寜?t.addE奱Li幐ner伆?"??喯ed€萬答e俹剋剋剋剋敓敍????????媷捵捵??">I拠廆揜鲍??>???彈?method促?俍橋s鎟om怰傜傜??┿.讋抧?a禶r旵at?p?刋浚咥wa?埂???擮塯塐塐擮単卋奋+牨?.嘊€?笚t丟?丯?"???効効劰Finally崯崯卂?etAt塸bute岹岹岯㈨鈥渽2鈥潐'剣刼刼?兿漦unction???e)聽{猈r姧th氝撉氝傔烵俹俹嬐倃倃倃倃漁???V?俻恎恎恎恎恎€槀凡'匞???窢he?.庣庎"侜?聽?佲drawS?en(€讇襺愡??€g?1彵?€`alig酣c奾er悘悏1€xb€攃olor="#000">N?蝷匫TE<€g鑕ight="3pt"鱥dth="0€`><伭骾ze="2">While魊ying鬿鉮ange 傹乷乮theCanvas.偛醤d侽€邆O侺卌俉?俈ttributes,鵲u韥夘otice髈me飀dities閒?啇?鬶?ca嘝with肧S倶€砤佽time.蓆醦pears€衻鴒n傝俛???,€????€邅仺埱??埱埩鮬da徖剦c姾閚騟lation圷啟?,鱤ich?鈦薳ffect嚔ar€xxp€x惾.艀Xr?凁囮Text羠r埳r 3.0?se摾ow俌se鋓俻r亼styl?噄厪匄teract.朹朹Chap圶聽1掽嘷愅吤愊t>飭"醠s棬€悇P嫄韲僴?揚俉?堢?t冃?retur侸s嵗?repr庤n惐揼s鈥欓ma??a.羳纋l慬no抙gu戓墍i€競硞瘜p侊€qMIME魕p囪i>€?png
??supp嫧??jp?釗a儺匑堧佁冭e堾攼??twee橷倶numbe燖0柸暪1????e駏ality/com€羢沋level?勈?扝枟抩抩>We洟go琇u?崗崗崗崗?亹outpuΤ?凪牔丠a傁傁<t灠?a>傳採n傪r鎜rm,垔倶€榩€(a?nd煴o煒s?尦炐堣?詇i冭s陁s?冃mp狝乤寴~瑪fun(儛亁work?淲夛夛?fir傕th?湼do?c唒ò呴la€鵺o??rol?HTML€宝乏?庄€垁愗y侹傎a鈛tt匄栮媕姛姙冸I?崺姉崄噚??懸ed€p橀厰??僯a毘?n鍁暕葱dl?????P僣戯刬???斾⑹勩?僌??噖?伔伈?勆D戂伔?埆hol摙魨柷?af?﹚????>巈慞?:漟磜埼4埾?僿團in淗聽?疈?"聽id="刧刡€皏a癅="C€?聽€?聽€陫:br/偄br€~€ea僛娺娵僠rows=10聽?s=30侎伾/嵪嵪姬讥?圤圠N??檲et鮬孼?listen岎??墽????尶剰剋剋尶??煩Ele疩聽=聽doc.get€腂yId(??)??t.addE嗎L嗆('click',娙侘?d€萬?e俙嗊婏婏??︱n,?嗙?儻?奊峑偀偀???metho佅佅丠C矪仹遍bject (亀?he亸亶)?扱??焴??桮?冨??橶棁???returnダfrom俉俉??獃苅n娻y,?緍甮偭?€憗罉尫僶僴?.弧?儃W?窙辐s夬讥╆pop絑,?劌?勜?噇€馽屖 (se廐a壶lepos=0000319803?or??匬u>Figur?3-11).賝u傃驐a-櫬弒av珐琀剒,陁絰lik?ny飫恟??卄槝俋晋p€?袓爐絟ool,録?》》??》嫰〔unction炏??e)聽{聽聽聽聽€!var琀旓叒ggf'亀乻'l聽聽聽?謤?犅犅犅爄mageDataDisplay.value聽=聽theCanvas.to?URL();
併€3window.open(倃倃ue,"c侭I€?,"left=0,top€0width="聽+聽傜?€2刜亃乯",height佷?€粈▊俖€2"冟olbar?resizable=0"嗺?}
<€囪凞4pt"鲉?€aalign="center"><唅骾ze="2剦€攃olor="#剱">Figur?3-11.聽姵鍃ported閹1?th魫菈F倶墴卭墴厪厛12厳厳厳厳厰b>SECURITY_ERR:腛M臱CEPTION 18儼?儚冿冿"3冪冣僶僰In髈m嘸eb鈘owsers,髐ch醩莖ogle胔r?,鵲u韨翂Qerience醤錼ror (叿叾xception叞)鱤en魊ying姼媡鬶e銓whi僷倛?is錄#寴(like乯pat壐n鎖ll魕p丠n 垍a€筫pos=撡321966嚙?悋敔濊€榰>Exampl悽3<!doc脖聽html>
€*聽聽聽if聽(!canvasSupport())聽{?丅€Wreturn侹€穩3}?€媱jtheC?剒document.getEle€YById("?One"??燾ontext?倊?C€?"2d伣佺併form僉???侷Box??侘t.addEv€HListener("keyup",劏併Changed€坒alse剹?刼刼刼刵fillOrStrok垙?剹剹剴c?剻?ke勄勄勄偗勄勄勄?Siz劎?劎劎劎劉侕剣剣剣倧剣剣剣剠F嘝Color劘?劘劘劘劖?勛勛勛偡勛勛勛勚旞劘?劘劘劘劗侌剣剣剣倧剣剣剣桛aseli??劎劎劎劎?勄勄勄偗勄勄勄勁Align劘?劘劘劘劖侜剹剹剹倵剹剹剹涒嬂Weigh嶇?劅劅劅浻?劎劎劎偀劎劎劎劌Styl嵾?劅劅劅劄侜剹剹剹倵剹剹剹剳shadowX剣侘剣剣剣剚侅剋剋剋倗剋剋剋剋Y剋侘剋剋剋剋Y剋剋剋倗剋剋剋剋Blu?剰剰剰剰?劎劎劎偀劎劎劎劎〨??劘劘劘?劮劮劮偋劮劮劮燋pha劎?劎劎劎燋侙剹剹剹倵剹剹剹矖皘2効?効効効矡?勭勭勭偪勭勭勭?偁Typ??劮劮劮?侓剣剣剣倧剣剣剣剚canvasWidth劅?劅劅劅剻?h劮劮劮偋劮劮劮劮H???効効効??勄勄偗勄勄勄勄s?墴??勭勭勭?Siz巓??偳????偹夌侴侴???????偳????reateImageDat?匃匃勼lick勱??Press勶勶偨pattern.src勱狉ure.jpg"亀乼drawS?en(俖?unction??聽{?丅聽€弨z//Background€還靋救剺.global╖匤1堬乢乕瓽r啠#707070唲亸仧仜OffsetX仾0乷乷乷乵Y乷乷乷乵稱乄乄乄t.ヱ挷叕ffffaa叝亸亸lRect(0?€!theC旉.w淁€梹恏棐);?嶇孫Box€穬哠troke?"#000€?仧仧仒?5刾聽€1劎?-1呥匫€皳傦聽?銆€?聽//Text
聽聽聽聽€!cont€?€)Baseline聽=聽€弉e;伩伩伨Align仸€r亸亸亱f€@乥€IWeigh€x+聽"€€J€罶tyl?€縺糹z€磒x€莕tFac?儣償shadowColor兪€噐伅伅伅owOffsetX伩wX仧仧仧仢Y仧wY仧仧仧owBlu勛€{仧仧仜globalAlpha嫙€q仜伹伳va傕xPositio?(theCanvas.width/2)儑伹伬y伹伹伭h嵤佄侘侘聽metrics佲咠measure擸(message冿?侚亖W??俵厯兎伩伩mp庯?€ if?fillTyp?偢"c乊F€?)聽{仧伩€ 偊嫗亼?仧€ }聽els???歲arGradient儳?俉啎g乼奜奌createL??(廎-倗倃?娬/2,?n€`€謤莖n??€2勍.add坖Stop(0,?€爜鱽讈鱽鱽?6?€鐏讓瘜瘋u亀寚寚寚寗伇al寚??宊宊宊宂R俉宊姵?聽傳傜€W?丳?+尫俫俛1堢?婄婄屪娺屪伹侘侘屪屪屪??屪屪屪丟屪屪屪pattern専伹専焽僱導尅P?(俤,"rep€?)倧刜刐僩€飭圤?倃灖€witch嘕O姞roke嗺丟瘯昏園乹":??乄哄乆管?∣侊伩€W??€…攚摾犌傁?€Wb?k?€蠁?s???€W箇乯???伩??侙嗊嗊嗊嗊偀俖嗊嗊€瘑邌赽oth喯?€W嫙嵡喛喛亸€W€W?嵡嗭嗭嗭嗭?€W墖?劼"#000€"?伅€W??剹剹剹剹?€W????€鐎穩峟unc?澇BoxChanged(涳偋arge?e.€k?乁啘崼?.value乄乁drawSen(嘷単€弲g卋扨l?厪厪傦厪厪厪丟偋偂叿叿?叿叿叿叿叿叿Align厽厽傋厽厽厽丟倧傕厙厙乬厙厙厙厙厙厑琠k?厽傦厽厽厽乄傫偋?叿?叿叿€鲄穮穻7tSiz厳厳傁厳厳厳乄傃潣倎厀厀乢厀厀厀厀厀厀筬厽厽傳厽厽厽丟偗紵"#"聽+??伔???????呥呥傁呥呥呥丟媠Fac媤厀乢厀厀€鲄w厀枙傪Weigh厙)聽{?銆€?br/>聽聽聽聽€!var聽target聽=聽e.€k;乄乀fontWeigh並?.value乷乵drawScreen()€?聽}€b€?爁unction?StyleChanged(e)聽{乢厪厪厪厪厪倣厙厙乬厙厙厙厙厙厓shadowX厀厀偳厀厀厀丟倊単単乄単単単単単単owY単単偳単単単丟倊単単乄単単単単単単owBlur??傔???丟倵u亪厳厳乷厳厳厳厳厳厳Colo厽厽傜厽厽厽乄厼倸収収亀収収収収収叄textAlpha厳厳傋厳厳厳丟倧a丅(厪ue劎厳厳€鲄梹弲梼 Fill埅2吙吙?吙吙吙丟偡偝乯"#"聽+嫥嫥伩??????傽Typ?呯傁呯呯呯乄傃倓?厀乢厀厀厀厀厀卻canvasWidth厪厪傜厪厪厪丟?heC偛.w偣吳吳仐吳吳吳吳吳吳asH礡呄呄傦呄呄呄丟呄s.h?呑呑仧呑呑呑€弲讌缘歋iz?咁伔?亯岯労document.勮Ele€YById("?乻"勄倧値?倵倵倵倵亅偀偀偀V塓??:汣?奵€?px;聽媠丏傋傳﹌???"刼嶰嶮setAttribute("?",匫?唎幏幏€鲙穽/庍庅reateImageDataPress庍伔僕壓i亶Display???亀乻寃偪??墠杹堟to?URL??win簇.op?倃倃ue,愄噝","left=0,top€0徱=帡傜??柍悂,恈佋?湇+俹俖€ "兝olbar冟嫲izable=0堝伔?/>€_></script&g犥€ead€梹恇ody€弨坉iv拰="d?:none"??聽亼video?d="?V€q噣au壺佽€╮ue€坙o奨€k俖俖倧;sourc庿src="spaceeggs.ogg?t编="儮/€?俹??/?€/?€穱菄莗osi?:?bsol沺灷唨€?0?慁€u唶侷?垉€cO夝??500€h惻3€p?燳囆聽browse€Hdoe侶no慞suppor€HHTML5聽扡啹僛刉€爁orm傦埌Tex叐€醝npu俻崻€癇ox劙崁ceholder="y刡€閫袐7婖br€焸?聽Fon?selec?t€賴_?op?廻erif?€R喪?佔佔佔佇ans-?€?????cursiv旣€d侘侘侘侘侌fantasy侐€d侘侘侘侘侌mono梈?€v????€菍讇槍k聽W磗?屪層f??岀??"n抈al?€[勛勛佔佔"b拃伮€I伔伔伔伔伈er">b?銆€卭lder</option>
聽€眬?聽value="lighter"?€d佺佺併/select€穩瞓r€?燜ont聽Style:?;佀聽id="f??儶?勥勠normal?€[勏勏佔佔"italic佉€[佔佔佔佔"obliqu動€d佺佺???€?燭ex坹ize:€骾npu€恡yp僷range"埑t丳丄"佋聽聽聽聽€!min="0€讇譵ax="20€鐎?爏tep="1€還邍t50"/卭€绬€濬ill咢厐?巁嶺€鑰賻W?娗僐color俌丷C€q傐婘婘??昛nearGradient侸L€?聽€瓊w倃倃倃嬧dial倃亁R€殏w倃倃倃倃俻pat櫺n?€d侘侘侕懽€菋鐎瀾髩r?戼class姶?t妷乺€爠蘁F00慀?僟€焹_屗2僿僿僿僿僺2儅聽?儊儚儚儚捛燨僷Strok掲掲採Or€麚??嘓乮?€I嬬嬬伹伹伬s?€[佺佺佺佺佮both佉€I伹伹弴弴€菆/囏Ba乸柸垙垗嫳€鯃弰飫飫鑝idd?€[??佺佺佮top伿€@伔伔伔伔伆hing佉€d侘侘侘侘侌alphabet€????deograph€噦7???幓tom幫€X佺佺庍庍€菐邘邘(A?傽幥幥€趲瘎邉擢Aじ絫€[勥勥佺佺桼ar€R佔佔佔佔佇end伮€@伔伔伔伔瓉ef儃€I伹伹伹伹igh佀€R佔佔嬶嬶?嬤€圓扐伙伙?丠筼筼惑.?€缂1€鐎准伻?€鲊m佱ゞ?€嶴hadow聽X:???s?X僕僕?鈭?€€?€鐎讍?€邌咓咓€弲鮕咓咓咓咉Y僄僄咓?€咓€鐓鲄鱻邊鲄鲄鲄鲄鳜恖u????丵儑儑?刉€讍€鐔?€邌?聽????絁?究究?乥茎="70707??€?燙anvas聽Width?僌塷塷"c亃乯嗭嗭洆€讇讐u€飥飰€邏哯5伻咷咷咷咲HeY:唚唚唚仼仜冿冿?€讍?€飭?€蠁~3????Style岟唶唶唶唲仮??啩吙€讍飥飭邌?啩啩啩峎峎喿喿喿喺?凮嗊嗊€菃還飥飭還邌邖哤嗊€弲鐓鈈utton呿reateImageData?C€?聽Image聽?銆€?燚ata">
聽<br€巰穩穩峵extarea聽id="image俼Display"聽rows=10聽cols=30?伾/佌倧倞/form冞€)€篸iv€秬奲ody€梹慼tml€?tt><侶n€9blockquote><偵骾ze="6€xb>What鈥檚螁爟悆飌俉="3俉係In鬶is鉮apter,鱡閚troduced鵲u鬿?e鎢ndamentals飂€TML5胊nvas詢辛PI,€餱er侌some鏴neral鉶ncepts騟lating偵draw€Yo?e銈R,醤d鍃嶘in?how乤communicate?th凃鎹`傖厴ls.羢參侶顏竤ee,傄basic?咘wri?叡傪哶哫侚be鬭ke勅o鰁ry?plex (勸嗂m姪醨gue靧dicrous)靍ve刟T壉in囙appl吷ion,塂rranger 3.0噣ll?媢modify釓ngl傌?嫆伾in堭亪mos€i?i垁numb俬喠ay冐幒€竵憥邊恛v俋啟d??唹manipu屧??尫as.抁????摨???朁C?聽4.聽I凎凁寷枱枱枱傳傪Lik嵷佒膿$斱€巧?€遍s?robust.讙駃t墥怸load嬌埡洧鑹殠眣丂奨rect€`橽墝?傂伅俠欚o掅cu懶扞愌?寳€竬鋏s偍d餺r懕.苪r傌rmor枑?giv堾us儶abilit?st?斃r恅悺pixel?t喗彏乣凱?n湂檋ck唃忥幙嬒嬒>梹兒嬸wo餽囆姩卍▲c哘s凊per濃瀂搵嬓€銏U€粻儏瓨雱豰喣by€L?p瀫€駟7寳?on崁a鎒w怬?,鈲佇y飌埜up乣world妴-??伕婓尦儽d??r€rpow€Q檲嫚optim?扠狘s抩搱伖web舛佽塧o勅need澦囙lug-in?湳湯?????B㎎Fi@Set嚴?朘?淲淲悘??All?exa┵榒硍俌乭?us漿s拆璂f凒s凗飖€xem塇tr墝掕愢proc埌侾?gh倰熥I.諆汃S倫en()Im侶耡sics

The胊nvas罰I醠lows醕cess鬿魜DOM-defined <偙骾ze="2">Image聽聽聽??€羮厀尫尦€g刵1?剋€`al?="c兏er勶勯1澂澁000">NOTE儣冿儚冿冿澘圵僶圥In娯a圚c漜would頾凁冲separ€Y沷沯弉燖錫恍濪摬統悙?鍃amp畧work?穐閒applic瀫侤c勑a蛋淍昲內?伆倈匬嚟a?pos=堌1180798喯??="blue€榰>C戵聽9ov缎噐
怹tak?th嗻毀set梹f饊x匑θ,歝惏ow?vari叞manipul橲亪bo??鈥檚摿戉餴xels儧?des筽伱抈€K?埁旇乼嬱噮Let倸?洁look醫?mo€坆asic???悘旓????€8丱丮妧丅奩乢乢乢>剐???俰dx俉丟丟俉??俉侾y俉丟丟丅?灄?墢墢墘戨竕??:汃儻儺墝兿颾j栶鸿惾亸亷垹乷???噚?斬sグ拣s班晊?top-lefQr摼毎start?i??????堶">Her伻歽仒?垫珣傽烒榒?sp€Ps绝僉朙0,0勏(吙吘)?劅??嶗??夌夆儿ext.椏勔S勑揱0€!);?慱慱僶僶僪I?國a儛to餷ace?鰛呩nother鉶py醫 50,€鱡鱫uld骾mply韆ke鬶e骯me鉧ll鈛t鉮ang€薼ocation:

c€恊xt.drawImage(spaceShip,聽勮€));Exa囏e聽4-1骽ows嚭fu圶cod€Por鱤?夃have鋙n墍o鎍r.埉勶勶勴i儳儬.聽Load?d鋓spla?n閳檰2?.addEventListener('l匄'寈e€箒!厑ed聽€爁alse??src傿"s€p1.png"?€*func?倵倲()聽{?聽聽聽愘Screen?}?????爴O揙揙揂?亣亣亣亣斚?}???峎峎??9189???Figur???e 32脳32 掵嫸戀?斚匃勥勥勞醠ign="c岃er晧mg騟cindex?0074?baseline"倊222倊405"儴埀垹€g仦6???柗柎槇塆="#剺"?毀毀毀殼?氋嵡嵡勥勥嵜In餽a撠ce?€榦bab?獲皓槱賝f飖r鋻Hing←di奝t丠into幄葨;髐ch醩 噂??()揼t>.蓛Imos€9ways?€0orens瓲o鉹ea媓a€恜ar€Y儹,兎兎兊壈棾儻儵仩摌n?re?夛捒壸ょ?????渻凣溤?湕?仐仐仐仐?ⅶⅶ剕?ctx乸obj€0漢X€;Y€8嗏€@噵叿?if聽(?聽&痯;€*乷乷亃??儳儳儳?嚪聽}獉琱傋傋傋傋傋傂侽侷Ψ橑?橑??T廏抔抔偪tむ楑accept嵀€j潱厛櫚€搨傼x偗偍煴??y??嚢i冄s,亗a啘€j唺氳f€縺踞氊passed?創fir?vers哬煱??濭濭??is恪衑d凃?se垹d??驻ilook醫?儛壜s炠?ю叞凒佽n倸n?偭児绑幏3幏幏睬睬冭⒗傌us儮儉?pixel仼亞bitmaphi伻havedifi奾from羠i芿ldman鈥檚鍃ce嘓奌SpriteLib.€_儖f妶靑brary嬮円-戳d鏰m夝亗圛??h埌ma琱avail?or?搙n仮偫媭b姩s.賝u媭n噲€爥釀€?凣╟ 緪href="http://www.fly埿yogi.com/廐/剓厛.htmlń繜繘?????縪澂庢1?庯籫籫暺1€xb?籫NOTE犨冿儚冿冿捪盁僶?揂web溞寭th??牏ains飊灌洬l?necess徰稩omple佮?x珗??揰揧?掤?伻fit槵ed??兲奰嗊??em啑啋攬偢Ⅷ=塒0351813???Figur瓐4-2???勜w啯pi?⒋▄p圶t咹呚anva嘓On㏄丆伌桻€ytop-lef媂tart漚唒a亪0,0?乊o€(r丆?t 筯50挓??幏挆挆>To餫int醤d骳ale鋜awn閙ages,鱡鉧n醠s丵ss€(rameters閚to鬶e ?I?()鎢nction.苚r鍃ample,?is骵co?v傕?飂傁傁傁傁偵take剻哖偢tra魒厵卽:

丅,聽dx€)y€)w€)hdw儚塂廔乷乷乭匃乵represe乭?儌???€羠ectang戉por庨€蛻衯as鱤ere飖r髝(ce掚倄ll鈦〝 ed.蒮搚only鱝儭o敎俛仯€?4脳64飏 16脳16?would鮯乧following鉶de徸奼奜奜奜堢堚敯t挊.?spaceShip帹0€!,64€);
E?聽4-2烺s鯽riou涴嚇s?嵶.壷剋剋剈i??.聽Re俙嬹淴嵒?it閟㈦?傂噰??寚寚寕?聽ev斷娏Loaded()聽{?聽聽聽僸Screen(屲}€2€*????爭??巣傯亣亣亣亣34,32€伩伩伩伩伡68?伩伩伩伩€ 14??摨摨摨孏孏">Se疈撓撎973撓撓撊Figur悮3撉撁f澿?outpu?發摨勛効効労慈ign="c怈er攊mgindex?0088?baseline"倊637倊257"儴垏垁€g仧???晣晞梄?="#剺"堬-3檱檱檱檮変櫣嵎嵎勶勶嵆In嵂嵂?a>?hav勮d沊徵ray鈕x€帷槷pt?綡珻pl擯m冰皩嗱s??s.援8仮d?s満傗癧?娽?濒,骯v?傘lcula磖祽steps頴cessary摡眖a韆trix魊ans斎€x?凔obj多?绰c?a兟th€@?劻orig勦po刾噏ref法n穒剫top-lef嫛rn?垟?枫剺娧劋oper剒嬧c?匓喞?兎箋囈擩??屓嗋噚pply?呂泂?3??W彺屇two 32脳32傑巜縦僵how?紮仩玼屔ls釀hid匬i€€?柗煑剰皬?????歼乄乄乄肩洀洀匃匃勸As喐鎟om埅fa嬭慱e?d暡妔34餴xe垐bel壀仒irst,€Z匬ra媥剎醾e?庈倀妷倷un桏beca桖?慦al欝愶桙emons儓t?厽栿擴鋙€餹o€钄N(畑move)偋?浌y醲i???each?0,0?mbp:p尐break恱婫9婫??5€xb?8e001慀Cop棅Par溌徛檜C暡?弿樋樋?啔hir⑿e偸parame浶夓▄€竤灐?o 収曋擥)?t>波恱帬殏c?吷arbi嫺??tang屟f鋋t?搼a琗ur!?愷揓怉偢?嬝並?厡r磇??昛挤埊埊炆g??旸勥儛揩夢?s:鬁憇湊奣zb?lai楌u掤w€賯楖┆籔t稝peet筧 (al簇know夃?spri暊?,佋沊紣€?檺鈟琗?o壚r顝s)壧typ嬯嘿劺y劚崚綨€鷨2仩brok?up餳ysа矏愐巻猵帇.誷u????n錻??廧尰泂鈥渢iles鈥??巰咃r 鈥渟prites鈥濛e鱥ll鈋鮯ing醨e 32餴xels€郿e鈟€楄igh,鉶mmonly騟ferred鬿醩丂脳乣tiles.

Figure聽4-4
骽ows醿蕗heet?th鬶e鐁id靑nes魎rn卄on閚€鈊raw嚥pplication.詇es伩伕separate錫ch飂佢?俌€i儦噺blockquo仒囌4囎囈醠ign="center?img妏cindex?0118?base刌"倊127倊1壢"儼/兛??"6???嫶size="2剳孏孉#??-4.聽塜嫥t姲s憠a娖program峖倶€]??????7208勏??勦5??i忚卄actual厽t鈥攽Iout弿樔攖ha?橃u恱f欂our鎢r侶r鍃amp?彲嫍彲嫍嫍彲彲0104彲彲彯3彲彲奊€g姀???彲彲婄彲娢彲彮export毟?塝氞a€殶?導卂?厀怇僡stru嵗と涇渜me咗s儮th庲ird鰛爟垇M嗭嗠tt>斞Image()?.addEv捫Listener('load'?e€筍崘L€坋d聽€爁?e?侽侸src僯"?s.png"丟>?偪偧()聽{?聽聽聽埄Screen卐}?俖俍乬??//€?聽a聽backgroun?so聽w寛揱€he€P孈聽C撢勜dges?爾@text.憼lSty嶻?#aaa€嘃乢乚R(0,暕€!0咲丱両忥??32€(0,€8€椇,柊64坁牱腐腐??">︷you?溹e,鲯坅v洂h瑘?ⅰ擆漖挴挳匯冿in毙n多涜亸亷啴伅仺becaus澑皝s韔r?刪陁s?鼓櫻礱※η?????洜ign="c僷er溬mg磥index?0013?baseline"倊520倊685"儴嬜嬓€g仦6???澘墝煇?="#剺"?-6△△?△●愪??????Now,靍t鈥檚鯈0this髳蓵╟ep屫imula嘸an孭淎乣珔彵s锆⊕8?s犫峳div刪€2mbp:p呚break妬€瞼*?9pt"鱥dth?搥€?"0pt">Simple胑ll-Based觩rite羘imation
儢鉶m?from魜(倄-old冿嘺draw價ndividual?兝f?€饌top-left傂rn劯p?丳鈨?議e丼€觓re喥勝p埨through,?chan丮view壛噮,醽坅r勸嫍a鉧rto嚿噣?媰卬囑refer婡o亪墾ila卲rofess???.蓢遱ame-搃d?(?哹)愊卹壛嘪専??play侤back?w搚speci僪devic倄婅??奐c?ra囪倆処噧妕e嬝ded.柺a/栵栵栵?an鮯嵭媓歘="2歑tt>?I啯()?奼奜奜?倃俽岦++;
if聽(崬>1)聽{€?聽聽聽聽帡帓€賫劎幥幥??剎Orn?摪ortcu撓啹啹?啹啹啹?^?1摨勶勳氉傔傔a曰皉蘯op儚冪狾濷?A禓傝urr晙?st±掕湽co???bめll健?ng潬縼.蘣t爋爇€駌靹罀蔂`?犊?氝氝?杜10偛酣匬r匄嶱every?0韮@i€@A凣凞棃檃?ru筙tert?r??ome儃refe?汢a凂乧tick32坃?(?凓)??欁row櫌亐窼don?t?叝冪t>圚冞??導?埧宱偋?嚢xt.徺I榶(勸Sheet?32*埬€h0,32€,50€,64€慀劅愊愂€g剮1?剹€`align="c栢er??1憌憊000">NOTE儣冿儚冿冿?坵ont骾ze="?杸?">We鱥ll鍃amine鑟w鬿鮯e狒ile骽eet鉶nsisting飂韚ltip€鑢ows醤d?lumns閚鬶e頴xt骵ction, <€狍ize="剤€{倄or="blue€榰>Advanced胑ll-Bas€XAnima?
?€NOTERemember,媷媯髏art?t€?,鈛t鱡鱝?€駛纓?firs丠?閙ag孁伡nu傞 1?厙厗p?em??W僅尮sto惿勫ids?to帄挒凔愥屝ray:尟埱儘4埱埱埱>var聽昇Frames聽=聽[1,2,3,4,5,6,7,8];?亸亷忂徻伔伆嬟厬calcula嫚?32脳32髈urce騟c敤g嗀from飖庰?ぱ杍吜cop倆廽anvas.茪??neジ€餱??x?y靜c??top-lef媦rn抪橆兞欁儌┌o鋬s?凷re唓傃l鯽riab毴???drawS伆en()??func勯畄eacher厇 (宩)??p悹仴墎盝??媖X冞冐吪婍nta???倧値?俌剷,嫐慱仧?Y佅?????倧倝?俖?矴榑榑榎H簓狆pseudocod擑?僌呑夨儈対儛Ⅶ?Ⅶ冞熺??eX⒉i?ger(_?_Β聽modulo聽
卙_便_±umns?_€睈墣?聽*聽€y_???厪厪厛挋兯 (%)飌?塰giv棤u縓?rem嵭d岺?divis?塐n旣actu櫢嫪殟?尐仐n?oks靑k椯is媉咃呑呑媉媉甇媷聽Math.f?r([╫]聽%聽8妝32??刧刧?喯n???橭橭lu晵similar,鍃cep媃奰尠h羔h捐?嵞崳昣??収?勭勭勨昣昣昣昚劔d聽by晣晣晣晣晝時剾?婳婳叝叝炦圍揰揰揰揰堖堖堖??堖掃掃?掃掃掃掃/掃嚄嚄嚀剚9剣剣剠5€xb€攱Por="#8e001匟Looping淗rough?T孂儻?垁儫?儨W妽pd凑?埗嘩嗙枂翻?禓ck.議en侽侽侽侽侶beco姁缂殫鼇侢7伔t>網set粯鈇ck籌佅佄0佅t>?岀??尟倃??++;樅聽聽聽聽殌f聽揩???懽懸.length憍{侘侐佅撽0傳?}咷掔歸??ゼ??劮劮??淚?侢8乄t>彍?乢墢徔傮偫eq炨嵂伔?弚mus?弚佅佅弚??start而ad櫣ⅹrray嘂s飗摖ag粪?hi朻c擩s醤閚fini?墌秮p.?p鑕ight="?線?pt"鱥dth="0€`>Drawing鬶e詉le昅卭卨()聽{?聽聽startUp図}???SR佺?//€鶇?聽backgroun垐so聽w帎?€he€P愋聽C摢劆dges?u擛lSty怮塹#aaa€?丱並Rect(0,棏€!0嬤乧?倐Math.floor(婫婤[奊]聽%聽8嘆*32兿俹eY俹俹俹俹俲/俹?哶珬珬珬珬珬珬倧倞兛++呄if聽(€邊?厙厒.length惙伆€!倵ex=捲€睉憌憌挆)慜揝etI嚇r(挆?100聽?ワ??焈焈籜珹?rue彩??€双偤抍e€绹s鎜r€鷾鶄*畑ordern騟peat鈥攣Aonly餽oblem椐゛偘?isn鈥檛鏾秈anywh?.蘣?檚髈lv剏仩litt刞d剤mma縳xt儦dri?倲up亏n垪9垪эы5€xb畯畨#8e001òMov粫?羉ro秬€墲c実尶?冪3冪冦No硄嗮嬸ha咷k魊?s畢ng,靾?鈥渕ove鈥潄v.聐乢??d醦ply?嘪彂韨(m鰻饚笨 伾傿?i?愙む醕hi??imul弘of冘?偉嬒囷囷囲T粁儭is?first幚?刋?倫鯽ria戉?o鑟l舅curr呇嵾灯x樂t>囈??y??嘙s哬姛Thes橜epr€@?€襬p-lef愰r?鲿y€訖Ifrom飖r?む殐b暊?沺?奝慩.蓽傪vious淢坄垜顄mb?a?俋?咷咶50哋咹溼e?,櫪憕u??u?厜偍w灎:?★∽?橤??痁簝5Ъ€歽€瀯??僌僌??l?怹a旼旸咰噀醲i妏峩a嗋comm*kno嫲嘪呄呂deltaX匃夎(??抴?)??倂Y乢倃??摽俼叒y?恴炶俽烋?€xchang焤玃?傋棷傁冟伬?棫?樕壈椢?奵i碃灙.蠔0?泒姞fac?凾勷up勓嵏睲撋凣凢-1凮暏喎乄墖瀏嬶?>???丱巓丷楃敺敓敓楃?楃d楇楃€槜?1楋楋楋僕僕í呰悁ult箆岝?ck,?岤媄? onezero?s飊鬶e ?謤厁-axis.

Inside drawScreen() (which閟鉧lled飊錫€恌rame鬷ck),鱡傽ll醖d鬶??>dx偳偫and??dy??values鬿偡亣亖偗偗??偋偋,乯偘n醦ply€Ym僌??wImage?俽function:嬧a/>x€倄+dx€僣亹ext.凮tileSheet,聽sourceX€VY,32€,x,y€S);吙€9?憲匫匩Ra垁r埁an鮯弨堭hardcod恅??50,50僟?o?e靜ca塓飂?侊???撡撋伖canva嶘摌have騟plac刪it呅th?urre傪?憲,?傖posi劰.蘣t鈥檚鍃amin嘽?ir個噚閚 E?ple聽4-6滽慽嬤嬤?i??.聽Spri挵anim奡?movem?By騯nning?i獩摾煩ヲ髄ow?up?s鱤嬓筐r?s餷a?朮g?冴倄para峇s查妦??3??Ou簇?Z??h冟?楶礛匤fac唓?€檯X鼻If喒wa獝to传??仺o?d瞏尓?嘝鋙兏e僙wo塱ngs.詡firs劆p疪?傕?嘠mo礃噟剝??笜res?宦eft,驁,睊down咡僪Howr,峓method?qu卲€€uch儞work??s犰arg喞榹壔繂劎.椎皞go悞o亪l?儉problem?an?way?hi內娚⒏鸡n滖幒div攢€2mbp:p冐b劺k?€硛*??9?窯窫6€xb>Apply?Rot?Trans啫挘孊嵗狉榾樳揰揰僕I岾屓vious暩怞怌妭d偣剧us塨?from媝姉摠倎夬侴塗tak櫣挷钾p鎢r姴嵮us斻瘬氀嗊n韆trix?囬敯?帿be?e洹8?揃漺晳刪?al瀤働?儊毑a?ng咘汚?嚑?憼伬€@儛(€h搲)?晲櫰?愖ould靑噲僠dis?叜劙B吇乤ri?厬odlet鈥櫎訏蓋hat喒??倯瀝岟寬帍帍旊摴惗1怸惪€`align="c漢er攪攣1攤€揷olor="#000">NOTE瑥?儚冿冿敓楋僶2?俔ahle?=儓0094678?亄勏勅blue€榰>Chap哖聽2Chapter聽2
c晉ext烒毃?毾毾>To?mpens匢咢侶i墄嵄€爈og剨嫚嘪?恥B奍児?彽鬭nk媟剙sid潅垀倵倵倰If兞フ?俷?rot?wi冟a椏Ⅲ€8rix呹mus?儠?兌栐ope€鄰赽y鯖亰+?tt>save()This鉧n鈋鉶nfus佇醫鎖rst,鈛t閠€餭ome丳lear?th餽actice.詏鋬橈ur閙age?50,50醩鬶e鬿p-left?ordinate,鱡韚st髐bt俼 16鎟om亽current餺sition閰(o偫€?fo€豷ize="2">xExample聽4-7NOTE宱?儚冿冿?憌僶憄No櫛婹倳娺?伔??媁媁巼?嫀???炧浝remov?o妶湀l?嬋廰侟佭?栺Screen()昽乢??previous?s,溡repla?刞a頴w鍁焷listener鎢n滉叄?lled醘??凎凎匤涱?丟?hむb哷靜aded偁処冎儻??僛叢ShipL?埾亣亞暟???曣em??i廏廆.聽R滜┌nsform€z鯽riab嫺徹each?k.忥?9026?忥忥?忥唒s哘嘪攔in?咈爄僌僉6479僌僌僌僆7僌僇惎岟?惌i?渓楊奞渽浻個浄鑕?卛ght="4pt"鱥dth="0€`>var聽tileSheet聽=聽new聽Image();
?.addEventListener('load',聽e€筍hipL€坋d聽€爁alse?侽侸src僯"tanks_s€猵ng"亀勩animationFrames仾[1,2,3,4,5,6,7,8]伀亗f?Index乑0€?爎ot俁€?€?聽乧5€?聽y€焺協unc?噊噅()聽{?聽聽startUp夗}??drawScreen佺?//€鶉?聽backgroun妶so聽we聽ca?se€Pth€(Canva埨edges?c廝ext.fillStyl丠媞#aaa€?丱並Rect(0,0,50€!0嵾乬乤sav愭€莯纄tTransform(1侤0,€2)乂帨gl?Radi乭勈屵*聽Math.PI圚聽18?僄t.t?late(x+16揌y€8??偑e(?儁吙刱sourceX?兪floor仺摽摳[捒]聽%聽8嵏*32俹俹eY俹俹俹俹俲?俹媤?恑渰欮嚇吥€VY,3槧2,-垐€!€r噊埊estor?€貏++€穒f聽(€?=??.length椷仩€!倵伜?牁W槸槸櫹)槆殝etI呰rval(櫹囆100聽?/Examp毠4-8,倰should骵e鬶at€(€H鑑s驍赿 90鋏g唜s,醤d??cks靜op€gh€閕r??鎸C

峈??y??啽m盄鰣@ors;頾tic恷?????now丱丱1丟t??????丱両0丟t>??櫩抾
C?ting崆rid儵T儵咥-bas€€environment鎜r鈇ckgrounds醤d靍vel鐁aphics.譭醨e頾w鏾卛to醦ply鬶e雬纼Pg冐e鑑ve?arn僠from倛im?n閙壚飊伿canvas俰c?e€獎g韆ze?our鑩po?ti喞噐:喩No詀nks!哹匑will?俛s??骽eet剝€蓀reviou冟佽鍃amp嫚,鈛壺nstea孯show噝仒丷spri匒?,噛儂咊a厪亷嗋mo垚th啒gh奪仮not醕tu?y銇伀喩-play餺rti塇?塧ode勜€`庂hapt亹beca彋€a捜僷foc喐伬us呇媯?rend?s厛en.蒼 C兂聽9圤圡si妷唕凩垝yp忇f媶?n柸re?欦欦桹欦欚5欜匫匟#8e?2">Defin殻歛蚢p卾毞毞毞僶>抔抍囆m歖廐倫搱娐f姽槇噞欍毌朓buil擊a攪t.曕k墆look亗醫専寶036693専専寵Figure聽4-7導將鈥攨眆欃r澙by鍑Q?um扏樂劼潗li咹?廽?f廁?漁梊-?堭嚭彁ila圝?Pac-じ??could鋵翃s橰愒歩堬堬T昚equenc懞丩爠儾?w傟b?nsi?Р岴捵弌弌弆僘firs?伖?巔r?squ?℉h哛?悪?鈥渞oad鈥潊betw氿€陊烉?镰(傟t?憀偐?澙冟挌?挶s妬侶kable妷.舦?圸厫?t靷恟⒑伇?Ρdriv€`,姌p??爓爓爓撨爓爓撟爓爓爌m圓爋儵??妷睭,?t鈥檾€鵱tr?埨戧灚庉礲dis﹣t沧惭徾徔徔徏O夐俶參??wo-di?s?硃ar怸?閐顄mber帹樿you崍籭娿??晢栕峈汙?ng€皟f,伌唅槉0?31.虉瑂凥??糣婩?晲媜疌樆s??1偁旿?length?€楷墘仠 ?means儭ne敁??偝0佇d?d稑俓(10脳10)塀?昁32餴xel檧y€o簾?32?€(啑敌幥幥幥瀦?傾ma浉way?呑犲蟺€祃?槉o??錮it?pro牁m??o暊?廥ゅ,奟?n??悐dat俬盜-峊?傫媭JavaScrip嫢€p挔ise??彑彑樅?埾??????C???侤慩€qd簅熐審審兦??唃哻媝,偯,冭?孅┖?va矵╜氁Mac蟂,讚鑟w?Linux庎f沉r債俶玐?design枅擑h仩?儁娳渀僡mueas甘窧u侾夝?唥s????o髈昤惐嚫legwork卹u丆哋哃f柸鮪叼伈GNU€泂oftw墎li╬成犃璈h?="http://www.呰塠.org/廵亸亸亰???blockquo搥?1帺?€`al妜="瓑er揋揂1揋揊拆">NOTE抇冿儚冿冿掞柉僶曕A?t橉庎e娦忦?尠搁??t沋?屗???d椝o尠r暔od (?岄)岟?橦py (唀?嫴?漎co.uk/€Ppy.php??塷嵾嵽????奧a傁偹)?嘡Studio卂卂?s?.s?c奩ge.net掁????侽侽侸厽厽厽厺灒ev漧嶐♂MS衋int昘懽懼1em憦go??焮tile韆p?唨呴s鬿鰅sually靉y飖t徵rid飂鬷le?hat騟present€乪鏰me骳reen,醤d€﹏鍃port?佡閐侘侒€xos€髎.譭鱥ll鮻檨▊ed鋋ta醩刋two-dimensional醨r?in匬r鉶d伻o鈛il?兓map飊€俢anvas.

Here傌?basic髏eps鎜?reating刾simp??凘T€`d丅?€垈follow仭sect呅:?ol???tanks_sheet.png憿e崏厾枊?s?訃?鈥淣夢€?鈥潑櫚?噾giv彣?ny顦ou鱝n侤Brow柫o鎖?剋剋剅?伾download拤僴book鈥檚鱡bsite.嘝k卄u晍佇嫝W垯剼€zH墇枤bo€?2;雃ep塗rg旽乮Spac??俙0峸峸峸3峸峸峸峸峸??婌灷?敄嬽澖剎tom-r?si?€龋?蟦c亯俰ed,夑焁鉲ick喪嶘pain嵤?by仱瀞厐桱兊★€刼p-靍f??. Fig峹聽4-9骽??凒?exaA岀岀岀4岀岀岀岀岀?屸a朻凮ap.橜琘pl妶鬳xt囀匇m憳c辫?栢.tmx枆.蝷俨?俢畓ゝ唸s僗?砲擜珣e-64-binary傳at;鑟wever,楕?hang匒樫y錮i巖吜?f瓾愗儂慳c,鮪de姍e凾濩€€?孈u?牳a袀O?. (If揃殹us儱softw€檻燱烜巌冐Linux斆??厾??)?楌哋??CSV佸栢Sto燍?礁啫箶梱dr暲?檅凲h?don夡櫡宷祷湳??撉撈/ol簵抩簵姟噚?o湗t鳐a墯応憞>兠塀乯li?愂搄?or?a/杇杇"4?棇?s碒?><?xml聽抶s帢籋.0"聽婡od嬝="UTF-8"?>
1騟lative,頾t 0€?詇is韊ans鬶at€(e鬷les醨e顄mbered鎟om 1鈥?2閚stead飂 0€?.譭鉧n鉶mpensate鎜r俙傕by髐btracting飊€鄠ieach鯽lue醩鲀皉?cribe閯@o飖r?ray,飏餽ogramm吚cally鋟r倞?厜骽eet鋜aw€簆er乆on勱will鋙偵侴侱?cre€x伆?offs侤variab偢凥剱us?償???:

僷聽mapIndexO?聽=聽-1;NOTE儣冿儚冿冿"3冪嘜嘜>Ra壭惐?us奤傰乬埈垏垇圙乷乴峮,扐could靜op?rough傿扲暋data廐d斁 1敆敁樇w俁忦d暠be枲悁俙gam€乬楶,骯v唀ex倛?cess暊overlo橷?憄?m乲洷垁?樞?杍when晀?displayed.孫孫摬p?em??塠4強Ma亇?乯?€8朮倧幆倢歱also狕go唈o?堗wo宖o纾 鎙exibility灲??嗧崹d嫴es€绖鈙eem吚mp丳匒unne姽ary?w,鈛堷f鵲u鐫坕n?hab壐??剋晆囘乤Л剻,嫻徣mu寛easi暳?曍gs姃儱future岠?夨夨夨傗kee旞擆k?刱劰?ba!惏€瘳K乤rows兺?亼??瀈um畝?拪亹?戇??懅??儀R凁ひ10;
?,狤n偋偉獓獑礪???ID???亣亞[俬][?]伩伕?囖?opyホ€秙he疯€鄫G.僌僌*32??塷仧仚y乷乭愋at僡勛?凂;俖俖?冿冿冿仐仈x乷冿冿冾ο曠捚1抜捪€`align="center?兩1?€搮€or="#000">NOTE??儚冿冿柉櫁僶??尠,皪referen産m?礌em髤恏confus€馼eca?帯??劕?奐i?i厼€鱻駳餽ec姾楅磁倧仧倧屔倧€鱾弬壎:d敥倄厎our崥粁r€prgan佇d毨幇登登溊汯嘗alway匊fir竴subscrip矩澭acces?a 2D???憞崯憘em崯崯?敇fo窰(竮劯Ctr=0;€K<?R?€?+)聽{珖爜?爧x侂€K侅Cols€攣鑱蹅?糵Id糧Υ伬Ctr]+m?杸卆pIndexOffset;
聽聽聽聽€!var聽sourceX聽=聽Math.floor(tileId聽%聽8)聽*32???Y???/????context.drawImage佢Sheet,匂,伩佄兲,32€,colCtr?,row€T€?吳聽}?}
We鮯e鬶e <佈骾ze="2"><俻mapRows傋t>醤d??亅Col?亂姞iables鬿靜op佽rough?data倱o餫i倛it€a€醕anvas.詇is韆k?€鑢elatively冟mpl呧o韔dify伈嘢偄嘊飂€聦)?p€皌hout鑑ving侎fi啘hardcoded叞lu儊n凷€?讇Iuld佈e醠so鋙n夅?偙飦hr佸such釃竷韯{勆?,€駑ell?numb?厜亐s饊h忚??s扐 (8).??帨乢乢攱乢巣嗞for劎?copy醨e€萿俬厰sam嚫a€袏^previous鍃a嶑?time,?愌,埌尟勏勎渃勄劺us巎亣亣t>[?][毇]佔佇two-d凁nsional?kup岃?n醖d傜傜棫ぇt傋t>喲e巔€灵s犷eg曗廢(倗倖-1?t>),髽q侙effec椪ubtracts 1鎟om錫揾??,橷sult呩嬭0-櫿?摴a檂嵗easi剱嶺work杬. 叓奨or="b?吶u>E巸聽4-10暟??cep垐娙唜on婼僟僜8618僟僟僗Figur僕僕働illus堗t嗞e?s檚a櫁╣檾fun炩斂斀()聽{伔燿rawScreen()€簘?????碒聽(拻?=0;€K<斾€?+侊揥?聽??€K??€攤??俉€ 栟I?栃???+毌毄売?倃俻綄倆Maf?r(?%聽8喐*32???綾???/???€Etext.寔?憼匱,侊佭€ ?戉€,圫儓,堛€Q€谣|伹聽惂€紑媭A筭€8?痗€嚞КК⑨lign="c?er?mg报ci岏?0079?baseline"倊320倊€a儴??€g仦6???????="#剺"??T稰况pai侾d飊?canvas?祔?匩缚?荡N彁,鱡醨e鏾ing鬿靍av儴?worl僷f?-?d脙燌lop笽 (see??118婙???Chap垚聽9??潗?褰k冑a髆all鏰me兊?with?se餽inci亁s).詤竑inal骵?咜his銉iscusses鈛ild嚛書飛n屫儾媶editor.聈t鈋勦垬塇et冄re,塜t鈥檚靜ok醫?nn倝around哖d鷒om€檌n€zo俋啽n闆1.

Z冘兞P務n蓛蓱 嬒?傁3傁偹I搎?妼憡wi寴?櫊髈屫methods?嚈儶坸嘨暞?岾€藈e醨?珋€卐鏾ing鬿鮯e閟鎟om狎ecent鯽cation?C€坮al胊lifornia.蓆仭a靉rge .jpg鎖le,韊asur?3648脳2736.蟗viously,鬶?児ar?o侺僷view閚傕s侙le鉧nvas,髈鱡鱥ll鈛ild?mp?appli厔allow兞us俼zo啽nd餫哷h嘝ma傽丠our 500脳€(?.

Figure聽4-11夳scaled-down鰁rs?of堨匭劅blockquote勬4勭勨囪ign="?er?img帀index?0106?baseline"倊750倊啺0"儼/兛??"6???埬size="2剳塛塓#???.聽A埧埧埢?怣?an婎?€]厳幥吽11呑幪卂"5€xb卂匷8e??Cre揦?a讑衞w鎜?勦I勧冪??冏挆兲T佖first徚偫嗚ar?鋙慽c児€徐og梙l?冮歈e叢?檯whe??墹墘reside.讇劅閬ゝo櫯tw?ariable?c?rol?dimen寉s??:旼?旼嚄媉惙儤聽俢W丵聽=聽溫;
When鲀Xraw鎟om?偭€i儀vas,?will冝ying?windowX醤d乢乢乕Y乢乆values?create狃ann儔effect. ?color="b??u>Example聽4-11?monstr?s鑟w儽get圙飊圵圥?th€倕垤oc?s伖o??0?t>,???t>嗺嗹507嗺嗺嗰Figur嗠2嗭嗠s唸s嬓鍒飂呉output揓僟奜僟僟奜奜僩a>.

户?劎劎?劎劎彴sid?fram靖ick€爳p?.膗r郝ach惃op閫卸們in糀s佮?缄睮刉刉刉刅by乄乄1窏窉We峟breful頾簰go儉涤far驉賯x啫秳從so厼sub緺c綜?匴∵凮卲from仹仹仭?.攋仹線慴u堻result釘媘aximum倃倃塯凎憳i嬞:簄??槦涽傦傦wX+1if聽(€?gt;?俁聽-?€€?蚕侾仐仐仈珶珶??灖??檹檹檹檹檹檹檹棻nta梹嬧changes捓cessar?∴?or?iso€皸?嬈厀厀卽i??S?偟猭倄?偋偋???津媻嬟new聽?饵宬addE?Listener('l?'葛厩久聽€╢alse??.src?"but?fly.jpg"丟剓弴?亁定?€骷€??抯佺€臲€莵琭unc屟?唥()聽?聽startUp堳}??drawSen(??爲閑xt.?婯堚墾叕€VY€V圸€v囒,偋偮€!0,0,仐h€d亙寃伒?+濛€転'?湕効??傔瀢佺佺瀡仜奧姱姱嬒姉尀etI矻(嬤墄100聽峃檹檹">When鵲u鬳st粭??????粧倷?e畠埆灘醕ros烻st範a矯词mo剤ed盤螔x?塀?m杙鷒om?into鬶is?線咉imple鍃a€A.

Zoom醤d衋n鬶e蒻age聽聽聽0€鄝!亀h*.5,?ht€€);?撢?撓??a?lepos=0000418773梠梚b悎丠u>E?聽4-13韔difi懶倵倲6644倵倵倵倰2倵倱暋adds槱彊憅戱?喦喦喤i傦厃.聽?殱乣th狃reset敭Whe玐es?i???瑐se琎?w乤溋犯溞,皬餇僣anva狆s睧it道睪z搬浩?si僷y?€恈a茶fact焕fr乆灴灳.5??敌a顄mber鐁ea塰叀n佭佭1佔t>?墢墂墂?倃?棫棫棫棫愡棤?棗梂梂2乄桰2部廤廤呯呯部?42€???瑿4??峓s憇sing峱lin崢峛?调???调?帤慏騛惱帉芭碂嚙嚙碂?哫碂碂碂傏amoun撤婏??惙惙撤撤撤撤撤撤撤璯撤撤撤撤撤撤毕尺尺尺尺尺尺?Н尺尺€莵?啩???????〨?済済済済済?渨痮湻湻湻湺剋?橱癬橱橱??橱刼傔橱佺佺橱橱姧姧诚诚伅诚诚诚诚???櫳9櫹櫹櫷5€xb#8e001殣Applica卶:脕roll?瀋d跐葎刜?凎3凎凅Ou缠词窚娉垿砮堏?be??€H刉醠lo媓g氮us?劇p勧饘辚_?剋坓坋4坆T偢倆笂喯喯喯俖尽匑re鏾勱o愀妴)?绩潬iabl?o鑵h喨津urr?儻e?糪by鱤ich€'縬in?s寴丂de€l,醩??€@仼maximum??苺卬d韎nimum鷒om鯽lues:

var聽currentScale聽=聽.5;
鎢nction壏???壏??c€恊xt.僌photo,聽windowX€VY€VW倷€vH價,墷聽聽聽聽0,0,乬h*尶le€虂粈讇?娤娤娞?婏喿喿喼4€xb>Keyboard閚put俬偳墣俖3俖俒Now鱡頴ed屔徹a姞a雮峫istener?.詬餱ollo嗋g€企eem庲work鈋st刾釔(browser€鑰╡d鈥攊t鈥檚鉫rtain?not惒o€i冾ev塸?,鈛偁€侾ri厫a氿true佖rougho?th€鴅ook憌娺姧圤姧憌攞ocu業.on剱?n槡噸(e){怗牃{e?e:彌.呹汅}廮廮廩€g勬1剦勶€`align="c倛er単卆1?€揷olor="#000幮OTE儣冿儚冿冿?埾僶埲T婛彟util€袑€瀾?亸奟i>叏nary飌erator橉倗???彃€a骽orth洨v瀙?o峴classic??億if儑??/€縺縼胑囎??棙ns?ct.??狾毸em栫??d礂?switch?t卄?簿a?祳宆,?mbin憠≦塱欗shave穰筺改previous鷒om?pan寈amples,?o俬劺h厴newt孉cod從i>y?鋓re漑???t冎i偵卛獔沰敤敀?y嘝mila偢郊i>x傋傋ng:?lef?r瘣?婝?€醝粰侻両;€Rr岏仹仹仹仱丷廤???崀聽38:綯//up€瘈{Y-=10畇€?聽if聽(?<0哀??wY?侽€€梹攂糮k並厯40厳厳戳€績o僫+収€飬t;photo.?聽-侕H€妴噦?唲????噂€棁g噂岏7噂噂憽€縿O僠X?€邍g???乄???収€噮?収?//暡€變噧亶€邊繀簫柭?wW€亞弬?唽???冿嘷€棁_嘪??????叼oⅧ?玒i炟wo銐皊+-?s両per€豰?亹€駙bo﹑a?燺剋刜刜燺燺燺?0嵶嚪嵭-€穩禼urr﹉Scale-=s€9Incr?奼亣嶼伅le?min€b嶏仐僄仦?仴?乷崯€?毌丟?+€穬?e+??亣?伅?暩max?仐伔僄?仱?乷}???徢徢?he瞔user?s摿摚撹摎,峨?????variabl?s寮p傌i?梄or鋏cre?謤卪ented鈟鬶e scaleIncre乊鯽lue.蒮佲new€擄f侽侽curr?S倎??is鐁eater侤an佺佺max伹伵or靜w伔伔伒in伔伌,鱡骵t閠鬿伔伔僩伔僡乢乢??騟spectively.

僣color="b姞丠u>Example聽4-15饀ts圥奾?ire醦plication嘝ge?r峢t鋙esn鈥檲ake韆ny靑nes嵣code埳弨寪幨si儽閼Hra喞ons喕a/嗊="4嗊嗆i厳厬.聽Image饙xand鷒om?on€?addEv?Listener('load',聽e€筆?L€恊d聽€╢alse??.src?"but埲f廯jpg"丟剓windowW吷亃500?€鱳H?€??X€鷣鐎臲€莯臎G嬌€?5€?爼潃?€蠗絸?仐牋?伱1?>fun惇?夶()聽{?聽聽聽startUp寀}??drawS僠en()併??/€?聽a聽backgroun?s弨w吶ca?se€P暩聽Canvas劯dges?燾懭ext.浝lSty嚋"#fff€?乢乚R灎(0,0,?€!悷亀乻?撁慫??€VY€V愐€v怱,偋偮儵亀h*?le€虂藔讇袇媉媉塓寎婫峂etI焣畑(審?100聽?伒docu愰.onkey剎傪姌僝(e??嫬e?e:?.戧嬬妑sole.log(e.偫Cへ聽+峏?"?吘witc??兡奯?s?38:€讇鱻V//up?€蟺V嶥-=1涗€還W€!if剤乼<0劎?€W?烇??€W孋€噣W€!b瓳k???40?€鐎W泙婸?€邊O匥+圙€飥W圙圕gt;?聽-?€墘'?€W冞?倃倃倂勏侊€W?€W???7?€鐎W//left?€邌/犛扜€還W?乻扜亣乄€W憋扜亸?圙€鱻讏G?圙圔9圙€鐎W//r孉?€鐓W匰扥€還W圤圠扤w?徶㏑??€W兿?俫俫俤劘佭€W夛€W夛?夘10夨€飥W夝-?€莻?e-=?瑧儻亣€W奪?le捝min?夛仐€W冪來?侕兿乷€W?€W???0洴€飥W墄+?€莻?厽e+??佔伔??墄擑max?佺伔€W冪?侓兿乷塐€g締/tt>When鬳sting <倯鉶lor="blue">Examp厬4-15,鮯e鬶e醨row雃ys鬿餫n醕ros€p€铓?醤d€z+€R-乿zoom閬悁皁ut.

Pixel蚢nipulation?啛內?3?倇I?his骵c佈,鱡?ll奾rst鍓Pin垉Canvas袃億罰I坁n鈛ild釁 ?醦plic並demonstr€p崢h婙塦m俔姲傖s飫〆銉媻8?l鬷me奒??idth="0?踿€卲t">The胊nvas衖xel蚢nipulation罰Ish鋏fine鬶e靜cation?佡飂€蕇ource騟ctangl乸o鉶py鎟om?canvas€羳q冿冾ImageData冿冭ins倫ce.

<婏娭1妝娺€`align="center媁僘1€xb€攃olor="#000">NOTE?巜儚冿冿"3冪幙喦>A骵curity錼ror乣ll鈯irown閴髈rigin鋙ma€8姌a€貓y鎖奰is頾t婥ame釆8伔伔€﹚eb饋?詇伬aff寴s嵤l俽s (when騯nning飊鶏梃ard鋜iv?a侾r倄?廰偑serv€▉絺妉y??rem埳?)?s韔st鈬@€╯囉treat刲??啈ough?y醨€葢蒩鋓?r嶺嘐劜嘩嘠W唶唫厪er,乣園嬿奪?with堶es壛昲ur儮?s梱婅Safari (5.02)刪叞尗??r鎬 倗s暲抇抆a/狅敯em???4暁Putt嗰壂d??樫?敮倈T渄壉pixels婔n淕淕淕淕淕?瀧,婸鮯犽俫俧put倊(㎡倝func扐嫴彣徤two彿吶內ructo?娽媄仭:嚭奞娮珖?姛勶傪text?乷乯.哶ta聽(???傖峑峉傳??€?聽???倝d帮丟丟俉???俀y宍俖丱丱€裝r婅????倧乷乷?????????囎囎???俉丟丟俉??俉d?丟丟丆聽[俹??俶irtyX倧乬乬勥??倃倀Y倃乬乬俿?聽聽聽聽€E€W€W€W偀偀偀凗W涐?亣亣啅??倵倲H炡偀亸亸嫭]〨?〦?fir蛋7r傕mp稨p宠篐だi冞╃╃?╃╀佅佄des?a▔?佺 (乷乷??)瓳d偋?偋n恏亸偋乷杬?)?佈笇se垬d埱埨?唝same,鈛t醠l縫矯ass礩剐a 鈥湈騟c圥gle,鈥濛hich€爌res姞佀?a伇塐匞??啋娙?戴瘩秽?彲9彲跋?5籦€揷olor="#8e001冭Appli垼跃杏tamper?搰??儣W稢go緣厛c噽地a揝€H僕唄at佽ll娿嗞粈?o鑳l?佖box偍ou?som????,啇py?m,憭€Pn藉m醩?啓妎back姉姃蓜|no?叐full-?wn錮i搱g?凐by僪y韊ans鈥攊t鈥檚陁?a鋏m拪乕彣on嗿?岀???obj捫弴煆?1嬦孏€`a夎n="c撠er怬僫1怬怤000">NOTE彈彈儚冿冿?摲僶喰Thi?壙?ee?o婣run鎟o岪溡l飏櫲m?web滧rver幚s韔娯br淍ers侰th€x怚excep?i湼愢儣醫temp?攼揾 ?匴?ge?(玙乷乵?獦le徹ev搥i枡鎜ld朠?啱machinecurr屫鰡@慄Safari (5.02)?擜?t?error怈尶恄em寃p?顎卼">To鉹eate鬶is骾mple醦plication,鱡鱥ll鮯?€ i?sheet鎟om錫rlier閚?chapter.詠h仺r侞c倫k飊狍pot€Q倃俼,鑙ghl€ ting?32脳32髊uar並偂at仯ca?n鈋餫inted偁to偛bott勜sec?飂€瞾榲as?o鋏monstr囇pixel韆nipul嚡叢s?佢olor侲亰s鬿?new醠pha鯽lu冃efo卶hey醼H勢勌s媝en咥塒?咗€蒱umb啺beginn?亪mak€Qou冃w噋嚬map錮itor.

Onc嶺g?唶?tanks_嬟.png鎯幉Figure聽4-7?a/匞="4匞匔偒size€鑰xb>How蒻ageData.d€(閟飏g?zed傦傞.萫吀咢[d僪?:殾blockquo嚑氾?氾僿僸?聽(j=3;聽j<€8嫼廚.length€?=4){
聽聽聽丱両[j]聽=聽?;?}?€9????梙悩r盃?姃惾呄呂3傳t>?hi媭??th斂浾漥?瀇瀇瀇?a€Zinuou竊嶘懆惎?l,髈?dex匞匞匞梺represen怭剨恮偑呹irst懺(柦咑?0?瘁ve?O??skip磈C圠???敜權稜擥呄擥擡??儂鹃ot櫣攑斠hav僅绝?夰????枃枃慹1?憃€`align="c妶er??1标??#掂">NOTE敮?儚冿冿瞱歰僶唄A礌p?o堾r胊nva煡m祤pu嵙o掟w?幖?tw??1,????255倅n??幚via侐抍???嚪嚩歼媟em噺噺歼b>A?su欂悙k滱封asic?on??姧??a楕le?=峘0441609??瑼丠u>Figure聽4-1?u?a哺絩csho澸圛si?T竔St箑?匫n伻?攃?堊擥擥擥塛擥?擥擥?寳擥冿墽冪墽墽墻沖?????奦??娚runn?n觓fari 5.1?c?楢媞丳wri擸???only鈘ows嬭坎do獦n?官w」excep寭柫try儔毟?欅査抽儭a?€@ad淍埞?傫吚冭?webжr??婳w嬒槆嬒彲彮imgc癛?0133?槰eline"倊256倊€a儴?忂?="6忂??峯彜i徔摽彠13.聽竌槆槆澦堲侶塐?濷勛敩??rok€Pu卑n?two?c↘?t儉戔伇t侧€鞈潏?脳盚魠Isheet;€蔮ottom焥€鈓ap焒am焿ze偦?r炿孒傴仌脯兎n秔乺b孁?婬ht挊b剐?灌quar傜r銜兰奍?僐皦僎嚿僎匛draw柟?a?low俋po垬on.讉亝Ms亽埁乊€p乬叒ュ鲸呰抄睕?贿贿
Adding韔use鍁ents鬿鬶e鉧nvasx????????傋<焎聽id="€c"聽伳256€h倳€s聽styl?柈聽absolute;聽娨?€!top€?0px€衛eft€u">?聽Y聽browse€Hdoe刾not僅uppor€H墮5聽峵伮呝/厓俠堶審審垪垪寧JavaScrip滻r烞??峗defin焄兯?儚僿僿???孄=囇cum?.getEle€YById攈尰摽??兦兦兟Notic吂at哬搲潖??姛搹弇焬佔哋廐 幯伅乷乲怞亀乼.詇is婼発?n鎟om鈋怠sh瀙d櫫玚??-偵崰r?捈,鈛t閠?givu鉮an堥o庰m??ow€檹xd倎r沗?磑?嚙?磑?valu?whe?亸実実実侒tag閟頾啇?囷囷€竝age姽??>ㄇe傳傪疷孲make塒緪倷儼inform径off拸??礢??乄乄eY乄?bas廥僸啈??俉壪壪壪壩潫欦欉欉潫?傶堼蚕?(e)聽{н?灢e.瞏瀀X-硣壋L崘?伄Y伅仺Y伅伂Top仯}嗊爋爋啑啑啇恛喎恛?偳恮恡actually鋙駏i壺a鞌;﹜漺n.讝頇藴t??黑ed,拑??term?樴佽r??琡伝怳ti筯she撹o棃€瘯榩鋜awareal瀫it.蓱硞噦噦噭蒭勄勄勀ich鍃圶仯wa啚??亖?n?€S嫃嫃h?l?T?()嫥嫥n檅pas洨侭id (0鈥?1)??姈alo嚚with兦兦渙渙??捜帤峘婸??刧e.??3?护??嘃?€?師帥戠?醙a侶峎峉?儣彯塰囪stam砈cu?圛el痯?伿勔估?憌劤.萫r?s懅??湻湡垪????溙?側《if聽(≥ч聽128)?聽//秮聽呩€0o聽?乬乨var聽colMath.floor僀/聽32)ワ伹伬粯伹伹?伹伹伷勆I?佖(?*7)+(?+€`仧仦??併,亁*32,侎傽仹爙else埀兦嘒厙嘒厙伹嘒嘒伹嘒伹伹c廥ext.putIm拣Data(i€U?咜?価}€?爙Let鈥檚鬭ke徙loser靜ok醫鬶e鬷le骽eet€餴ck (mouseY < 128).飂?勔ed飊€?鱡鎖rst頴?to鉶nver嗠僕僔x???ati偢僼嘕圠俙a顄mb墣from 0鈥?,醤傽傦傦t>y傦傦厾俉俉3.譭鋙俙is鈟鉧lling傜傜傖Math.f嵷r??func?堛result唴curre侾倗帶嘫X俫嫏r丱丱忞丱喿n,鋓vid嬋?屩応俰悰 (€衴醨e鈕€葍?32?挋詧ill庤?伩伝row伹劯屟??col?捵挱叀:?a/><毾毞枟枔??var聽僅聽=聽峗(?聽/聽32);
,渻?鱫uld€0rk奧奧???奧凎燛洘洓50/湽聽聽聽聽/涁?1漛?仸15仹仱?0仮峯?0峑1+0亸伩丱僷垏?????渪posi壀€`夾se?箯?嶹堬>onM岄C忨(o?俒n餫ss椸????恎乄?殻淼鑙歱矝伩盻盻懸紈乢?乬???伩?????乬>h屓l岄壙壙壐秚tell壙侴侴侴侴侴嶴潣c??嬒呑??埀?丟丟岟??钩.渏斶3斶斲I籛擼map鋜a蔼area?€瓯@亁por噦?scree?ode鋙?same磜磘?.葌€ver?t曤€饘/嚙嚕putImageData??劇僎?叅侽侼???instancat鑟ld凷垝?€餸p枂top-left垹灿?pla?伀◤?審◤匞策ǚ??聽Κ乥╳乬畾乬乤?text.姀妶i€U,儛*32,禔仛?ёб嗁?啑啑問4€xb姜歘歓嵽傌?曠曠傁????吳?accept幯暟慩r?ter调tileId<€疯eight="10pt"鱥dth="€balign="center?儚"1€xb€攃olor="#000">NOTE冪?儚冿冿"3冪冣僶嗴T噳俤€讎舩嚐??醤d佭€邅躽佭?佪coordinates鉧n鈋鎜u個?passing閚宻??尟尟??value,鈛t俌y醨e頴eded傳佅佅傫onMouseDown?乄?function,髈鱡咈傃m?from€i兏when嘪ll嗁俫俫兂h嵃愯htT嗚()冏亀乼.詇is鱝y,兞do頾t嗱鬿餰rfor冴儽cula?魒ice.戯戯
It岪圥t嵮?dele唨噛埿鈕x?楤嵚urr???h塹prepar?侙劆釓爓??婒亁res氣??歐啛>朆?慼?啹愶偋偋墢墛傦傝櫗剚n僗int櫔 tanks_惒.png,???t>?嶰?噺?倃俽啀聽嚳嚭{戧聽聽聽??Image(嬃丣,聽0€!搇}勶掲掲勄勄劺N傝,??????pi旡?w餴xel鋋ta (with?揓?e揢it鵨t)?伴plac熈t玽勄勁圝D?剹剱in?nce屜???屜??債熀?get€?x,y,32€灟嬁嬁兎兎?冏冏喯喯v濊ab杙now媥nt椸塰嬔yд嬁辅r瀏??.住趎靜└th寛gh?嬋n勏勏勎.?匃勷(嵢deib?⌒vi?ly俁刾?pos=0000438887嫓color="b籶?u>H嗚?哛organ凱u?a>),憆s?呴alpha桔垜eac啫o哤哤?t>峎峆Fin?箑嬮th长傁?嶇?嶇嵠宩o?ct嫢橞?t坷d?ues絉嶐?匉鈥檚飧0堗l?聚樞m?殦乥map橭暦暉圤橭嚐嚉嗚聽X橺Math.f捫r?Id聽%聽8)聽*32?仧Y仧仧仚/仧籓?stroke紘"園糶?e紃劵,僛漝屪漘漘嚽嚽嚵??53726???Ex?匇4-16晽晵杚嬹豪ire曇昉cod?潚?applica斔岄勭勭勫i儫儥.聽⒀瓂訌檈r偋on噶偤囘傜傜弴弴弬<!doctyp儓html>?€賭?聽lang="en"€鐎醗ad€弨坢e?char圥="UTF-8仧?title€慍H4EX16:嗚喨聽喸聽A嗊亯/仏?すpt搻rc="m媊rr-1.6.min.js儦侁乕侘侘爣?"?/ja?€簠owindow.addEv庰Listener('load'?e€筗?L€榚d€爁alse杰篹乄乂(楶{?€*聽聽聽甤囸(?€*}€_倧乕Suppor哖?侫retur?M埻.亄偒倗倗冞()効劶if?!儣儛()儚?€3€E?儃€搣█e亸丮『欚C傟燏擛um塸忌Ele€YById("?"堒???倴?C€?"2d侊劉嘜侴爉ouseX?搥€?
聽聽聽var聽mouseY€粈鐎鉻ileSheet聽=聽new聽Image()??t.addEventListener('load',聽e€箒*L€恊d聽€╢alse俖俖俋src儶"tanks_s€猵ng"匴匴聽i劰Data仾context.create厷€?32,32儗?爁unction??()聽{乄乺聽startUp?€﹠偡偡偝亞俖俔匲fillStyle嚝#aaa€噇?亸亯Rect(0,0,256€!剣亊drawT姯厪厪€弲弫穪硡縿7?両悡嵵幚0€!?儚€弮弮奾ighl€ t儽俠Id,x,y冞冞?墬墬?亸亸墬墣128垙墬囩墬??搰搰t.get搊咗損搹侊聽//loop梹hrough倗a.d€)聽S洨攛ry聽4t?valu嘸to聽儴渂€殏鐐鋐o榾(j=3;聽j<€8傳傭length€?=4???伄[j]=増哶?幏€繙禇蔢?Math.f嚢r廃聽%聽8?*32偡?価Y??侚/??彠寠stroke?"red???亁?呟,?嶥伹嚪杇杄onM獧Move(e??珱埢e.cliX-theCanvas.offs?eft匴佭璹佭佖Y佭佨Top暱厪€弲弲廵Click厳兛?sole.log("兏ck:奾聽+唎€X",€焑Y椏挓f斝?斲?儑乢?fin廝彂椨仐亣懡col懅懀?憼渿伹侘聽ro毿侘侖厫侒侊佭箯斻?(侶*7)+(剎+€`兎伅€2хх,仺柸,?儫仹}e剐壙€蠄/????伹侘?侘?侘???.pu?(嗙嗏俉?㈢€棖€寳穉ddE缴Listener("卝m?"碭湉e€pfa壺圇侽侽侽梒???劎?>柹/script&g?€ead€梹恇ody€弨坉iv€噣€c劼櫲d="€c?width="?€hhe戀€u="posi烋?ab澵ute沨嚡嚬op€?0px€衛€u"?聽You恱b峘se€Hdoe刾no脆suppor€HHTML5聽?噖厓?€€寛?tml€?tt><侫骾z堗1€xb€敂`or="#000">NOTE儣冿儚冿冿"3冪冣僶僪2">As飂鬶is鱮尠ng,鵲u韚st騯n€踑pp掄a崺鎟om狩eb骵rver閚飏d€Hto韆nipula?曍靜cal 卪冞冑tanks_shee湀ngWe專need擝odify匯ba??fo??chap涁巖c宍昿?案ra 媁?烶燂娒喨g?ur龋`.讋Mam唋偪偪偪偪偪>錶em狆伔伔亾2?亁(敇?be鐣0暔ny閐峚lo寪€@?刞嶺嶓勸?€yfir楄僶???儮).萫浶歛h巋?????吢塕look靑ke ?杸卬ow:

<body>
.讍鬭lso頴ed鬿鉹ea?a€坵銇Hex?冃i€Xr呚騟feren垐variable鎜r儚儚?兎儽H佽閟坺cod姽at凨be鮯?provi€鑑?€筨oth僕僕嬶嬶坉elements?忥徸徸???if聽(!?S敾())聽{梂梑return?€迃else丼?爦樴he柍聽=椺cu厑.getE呟ById()偹?爫,侐俧侚C€?"2d伩兛乚2兦兦兦燯?兿???冞冞嚱}屵??宱宱宨a鎖le=0000460476?color="blue丠u>Example聽4-17??撽t倶骽eet閙ag?rom錫rlier鍌Cs椻draw滻?佈firs冃婯蓵魛衝剎py暔32脳32髊ua梡偸th棬仯偄ⅲ偍on⒆d偟昻埧埧埥i噖噏.凐ing儞on?儖吶a獉herFigur几4-14骽噲鬶e銌Z佽py鏆,s閚飌era€q.Figure聽4-14.聽An鍃ample鉧nvas乸py飌erationC倗倗€€an鈋鰁ry鮯eful鱤en鉹e?ng醦plic乼that頴ed鬿骽are醤d偒image鋋ta醕ross韚lti哸囁size=圸tt><div>W?鈥檚蝒xt?梍儬俉3俉係W櫒o朒壐quit斬靜t?悁?pter,埨olv?from冃惃y丳ad€2峛a姽圴rot€k嵢m.譭亹ok僗槇us€蔵拹shee慞暵€亴葖`?n慩鈛il噣om?泚屒?曢脻c殦忴c€銢Zapabiliti?蓡醽irst慲ur?儴僠坿mo€鴒f炐卲傡off??draw?surfac檟偰n??x偡偙will傐?mo?dv澒犐pic?嗱y傞2D餳ys€鑺駨繘邲邽棡憘pintegァ?萒ML5??⒘video⒆俤夞亸亸亪audi亸亶tag寗?佭佨?佺佺,?湙?懕挗?librar巋€驔獽?燻?墤宍e▅悵溔t畃f坾?????mo?璓evi獲瀇瀇瀇瀇瀇瀇?瀇瀇瀀C懨聽5惰Math,袗#坰A?渡????>Im?s洑??漷?in??斅奌n雗o?how奞m曕捿鈥攜ou醠so段亂乬乣煛way屲冇exp?€榬e0嶀und€瓒0?comm勜algor卲m孡垐-ba疉???棭ra熾.鹰I泀乀佀偘po丠?v剎o勅pro?炨牥n拆?楂 ti勦?慴垶?b伬c€爁「all??€@店嫾鈏②fri匤燞d?旾mix.羏?偑?step?承劉al€H儛t??go?beyo?stra悪櫂nes:鉯rcl毠spir?嘂婸?x耬zi儼cur怷瓊兟囼ャ?卙?rav歈泀aɡc凣.苅汙ly呯f粓s牘帛鈟鋓scu斆ea€:剚??傃ha扻a峹s€Xe僑墵怬朑溙洘洘榦洘洖M徯禔哖訅滾墭???偡偘F旇嶚糕e编d睓?櫳?僘懡儦?儤鮬?dow矉﹕佖夒埁tak?槈m?寷a?n?t鯽lu???珷x睓r??y???嬋啋?┕ry槪崘?腹n?墢墢墝So,?報e拋ph?懃⑤汿儴炾嗀湳c?潐?侎捸pla疨?up瀙俬??呌fr?.臿蝗exa尃旼潽倄be鈛il?崚imila€豠y孭iヰ?佇叏sep孃ne睒sa僷v蛋ab愷?勆嫹嫸弡App()???氳揜?儶,Ιic咑岠淓奯??顕谰鐒>sp嫺冏t>燨副廻冑???戠戠戝嚬戩??俬侽侼拋S咗en垏劤嫻亸栕?冃慖????尶嵎?厴揦呯f€聟?摠垹?)媐夫濛巣:槑blockquo宲樥4樧?厪厞?聽屭聽=聽5;
setInterval(drawScreen,聽33);鎢nction,坕??劏u坸f俹俹y??by醖ding?it侘侎??囐p嫺??variable姺嚙噺噺姺傔勲聽+=聽????偗偗偐Finally垝壛惇circl啒??.譭餺si?囐us??urre勜?匴匲x匃?搎???t>.觟nc姉丟丟俲?巆d鍁ery鬷m幟弲?c?ed,厠?eff椸ively椻s鋙w嚙椃??奯?匫匧渀text.fillStyle聽峹"#000€";
To犞壵up€rs?戓woul?ak崗圙??ga嬮顄mber僁掄left飏騽檭潷???惢nstead溝亣?亣湲凮噺鋓ago橶剋刾both???棢???幄搒a??.?岀3岀摛a鎖le溊=拺468613擳color="b湪丠u>Examp?5-1骽ow眂co?喐cod睋保廥噅asic堹m煓in嶱stra?靑n厹櫋吙挓吔i剋刾.聽Mov倗倕NOTE儣冿儚冿冿"3冪冣僶僪2">The鈇sic鬁(c畑e飂魛笂 鎜r厁l€xamples閚€€is鉮ap???follow両se騯丂.蓙Ie亐?est侷saving髉ace,鱡侂refra偢from鋓scuss???鎢r俋r,鈛t閠伝appear剝?餽?€卭vided.
<仚骾ze="5€xb€攃olor="#8e0012">M?ng耬tween詗o衞ints:詇e膇stance飂崽ine刼€ €\p刜="3凐刜刋?eme冟based飊?n偣刾hanges鬿魞p叝="勦xIn韆咗€(ic唜俰mm?way傾fin剎?length堲unknown鞄袇駚Huse丅Pythag噲?€€€Hm:凬table鈕rde抪0"鯽lign="top尒r€弨媎€弨妿7?聽A2?€陘l?佡 +聛鐏鐏鐏鐏'佷=脕鐏?聽侘侘?d€)r€)?審="4審寧th姌equ?,脣娯嫷s烒氂tri楶姌扂A屫d悺損al?dy雭?萶wever,朮?transl憫儚?捜o桼€笩 亹c彊?wi?凲擈s儂pixel?鑑晳vail?侾乊佮vas攃嚳擥嚰T?€a鏾od鍃amp?f內?a?cal卭i櫜r湳o噋?c⌒嚉w橀杦e浈傌?,鏸v?t嘂侭E婙ish,?兒婇s伬k夒?獹?嘒?抇>E嶭聽5-1徖t鈥檚憝)easi?nグ岮d僸儾盃攼玂厳?厰儣儛.聽?挜??伾?戱img撪c?ex€?141"焋?笰朡"?52侢240"傕???k??’?c椥?窲new幇?焫?紀???App()粺粯func潒W⑨範st€1a侽侽逗??凖,陁拡湂凩??紸崲?啈set闋矁W僔5?t>?hi怷m稜嘆t卌?佭佭佭??y暔佖儳佅t>drawS?en塆??橈樧??傁偸?聽夆聽=?;傳洘洘傁傁側?姼n?a殸u?dynamic颾jects鈥攅a塰眀?剣剢x??殎弚?>y?奍roperty?tha?represe彁o岰.苚瀈甖栵巼锊Xcirc喞from効効20勄愢??5?呝??t>48?侽?侽怬怬怬崌崌怬倗怣p1?{x:20,y:?};
Now檃洉?re-戩??綽????????汗?step?ヰalcul?秿s稐?斏?奯?埀?????斱?奊???偗?dx?p2.€H-帺.x?燿y€齹H€鹹??????To鋏ter綪壂剹ハ嶵?奌?r涜o燲佱va嵿滉璻恔d,醖侧hem€P奌?????Math.sqrt??扐廐g嶼?root飂€歯umber?圤?????囌媟勄dx*?+孖*dy)嬤嬤嬤儻儻?ext荤啫垼о?摲勛>d?€卛stance
閚狩ay鬶at鱥ll醠low鮯鬿韔ve醤颾ject乆uniform顄mber飂餴xels鎟om <偐骾ze="2"><僅p1儑儉偁??2?t>.詇e鎖rst劯ing鱡鋙閟鉧lculate鑵 many??叡s倵兏(伻?凎?t>drawScreen()伔t>)閳渢ake刋e圗堉?e鏸ven鯽lu?f??speed傜?W伬e?s鈟鋓vid嘺倝??嶗喛伬??儚乬:

倵倴var聽娨聽=聽剠/僐;僟€9?>Fin?y,庒妜漼a鋣?ic?妝埛?>b佖兎ぱhold?梠仧恮媤?媤??漮乄乢t>鈥穼穱飮飳穫弻秵翄J{x:宨,嬸€Iy}???僄僄傾劺嘠?堁inter喨栺?刜???垑every 33恣坕seconds攪劘剹剹囎??etI劥(冞囏33)嚳嚳嚰儜囘僌僌僋4€xb>D傕╉?b傋?俹3俹俴Let鈥檚鋫?€as厒.蓘{兿姀姀姀妷function?秌check岏see鱤e倶r偳偳?倧暀3窤g彶侀艰zero?f髈僯ar吶t盗suppos汙獏?acros殝?鈋cau﹁?ha乆not働吚殶?娇?de俻me丳? (伩嗊€?-佺籝朼刾n鮬d枍佺焈伔焈?焈?properti刾焵??ad幌俹畤?摈丱勥勥?倃倃丱丱?扒淕淕??倃倀if?届>聽0聽)癦聽聽聽尲绑€泬I?+ジ圕€鱻舯榾駟脌髛呥炏叿叿叞No淁疿our垙?瓛壸壯旴b曢懌d楘simply瀲梼t?偳嵖嵖嵖?寃?coor憳儛s髉ecifi?扨?侘?????暞暕,亰灱done塀i€豼n烜倃倃たた偸¤搬厐痝痓膦憮W嵖崸崸揥兿兪俙text.f傌Style发"#000€"??beginPath(皃€蟭.arc(撾,?,15,0,M乆.PI*2,true仹仮cl俹€蟿Y€?敺敺??镑t歌庱exa掟挩y€Xecut⊙i宧n釐(b鈘owser.賝u婸n嶘??cod?istrib侌矦as CH5EX2.htm佃i>,飏鶄typ抉 E匥聽5-?u囅a璉atch橈摆from犯e餺i個ぐa??糙刌厜枿i杔i曢€h??薄侹咼c?g佊檧滲?results墢d冃斐饂it?晲ve孁灺?.昇嶗嶗??4€xb>Trac崣嚈?:琉憼叐厒?b塷??3?傷F嗀many才勡s廲決hap毃ずw級湊?慩a拃o捀ac€xn磘揨勢宧憮anv?搻灘呴匥?sh┌??á???help閘lu?卻trate鑟w颾jects韔ve.萶wever,閚鬶e騟al鱫rld,鵲u€Xuld頴ed鬿€饋眮His鎢nctionality髈€癮t仭r醦plica€駛 perform?i冟potential.詡a€冮only餷ace鱻ill鋓scus€鶃 code,僘if勱see倄靑st??any飂俠l噣r鍃ample?嗼?hap€?哫f?back劑€鈙埨厵嘕fresh唟m嚢r側n呪嚽嚴.

First,啓c婙?a匬rray劚canvasApp()劻ho奾嗼set嘠poin劆塿ra?嶴?:?blockqu嬓匳4匴匰刼刵var聽?聽=聽new聽A咇();?€9????Nex坰load徕張k 4脳4餴xel閙ag廆兟.png,?噀us擧o?憪y嚉坱????勭????I劻?€z?br/匰€?src?"咑"塐塐塐刼刼刬When滈懸alcu枴増偮鎜汬n瀨埗?婈pu書墛亄€ ?e搹?壝?揱?夌厳??夌傁傁s.刟({x:ball.x,y€Ky}?埱埱僌僌僇On錫ch垺l?兿兾業S沺en??堏???鑑︷pu墂傜傜墂墂塹.襡bⅠ俥儌嶪﹁宐咈time鈋ca朖晢╝幐immedi弨-mЖ?surf幨doθnot?tain獳abo哫傎殥s囀憪嗎it庯嬁嫥嫥庯圙圔僅聽(橔i棅0;€P<€8徧length€?+)聽{橺聽聽聽c個燞.劇歋?,?[i]憖€w].y,1,1洡}?戺戺哤哤哖I珷a鎖lepos=0000481794?color="blue?ugur煱5-1聽聽聽聽€!//Box€穩碿ontext.strokeStyle聽=聽'#000€'侽仧仧keRect(1,€蓘1theCanvas.width-2€爃勱-2匋傔?聽Creat?ball??聽if聽(moves聽>聽0聽)聽{乄亀€ 乑--哤€還!僆.x聽+嚫xunits乄?乂y丼y乄乄€ }収€瘑袲raw聽point吚to咢llu?噐path佔伹仌.push({x:卻,y€Ky}奯伩€!for?va€0i帓0堾i&l墆倻length€?+??弴弬d?Image(?€Z庰俴[i]劙€w].y,1,1匃傋?€績_僙f堌攇"攄"媤亸亱beginP?(椬??arc(夵夒,15,0,M伕.PI*2,true???close???呟??噷€c尓speed嗿5俹€鋚1€蕪p20廝250}??2?48???d柛?p2?-偵.x??枑?€H?y??istanc寢墥sqrt(dx*?+?*dy埱伵?仺?/囈丱丩浻丷(厙厐)/?亸亴?亷呯亸亸亯彙墺偵昿y€Iy壡婎?乭ne澃Array幏乶χ?ocument.getEle€YById("c?One"?憻佲?佽C€?"2d仌伩爏etI?rval(湣Screen唒33乷/>?>煴/script﹣€蟺蔴ead€線慴ody€弨坉iv兏渷="position:聽absolute?top€?0px€hleft€u"儚倁坰0d=堊"聽眾="5烪聽盨€s?聽You嶲rowse敱o掗no?suppor€HHTML5?妔?僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">Moving飊嶂酣or僿兿p僩="3僩僣?betw悩魒o饢Z閟鑑ndy,鈛刾ometimes鵲u鋙n鈥檛?ve冭亽鬿須8€@,劆ly€蟧髏art鎟om.蒼鉧s侾lik乸his,閱餫n?鰁ry鮯eful伾昉穚俋埊="囙<娻v嚖?醩乆means剘厐r颾j乭.坮嬿垪垪>A 圓a駏antity閚餳ysic?ha?s鈕th韆gud卄nd鋓r?棬.苚凐?pur楶e噃澬?冟ll嚿€眹/?р??of?忯喴,儾€箖謧螉纻莻芶ngle偳偫唫?倹??up咹夌夌夌夈T侌good頴w?偄匲旳娝€購Jsimilar峫擶擶ts憭??滬App()咷t>,鱡鎖rs亁et嬟侊娍娍圏(尀).詳皢e顄mbe?f餴xel€珘'?嗮e啔c报唩儻儺厽冡.讗D厬槕??亐5伔伔l醠s?佢e沎奞涬(??p1侴t>)鎸悊瘍鐏瘉p20伅?????:憥н懼4懽Ё?烕毫岯穫5?籹1冀20,y€(紙冞玾玶晣兎兇Now憐嬬?刜檕憌(汧)愌?今奪奯??4嶨俛deg悹桟ma?€(?灎鎙a炧stra?n減su?y騟pres儴敁0烪?唨hic?泿wi?燩?厬45兣鱫ulddow?o倸r儶栃€i泏?娍?娂W僫?僺娙?now犎e傶con檖t€pradi厁.襽K醨朮ndard鯗葏﹤儐豷ur媯mo焗壸al?cu夃?s塇qu峱狄冞坵????乧磻碢?嚪嚪嚪嚧So嬝y?t陁剤佡偟?偫g?嫷alto€€her?耬ca僑)mu??i0勑unde嘖??嶖h﹑work煛?彌儷?€╯?2D髐rface.議il?秬卐徙ircle鑑s 360鋏grees,閠€ust醔out 6騛dian€鑧hich醨e鉧lculated鉶unte俻ockwise.詇is韎ght韆ke餰rfect骵nse鬿€皌he€(ic偯b?€筼ve颾j乣s飊?ompu傝骳匄n,醤gles?mu刞easier.觨勷e鱥ll鱫rk€Pt匬乺?€餾t€鵱e叏僷convert飖r 45-?仜閚?嚰.譭鋙鬶a?偤侾andard鎜rm園: ? =偓*蛧?PI/ 180.羘d儴?娯ode:

冪冩var聽兒聽=聽45;
岎d乄乄丟丆撻d鈕?re咾惄僎凁re榡by咈?倊婻倗兝(n埿??伩?峩佅t>)?f滻w滺drawn儬tw攝rom?娻櫢婐€r焜.挭??扜???恠?悘倂3倃俿?椞m?ur厙x-ax〃(??x凎囙攐攊?啅啅啅倃幏倧???俫唡峇i朒咹ordin???endpo∝?兿>y兎???冞冚You殥s?歲儉夃valu╔攇a?? Fig?聽5-2戂塤嬁厗?ign="?傂img?cindex?0129?basel尃"?20倊345"儴塷塰€g仦6???怗寍i??#埲"圇-2.聽A矺??anva?垖?ㄟ勛?剰戹笧?m妒l扻熑伏he?a?y卙?猔ay?ink紕it:侙朅鮯ually金als淬卶??擏P戁侴侴侴侴?侴侰?旟u敤倆偭?呧help€喟?瘂?榃??礁睪?numbpixe呰儓債帛?n錫ch佈l?喛唸?S?en(溫?濿乷>xunit瑮?乄塽乄稅塓?仧瘒仹?di欨tion)篧硓兦??p箻??mag刞ude?嫽???Math.?坵?幊)兦伩伨?伩伝伀fun?毎Java嫲ipt俹俹俰??巤:燨憦?偳偭var聽?聽=聽噁嬡)聽*聽?;
I?匞敡敡偪t>?狕y醖孏佭?夛崡乄?乄>?丱€餬欒.?偀乄乄l.丳?don鈥櫕爃eck?秖whe???勏儊has鈭x鍃haus?bec€P侤?爌ot燅i栶競pa絹檂r鸺?鈥攣T?乴構敊,?€衼fore瑦.砂[nex?朢孼wi⒏exp瞂唹at?n噽閒?a嗚佱億つ?ch紿堗?垑n?鑼绑om堷亼su?國a俙ll??掲掲?婄?x聽+杙慶桽嵺€脨訓彇彇弮焹焹歛鎖lepos=贺0491367户弧b毙丠u豢-3骽ow磝姍倵倳795倵倵倫Exa贯偀偀靜oks靑k撯媄粻execu拋in?eb鈘冐彵R?惫??払孒廯?n?閘l攢ra?only禟???墌擑ign="c笜er?img騟cindex?0140?basel獂"倊50€饌|€a儴岹岪€g鑕ight=?粈€?6pt"鱥dth="0€aalign="center">Figure聽5-3.聽Moving醤颾ject飊狯€PorExampl創鏸ves鬶e鎢ll佖de靑st厾.<偵骾z?6€xb>Bo鸿ing蟜f讜鄐兏?p?="3?倇While閠鈥檚頴at鬶€(we鉧n銊鴗e狯蹈or佇th韆g毟ud€纍d鋓r€鄰@€r旔n韔v€犸bj€蒯lo勮it閚fi佇ely,儠probably頾啫ometh哘you僠ll剱e偍o鋙?l勩often.蚾s€a儥鬷me,伔wa?伆se€貋殑S唒€0€葋orld醨夝d勸by鈯Uo奝horiz?al喴vertic€hw?,鎴xexample.?嵡婳婳>To€鄉p?儛erst偣how?囆偢勑r寑s嫚si傞騯?n餳ysics.羖though亽€黶鮯u勅y醦pli壂s?l剻嫏帰be哸y亪efu唜崙animat囇2D塴s鈥攅?ci偤?勮??塐塐塐塐l厁T?s雗ow儀s ???refl扖:姈?娹4娺槦槤2€xi>T傔f夃cidenc?eq??凎凍巂i欑凎庣?庣俙儼儣儠俰儽僶樋€箁avel夾婜?h祤旙?殼傳卭塡?€鶄偒??r柺峣e怮檏傎暉p鑕ig?粈€卙t="3pt"鱥dth="0€`>Figure聽5-4
閘lustrates鬶at鱤en醤颾ject鑙ts狩all飥褥ine丼form€?5-degree伕gle?th€竝erpendicular伝drawn鬿?e餺i匵of閙pact,閮鑴x鈕unce€衒 (refl?)醫倶simi俰儣儝.speedupd??傦傞:穇砄穇み傁偵橉聽炩聽=枲;
墮gener哫d汅殑?arts澣s囏槇€@姺??f?╕椏弴弌弌椏??巺聽彑()搱?聽聽聽杇梸*聽Math.PI/聽18暏亄??cos(?側佇?仐楓仌仐仐亽}姛??囎囎囆I囷>drawSc筽n?垉痥os?棬盩昸?n鋫8矨?碠屪???屪勶勱?.x聽+埌姏?€聐€脡藔胏?ext.?lStyが"#続00"??beginP媊×€蟭.arc(冇,僈,15,0,弆*2,true仹仮close俹€蟿Yは崡崡垪垪垞N?孊test營se犂he?铏Ph嬝榮??→尌伻導穢?伭絢r?嬭de (孫孫坺 >亃C俢卝嗊t>)飫觢ef倈憚凅傦傦傤l傝0倃俻箋猵?浌唅沗鋏g暊s韎nu?€麅tvect凱攑which噺?tr?l?.詇iv侶??refl?棎?ltern縳伬y,閵?top嗭嗭昞嗭嗭塝bottom佅佅佄嫓嫈慶侴t?線?)飂鬶e鉧nvas,鱻Ylculate€蔭ngle?reflection鱥th 360鋏grees韎nus?偔v亐or飦恏ich€all閬hraveling:

if聽(偣.x聽>聽僅C唺.佲聽||聽?l?0聽)聽{
聽聽聽聽€3?聽=聽18?-€?乢乛upd堾B側()?€!}聽els?匃y匃匁???匊勶儑勶勮?勶冿乢勶勶勳Examp叡5-4?mons恏t?a愺t僅鈕unc€爋ff鱻皊鮯憄?rul€茵hysics?剘324??剏Figur剅5剋剆illu刴槻ode.?堢堢斀i??.聽嬃?<唅骾z幐2剦€攃olor=稡">Figur溹5-5.聽A亁漚鈽堚oΠ€€飂f狩€爥俬塷?€g?12匞匞匞匞匑1€xb匞匞NOTE儣冿儚冿冿"3冪冣僶埆The餺ints飊魛p尮醨e頾t錅n鱤en鍃ec榟d閬Cweb鈺K鈋cause€羪髄owed?脌€呬own鬶e鈇ll鎍r鬿o韚ch.譭靍ft€鵰閚 <€狍ize="2"€|color="blue€榰>Figure聽5-5倣€n屝倰亪冮帺?s鈷瓎簛nva劙w冊務cre槺墾戱?with€榝ew嵒岺perti劏襡c丵塟煢伵傽倐d仒evious?had巆妎妌x?????y??刼,亰look儓li?this:壠澾?4?潷?儂var聽喒聽=聽{x:p1.x,聽y€Iy};剋??峅僄僁A墷?€(r鯽riab?棓墄s徯尅姤(勥勣sp嵏?t>,墖????嬞unit???>y??)廆惃glo匑曬sc寪抜呩??撱App()侴t>瓣us嚑俓埛b?€袙妎u滺geway斲it炦乬e?泘?y惏楬沘?sam亁俬呧憫?樢伮栿o倫va碃s搹睊each棷ct?徸?徳Fo竴儼m-侀-?僪w滅湧n毰?hold猘扖剴ninform?痗??儁:尶尶涚忕?浵??攺攺??攺攺??攺??牀乢敮乢抙B怗a旟o埠?ㄟ?換よ偑ǐ?ad皹弲y顟@??>radiu?匯whi嫲濾揟伆儊灟wel艰hal€珌 ?怷胆藏i偢i≒騼")?揼単卋tempB:€乆,y€BY,?€jR€Z帰€歋€Q€?br/>聽聽聽聽巎€鶤€Q€鴯藗觻Z﹊€€Z}?┛┛啅啅?si筯喦傋孞e鋏f樴髈烜n?⑾悁help粔ag約溑愻沚??r€@儯寷叝叝?厀卻num?懅??圙?倗們T冐?b比抈?o?ndom豪?姧姧????maxS€€匃匃匃匃?勽?imum暚靍ng?だ?y鏸ven吢???偗??min??????韎n?????????奊櫌????倗奜??勈『撊魊ave匃匃匃倃匃匃>懸勥勥勥勥俹俬A藏rr箰?碄?η竐s?敓卭??囘followco煒show???灒d瀏ㄗ?????坺侾聽溚?聽;€陿紑?€?爺\€?€莵倣蓘蕘??聽?€騿?聽A姟();導ㄟ墽啑啑啇W惮?a骵t將珮orary塤嵕妝valu€槜蒭a禈?be€€光push碼in仺亖壸扥扥/fo?苺卬t>醨ray:

var聽tempBall;
,鱡閠era奰through犰oop鬿鉹e€蓧x€鑕鈥Iobjects.蝟tic?ow儚儚?僟?nd丱丱嚥丱弐e冊d鈋low.詇ese鯽lues騟pr€x侶劖鈥檚髏arting咅cation飊?囥.讉絿r刾om倱鎜r錫ch,鈛t垜offset埲鈟?厬€皥7(哤哤?*2啅t>).蒮偣did頾t鋙侶a峘som偪偢s鱫uld鐑?鈥渟tuck鈥潕鲀羨he啱app嚀s?cau堷€竔r?勏x剋婙噃??y???剝be剏?剦?剚墦兿偗偑s櫛傁側們?偁en搨s坽??bounce?坃?m?ck帟playfield愐y?墥墆?恓imbo?ever (which閟雐攛嬝sad姭you傕ink醽鑿?.涽涋1泚涚€`align="c敯erw坅1€xb€攃olor="#000潃OTE??儚冿冿"3冪嬒>W唙r曢嘸慲,€抴i?se慪媭occas?嶡y嬭柭st?嫧殎奷撣媄溞倎鎢r孈r飌timiz慸e顝€∩mak?o饗節Jis慶殸?bigg?su剦庂€豯ittlき偢澛吺tal岋勆溡侌冮夣勦ilepos=?0527842?斳実="b?€榰>Multip冐谤s聮チCollid€pmax劎?毬?剷earlier懖??犨凊唜犃憃s廝澵se?propo?暋掶(r唕)猳晧A靉r?栚ha掕€儊s????圼吙壸専呥旣x傷,偍us?宔?mov卲秞er:⑹a/??敆冿冪㈧ru洤??i>CH5EX4.html?聽(澬聽i聽=聽0;€R<€Hnum"€?+)聽{
聽聽聽聽漺佢Math.floor(€Z檵()*溠儴)+min€I;??X?倗*2聽+勅偀偀倸?Canvas.?)-佺*2)??Y??????妠???涰?仐s?亇Angle壙??360僄嫃倛an嫇侽?侺PI/聽180佅?unit峎.cos(倧s庰?哣????sin??????抷?{x:劒,y€BY,й€j墸,聽琤€殏恆噏€拠聙悆?€!x卋?€Z丠y€[}佭€ 漼s.push啿匢嬼}獰涀惯沰4?沰Now彻n吚?draw牼s飊?c?蒼sid磸?>佈S叼en()刉夺?o伆??should靜ok鰁ry鎍mili]?essi仩y但am偆呧?d鎜nExamp旕5-4.譭陁st?卄p?rough刡坓坒嗞??arra呚o騟nd├ea縳卋?稐嵡嵂嵂?儫??聽0;聽i聽&?藔€卨t;balls.length;聽i++)聽{
聽聽聽聽€E聽乮聽=€Ks[i];丱?丩.x聽+乨.xunits?乢亊y?.y?>仹仐€ context.beginPath()??乢t.arc(剆,?€;radius,0,M?.PI*2,true?俖?倄close冏乢乢乚fill?乢丱€ if聽勽聽>宧theCanvas.width聽||娺&嶈聽0聽崌倃€W婖angle嶁18仺-€縧e咓伅€WupdateB乸匉噂?€2}聽els?哤帢哤哠height哶?哰哋偡€W哋哅36哋哋?佅哋哋哋?哃€莯?tt>When鵲u靜ad <倷鉶lor="blue">Examp?5-5閭鱡b鈘owser,?w?骵e徕unch飂鉂A醼萴oving醨ound鬶e骳re?indepe€(ntly,醩骽ow€羺焻?7厽厽厵Figur厭6厳厭.苚r儝fun劑it,鱤y頾?h嵢e€騻胹ize="2偁嫄num峺s?t>鯽riabl仺o 500飏 1,匄?議at鋙es倐c搳嬭ok靑k?n?

聽聽聽?tempB乆€蟺蟨X€穩穚Y€穩穚Speed€讇譸Angle€讇譸Radius€還還赼n€鐎鐒竨nit€還邉鄝??爐heCanva垕document.getEle€YById("c?One"塐侌context佲俈侀C€?"2d仌伩爁o劏(勞i佲0;€R<€Hnum嬃s€?+)聽{佭侜圙u吇Math.floor(€Zrandom()*maxSize)+min€I呯俉壈?偊*2聽+?偪偪偤嘷width)-佺*2?????????height????揵僐囐€i伔惽仧??刜刜360儑侊攐嗘俵*俵PI/聽180侊侊晆冞cos(偗s徯侤???柤?sin???擶侽焆?{x:勱,y€BY,r夑€j奀,聽s俼€殏聙恆囇€拡"€悆?僟€2x參?€Z乭y€泒?伡ヂ.push?厜尫?亾€?爏etI?rval(drawScreen僪33湩侘€巰*渁/script>?€薶ead€線慴ody€弨坉iv?tyle="position:?bsolute炶top€?0px€hleft€u"儚倁?爤d="聽?="500€h機€s?聽Yourowse€Hdoe侶noグsuppor€HHTML5聽泟?僛喦€葊弨墖邎鰐ml€?tt><仚螗悊p€xb€攃olor="#8e0012">Multiple聬崧ouncing俙th崮ynamic€鄖襡倅d脝殑瘏p劅="3劅剾Bee鱡韔ve飊鬿髈m€亐纁om凘x閾塧c弎醡o刞暫,靍t鈥檚魊y佽伌th卲.咅ck佇 Chap僗杊,?r噒?銍拡姀r鎜rm偘ntro壺唄display舻葎q佲?er飂俉s.譭ll啑do€阺a傌唺頾w儃€翀鍃a?.詇i刌€榞i?you岪bet?idea僘h侚價韆k媊bjects婃廄d?噵冡?巣?師師>First,嘳埍夆?at哫wo塗攚="摠<枿柏ge?t>奦,庲婅伩伩凃伩伕?亸亸亶呫仐t庿仚ω叐ir?ximum鯽愋嶣??1抪?t>??us崺e€0恄柪傷塻儕凨怬挌at騯ntime:媶?嬑4嬒???×攽нル漿聽W侚?聽丵inpuジtyp?宐ㄧ乯"?min?€讇讑8="?€飥飐tep€饊還邒韩??br€弳FH垻哋哋哋哋乻兦兦哤€讍W哤€飭W哤€蠁W哤哤哤?峷捛??涍??I??嚝App()偡棛湻擇evぐ靑唄ners欌?η杍桱丼?兿兿h瀲溙?冃hich韊an梮nㄨ梙??牤?牣閟辈d,?铓竘咘淏b毄lled歐奯奊奊歐???Elem?聽=縼cu€i.get€腂yId(檊檂)幝佭t.addE匒L?('?',聽佔h?€╠€╢alse)?倃凮凮凮凪梔刉刉刉刉刉佪刜刔宊斪斪姉姉">T??鎢n緜s?ptu胶峱價﹔€y忊,┦導對??.??仐仐s.?槆瑧?n憿??drawS櫂en歘o?蝷卬t>鬿騟nder鬶e頴w骾ze.譱thout徙all?drawScreen()鑕re,倰canvas鱥?blink鱤en僶倄閟醦plied閚僄僄僄僄傿o俇xt佖terval:

僿僾function聽呺W亂Changed(e)聽{
聽聽聽聽€!var聽target聽=聽e.€k;乄乀厁C偛.?乺乧.呧ue仐仌囷()€?聽}€b€*厳厯H噐厽厽偪厽厽厽丟厽s.?収収仧収収€饈嵡€9屵??"1屷岹€`align="ce?嵖嵐1€xb€攃olor="#000">NOTE儣冿儚冿冿"3冪??>A朮of撊暲€explain曤gory鋏tail朾儨a鎖lepos=勅0202278偪撥?="b姼€榰>?p噽聽3500?t>澾咓澾尶尶倗倐柂卙B?旴?聽;?堖堖???Now,鉮eck铷P??522530嵎嵎嵃Example凐-6嵡崐 (CH5EX6.html鎟om﹞ode鋓stribu灆)琗you騯?孁a鱡b鈘owser,?sld?e 囆峵bo?e醨€@ds,釒Xhown巎??20???Figur嗿7?嗿??儜娛飏媩鮯搙€規??rド崸戻c€0rol厴仒y€zinue韔v侫u€x?€賖i朼搀edge漑嚌.蒮勱mak勊?sm塜?€坏yn瀫?w辅塒?亜髉ac箈偞adju歜?堆to壶apidly,髈m傔傐lo乸of?尒徣哰??ppear骨厰Xre?d.蝒at,鑥h?????
聽?觻€?聽聽聽聽聽聽聽聽context.beginPath();
?乢乕arc(ball.x,€:y€;radius,0,M?.PI*2,true?俖?倄close冏乢乢乚fill?乢丱€ if聽勽聽>聽theCanvas.width聽||聽?l?0聽)聽{偋倵€V亽angle聽=聽18仺-€縧e咓伅€WupdateB乸匉噂?€2}聽els?哤y哤哢height哶?哰哋偡€W哋哅36哋哋?佅哋哋哋?哃€莯棈蟺弨?爁unction??啳乷唚撱ans唫咷聽*聽攖/崚単?怉unit侒亃cos嬘偰凁侾€抯peed?????sin???啑垏€弨坴ar聽num圓偹50峱??maxSiz巸8€鱻鮥n€?€鱽鏢剄€鷤L+??吂?new聽Array潡?temp卶€蟺蟨X€穩穚Y€穩穚劉€讇譸A?€讇襌?€還還趯€鐎鏿X嵚€還遬Y€邔菧O垕document.getEle€YById("c?One"塐?佲灍佽C€?"2d仌伩爁o劏(勞i佲0焫€P熋?€?+????.floor(€Zrandom()*?)+懱呯俉壈?偊*2聽+?偪偪偤嘷珺)-佺*2???????????????榤伔惽仧??刜刜儑侊攐嗘俵侊嬈?偗????柤????擶侽焅?{x:勱,y€BY,Аus€j奀,聽Р€殏聙惌B€拡"€悆?僟€2??€Z乭珦儞€Z朝槰.push?厜尫€弒etI?rval(drawScreen僪33湩祻祶焎W栄Ch喐ed(e?剰ar焵壱e.€k劘?檹偣憑乥.勮u溓仏厙?€弲菂腍檍呄呄傦呄呄呄丟呄?呑呑仧呑呑呑呑€_>/script&g?€蟞ead€線慴ody€弨坉iv廐tyle="posi圷:攑bsolute?top€?0px€hleft€u"儚倁?d=療"聽嵅="綐€h圫€s?聽You洪rowse€Hdoe侶no墭suppor€HHTML5聽姅?僛喦€牨m??礛斱?眿inpu傕typ?g厜?乯"孏岶皹="0€讇砖?"10嗻€飥顂tep€饊還邜妶?埾?br€弳F昜哋哋哋哋乻兦兦哤€讍W哤€飭W哤€蠁W哤哤哤?峸€晹纮弨墪讝顃ml€?tt><仚缶绤X€xb€攃olor="#8e0012">Multiple陋耾ing醤d胦llid€p?刧p?="3?凔Now閠鈥檚鬷me鬿髪榾狌p醙ain.詄st僡鈨輔ff鱻歩s飊佽h€?鈛t鱤at醽Xt伔伔乮a毟her?譭剱ll畲 ?add髈刞pretty閚tricate垹d?ɡd圥儀叞揚偁?era?.嚜嬊嚿4囅嬊嬇4嬄娚?on喐n餳ysics姉姉姉傁側For動exam崍,鲊hre鏾圌咗ate醤 <?謤卛>elastic鉶llision
,鱤ich韊ans鬶at€(e鬿tal雐ne亼energy飂€鈕bjects閬乪骯me鈋fore醤d醘ter€覂N.詇乸€known醽?i>law偣conservat乭€乵omentum? (Newton鈥檨筰rd靉w)偁o鋙€憇?e鱥ll鬭k呰傘x侐剻€hy€jvelocities唈wo?ding鈇ll侾亖dr劯a 鈥渓?乊ac勝鈥潎Ptween?ir銋8ers??ustrated閚 Figure聽5-8悩properly鉧lcul勝偀偀倷姲咢徛怐廯幰佽nva捗ne厴to嫚栢??ty: 嶬size="2?tt>massfalse仧??琸equal佺佺塈ru佭?kn?€@hav?u?a饎賯1p恅掺??悜?嚌?????墕┞側??wh烪恮埐搙p?峧紣tin??i侶嬟s??s偗偗媉偗哫乄???狓渶攳圧笎慉愛ou彄穇t:秶瞱秶埧?枾擇聽=;
挔聽哾€聟r€銐?聽(!?)聽{€蕚YX乺偗*3聽+乭Math.f婙r€[?()*?C加匤)-佺*3)儞€橸傁傁傁傁傁偼坽傋傋傄Speed傭4€疉俯€獌??360?偸an????PI/聽180亸ve崍ityx?cos(俫s娙侙?佭佪y佭sin佭佭佫揋?絲?憌?ow攔n?炊a鋣ic?敤€ f昣s仚ju?号烡氀伳?伇敮敮吶B?吙?橝?矘?ǚ?俫>mas?侫prop敦y玾羐ai淃d勆?s荚?an€ lcul僆吂eff?都?h獉糘糎F?瀅???xample?呄呄呄吿??鈥攱秾?奜禇俉磗?beca川桨拘?2D┄vironm╄勼re嚫i傞僘??关ery€鄦y鱝y慽尀匊媋???font>. ?迉匰ince鬶e massFin僅y勱冊傳傱nextX?奜丱丱Y丱丠properties墾噚are錻ual鬿??x侘???y?t>.讑蘵s?€0圀醩 鈥渓ook醜ead鈥潉弰坥埲lp醠levi囜collisio寑卹occur?between?o€恑巿at丄壭hi忇l傴倝overl帢ing???愑oddi兩:尣a/>聽聽聽聽槉?S€Q€鴄ngle€扐€Q€恦e呰ity凔€v俖俒€蛣髝v?暋?s};幏€9堢??堽N歨峛?have?new鋣namic歐?repr?nted鈟】??ll剣殜riab囆濬test彊se€坔e熾t鉧nplac?勅???毌梬丱丱p毌両?r乭omly澊d鎜凂榦do內i′a劙厬o€P堘func曺瞀x儻儻>?StartH()凎泚If仐仐仐仐厔retur殸伔嗭rue乬t>婜d?嶡?f夨伹伭洶l??烪p;閒頾t侭s剚烓満醙ain涳?掲掲涳冏円柾€E聽廧OK渞??扢);槦仱}呑梠梠??剎T坥劅嬤嬤垿廣怷?y囱ple?t墎krough婳傜傖欩倵?rra眻楍?伖挋佭庣欸??櫲尡exi?㏒歡歜?獎摢€奷o机喯掞??fals掲凁愾滺佅佅敺伹棦T歺焸冐劋??a傌呇?on:??hitT俻Circ?僛?惂悘悘?傜嚝兲攇惡?)眕擶?ar皭et範?囜晣?Ⅷ聽(乥i?0;€R<嶒.length€?+僌?€Dif侤???皜?[i])侘伹€W€ 厀爮???€莯梹梻d?偉俉???岡?尫尫尪4€xb>嘢鉶llis暠det磮€P側?徯偪3偪燋傔抩妎抩??per?ms癥丣/€;劅-劄蹲渨検two侓s (each簭?a濨)鹁葮qs€Pr?ter炾澘?ar個ouch佇.耬caus僷殧bee?rack??浆c?r坥坥x?簵??y???ir█ca勧?﹛€qui涴eas兏囏alcul烶.苅rs?啑啇find獃?Ωanc?lin噃hat媝nn????奲娪?巾us圌ou?l?rie唸佡Py倄go@?he€Hm (A2掝€?B???€?=脕7??€?匤崱毕?婙next寃寃丱丱t寳両pro晙ti??忨惃?wa?挋氉be桯e?occurs.埲场癄f佡仛af嬔抪??urr寛?????挴?抐s?剚涃good鉮愨柉wi嗚ge個tuck喐€`洐僆spin?唄f戦trol.)嬔?n€恗?掍劎劍擬勥勜?u涐?sum?radiu嫆攝勧唤枟?燄?撔or錻ual俹俹俬i?0?篳汈a鰁ry厫mp噏effic?t?洑峧佫奾?庁works錽p?鎬卐cially鱡ll鱥th鉶llisions醡ong鈦s閚 2D:

funct傕聽hitTestCircle(?1,€12)聽{
聽聽聽var聽retval聽=聽false;??dx€陚:.next€€-€?€儊焷漼仧?€€仧€亖焷漣stance伿(儭*冔+倇€qy)伩聽if両伨<佡儷radius侐兂€媹侶????塆僐€3塐爐ru塆€陖€w両ur?亱丆}Figur園5-9閘lustrates鬶is佮de.搰搰刉刉凲醠ign="center儉img驐ndex?0032?baseline"倊329倊346"儴??€g仦6?????i埧埞#剺"埀-9.聽B沯?ding?佖屒劘堎岀剣??4€xb>Sepa?傌?e?炠drawScreen()?僶孁?3??T?橸崙倫we鱝儓to鋙閟冃mplify 凮燸儫儥撓鈟髤7?n偢c?r堣able姊ls.詠0idea匵r€P?a凚抶媯cor悩tly,卶need?make髮8髈me飂飖r鉧lcul?╞€鑔on塺a餫rti€閞飏der.譭靑????an 彣upd柛-帿e-re攬傪y幧?媁栫嶹??偦夛崕?嵶倗們Set?e屪傁﹤偡寴and丱丱?丱丠prope堌??圕e?儚侴侌?侴儔rray埲哶堶堶堶偋偉徤W偭????偀栛??o擿柊he呚r唎鑑v佽it飷槆X€褀€褏瘏瘏瘍叝叝>?厽厽厽厽倧厽梠?劰蓞+咞僉,鯍*s尫刼???丱?丮???厽?倃>橕????倗倐M濰柷傋傄唎唎??哋枃杺for錫ch?錻ua栬o??壪僩僩丱壪丯respive?伖哷喓mΒanva搊婳埾埾埲A俋ㄧ獩:瑚娺峗?峗???聽聽?聽()聽{€?聽惻€?爙???埊啛啛?跟U?彻posi癷bj尐?赶赶?傋甘傳瓱瓱彠?靜op岏rough╋╋偋偋╋搘╅戵烗佺佺昗佺昗丱昗丱樧傝with?佅洤傳傳?洤?椸ocity洍???鈥檛鋓??偋偋兿兿?兿??,鈋caus畃畨亪泬?gain€槸妭鈕苞峓be吶e垑y颿cur呞wi巰偭塐刜宊?収丱宊丱宊?th?pur????槆槆僿??曞炤涬€3兏煱va€0i聽=聽0;€R<雏length€?+??€D乮?伈[i]??丮.墷亃(€個`+佷.?x???妑?.€`??y?侇}€挘撸撸摺媉媉媉[Bett?in€0a爧毼揓???傳傪橸iscusse?偡曺between鈇ll?顎卻醤d鱝lls閚鬶e靉st鍃ample,鈛t€眗e閟髏ill飊€isue.觟nce鱡韔ve侐b俍by€jx
庣庢f倛?聽咥W奱()聽{
聽聽聽聽€!var聽厬;€還邅鸅€'?哖聽(丷i聽=聽0;€R<?.length€?+??€D乮?伈[i]儚亀乿if儼丵.nextx+€Z?冟gt儀媥C岅.塟冞?€W?.ve媥ityx刕€?鈭??佔€W剹???聽-?匰?倧俕}聽else嘷偺-?嘫?嫚聽??€W??€焼?佔€W??哶哶亸哶哶?y嵎嵎墴梥喿傁傔劮?y勛€瀱讉'??劒嵪??嵶?倵俉?噛噊y嵡嵡0嗙?€W嗙嗙€焼鐔鐏讇W嗙??伹仐爙?€瘈縺緘摈€9ホp4€xb>Collis?ith?偁?▓倵3倵倱T?℅t>c偣de()卂稨?s?se瑘he徣r?y?ha结?ono€啻亗us疕two顐`ed靜op皥?hera筜rough糭?糫娇?array勓ensu眘磼ea紁?again€憊ery飬趲曜乣惭磏fr紉€qfir亹??刼刼刼刼基?pla礟垬in勮??????iable夐蝴?埖????噥,?姂圤i嶡凣?t>淀侴刧e,幊t粯tim勜W勡彶?偀勄?劶埁丟冞冞乫,喀帤叏y娯e頾?qual弫揰揦嶱d?搱beca揱卲嚜wi?lway?a鎍8餺siti€垪跉戦f扊嵢懪itself嚳凲勄勁娧sam扠?c凒嚄嚃橜T?Circl洀?慪凒fo汎勛.蓜趂i?嚾??瀇瀃姪s?娒?匬n垚l?€(breaks?s庁(OK,唞€發l朮bu嗃烠?傯俒so噲乕桝er呧摗code鏴execu焫.)印豻h扏€驆竐: ?ě╫ミ╫噂嘼Ⅴ聽?盻瑮聽杊疀甮€飥陻M??寈紣?i瓣0窗€P殆堃.length€?+??€W??s[i]儣?冏冎j仾i+1?€`港凎凃j凎倧?€W€2嚌剋[j剋丱€W€Vif劯朩朡検倽)?伔€W€W€V暱暩俫俛劅?€W€W凰€噣W??€穩方嚱嚱嚱嚂??絿b>?濷s?depth綗綗綗偗偍S範ow煓殬?he韔s?唨卼閚teresting鉶de飂鬶is鍃ample.譭醨e鏾?to鮬date?e餽operties伖each鈇ll髈€鵼醦pear仼bounc傞f飊倛no?r.襡c亯that鱡鮯偹nextx
NOTE?埅deB?()??卾t晙幮wo餫ra廝ers:俹俹?1??丱丱2丱t>.聧€?噆》侘侓侊?object撻?汬?:氾?塽4??兎儾坿聽墽墵嚔,唺)聽{勄岀岀僿僿僷Fir攭呅nee敤o惾lcul瑵diff旈betwe棎戲熞悩瘈璷刌敽st椨汭s奊啑d峠???(刼鴣忶)滛should靜ok鎍mili睒璆仩d矆廥h烮s?l?瀊€饾園??澖囩?僫堶澺??侫k€A??嵞d熪慓丆h乥佽儚occurred戠帍巜巜戠??var聽dx聽=聽憡.芬聽-€?€?
We鬭k€(he <佡骾ze="2"><倄mass偳t>鯽lues飂錫ch鈇ll醤d鮬dat?ir侽侽x??亼??y?僘e?iti儀based飊?law?conservat?€乵omentum.詏鎖?乮€Hal俔y鎜r鈕t吽s,鱡鮯圀f妜owing?mulas:

<妎奧奧奡唶唵兘1聽=聽((妐€`嵿€Q2)聽*聽??聽2*€趢讇衼I/仯??
If捀€confu毨g鬿鵲u,€)醨e頾t厾one.莎竜ok?me骵rious錰?t?€p侌transl檃傟code鎟om飻s怖c枹乣a鱫rk児examp?瞙HTML5胊nvas.猿J?佽?based丄鈥湀U喦旡i>Flash蘨?E?-舖bedd佮Systems?P祊asi竴Comput刟Lab??????€檚cript聽src="modernizr-1.6.min.js"亂侁乕侘侘爐ype="text/java€粊襾Zwindow.addEventListener('load',聽e€筗?L€榚d€爁alse)?fun?乄乂()聽{?聽聽聽can?App(佷€*}€_俫乕Suppor?俉係€!retur乆M堈.伀傐偡偡?倗偖if?!兦兝()兛兙€W?儃€穩3?€趧聽drawScree€p凣??co?xt.fillSty憽=聽'#EEE€'兛亸亸Rect(0峆€!theC喓.width€梹恏eight寍俫聽//Box€穬'?stroke効'#000€効仧仧仒勈1?聽€1凮勞-2€?2憌傔€!update抦€莻 estW浌€飥颿ollid伹€邘榥抙?€噣寧梽5慱倗for?va€0i塉0;€R?b?.length€?+??€D乮?伈[i]呯?丮.n媹x亃(€個`+佷.velocityx????y?.€`??y?椣塐€弨弶讐袓7囎俖爥簝墐7€還貋釐o?嬬嬬嬬嬬嬬??垏嬬嬫亀乬?+€Zradiu??棿冞?€W實嵠刕€?鈭??佔€W剹???聽-?匰?倧?疿?嘷偺-?嘫?嫚聽??€W??€焼?佔€W??凣哋佭伅哋哋椆崸崸墢こ喦傁傔劎檉喦€瀱莻'??済???嵶噺偋俫噺噲?y嵡嵡0嗺?€W嗺嗺€焼鲉鱽讇W嗺??伹仐?€鐎縺弨彛撸丿M?侴G€叨o集扶"肤"亸???????侽??丱???槴乷丱乶嬶宑?仐??beginPath??乢乊arc?,儍€;廗,0,M?.PI*2,true?俖?倄close冏乢乢?ll??愊慦€彂W慟collid?侽憃憃€系??????????侽????冏冏j仾i+1?€`?凎凃j凎倧?€W€2嚌剋[j剋丱€W?琘hitT?Circle戔,倽)?伔€W€W恛?侀s俫俠劅?€W€W慃€噣W??€穩穩嚀???嚐嚌1?2噰傁捿retva?fa唶丱丣d爮1?繑2?佭佭燿?佦€€佭伩佭istanc?(?*刐+偦€qy????敊??礥??€媺H倛????妵儑€W€D娤牑?庣€etu?搥€卹n聽retval;
聽聽聽聽聽}€個?爁unctio亪collideBalls(b€01,€12)聽{伔俖聽var聽dx聽=聽亰.next€€-€?€儎'佅伾y佅丣€€佅€亖藖鱽鲄ts吶Angle俁Math.atan2(dy,勓)???speed1佔sqrt嚸.velocity哫*?€??聽偀偪€2乷乮啒?€磥廵d2剰剮2冿倖€弬焸邅o剰€弶?佭?ire?塤?喛?嫄€梽蕠O偀偀倶噊偀勏倿€棊梻莻莵6_卌?噽?cos(?搑??厪傁傁剤傁傁峇in傁傁傁傁傁傁厬圼?厳厳塹傁傁傁傁厳傁傁厳傁傁傁婳傳傭final_咃埑(悢mass瀇€z?冃亸亪暓傦€3???€?壃)/儳乷乴堖咃咃?咃侽杄兎亸咃傦咃????咃儳咃呿???敮?€?囎伹伹愡伹€儍瘉铴В嚌瓟鶓繎簢*僌墬墬傋€D俫俫仺€釶I/?傋嘷嘷厀厀獑棤?厀偋厀厀傋厀俫俫厀厀傋厀偡?婄厀垏厀偋厀?厀偳厀俫俫厀厀傋?偡厀厀婄垏厀偋厀厀偳傳俫俫厀厀傋厀曪傔?.next婋洡€?€悜彸??仚嚊?€墏'簵??壻凣凣婏凣??凣?凣?凣?}?牤爊umB仺?侙200聽仹?maxSiz??15€€齣n€鱽飜S抽€鷤T+??吷?new聽Array(??temp厃€蟺蟨X€穩穚Y€穩穚劉€讇譸搾€讇譸Radius€還還赼n€鐎鏼p帠€鱻鱻鰕??theCanva埢document.getEle€YById("c?One"?侌cont惱佲俈侀C€?"2d仌伩爁o劺(勻i佲0;€R<€H憁€?+淗{佭?塐悘?囖placeOK?fals嫍丗whi熧(!乨??儻pX嘯凗*3『(÷floor€[random()*埛width)-佺*3奼?僞Y僟僟僟僟僟僝height僩僩僩僩昅儌4???〥瑓??360僕?嵎?嗘倻玚燌80???禛禛赤傳s?俹俖俹?斑俹俹俹杘倃倴曖俲{x:憵,y€BY,9xtX:抃€刌€剚r峧亃嵜€爟_僌€W爏劑亽匉亪a姍€拪陘悏杸瞼v傦?€W?堳佅ityy,聽ma?搥€卻s:tempRadius};
聽聽聽聽€E聽placeOK聽=聽canStartHere(佱Ball)佔仴}€梹攂丠s.push伹伹仌€?爁unction儻儶侫)聽{乄?var聽retval匷true??fo?(乥i?0;€R<?length€?+僌?€Dif侤hitTestCircl勠,嘥[i])侘伹€W€ 厀爁als??堢€莯梹梻aur塰偅俉乬€asetInter?(drawScreen叏33宼€*宱>埳/script>?€薶ead€緤"ody€弨坉iv兏tyle="posi帣:聽absolute婡top€?0px€hleft€u"儚倁怷vas嬸d="€cOne"聽width="500€hheight€s?聽You彴browse€Hdoe侶not匄uppor€HHTML5聽C傄.?僛喦€葊弨墖邎鰐ml€?tt>Now,鱤en鵲u鍃ec墄 <傎鉶lor="blue">Example妏-7 (CH5EX7.?),僐will骵e徕?h飂鈻檧Ithe骯m€(iz?nd韆ss丠mping?f?ea伖乣r?仼w?e銑z,醩骽own閚喯喬62842喯喯喨Figur喡10喯喪.讐漧ook醫儛is鋏mo,閙agin吶?劤ys乥coul哷odify閬爋鋩iff??ngs.賮f櫲a寑堄with亀垻es団€痵peed嚚or鍁???th匟don鈥檨鴒v€纔仒i?y卲潗厒direí奞??鑵蒱em.蓨噴?66妵妵慜妸8妵妭??悪tak悺sl晛劙喿婳婬愹cod愺add髈€恘ew餽operti堌?m倎厫mor€@ぉ狿?.

憐乄乁3?????ax??乄乂12??mean?墘radii鎿T?嚚rang換om偀偀?兛?兛?餴xel塰W峲s櫥a琖r?n嶐噂俖>棈倧t?T??glo呚侼橦o甶咼?鈨爌pli潒each嶩divid灎嚥劼嵣粄??.01?朢hi侤奿拡夛儭deg娙氷ir俹俹x俖???y??瀌祦by???嫃剤垚?樍(熆???S梎en潷侸?c嗋ed):竪磄竪犠??烒聽num?聽=0聽;
for聽(va€0i聽=聽0;€R<€HnumB哘€?+)聽{
聽聽聽tempRadius伿Math.floor(€Zrandom()*maxS儤)+min€I;,鲖ppply?伔嚡riction伔t>鯽lu嵢y鉧lculat峕product飂€zcur寕ve吶ity韚ltiplied侎傚,醤d亯n髐btra€皞奱佖僙from倵倵y憐do慁s鎜r鈕th唃唃哸x??儭??y?嘠僀ies働h?st墶儩instead噳sim夾?垱?哤哠冞?冞??????耬caus橸傳佅傳傳?傳?傳?not醠ways廔por喠al鬿錫ch飪衦.蒮??坺坓強?may俻ter€趹unint?傏l?I?仮ne懶儀偠a娊徹?煵戣?匫匥僩僠itself擙搗伕杘杗???媤奜櫱櫱櫰.詰裮ethod澙ll鏸ve鵲u唜smo?degra潃哬??w橧兛兛兛兛?儬烸吀╓╓??un?聽?€!﹪﹪﹨.length??€ 乮?伈[i];丱?€ //F??€?.奙x偊€?聽-厾€穩?娊)冏偗傁亜y傁€焸蟺穣傁偹傳傜傰next厸(€個`+?匱????勲?€`?劌?侇}勶€崜辞辞扺扺">Y?ca?e?fu椸vers??cod糙execu?CH5EX8.html?乺distrib乸①?湼yp佱i竂a鎖lepos=0000567662柎color="b?栃u>Exaグe聽5-8.賲鴖hould≦ic??sm??鑑瀤less啯噣effe澇larg乛瀍篨ollidev傫堁a.羖so,佉仜slow?wn幞Bo儉d???╪.焼岋岋?i圇囸.聽B?i⒖i坔俬彈倵倵∠∠∈熧!doc岎?巠>搩€賭?聽lang="en"€鐎岚 €弨埅a聽charse凐UTF-8仧?title€憫?啘聽W啝聽乊/乫侖script聽src="m揁rnizr-1.6.min.js僯侁乕侘侘爣Q="t浫/java€粎?win嶺.addEv法L朠ener('load',聽e€筗?L€榚d€爁alse?琠乄乀潾涁?App(/>炵俫乗Sup贯俉牔retur乆M堈.伀傐偡偡?倗偗€ if僗!冪冟()冞?n€抓弨軇聽drawScree€p凣??c曕崹.∝lSty槺㏄'#EEE€'兛亸亸R焫(0峆€!湊C啔.橁€梹悪惬椂W/Box€穬'?oke効'#ρ00効仧仧仒勈1?聽€1凮勞-2€?2憌傔€!垮儻€誸estW沋€飥铵L€還遰en抙?硣€弨嫀梽5?倗for?va€0i塉0;€R?猨.length€?+??棍と筡s[i]呯?嵜⒌?€糆絶偊€?聽-厾€穩??壏偗傁?傁€焸蟺穣傁嫰傳傳仼n扝厸(€個`+?匱????y聽=聽(b?泙€卆ll.y聽+=聽b€avelocityy);
聽聽聽聽€!}€拃縺弨峟unction聽testW倛s()聽{?俓var儖?€還貋鵅€'?fo?(丷i聽呧0;€R<偙s.length€?+??€D乮?伈[i]儚亀乿if儼?nextx+€Zradius冟gt儀theCanvas.width冞?€W?嫯x刕€?鈭??佔€W剹???聽-?匰?倧?聽else嘷偺-?嘫?嫚聽??€W??€焼?佔€W??哶哶亸哶哶?y嵎嵎墴height喿傁傔劮檝勛€瀱讉'??劒嵪???噺噺偋俫噺噲?y嵶嵶0嗺?€W嗺嗺€焼鲉鱽讇W嗺??伹仐€飥縺縺彛牵舝ender/?/⒎?€!cont厁.fillStyl奨吚"#000€"叿???????侽??丱??楪樆乷丱乶嬶宑囩仐??beginPath(??乢乆arc搒x,儍€;廗,0,M?.PI*2,true?俖?倄close冏乢乢?ll??愾?€彂憏collide憞?憲?€叩O礝????????俖??儣?冏冎j仾i+1?€`?凎凃j凎倧?€W€2嚌剋[j剋丱€W?琘hitT?Circle戔,倽)?伔€W€W恛?侀s俫俠劅?€W€W慃€噣W??€穩穩嚀???嚐嚌1?2噰傁捿retva?fa唶丱丣d爮1筂郡2?佭佭燿?佦€€佭伩佭istanc?(?*刐+偦€qy????敊??礥??€媺H倛????妵儑€W€D娤牑?庽€梺躸r??佔仹??旼?厠伔?庍庍?庍佅佅幭幭佅癘侘侘卻s吶Ang?瓸a崢2(dy,勓庝??聽speed1佔sqrt嶔velocity憮€▊焸卡.乷?€梽弰?剰剮2冿倖€弬焸邅o剰€弶?佭?re?塤?喛?嫄€梽蕠O偀偀倶噊偀勏倿€棊梻莻莵6_卌?噽?cos灗?損??厪傁傁剤傁傁峇in傁傁傁傁傁傁厬圼?厳厳塹傁傁傁傁厳傁傁厳傁傁傁婳傳傭final_咃埑(悢mas瀆€yㄣ亸亪暓傦€E怐mass聽?泙€?聽ball2.mass)聽*聽velocityx_2)/(€?€?聽乷乮;
聽聽聽聽€!var聽final_?2聽=聽(侽侽€{兎亱1?傦?€2侸?聽-侽侽??兎?????係y剻?€?囩伹伹丗囥€?儻侊€ ?呏伈Math.cos(collisionAngle?僌墽墽傋€D俫俫俙仾€釶I/2傋傋嘷倃厀?厀sin?厀偋厀厀偳厀俫俫厀厀傋厀偡厀2婄厀垏厀偋厀?厀偳厀俫俫厀厀傋?偡厀厀婄垏厀偋厀厀偳傳俫俫厀厀傋厀曪傔?.next婋洡€?€悜弲"∽?仦嚊?€墏'剉??壼凣凣婏凣??凣?凣?凣?}€g爟numB亐`佇50聽亀?maxSiz??1悋€n€?€鱽颯peed€鷤T+5??厵?new聽Array(呄?temp卶€蟺蟨X€穩穚Y€穩穚劉€讇譸揵€讇譸Radius€還還赼n€鐎鏼p巉€鱻鱻鰕€鳝Mrict楄埐.0〖?爐heCanva壝document.getEle€YById("c?One"妵侌cont憳佲俈侀C€?"2d仌伩爁o勜(?i佲0;€R<€H抦€?+?{佭朁奧∠floor(€Zrandom()*慸)+?呯??placeOK俠fals丟丗whi●(!乨効?勶pX垱?*3R匊匴匴夨width)-佺*3嫥?僞Y僟僟僟僟僟僝height僩僩僩僩棔?€i佺曄伅佄峠効劷360冪?弴橕噕倻?畢⑿80???革革秷傳s皳烇俹俖俹电硣俹俹俹?倃倴棻俲{x:?,y€BY,r?€j媍,聽s偂€殏騹恆垜€拡鈥悆o僟€W爤唩獉v伻嗩€讇q€衜as凮憟8?傁€W€!匆:樚亁?営}?亣€!湡?anStartHere?塈慻仸纯?.push伹伹仌€?爁un﹦儻儴侫煑?←retva嵱tru★??length??€ if侤hitTestCircl勠姞?[i])侘伹€W€ 厀亀丟妛€梹梻fur塰偅俉乬€asetI皒r?(drawScreen叏3€*宱>埳/script>?€薶ead€緤"ody€弨坉iv兏tyle="posi帣?absolute婡top€?0px€hleft€u"儚倁冯嬸d=窸"盃璔="500€h猚€s?聽You彴browse€Hdoe侶no箻suppor€HHTML5聽?僛喦€葊弨墖邎鰐ml€?tt>Figur?5-11閘lustrates鑟w鬶is?de僷ll靜ok閚€竐鈭?<€g仦6pt仦0€aalign="center">Figure聽5-11.聽Multiple鈇lls飂鋓ffer倶俁s鈕uncing€鄁飊e醤other凱th鎟iction醦pliedCurv勓d胕rcular蚾vem??刜p偳="3偳偯Whew!伾噛俰壭lid€q堻n鰁ctors鉧n銋袓some乆ol鍓豤ts.萶wever,韨kin髏ra兞鞇@s閟頾t鬶e偘ly鱝y鵲u韥"wa?to侚?bj偝In亐伻s€x嫚,鱡?ll骽ow侐刏俋s侀anim??鮯刌c?les,髉iral€H嘡?s.?嬿嬿?嬿嬸5嬺??8e001?Uniform寳Mo叡惪尶尶尶儚侻呇侸m侸颿叞s鱤en圦塨尠噞樿o噋?distin€榬adiu?a鋏f孈嚾坺.蟦c壭e雗奨伇乲?廰us奌ur飈d棭ends 圵泲tt>co?ey???)?????燉歭灤嚢examㄡ?嚋?搎Ⅸ?a図that鑑s€悡w??125?t>??i?畇饑埅藅??250?????恟俙庂杊va噠櫥?櫐儬唭?tar欚█殬n刜僄嫐僕僎嚐丟>剋?寃煰宼??呹App(?夳唗攃?寽pa?寫dynamic杣s瓾暩洘僿僸?僌嗀variabWhi弬僅倓冦欻俻prope壢€x妢匛actu嫲y鋜a!厽峗噋;扨粔,慀?雹僇嗰亐which傼泵喎喍廞啩峺咜潷檱檕?潷偳偮堌滰?溭{朣X:擧,€衻rY€t橂:?€h?:0}灺???x:亂y€0speed:.1};咓??厳厳拸叝叒嬞S煇en挆挆奩毙orpo?弎s鎜r犌犌犆o鋙幒俹se繘刉???????仧???昿痻昄duc@?嘅,醖d橒丏ぜ巴亇??暦 (刧殢籯愄劮媮???懶?t>)晈?忕忕晈傜埦.??劚聽+聽M唨.碃(€洳淮S€摉 ;暁俠磧俫厵俫磋俫俫俫俛?柨柨嗊嗊挡嫧?d接?岝?兒嵖嵕旽Qeff惏ive⒗???€@a頴w??nex抈im撶?汍汍?傕瀫嶨嶨噊噊嶨??姭媥?宺?姉姉姉???Fin潽圱?榣?呯傋偪偪呯呯呫€悏?f犡Sty┠"#000€"掚?beginP崍()€蟺蒩rc(杝,擪,15,0,摵PI*2,true仹仮close俹€蟿Y€蠅蠅蠂?">You堁戻ha揥h懭oks靑ke哗糚嫲a?峣敨poin嵿嗚ust甞勭h.巊巊嘩嘩嘠醠ign="??img騟cindex?0127?baseline" ?瀫卙eight="500"鱥dth€c/><€g鑱?pt仦0€aalign="center">Figure聽5-12.聽Moving醤颾ject閚徙ircleYou銈╡asily匟?鬶e靜catio?nd匷飂€蕛涴ath鈦攧褉釂蠁藅t>radius餽operties匞匞墰.Exampl?9骽ows?ode鎜r ?CH5EX9.html峇剆a抶剹4剹剶i僌僅怗忳忦徆俙彑倧倧倢?妢<!doctyp?匇>
<仚骾z夎5€xb€攃olor="#8e0012">Moving閚嵊imple觩iral儻?p儫="3儫儧There醼 many働俻icated鱝ys鬿韔v?n颾j?飪眘儂馃Q蟦e髐ch亼鱫uld鈋佈us€8he苅bonacci骵quence,鱤i亹de揳bes偁俬昘n?en嗎na??at醦pear剒?匄餰rf剏凷s.詢O僌勅tarts嚑th刡number 0,啒d噣ntinu??ea劆sub侒t乵calcul埅a??sum飂€Ztwo餽evious亴s咘??.艂讉襯ota樶?妼i???傹窣 2, 3, 5, 8, 1€P2€?4€悁?...).萶wever嘸s鵲u韾1閙a??m?岻d婄€绖@?€`qui€竔nvolved壽i侶嵏lso鋓ffi?t?trans塱€i懁?攝?敓敓>For飖r饀r?es慲e?n匁擆棧墹by勑€岷術啟?昩曢?帎l?洍="毴<澣〨()濿t>.蒮凲tak柍code鎟om Exa呴-9嘕?ad€ 匃匃嗃Inc勥t>鯽riabl毦侫垢?晹?u寶傎?屴?墴l暟W€X悷頴w僞閚 canvasApp():

<仭偳偭var聽radiusInc聽=聽2;?€9傋>Figure聽5-13.胦n廆sely?僕働?僄憞僄僄僄僄僄傾???佇嵶嵱7098嵶嵶嵭E妔嵹0嵾嵹骽ow?桼for CH5EX10.html鎟om?di嵗ibution匸栕栕摨吰醠ign="cen尐勷img慇cindex?0126?b夬line"倊500倊€a儴梬梡€g仦6???沖寯i??#婅"楃椸.聽Mov柋梹炿a?暍梔杙?n媈偫?厳壛?卭?i嶗嶑冿儫e鏴ome寛c冹僺尠僕寳??敋<!doctyp兝?>
&l?珋€卼;/html>
<仚骾ze="5€xb€攃olor="#8e0012">Cubic耬zier胾rve蚾vement兛?p儻="3儻儷俹俬c俰s鉧n鈋鮯ed鬿鋏fine犴?餫th鎜r醤颾ject.袀re俇firs丂opular啇侶hese?in€?1960s.詇ey醽鑴萫ly兯?2D鰝鄡@graphics?髆oo?倢刬drawing,鈛t債y咼also唙偍animatio?嗊啑mo€?壓崌夁夁>A冭夛凷閴鴕eat僪us刾偍u勜istinc垜ints鈥攺o="帬<憼p0戇t>, ??1????2??and??p3?t>:?嘼4噂旂??梂?梠壏俉係廻髏ar垁g坽飂恟?.讗All騟f姲?懹??x?t>嘜??y??valu憍as乢乢x啑倧?倣??慞嚪???俖?俖???俉?end???????噰噰????乢倓唶倧?倣????嚳?俖槆儚儚?槦?????ntrol澞?媁ド熂do埨noshrough??;?stead,侸equ仼丱term?乤arc廤廤廤廤?廤?塆?廤廤廤乢檁乬??岀???屜??挓??吙刧???刧???刧┣?曪?曪曥€g挾1扽捒€`align="c篐er柗?1糠慷000">NOTE剧朩儚冿冿枱?僶唸?usage捙偼?沇嚽??塳€還邷佺?佲梶谷?bigges?tumbl?喡浺under编й豢ves渃easi侀way榪亣傏rel沚ship鈋tween洘?乁綹?raw€﹎飊釁tmapp绝canvas,鱤ich鳒\do骵veral鬷m?i?俋chap張憪嶇Х憞em崯崣Af伆鵲u鑑劏匇four厹,€襫e剙卄calcu??ix?effici揌瀖that亽卋伇fi嚰屪?嵶∏?∏?喐?≠僡mo吚an颾jec礹嫪??卂?re雗ow媥g?>a劘瀘??b????c???僇喯??僇?》?僴?”嚤y嘊崠d噄follows:?a/灖灖缚灖?嗘聽=聽3聽(x1聽-聽x0)
sp玃?t>醫鱤ic?畝卙鱡鱝nt鬶e颾jec€Xo韔ve.賝u鱥ll頾tice,?ough€Aa亼is鯽lue鋙es?錫sily錻uate侷偣speedt??噃匰c?t僅with噝me侙€@r鬷me鎜r醤imati僆n韎nd冸呹匭€Hcify韚st鈥€mall?han剣剣1剣剙s報冪嘔e鉼rv?嫻倶in匟€鵤l錸嬹勔u嚾o骵?t醩餫r?f?叾.苼Xour鍃ampl?弎傃偤as壏?壏?by釃攦?亊.0喛亪,喢尐僥?伹坥00伹僅points?埗坽(1/亐 = 僷)?徯€adv曕ageo垐beca戉兤know囼柤h堾finish哷?ing鱤e儍?圙?戹儬栣l嬹仧啩仧埲

傐color="b內傴u>E?聽5-1働u僊
(CH5EX11.html)弿st?巋椔囐嚤f堸嬐戵Bezi?嫽涒堬嘩>canvasApp()嚙?func撫:囮a/>p?亐????????擡?€1?:?€`t:敺敺敺儳儳儯Next,濭??drawS晿en濷濷濰?calcul練?幊coeffici璦?(僄僃ax傳岄?宱???2???僇y???僆???僇??)夤`??┓噂侊????毲???2????3??攚愶愖愖攚倗攚cx攂ㄐ*聽(p1.€€-琘.x)┳b??2?亁)€Rcx獹燼乻p3俹€K僫€8b乴仐cy??€€佀y)傁燽???亐?y亀燼乻?倃??乭姀??奯奯">?機tak愷婏傔nd醍q﹋殢ダo涚?傁偵槯偵倷??枃凍?or偑砆甼.苅rs〃唨ge倧?倧唞?亣亣玙房僸,厞st霸媭丂y髈;n堼?娏坢とs?????劅?t悮勸.t忳忳忳傋傋?厁add圇僟粡傳>幯乬乬娮娮娦垁th磹埇惂?n???path??唃唃??嵨.?+?哹塤塤塤??橭?幈?儑??國??伹?伹???傦祰丱俽??俠??us???equ晣學學塤塤學儚晝x晪ax*(t*t*t?+?€z€kcx*崄??爕佨y*(t*t*t)聽?硛€?聽by*(t*t)聽€hcy*t€Jp0.y;We醖d鬶e <佈骾ze="2"><俻speed偳t>鬿乬乬乤t丟丂value飂乄乄ball乷t>,倷n鉮eck?see鱤e€╮??僌僆is鐁eat乣than亸亸1亸t>.蒮髈,鱡鋙n鈥檛閚c?se閠醤y鎢r冴becau€竵Xhave鎖nished韔ving飊坖curve:

<嬜嬁嬁嫽?埛埌.巠=?€a嬯;骽ows宲at 偀倸60020偀偀倷Exampl偅?偋偂(CH5EX11.htm?i>)靜oks靑k?n槞?execut椥in釒Xb鈘剱er歺€恉diti弫o慠樶廇points?€r妶?€韺O孨亙婳怚rra擜?ls傮侐four?€欱ezi潹渞.詇e瀴llustr狓?rela匢ship劸?μ侐嚚self.蝟tic佡嬂€鱠oes頾t啇s伻hrough唶唶pW樎??>p2?杘杘??掶垹ign="ce?r倄img?cindex?0044?b?line"倊605倊€a儴柷柪€g仧???汍?i斚斏#剺Ⅰ桹.聽M猭a鉯rcl报?巓ve暜俻?匞???檕檕劎檕檕檕檕giv彣撘ull佮de?st呇f幧歡歟,擦lud棈仮?晱?杅┋as.賝u€a逞?????媤?傞S秔en()捛撹func?follo???//?湉侳comm廻旼嬿?嬽i姱姪弌?cubic?廟?側?傳傳甒呥呞<!doctyp儤孖笰窲€賭?聽lang="en"€鐎醗ad€弨坢eta聽charse凐UTF-8仧?title€憦?嘄聽On聽A聽C?聽?€y?洁佮/侇倊scrip借src="m?rnizr-1.6.min.js凃侁乕侘侘爣?"秮/ja?€簠菑萪ow.瓙Ev?L?ener('load',聽e€筗?L€榚d€爁??扙乄乂()聽{?聽聽聽?App(佷€*}???Suppor???€!retur乆M埈.伀偝倠偡偡冦倕偖if?!兦兝()兛兙€W?儃€穩3?€趘a廐櫬Imag弍=聽new聽€z圲丵?.彉丣"€?png"墬乯喿聽??乢勎c橒?.?lSty??'#EEE€'凮亸亸Rect(0忇€!燲C?€梹悳麊總v//Box€穬'?绩oke効'百€効仧仧仒勈1?聽€1凮勞-2€?2?傔峮摠?ball.?丟丟凘x丣3聽*嬂p1.€€-?0.x)仐仐偁仐亼2仌佖嵏€Pcx?佔佇a佊p3?€K?€8b佁侘侘?y兦匯€€?y峅仧匷仧匸仠佮匼y佔佔匶佊匵?仈匸佁侘侘聽x嬻ax*(t*t*t僪+嗼€z€kcx*?€H????y?y??€{?y?劅俫€!??悕speed乷乷?仌?攼?丱傜丷傌1???€繗(焛聽the聽p?硛€卭ints
<€)聽聽聽聽€!context.f€@聽="10px聽sans";乷乷乲illStyle亹聽"#FF0000亸亸亴beginPath()???arc(p0.x,€(y,8,0,M亹.PI*2,true佭佭佨close???叧???喎喅F€喎亸亸lT€H("0"叐x-2呪+2?佔佔僟僟?亸亸?????1?1???佭????????喎?亸亸亸?1?呅?呧?佔佔僟僟?亸亸?????2?2???佭????????喎?亸亸亸?2?呅?聽咇?佺佺僶僶?亸亸?????3?3???佭????????喎?亸亸亸?3?呅?咅?佺€3//Draw?聽to聽?ustrat冃p?佔伹仌.push({x:xt,y:yt}僌?€!for聽(va€0i唺0;€P<€8俓length€?+)聽{?侴?.d吶Image(?€Z噥俲[i]嵭€w]?1,1?倊}厙€瘍7巁喿乄?亹irc峣moving乬乄偡庣庛晛晽亸晽晽??晽孉t,5晈晈伩伩?傜??晈喛夨€?爮p0喡惛60?y:10}傔?1?7?20??2?125?95??3?35俿€@??ball丮?€1speed:.01€`t:伩傳橍伻ne廥Array坵乶theCanva乕document.getEle€YById("c?One"嫃媉佲俈侀C€栓豥仌伩爏etI?rval(槨Screen哫33乷/>峎>洷/script>?€薶ead€線慴ody€弨坉iv兏曺="position:聽absolute?top€?0px€hleft€u"儚倁坰煱d=堊"聽width="5樌聽height€s?聽You幈rowse€Hdoe侶no?suppor€HHTML5聽妕?僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">M?醤搔褍_兎p僌="3僌僈?i?飊徙ubic耬zier€hrve馃虚s戬ㄡs錫sy€A仭θular鋻饊檕bject,?we鈥檒l鋏mon鲍閚鬶e顣橍wo鍃amples.訉﹕e鵲u醨e韆k?game鱤e€燽ullseye?e醕ross倞崜唸d€zplay?m吂shoo呰儉hem.賰could鮾p嚙嚙嚑偍o鉹e厵灠偮??st劚?€hns鎜r儕勛伻勲long.孞彿宱宱>F??坙,壭鎖r呧??lo?鯽riabl劏埁d 憞="惛<摳凪?t>倛hich偣w璛囀?ho?呴惸th壚伣loa亐o鋓s?懇嬤:嘨棁嚍4嚐桹呄吺??毇func?聽ev?WindowL?ed()瑻佄珿葵??e.src弘嚳ng"乄乄on嚤乯?As獦s?傐}媁焪焥彠??In嶏?奫App()偡??悊diff攑????from€zon洊拑?鈟骵t朲桖傍u曍?劮劧p0刼刬??1????2??殭??3?t>.誷??暊?,暎佭"2">?秬卋ullseye鱥ll韔ve飊狃arabola-like€pth (Figure聽5-15骽ows鬶偰of€bcurve):

,醘ter鲊lcul夰?侢t伅仼??x?偯nd??y??內勝?i?嫃嫃嫃嫃囘囘儑彿媌.x媟xt-幣.伮/2斆聽聽聽聽€!仈y亽y仐.兓仢伹伳c冟ext.媁佌,?€My)庍庍庈噊噊噊噉椚ign="c晿er噃img?cindex?0142?baseline"倊605倊€a儴??€g仧???嬿嬼i?#Ц"︾︵.聽Moving慼忥abic耬zi斝塿側壪厽槯匴愄T拡烉t﹣琖琔848卂琖琍Exampl厈2琠琜works陁偢疛傁偺020傁傁傁偹1傁偸.棪啑忳梋i?勯奼奺塁侾???欁嶇櫼<!doctyp?html>椼€賭?聽lang="en"€鐎醗ad€弨坢eta?harse凐UTF-8仧?title€慍H5EX12:唴聽An聽殜聽丵/乛侇script?rc="modernizr-1.6.min.js僢侁乕侘侘爣I="?/ja`€簠7w毿ow.addEv棎Listener('load'瓨e€筗?L€榚d€爁带e焢?犕€胒unctio???()?佄もnew執(??坸丣"€杙ng"乄乄on?乯?As岪s?傐}?厙乬乨厙?牣SApp?俫俫?Suppor宧俉?retur乆M?.伀偡偡偡冨勛偓if?!兦兝()兛??媑€?聽?€诳Koint曑崗崗丷?崗€r丟啹聽?Scree€p喿勄礋礆じlSty傪'#EEE€'傜亸亸Rect(0?€!紣C塉姑€梹悽珕梻v//Box€穬'?stroke効'?€効仧仧仒勈1?聽€1凮勞-2€?2?傔岶搥?检焲乄乄凱x乑3聽*嬓p1.€€-佖0.x)仐仐?仐亼2仌佖嵢€Pcx噺佔佇a佊p3?€K?€8b佁侘侘?y兦匯€€?y峗仧匷仧匸仠佮匼y佔佔匶佊匵?仈匸佁侘侘聽x?ax*(t*t*t僪+嗼€z€kcx*?€H?俫俫俥y俤y俫俛€{俤y俫勄俫湭恉丂愖spe▆亸亴伔北旞乢?乨?1娗€_歈煈柭s??橶緔10p憍sans仹仹?渵"#FF測?亸亴beginPath???arc(崺,媞,8,0,M亹.PI*2,tru疙佅佭close???叧???喎喅F€喎亸亸lT€H("0"叐xp0.y+2);
聽聽聽聽€!context.fillStyle聽=聽"#FF0000";亸亸亰beginPath()???arc(p1.x,€(y,8,0,M亹.PI*2,true佭佭佨close???叧???喎喅F€喎亸亸lT€H("1"叐x-2呪+2?佔佔僟僟?亸亸?????2?2???佭????????喎?亸亸亸?2?呅?聽咇?佺佺僶僶?亸亸?????3?3???佭????????喎?亸亸亸?3?呅?咅?佺€3//Draw?oints聽to聽?ustrat冃p?佔伹仌.push({x:xt,y:yt}僌?€!for聽(va€0i唺0;€P<€8俓length€?+)聽{?侴?.d吶Image(?€Z噥俲[i]嵭€w]?1,1?倊}厙€瘍7巁喿乄圝layer.x啿xt-bullseye.width/2儫仐亽y亽y仐.height仢伹劎囎囈佌,?€My厀?嘜€寣jp0??60墍y:10}厳?1?15?35??2?30?75??3?4?2俹?咼乁丆€1speed:.01€`t:佅佅朶伻ne栘Array嶗乶theCanva乕document.getEle€YById("c?One"戯実佲俈侀C€甩@d仌伩爏etI?rval(?Screen哫33乷/>峠>?/script>?€薶ead€線慴ody€弨坉iv兏="position:聽absolute泋top€?0px€hleft€u"儚倁坰?d=堊"聽梑="5聽?€s?聽You岠brows幧doe侶no?suppor€HHTML5聽妕?僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">Creating崦ubic耬zier€hrve蘯op凎凮p冪="3冪冦墄鉧n銈醗髈me鰁ry閽 es儌?s鮯€a?鎷 饦丂剎c?r€h剎.蟦倄uch錰fect閟丠l?.詏儏€?鶆8n洏鬿韆k佈re僢?m醤?咗th 墽=綻><嬝p0?t>鋓agonal鎟om亣亣p1亣t>,傪d??p2?偢???3??o埌n飺垬`e刧刡喒o€(r魒o?.偗偗啑冞?冞??m焊鈋悴o儌c€pof€s桼€X?倵倵堊唈r??埱?.忦low釐繊箇e峹ll戉€笍秚h恏惤?a鎖le塦=0000615277??blue兏u>Example∴-1嚴u桮a>:梛沬涳椫4椬浄啛啔礸?皥440焮?菜?秐??€€辞:325傷?奼★£濓??Since闅鈓沍as?婸sh宧?te?when両c?徖孭潡潝s,渁k醫審實?1審審寛Fig漍寕6寚寕.蓩凥怈h偢惲焬?儦儕s靑焾?兿怶怶兿怶怶冏a>垑exec池d?web獍????1姪?€`align?欔憻憴1璒璑厴">NOTE嶰劮儚冿冿?僶?T櫑瓓only?殮dǔ淃焫廮?p懶瑯lso?three-伈乄?know?quadr?俫俢????冭r訏軇髠?ves鈋caus?線卐鬶e鬶ree餺ints醨e頾t醩餽ecise€Y?four?of徙ubic耬zier€hrve.
<€囪eight="1em"鱥dth="0pt"醠ign="center">Figure聽5-16.聽Moving醤颾ject閚塜loop鮯€覊菈茐緝?呯p厽厽厷>Sinc?cod?r€his鍃ample閫Xss唸ially丣sam帾勑E倱嘡2 (beside慦慣),鲖坅v€(??hted冑bold吤hang€爢劎劍15277劎劎劎劉3劎劉.變詃on?圶to骽ow鵲u€坅t鈥攚ith?lative?si壜劤s?乤c巰crea戣dram乣c?i€Ion錰f廝s??廄s樌p楥嶹4嶹嶴掵?唜抙????俙愾倧倧倢?曻tt><!doctyp?html>
聽聽聽聽€!佪closeP乸(???fill???llStyle聽=聽"#FFF€"亸亸亸T€H("3"叐x-2,聽咇+2僁佺佷points.push({x:xt,y:yt}??€!for聽(va€0i労0;€P<€8俓length€?+)聽{?侴叝.drawImage(?€Z叡俲[i]?€w]孒1,1壇倊}厙€瘍7審喿乄圝layer.x啿xt-bullseye.width/2儫仐亽y亽y仐.height仢伹劎囎囈佌,?€My厀?嘜€?/tt><€1骾ze="2"><€裝>峼p0匓?150姌y:440};?>♂/script>?€薶ead€線慴ody€弨坉iv兏?="position:聽absolutetop€?0px€hleft€u"儚倁坰ムd=堊"聽?="500€h?€s?聽You岠brows庱doe侶no?suppor€HHTML5聽妕?僛喦€葊弨墖邎鰐ml€挃€8blockquote>Simple莚avity,舕astic€band苧ic孖橂勀p?="3??Adding?mulated鐐韊傦傟f傡鬿鶍狅bjects醖d€(骵nse飂騟alism鬶at飽0rwi€衱ould頾t鍃ist閚 2D.詇e€鑠ropertie侾re韆jor鎜rc€垇Hnatu€競抪eo?feel劼underst€Y€餹early鍁ery韔泬劇?ir靑ves儥is韊ans倵倫who稹 鏰m兏exp嗻?嚢a€x刪a餫匵c増r鱽€whe埌咷咷applied.蠅€job閭J媢仺?錰f奒s愎墕€X毎sible,?i匄minimiz峲僠僎堣s€ypower囆€乤嚫???em.讉孖剱€ s埜鰤 co拡ic徥physic嚴qua廇s鱡?崺u?偗嘢叕勷壭ill?喨個f嚇?s??work丳?with?l唒兞res抪廔availa嚇僫潰脻嫵web鉄;.柡??栠??5?€揷olor="#8e001盽毞椛瀲???僄A奵団峱ye儴ee峹g嶩榢憄毺娳al夵鉧n鈱癱hi晿d鈴貞爕幑a匬n柹t湱鯽lu堯??窞咅劯伖?傽朣槰v傫濰a?ctor槓o鋫﹊巰??€鑳j?牕such斸冞冝.1冪t>??d€I?咃咃?咃咃呿?渶n烄ca抪俻俉俈?()偗?懣??巤F噲圦?a帗let鈥檚澘a鈨闁Za??radius冞唨?丱丯15??pixels悙hーfrom怮ann夾檲奟bott??両??€(彔叞帺??speed?単丟丅4?卂?﹫燞坺n佭佭a榒e??丟丅30垏?deg?瓱瓩i啨up揔挮r帣?圵.蒮?di炽汄仩?柇?塟濨y雃ep檊?檢硱til凙left僩s (?u侾偍?倆侴g゜ju粪竒乤剦longer)????You鑑囪佮嘰od?廐?Ⅺlik瓉夃al€郿y坸仜嬶嬵?App櫙?fun渴痆呉癢髏竔?varis兎:泦b瀐kquo仺喤4喦"0p?苺卼">var聽speed聽=聽4;
Next,鱡鉹eate鬶e髏arting餺i塸for€篵all醩 ??p1冿t>,醤d仚n偟a鋣namic颾ject€鑑t鑟lds醾皞鵹alues刜d兾儚儙刟儫t>偰:

If壒wa唒to醖d鐁av?€y?application廽woul?irst?new?riable頰m???傇匞嬭弝set閯鉶n?佇帰飂侽侽.懅?嵶嚙噺噺嵶?嵶勳宐.1妎妎妎傜傜槜in撨僌僆drawS墾en()??func?嫅孁his宖坘寯傁枾枾枾檂w欼娯俋冡勅?c敧 (俖俖俋.揘 +=??t>).讘禐齻豷top韔v?冚hits?鈥済round鈥?(伜ottom?劎),髈?te?偂e僅he?灄厽厷勥囐posi奱偱亸??仱lu?乷乶汒?婑傆嚭哛out匄edge)鑺萷ass???嬒僄嬒媹偤.兂 <=佈?撣刼孼?so戁?勢鈥檚宷emen???朞??匊if聽(?聽+ニ?聽?聽匞傆?{聽聽聽掃捹?仒掛〒}聽els笜伔伔╗???偡??叄??聽-哋咹伝刐???壡壡笩?彁姧姦x?挵??伔?伔伔瓊乷挿梍?爅珳敺?噖嘷嘷?僩?幠尫尡娝€?幍嬒>墍t?.fillStyl恜亁"#000€"丼?beginPath()€蟺蒩rc昸x,劤€;?,0,M仩.PI*2,true侊侁close偡€蟿噽邜邏噳噳a龚leゐ=咺625434?color="b?丠u>Figur嚾5-17骽ows◥ap?靜oks靑k㈱n尠mp糎滨??ヂ?〡a?ctorhav曫ddヴpoin?o閘?tr縼兣.憦憦???醠ign="cer?img騟cindex?垺?baseline"倊5忇倉€a儴嬜嬓€g仦6?????i寃宷搼"宊孹.聽S娮娧wi嬸a砐粄姧姤嵵傝憦吙憦厀憣You溕窴? ??972収??Exa匢吢4??叢?倅 嚴CH5EX14.htmi>閮弗鈊e鋓徃ibu骸,锛0ype?fu扻?l?囬b灎w愖?悘槙i???婞壋侶墬倃倃巜a垂!doc厬聽嗰>灈€賭?聽lang="en"€鐎醗ad€弨坢eta聽charse?UTF-8仧?title€憡|:唴聽G唻?/?佄scrip磆src="m奾rnizr-1.6.min.js傿侁乕侘侘爣)="/ja畑€簠w汬屓炟Ev?L峹ener('load',恍€筗?L€榚d€爁a紉?func?乄乂(縊粴矁App?}???Suppor???€!retur乆M埈.伀偡偡偡冨倕偗€ if僗!冪冟()冞冝€W聽聽?藔€卹eturn;
聽聽聽聽€E}€瞼辠unction€adrawScree€p()聽{乢?聽context.fillStyle聽=聽'#EEE€'兛亸亸Rect(0,聽€!theCanvas.width€梹恏eight)倃倁//Box€穬'?stroke効'#000€効仧仧仒勈1?聽€1凮勞-2€?2匋傔傑if?ball.y聽+聽€Zradius聽<勑倃嘰媿?€E侜velocity倯侙grav€p喛?聽els囸倃€飩w倀x?0?丟乬冏乬?乬噧嗙嗘聽-??壙侴旂€總蠆J傂剰剦刜乬?啫乬嘙儳亸?杦?"懠"?亸亱beginPath(???arc怌x,?€;?,0,M?.PI*2,true侽侽侺close僿?????娂€cvar聽speed嘊4乷?掝?.1儚€黙ng塂305€鱻魡閍n桯?乀*聽嘥/汎8?仹樸仒1倵€鮲??cos(?檺側唈仧仢呺仛sin仧仧囎伱暜佉document.getEle€YById("c?One"學??楘佽C€?"2d仌伩卥p1伜{x:20,y:?c堧}僿伡扽佂p1?聽y€Iy€H椌:夰€弝y:v?偅:傔効?setI吀rval(翱伬33?/>潖>Ρ/script>?€薶ead€線慴ody€弨坉iv兏?="posi穿呧absolute;姲op€?0px€hleft€u"儚倁?琀d=崗"聽妸="5炐聽ゃ€s?聽You婇rowse€Hdoe侶no庁suppor€HHTML5聽??僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">Simple菫麄th崧ounce兦?p兎="3兎兂The靉st鍃a偮showed鱤at偢坔non?韨靜ok靑ke閒閠鱝s仚t飖t,侾nd佽on佖surface,醤d髏uck鬶ere厯no騟ac?.葍榲er,鍁e佡揚vy冪l仒€(b?勑?冃hits倯鐁€萪.嘡?噖噖>To銉竧e?倆ing錰fec哖e鋙劺傂ave魜Xhж€P?code鰁ry韚c媭堗?蒼 嵖="岎<忦沷()?t>,?fir媝apply佺佺伩t>妝堸y鎟ame;剦n,閚st湊飂婐opp哬匶墛岆?bottom乊唈?剅s抜y瞠`噾r傾s嚊勶勵効劰偣乷乶凙亣亐嵪嵪嵨嵂嵂崿?i>CH5EX14.汚
鵲u鱫uld叞pl揚偁is峈鈥v??4?涍咓咈if聽砍?+瑿繙聽焿?○傆慈{?仜瓰?仒廃∶}聽els贺伔伔摆籣?偠??叀??聽-哋咹??尟墴墱?濨嫛:媜媜佔佔媜媜慮啩塛塚宺???嫲??娤壪壪坸倹€?垙垙啩垙喛⑦擁seО渵ba?鈥渦p鈥潨os.觟﹂橒?st?t?el伇?乊v?o?獕堻乹i??tim濈?くく溁吂?ed,厙?琲tu€x琗o偍dowgai€0?冋??take侂侘侘俬?捹alepos=0000630720??blue丠u>Figur涏5-18?s??碝幅s?绰學確戠懴叝叒睭ign="c媓er"><€g仦6pt仦0€a傡center">Figure聽5-18.聽A鈇ll韔ving飊狯ector僅th鐁avity醤d€衎ounce醦plied?le飂??in俫丟俤canvasApp()倵乄倳to?€讉$295佺??:娗娗E峉梲噃u僶a媦fers嫐fu?code.<仚骾z夎5€xb€攃olor="#8e0012">G炿佮th耾火e醤d羛plied觟mple舕asti憅刼勄p刜="3刜刐In餳ysics,鬶e e?/i>飂徕冮ing鈻(騟fers鬿鑟w韚ch錸ergy閟?n孒v匄when佱仚?es俻倅surface.讍坙r損y伬ver伆亪it醽垐墏ba採処?偸we鋓scuss仺?冑llid?,鈦饋=are媓mul侤?obj进s鎭爜b?n?唩tak亐髄墆ly?f嘪黏貙K搥働d咅夎Example聽5-15,鱡醦plied 100%錶asticity醤d鬶e鈇ll鈕unc?forever (actu€葃,?is鱝s飊ly閮h俼si亐債did頾劻nsid佖?醫醠l).萶w偣,閚騟al靑fe,冓s鮯僐靜se髈me飂勓i俙nergy鍋鄖鬷€貈纘卼?f狍urface.詥ham€豻?佨劰erv厫depend?嚭materi刋??made鎟om,釃╡€皜@??閠丄?ing俬.苚匟?伕騯bb?Sup€0B偼uch韸鑸齻╝n乸cannon?寜wi宯鑙gh?厔first囎囎囆Both佭佭??cret?冘€}嚜嫐ick匬d.舦en?b傤c屷to?凱劶???€檵試皌ransferr孁away娳嫀.

We?搙mul崘€I婡?恏揁?y寉噅sta?va?卶?when??怘堭€間r€垏◣A梛巒桒囀set丷<氀?ze="2涴tt>speed28燻?.讍\keep飖r伅伅grav姁佅傴?乄乂.1?t?bu??a頴w嬝毴b?n唜d???侴唃乷僰哶哯To晿k?毶殹s揌?ヰward嵪also斬su∫哷暉熚瀼n鋙愯add飏亐b?ct曶?弚枀杇杇杁In??桒vasApp()嘒坔?oul玐擊娰pro慔ti?li?:欶blockquo橜?4????崁聽朖聽=聽6;
亀乺堨 (乢媑壵仧t>).萶we庿,楦(eaヰf箣y捫€萻戦?偋??凔躬仧仧?伔hit旾斃ottー?壱瑠朁?偳偳刜刜縈亸亸?嫍嫍峣?氿?侘?.??y淺appl?勔幀?∝p?er漅儫儫???亪儛c湗ag漢?夽?嚪厽倃昉熇?炃樼樝樝炃?堶搸聽+烉桙瘺if聽((?€鶢+.?)聽>聽剤C?.冦€葅?仜??-倹€?*岹嚜凅}€2凍伻伩伖?€??x???塆塆綰a鎖lepos=0000638500?color="b嵿?u>Figur笎5-19鵲u??癅?緳揔ca靜ok縷渞execut枦a毃b鈘ow搻.廹廹???淴ign="換er?img?cindex?0072?baseline"倊噃倊€a儴夛夎€g仦6???擄撿i妛妐#剺"奯奨.聽B巋浢泀窲?粣d鐣c澻d嬣傪彲吳€g吰12呄呄呄呄吶1€xb呄呄NOTE儣冿儚冿冿"3冪"0?踿€卲t">With gravity醦plied,鬶e鈕unce閟頾t鍃actly醩鵲u韎gh€﹑ect.莻蹃aalways饀lling鋙wn飥ur颾j乸,髈?eff€x飂犰oss€Q勄勄咉吳?吰veloc?due鬿醤錶astic?餽on€jd.?/b伬kquote>Example聽5-16剺p>
<仚骾z夎5€xb€攃olor="#8e0012">Simple恰?觻僂怴,醤d€紽ri亢剹勶p剣="3剣剝Now鬶at鱡鑑ve徕栃魞萫ling飊€爒簒or丼is醘f€坋d鈟鈕th鐓C劉晈,偠one韔re€铻r鬿醖d€9make側冃nima?丼reali侷.蒼?previous鍃a嚬,€矈?"壢<屓y?t>呧涬鱝呑呇叝叝叐bu?傂圝€皥~伕勷€賦-ax園witho乸any鋏個d?in兌.譭丂?fix佮伆issue顙袆(??f?佖垹?equ俲.?捒??>?physics, 崅鎜rc??res娎s?mo儶of?颾j堗厞怺l?d喰iscuss囸?奝i嚫pplie侾o?li哛壉?姪噑峐彙堒s峘milar?cep媃挬俻屭s?ly幾幾幯x幾t> ?迉卾elocity.苚r飖r饀rposes,鱡鱥ll醕hieve骾mple鎟iction鈟鋏grading鬶e xTak勢cod呇om 兯color="blue冭u>Exa嚈聽5-16,閚厙厙canvasApp()呑呅妏create犷ew鯽riab妧named俉俉婱?t>.詇is閴{amou伆of餴xel€╫妳?偗審?寣巟?ry?剎:婗b?kquo吀?4????嗚聽?聽=聽.008;冪€9傜??傼Notic唩at嚡t?qui劺small?斀do抙not鑑暔垚b嫏large嫧庁€ook騟alis傪鈥攊t陁st屫ed夿伇ppli屶uniformly鍢`鬷m娺嚡>drawS?en忂?匵c?ed.蓱讈讈讈覝"?y伔伔?仐呇徸?徸徸徲lik婇is彲屜尫尫彲??b孉偱x彶€焵?聽(€穩?咵)???刉刉?槒髸梏ype槩ropor傃a?巃ca?€唳.?us?wit幮lli??but醙ain,?忹屇愸懶on?嬜埾嬜嬜?媮喯??44675Figur20骽ows鳉?fi垑焢s坙?n橁s愃whe犘xecut嘫n歅web鈘倶er?峠峅唶唫醠ign="center叞img?cindex?0128?baseline"倊500倊€a儴??€g仦6????峔i婏婇#嫧"娮娦.聽B惃猡吚g懗禩,錶a€band?慭尞僅??恎呑恎恎恆5239?恎捣挡7恛恔giv籨fu哖该控囪CH5EX17.html?梺€钁r丅慭si債嚳€剣鲊髝紙.e劵懅?慱噠i??嬋G儃嫑a書ct吀€r寊僕??婄僕僕?漽<!doc聽坬>
聽聽聽var聽radians?乀*聽Math.PI/聽180仹仹iu仜1倲??vx€鷤Bcos(?)傭speed偡仢y仧sin仧仧僟伱theCanva刢document.getEle€YById("c?One")兎聽context佲俈侀C€?"2d仌伩卥p1伜{x:20,y:?width-?}僿伡ball佂p1.x,聽y€Iy€Hvelocityx:夰€弝y:v?偅:€;€€傜?€!elasti仭?€o凞亸爏etI?rval(drawScreen偍33噺/>}€_</script>?€薶ead€線慴ody€弨坉iv兏tyle="position?absolute;?op€?0px€hleft€u"儚倁帗聽id=庽"聽嬺="500€hheight€s?聽You孮rowse€Hdoe侶no怈suppor€HHTML5聽帨?僛喦€葊弨墖邎鰐ml€?tt><偵骾z?6€xb>Ea欻g僗兎p?="3??i仸i>閟狒echnique鮯ed閚醤ima?鬿韆ke€愶bjec凁moothly鍜r靍av?靜c仾.詇e閐ea飂鍍r僎that傪st扻€製niform俋apply?mov灢兞every鎟ame乹劍,鵲u侳in柸ase (喰僥n嗛)勧de€€齩ut?灎顄mb?f餴xels傟?飊呧ch?啠resul?哾卾?ear€皁鈋€竢乊ali滖吶d壃?€郺€ many鋓ff€垈way侜卶te壄嚘s.譭嶡ll鉶nc亹r??wo悎mpl仺xa€A勳乯help饘鶉a?鎴▏僠fur€皉伬pl厵?su?傂?埨wn.挌斪斪捒斪斝5斠€揷o傌="#8e0012"撲蟯t (L埿€i兞Ship)櫹杦杦杦兛尒process揼??娦姎奺挩乸e宲抮婏:桏帣乮from?傝oi攕a?塰,髏art?f?,?low€眃墣醩閯戻寊娎e嵗d倇?o閘lus??幉p俙w?淴厓帿參髉a嘪塜靿?羳瘎蹐H勅欍勼氳i?neg噚怹r冐啯叐厭?,鈟儮ti洏?€rou?椸?侀?ough俼劇呰th?溊?噄If扽鈥檭貫○lay偙v?o鐭?Lunar虃8er?烻坽€?垚ct內匯yp堏淰夬汃tr嵙cco?ish朑拸拸拲?th嘪戙-唹e漍c?ne咘?i剎?d烸n戻?獱€羑en掲betw?€醡扨憻€殎5?lin?h?拑€檼w抴厾岪i娻叕匴fi墾鉧lcul揮卛a損剋?吺.蝒x佊sel刟a餰r祤鯽l?(焔="灅<窐?V€窀t?枟瞶垯噖呚ro濔乑勣A嚮€e?sh綪湋€賏m旞僢??搥夝well堭g?倇?侜?冔f戰????俴孹?s?寕牓€伻煢?Figure聽5-21摆h?dra扵擠?h?剅???扡」捛bott?€闃Pe緋No?崱?傡?鉲os?€\?il??媝almo?n?摽?湩blockquo?滍4滐滉俬ign="攜er埜img?c?ex?0059?b攼?"?9€饌|€a儴/兎??"6???贩楾i嶗凡剺"嵾嵷.聽S??(悼?俋竩?ミ勭???剰????岻?悡resul病f?CH5EX18.html?愥w,靍ts靜ok籄摏奠work楕n鋏tai淧Fち穙loa槖儜?堮.png?閙Y攤?way伖梻伖歒?s餽evious柏俍?chap岺:???奊奀幆var聽劚I僘;
fu瘓聽ntW?owL剴()聽{?聽聽聽佒聽=聽new聽€z()俒?€?src丷"圡"??.onload聽?鎬??聽eventAssetsLoaded;
}€2€*function乬乫()聽{乄聽聽聽canvasApp()俥/tt>Then閚 <伖骾ze="2"><俋?)傔t>,鱡鉹eate狯ariable頰med??easeValue??hich騟pres噣s鬶e餰rc€hage鬿韔v€@€竤hip醕ros?remaining鋓stance鈋twe哫€鵷wo餺i偍.蒼飖r鍃ample,閠閟 5% (卂區.05?t>):

-20儑妧俔x俍厺nal厽?厺2?厹晉惒搻餷a忦偳?but頴a?€╞ottom啩啟厀僕47厀厀囃恎崌峯峯恎?恎p1?{x:240,y:?}濢€?€€鶆榾鴦瘧w憌??">F姽ly憦漣dy?ic颾ject鎜?卭卬洃兦t>丂at鑟ld?憪v枒埛埛埛劘埛僌埛爟q囃p1.x,聽y€Iy€Hendx:堁€簚p€?€襳e儤ityx:0€wyy:墴墴墴匃匃勼??drawS?en?擲慀璛ry鎟擯婻?枠d滧t婈???€i啝楘鈟髐btra癏︵晍urr▓勏勏x剋?俰??y??崳徢亣徢徢仛fr權?刜伔刜刜?刜?刕??will鏴伻horter?a?c朻?偪????眂媄睶嚴ar€恟醱a崺喨倗?唌剱〥壚?伅?仾.讍í懃h媔?h伩伩壡壡?壡?搼?ough╜讹蛾only幾???孁媰chan粈墋p獉墷嚪嚪偀嚪偉燺泧沷沷燺?燺dx燡?.熧聽-€tx〨燿y?牂?y熺熺熺??剏O擔厐a稖敟瞤€竚ultip婈筿欴潃??縹凮?o柺岋仹怬怬????i瀲仹仹瀲伡盯抗殫仹殫殫佺?姱姉姉?傁刵.??*墺?丱畨並€8丱両勛??劘劘阜帯ap帍帉嬌囻榃楻?琤anva窏??儚???.嚫+?垨囷.噋?圡?c倫ext.匢Image(?€R,傘€;y)???厽厽厵You嘫鬳禭慴?梺execu打CH5EX18.htmlE叄聽5-18.???嵳i??.聽Eas剚狙(l慲?媦橮i傝偫?傦傦惪惪惡<!doc坧儛姍>彄€賭?聽儼g="en"€鐎醗ad€弨坢eta聽rse凐UTF-8仧?title€憥$:聽聽?聽Out聽(L?聽?聽S?佈/佫俷scrip仒src="m嵷rnizr-1.6.min.js冣侁乕侘侘爣?"栙/ja汬€簠穡indow.addE?tL愯ener('load',犡€筗?L€榚d€爁alse楡蔽橿€unc旟侘侖()聽{?堎佔坄溔new聽涹傸?€?src聽=聽"s?雬€卙ip.png"
聽聽聽s€營mage.onload聽=聽eventAssetsL€爀d;亽}€2€*function乬乫()聽{乄?canvasApp()俫俫俤?Support聽俉?€!retur乆Modernizr.伀偡偡偡冨勛偖if僅!冏冃()兿兾€W?儫倧爒ar聽point姴妟new聽€z圂丵?.src丣"€hite岯乷唚聽drawScree€p啛??context.fillStyl刢'#000€'傜亸亸Rect(0,聽€!theC?.width€梹恏eight喛倂//Box€穬'?stroke効'#fff€効仧仧仒勈1?聽€1凮勞-2€?2?偠岯dx冴?.en€q-€tx仐仐亼y仐亹€p仌y亾伩伡€陃elocity儍僆*櫺aseValue僩伅伅y儧僡伅伃佔佔咅聽+?冝?乬吜乬儣傦亸帰D撪曑s婸o?llu屫at嶩path佔伹仌.push({x:?,y€Ky}?伩伡fo嫚(嬕i?0;€P<€8倻length€?+澘???欓淸?憼俴[i].x+挗/挕?y,1,1拸?燝€績莾?傼,????}撉徔?.05?%1€趭?40娦-20}??2??47?乄丼劑乪p1?聽y€Iy€H橸:俰€簶9:€`€褤n:×拁:刜刜??Array?乷瀢?ocum硤.getEle€YById("?One"岀?佲犌佽C€?"2d仌伩牰pI?rval(?啒33乷€(敗/script>?€薶ead€線慴ody€弨坉iv兏▉=?si痠?absolute?top€?0px€hleft€u"儚倁坰槧d=堊"聽枈="500€h€s?聽You岠browseoe侶no?s纪HTML5聽妕?僛喦€葊弨墖邎鰐ml€?tt><侫骾z姁1€xb€攃olor="窤">NOTE儣冿儚冿冿"3冪冣僶僪2">We醨e骽owing鬶e饤傞n€pis鍃ample鈛t鈋cause?background閟鈒€x,鱡靜a€恘狩hi凱bitmap偝棰y頰med ?剰剦乑侁.png慔掃???App(懾?嶼忇r剝姫嘕涁厭圦?潏堌啎鈥攂y娦e卄噚巂ariab嘪潳??繋?t>:喍欦嘅4?櫩偡偛灰傓覆.05溩溤夨?傸How旟,尣槾in棎??be嚕per⒃remain€馾i昚枲?w梱two??si奝?嬓?a喰艰u慼dd?慞倯慳city?ship愘ea岺fr媓. Figur堾5-22s琾at嘋would瑻ok靑k僅椚???ag嚫厵滺?ra?ow玸枛spee溩唌檺?檲?崌峯峯哥n=?顎?center"><€g仦6pt仦0€a傡?font骾ze="2剦€攃olor="#0?>Figure聽5-22.聽Ship鬭king飂f (eas€ain)s劏)鬿僈ottom銏%canvas.詇en効効劯??peed?凘倈?鰁ry靜w勶佭>.5伹伬pixels饎恌rame),醤d???angle???丟丗270?塓stra尡鯉绹?.譭€乶€坙cula捓冞偀俋x倧倛匒??y??ve惱ity鯽lues鎜r傳佅庣佺:

In?崸drawScreen(?偪,@stead決f狿溠扞distanc潐tw伕魒oints瀭add搹僩僡eV敼僌歴亣亣??????ti椥each??洸apply闊€兿偋樦鴤蟽鱽W凎?洡be洶塒娯?僞эis鉹e熦s犰磝ar媹€檚e€H髵1,?sult??埃-€peffect嫅wa劙?see?惎悧悧?唶囍.檹暀€焵?聽(€穩?庌)椲€櫵侴€瀭G€穫G侱俹冄?兡僶.倯?倓?>c嘸ext.尡Image(乊€R,?€;y冃帶??妎妎">You??峆?exampl橜y€Xecu?CH5EX19.html緫??慂od?rib亁o??typ??l?€hown€?a?le緺=0000661835?color="b娎?u>E勠聽5-19.?噊噊懻i??.聽E斠凲(tak€Yoffi偘倛?偡偡攪攪攤<!doc?僗墮>幊€賭?聽l?="en"€鐎幞鑰弨坢eta聽char縫="UTF-8仧?title€憤$:聽T哹聽Off晙Fak?嘪€0In)仭/伄?script擿rc="m峱rnizr-1.6.min.js儾侁乕侘侘爣?"暋/ja「€簠嚔豥ow.玿EventL悁ener('load'别e€筗?L€槩x聽fals気次?€unc撋侘侖(?{??佔絪new垚毢傸?€?坔丷"?png"??.on?丷?As峢s?偹}灖?乬乨??牞App?俫俫?Suppor孈俉?聽retur丠M庉.仜偋偋偋冋勄偀爄採!冏冃()兿?€E?媑€?聽?€趶R?崗崗崗?崌?€hite嵅乷嗺聽S跌e€p?勶勌?lSty※?'#00'傜亸亸R穩(0?€!℉C簊?€梹悾 喛倂//Box€穬'?oke効'#fff€効仧仧仒勈1?聽€1凮勞-2€?2?傔榏?棺€煿讇芳烗倵乢紈€熂w偋紈偋卭傁亙甲佺荚乄??乬?亸峴D挵敩s?o橜llu嫧at?path佔聽?髝€?聽聽聽聽聽points.push({x:ship.x,y€Ky});
€*伅聽for聽(va€0i聽=聽0;€P<€8倻length€?+)聽{?侴€ context.drawImage(?€Z,俶[i].x+劇€?width/2??y,1,1厔?聽}?€瘍莾莻?????倵€寛BeaseValue垈.05刜?p1€趮8240?470}??tempX€穩穚Y€穩穚Speed儧儣?mpAngl劊270聽??pRadians?仹?聽Math.PI/聽180佺佺pvelocityx侐亗cos(偪s忦侾卬???y€眰Esin侴侴侴?俷崺?p1?聽y€Iy€H區:儫€p€讁y€讇q??搨?new聽Array(?乵theCanva乕document.getEle€YById("c?One"曌旓寖俇侀C€?"2d仌伩爏etI?rval(柫Screen嗻33乷/>?>潙/script>?€薶ead€線慴ody€弨坉iv兏tyle="position:聽absolute燄top€?0px€hleft€u"儚倁坰d=堊"聽焭="500€hheight€s?聽You岠browse€Hdoe侶no?suppor€HHTML5聽妕?僛喦€葊弨墖邎鰐ml€?tt><侫骾z姁1€xb€攃olor="#0嚫>NOTE儣冿儚冿冿"3冪冣僶僪2">For韔re閚?ma巕飊錫淧g,鉮eck飖t襬bert衑nner鈥檚?錻u伜s: 劦a鑢ef="http://www.r侜p侐m/侒/剹剶囩囙b€榰>俉俉俉俁 .ogg
, €p.mp4€kand€妛ebm€?

W?discus卶e?video?凂erms飂傞€隿odecs?臿ch乼鮯e丠n圚r韔re亼乬?compre僠卛€葊}偮.脕j醽豼sually団secret骯uc傕f釁/児beca冐傤i孈峆佈ke?o韆king伌尒,娊?d,鉧n嶪ve媭€(y靉rg嫚il唸in?€Y骾z€€帾亼be錫si?rans峲ed?e憖壚net?a/學="9學孲Theora +謔rb?=恉乮>亀亀g/)??open髈urce,鏄駫/c?vel?d鈟豬ph俌.??儫.v€?弍???乷乯??a剨,??audi匁廧丂掟d憫?junct?w灨試o€n栚?朓st楶侐坔?濘挌.€梹攕??燘es惾燶amo?揾di?al?b?s,鈛柸un樃tunly,?t敊h劙hel洨vices.蚢ny櫃merci俋欛ani?(e.g.,羛ple)alk??歈嘯/??叏y濍ns鱤eиsome€`r婸€Ypla恆€Ym?飛?饏皫垱o淴s€槆袩▓憈echn廻g喨?thu烞y?g?u匟?匱i?NOTE??儚冿冿溓燝僶焫S?tim!囄岹噐hit擲w昞k波奝栣?偗偐搱submari嬥媰撻乷乷"?T珐w倐岉a?c鈥攁vailabㄈup彉til 1995U.S.?巄甔ow??rdelapublica毑僈毎捘€儎8?杊珗e?ce冴廰17鵨a?if捨僘瑏書ut儍€€儣儝仒€坈ou樴wa妏侭?v牁??)嗶偼el硄am囀嬺?€墻豠,€y洏俬囮p?a藏wsu敳??盙旉em??盙攐盙盇H.264?$$$?mp4僿旝?攇僩??h?-q紑ityst?ar妝?h?receiv?bac粧巟墿韩big饘)岮suc坧s?dob€8灘Microsof?H懆佖,孒spi櫺offe暼g劅劄徹愯def栢吷??ˋa尺ec.翐xrg歚z撱n?凐PEG藺⑩杧狿lect僷餽盽rt?X扨en悎凒揁栘呴wˋ?h?€j拡dor???im坄mId葖鷢篸摗so揤ir﹔刌rieta娯啋傌A嚤resul癙呴v€饓亖 in冣ti欓偄?a??,韆嵰t熈a砲icky?m?嗋渷a?s韮0i厫帺t??吇?禬???ex瀐s媭圚o惰伻-哫f夬cor稝溁垪垥?焷勻劕嵭埆?窻兪穚el崙s擸?宏共嶘ke苅refox崐O亁棤凒垹.蒼潬撪2010,莖og嚇d嬭p?勢Chr棄€Pfav匬兏WebM?洘9洘????烕VP8炶混?webm????僿劰?new堢堗??嗶噋by?潕Mozill壷増碕bas孊厬?丅?lu灅?(ju怘孞The?)??udi潂W<屝峏="http://y洏ube.枠?塼blue€榰>YouT??nouncカy彔d侌n噄m?嶘掚枩?be萒ML5-?,?乧敿♀y檡擦s?胾rr杙l?抰懍擏拲伇杝晙碭r€謘h禋刪?潐淮f垁re????T?ummar搱?犪恲c毟唖恈啣恄怷⑧iou廝歕儻t际gn="ter"亁€僼op尷t姌€弨塰€弨妳讌讌觽誰ef櫡櫜1櫡櫠000">P犱聽橭恄吀/th?n="to?卲">.ogg聽.mp4?????????????webm???/tr?r??td€弰縿縿縿縿縿緼ndroid?兠d????????X傜傜傜傘仧仚聽聽聽伓仐仐仐仐仐亼壡伩侴喎喎喎喎喎儚儔Firefox儳嗙???????壡傜傜?仧??仐仐仐仐仐壡伩壡€弳穯穯穯穬弮奀hrome儫嗊???????壙傜傜?仧??仐剋剋剋剋剋傔剋剋???€弮梼梼梼梼梼攊Phon?兛??伹??仐劅劅劅劅劅傔?剋傜剋仧剋剋壙伩壙€弲'???儚儖Internet舩p?er 9?叿僿叿?叿?仐?????傔?剋傜剋仧剋剋?伩?€弲'???儚儕Opera儣匞????????傜傜?仧??仐剋剋剋剋剋傔剋剋???€弮梼梼梼梼梼擲afari兛???伹??仐劅劅劅劅劅傔?剋傜剋仧剋剋壔/table刉="4刉凴>As鵲u鉧n骵e,頾飊e鎜rmat閟髐pported鈟吚l鈘owsers飏餷at乊s.耬cause萒ML5胊nva?nly?s鰅deo閚鬶??傴€羵凃implemed吀thin,鱡韚st醦p傪a髏rateg侚倛?s?lti佇?s鬿卆y?.娛a/埾="9埾埶?="5€xb€攃o="#8e0012火ombining翀鑄hree孨仩嶹僶悋僲T嚾exa噄嚑?囙chap?丠側introduce噺噷m喐嵷m鉹az垁t鎖rst鈥攗s劰崱t劰坣?once.議i?僯m勓侰塦b?瓙鱫rk?n頴cessary,騺Znow?嵄廕w凱佽ensu佮嶩ad?醕ros冐働any懴€憄€衖旽.夬??="?<?>栢姽婒鬭?懭忴?specify怗囕€@?埨€▊j,醤d?婮help?achiev喰ur鏾al飂啘?喭when塀媋???揫div卄€2mbp:pagebreak?€硛*攺攺?攺垚6攰Convert兩V劉F?撓撓撓偗偍Be垚廆e缃H?喨om堒鋏mon搑i€@浺should鋓scu巰丆c凧s?.觟掄乊a側go勸偘犢.ogg,€jmp4€k?€墂ebm€憘脴Z曺?project?ne爛偘ha?a撏?t劕€垟袃笍?脡噮臇葪Xa鋋un€聇ask??↖unfamilia淎庤歴漲is亽呝compe€r僤;靧ckil檖乭園坅娛g徖?ree鬿ols ?杸卼o鑕lp鮯鋙陁st鬶at:

Miro謎deo胦nverter (佔佔佔佈
)厇blockquote叇3収叄This醦plication€鑜l駏ickly凥?韔園兒魕pes鬿 .ogg,€jmp4€kand€妛ebm€?蓆閮8vailable鎜r鈕th譱ndow€貋楳ac.婠嬱佈mats?f鵲u鉧n頰vig佇?rough€@e韆ze飂髠癳n?rying巃se彣佱尃暊products,閯倄b叞ery槹efu卌恠?s嶇嶇嶇垏">H?Brake嶏嶍h€豣€?fr?峯峯乬乥岋岋岋岋岋岋s専潿槒n噅夞旞intosh餷at嫨岟岟岟岝i梹櫔???劎">FFmpeg堶堳ff€?org堢堢堢乄丳堊堊堊堊堊堊暫囬ulti?e嚇oss-?,?mm嚇-lin?朚do捝??營work偫n梪/娙/Linux夆搚near?an?橰?desire.萶we€??re匢no荱I傌?face,髈?鋋unt劻reginn偢.觨m樅嘇?滺bov嚑se茖Sa?ir錸伕????娤>Basic萒ML5硉Implement晵?弿廯傦?傡Ih嚢?="2?tt><?>NOTE儣冿儚冿冿擶嚐僶嚇T础e媦忺庴?b楎婭,???冊侴壼i>CH6EX1?i?丟丄?え?dist?杸灷喛?奯em唚┷a€ ㄨy簛p踩i斃境set儥挕瀓?embed.詇e?佔俽actual毨par?棆哶憊倎MediaE湷愊??澘?by倃倃倁倃倃object??mo瑝mp氊a俬?冟clude???悷刉冿専掲俖寙誖L?婯孼矐w?€囟皔????偳??auto侷匞匞匞匞倗倗倗t>true俫媺r??fals丟丂╆c搾噹?釁緃ic抁when歅a?囷囷囷卭卭??湀p?囅囅囅俫俫俫囅囅囅?囅囅L?嚽ock忀棵吧嚶hf?sh??€?⒋ti柕Xwrit€璇Y€pd秔not鱫rk?F稝fox)???囅囅啑啋volum啛???倃俼A顄▲r?twe?0?1滧et垳傭靍vel潊嚨墇???儣???pos?????倃??imag归孭willhown嵢璦?宍曺?呥呥僶僶???o髈me??€卐thods飂 HTMLVideoElement鬶at醨e頴cessary鱤en餷aying鰜砷n鉶njunction鱥th蔭vaScrip?nd胊nvas:

??僘()劮€9?blockquote倂3倃俿A韲邗sed鬿髏art咁a咞.
dura剦塛塛塛唚倗個T剤leng掄剤匇擃se擑ds堶堶?倗???curr?Time????偀???t俬厪厪厞詇庤嬦be?歘歘匴奧奧漮for庛int廯st?effects,澙ich鱡偁ll鍃plo恅la乆壪壪壪?壪?剒ended刧墴墴墴俹俹俹t>tru?喠喐??fals丟丂,鋏p凱嚤壻h毴er嬒鑑s鎖nish婬殫?囘囘厀厀?t>mut囘囘囘囘俹俹俹囘俫囘?囘丟.铡黫nqui幚圇焷u??垵be畧?坥坥坥??勏╓坵坵坵坵倃倃倃坵坵坵?坵坵坵坵恎?浉漇ly圇圇€噮?卶呑€`align="c俙er哋?1€xb€攃o泩="#000">NOTE??€^?冿冿壏壏???ev帺?疧瞫exist兊?姖HTMLV堿Elem喞婘?亅.帽卪飖縫t偽a鑢ef="http://www.w3.org/2010/05/宩/media厬ts.html喦劌?="blue€榰>偪偪偪偪偨.webm聽嗙聽?="m棎b棄曬伬type='p4;聽codecs="avc1.42E01E,聽€郺.40.2"'偘?????"?o/€墐"vp8側vorbis偡偡偡偡h淎吙偤€悅穳ora傁'偩偐峗琌琌€g瑆紬紬紬嵾紬紬紬?冿冿冿煣冪僶慍?p辅???>???鎖l“ir?桿丱丱?夌靑st鈋cause飊鉫rtain镺S (iPhone,镻ad)鋏vices,鬶e鈘owser鱥ll頾t醫tempt鬿靜ad醤y飦Pr <€1髢?tt>src.mp4When醿癰娢reads僷is傄?t媖婳婯each兓閚剱c?sion.蒮仼do埜?卪?厛mat偗try喴nex?.誷ing?styl愯f錷be幮ll?亃code儽Example聽6-1??e淜}pl継-v?lla???亁祪pag痟T紷內?s鋓s?y亾倷defaul?ett梆笯bu?f鵲u驃,倧?pp?c凘be鮯?丠junct叼乣th?參?狠ご?????ign="cen?mg喝cindex?0103?baseline"倊262倊淵儴幭幦€g仦6?????ㄠ弌="#?"廤獖岰?d徶搰劸瓱剳11劅??5€xb??8e埲勮孋樤張Loop硟Auto慁??歼歼?笓敟?僘o拡憜m?髐??r囤?most憽rs棤pec秱se惰om?ay€亗,?.羖s擿?朣vel罕,曗僈wa?劷?劰釃8matical絟or靾鈇??俛beginn榾?卙finis繄儵l渼筐th櫓 (檲support氝brow啇)?very錫s咼acco灷倛乤恟????Add劇妋,吺€悕髥箛?爉?劺s???孂亖do€驄衖f?咅op潯s 掃???t>,丱丱匇??匑/媹乬乫咍亣t?奡?亊籢璒仱ta垁lik岅s:炦?欸僌僌劲?聽喩?圕縲縯?縢縢汞汞汞縢汞縢縢縢縢挤???縢縢縢縢縢偡偡偡縢吙縢縢縢縢縢巜巜??╝瑲???帪1ㄟ?NOTE儣冿儚冿冿??僶?As氊wri??備乄檞檞???es緃Θork樫Firefox;鑟wev?畝卐r,髐pport閟鍃pected閚鰁rsion 4.0.The鉶de鬿錷b倛our蛈ir耬ach鰅deo仒th丂ntrols,靜op,醤d醬toplay劇刋CH6EX2.html€眛?distribut厁. Figure聽6-2骽ows鱤at釁?卶k€0ike刬Google胔rome墍p><墖塶4?塷€`align="center劯img騟cindex?0107?baseline"倊262倊320"儴??€g仦6???塪size傴剦夨夞#姲"夁-2.聽HTML5?弸塷塰娢俋抇?抇勭抃You鉧n骵抪彁full徎惿廹廳907厀廹廯Exampl弌弌>崌凮?凩??嚠愡噖朩朩囒?嚳僟僟僜??tt><!doctyp??>
?壐弬?k€0懮撹櫬(again,?nd?d數Goog愢Chro劙br侶er)嬒嬒4嬒i妎劏.聽B灎c儌5堺埅妷傄???梂梀!doc稟捐表瞹€?聽l="en繌€鈋ad€弨坢eta?harse凐UTF-8仧?title€憪??聽?聽眤€?聽S嗰稈伄?冞€敻G虹€嚑?聽a?啝?緄?聽聽塗?坷?8€qid總?啑聽傃s礟c夃src="muirbeach.mp4伻姽='伮/€?儜decs="avc1.42E01E縛€郺.40.2"'偘????webm"?o/€墐"vp8側vorbis偡偡偡偡h.ogg吙偤€悅穲1ora傁'偪偪偪坵坵坵偪坵坵坵?/€瀼_忂€?獏)€€愖?愮愮愮愨32愮?慞愖愖/>聽<so?硛€卽rce聽src="muirbeach.mp4"聽type='video/€?聽codecs="avc1.42E01E,聽€郺.40.2"'聽>
€Xlt;so??.webm"?o/€墐"vp8側vorbis偡偡偡偡h.ogg吙偤€悅?theora傁'偩偐/仛€焵檇iv€弨垁?>(320脳240)亣?亣€噒;?聽autoplay聽loop?ntrols聽聽width="180哷height€p20"id??"垙垙垙嶨嶨嶨垙嶨嶨嶨???嶨?嶨嶨?偡偡偡偡嶨嶨嶨嶨傁?嶨€煂菍莯?(媂脳?嶨/body亸€慼tml€?tt>
<€囪嵻4pt"鲙?€aalign="center"><唓骾ze="2剳€攃olor="#?>Figur峘6-3.聽C晸勦g鰦亙醤d兗閚鬶e錷bed墡傌夌叝夅p厙厙厒??4€xb>Dynamically髝8凙a凷傂?p偳="3偳偯Now閰Ps鬷me鎜r?mor叞lab??(啓we哷ink€靎fective)鍃ample飂??.聐鉮ang€﹫Q??扝刯挓t>?丱丯?乄丵ttributes凂?伹乭.曠侟tag,喠can呞?e巇o嵺fly.議i€銍萴ay鈋?few餽a?佇曫asons鵲u鱫uld鋙墎s?a€鵯-wor€纒ituation,嬆also嚑姛鲀 to鋏m倶t?so岃?power€mHTML5嚳嚳嚳嚳嚲.惡摕愡愡梮rst?need剳add匭儳儳儮r廥e僩僠侀呞age:冩??椙?喼旲m猈燰搏S?:input?"劼獉?垻両"佷硲€3?i牋Ⅷ€還遖へ12€飥攮餿ep€饊還遶alu?筆"/獓獊?墢牕牏岋埱埬We鋓scuss屬娯detail極壡岟岟岟岏?<枑?pos=0202278??b咹侾u>Chap┌聽3,鈛t陁st弶refresh槨r頄hry,勄勄勄勁槺摠wm?擆??tha勜毿燍a髄幦樅嫆s澑?潗goro鮯?s乚€榮e匬煢劚樣??1焙???喼1?夨?NOTE廮夌儚冿冿滅樋僶?I彨brows喰do垬no?uppor?僥佔????癤em?,?text鈕x刾l寴ppea奝孻€媗l矆儁媝?堯伝di?t獝嚳嚳梠"1em噖噏To?pt昏傏矚€Xⅲ嶇┎JavaScript悮憮珚v勦靑濊n?焚欁?埜loa??佨?嚇硅佅佅t>丅WindowL?ed()侴侤fun瘶砢whe硧?靵`s (昸h瞶look鰁ry婵發i嫳o硓by廥w)姱???単糒?.壚E叡L埬('剄',聽唎唋€爁叼e)?幏幏???峬淎up掵coup籦潬光娤卭娤刧娤娤娙.贫7愖??忴?掃兿兿t>炳?儁l僘?d?幰.?鈥渻3鈥潈M佪(e.g.,暵on堪?t驃!飏靍ft)沜朩哰偍dl儴悎咃咃咃ze??壇柗?r拠?巊巊拠僶僰a?€慐◇聽=聽docu€i.get€腂yId(伎")?佅t敓敒?敥啛啗敡嗊敡敡咷 ?秬厀idth="0pt">Next,鱡頴ed鬿鉹eate狯alue鬶at鉧n鈋鮯?set鈕th€鑕鱾i醤€衻pheight飂€rvideo醼€nce.詇is閟俋ca俙儽want倷keep仛proper aspect騛tio偗偐(€Y€鈥羷+侤?)鱤en亀儵resized?o鋙€鄆s嚶噭乥ariable ?toH?R劊€?/乊>侾hich傾simply堖吙処di€Ad鈦厈:

銆0rol,佺佺佺€怌?d()?侙ev啒钄pl凘宲c?彧撡func埜n?匃?廜偗偍敍ty嶹嶲揾懀?€詡倊??? (亀乿target.偑伅t>)垔呄僕佺?伔僗厪厪sam叴,澆敁湪敁傁垪捪椷??歅jus歾嫆e錰f?嬝?刧渒s櫛泋playing. Preloading謎deo閚蔭vaScriptNOTE沕浄/儚冿冿峅峂僶啔In?栃ic夎楢怭bab媥would憿dis棭埪爉s?飵o巎?勄勂懬1em?懧嵸劎?????repor曆?er?扐崁?橔h煚厜?狉愯retri懓枲?rough浛t:瀆?呮4奯奯吙吙吋br/€倓?聽loop聽c仒rols聽id="厐€?聽偺320€h儩24€q?="auto"傛聽傫sou?聽src="muirbeach.mp4佇type='?/€??decs俋vc1.42E01E,聽€郺.40.2"'偘????webm"?o/€墐"vp8側vorbis偡偡偡偡h.ogg吙偤€悅穳塷ra傁'媁偍/仛€瀫茖梹瘈+灄枑?0%偳擶擵???????ne▔?ь嚬7捛儴晲ntWindowL枈()刼樃fun?渞椑??d穱疘獓獎book杭??贺櫷?汭毠finish?夢.蒼呄呄呄呄呄瀫?坿w葛istener傽or€抦o俲疨??どatc?from???呇V愌Elem???obj稝熛嶹嶹焽傔傐﹑gr谷偀€9癎?琠倖D????柂?叇孊upd?in塒ma嶊abo韭瓀?採a?.谆x猶us?彁婜孮偒??text絤?赶?叭浛櫡?堊媜媜媜??can碅偪嫙嫙嫙偡嫙嫙睅眊錸昂??兏鸶囙i擑坸i?y櫎壋奟let妏雗ow傸o笽礨?孖儐圤圝撟吙吙>B?w湬?╝勲檽€硻煓歨o幇檭栫儣嬊僟嬊嬊嬄牭聽瀢瀡聽{聽聽var€(沢t聽=聽docu€i.get€腂yId(?)俇?t.addE冑L?('枙',昸剏擌,false偆???倈掃徺',€i俖匌}撓??娍娍姼T櫙娺t>咃咁?瑹瑹倧倧??????壴?劉剤cul?欵by?楀r??€ial?dy-亊侫(剣剣嶏t.buffered.end(0塷?)儥傃total倧倧倧倧du劜n俉侾,醤d墍丳呫泋value?100圦€灉薾婜懭囒set嚲??in撊囱兛婡嶘?ty?佅獹憃獹獹侹咗s骽ow懤祭a絸lepos=0000705539烼color="b?粈€卨ue">Figure聽6-5.襡member,鬶is閟飊ly鎜r鋓splaying€鄀餽ogress.譭髏ill頴ed鬿鋙髈me?乣once亰video鑑s靜aded.

NOTE嘅?€^儙冿冿"3冪冣僶僪2">At唺time飂塖writ噚,苅refox墄d頾伆uppor亾??倅堦buffered嫻perty,鈛偐冑姌屝nn嬸岻?version 4.0媊囘囖嬬?嬦em??厙勷funct傝聽updateL帢國Status()聽{鏅t獊call滺when牐?爋???object?atches啇佅佄can?through??ev揳伅伅叝叝亼匢s?伅伃亣??伔伔喯喯喪,醤毙?start冟oαy:監懬曌屵兛噂?爓??????湻湻揥揥??唟a鎖lepos=?0706602楃椺b就Exampl咀咀>鏸v懓?fu絏cod€P県p?咜挤劘劘劖i僩沜Basic去05偀倻?偘嚐傔傔??嶛<!孹typ儉html>娝€賭壊衋ng="en"€鐎醗ad€弨坢eta聽ch?凐UTF-8仧?title€慍H6EX5:嗕聽嗞⒎ng聽抁仼/伓侳s?聽叡="text/jX€粌焪獦ow.addE?Liste瘈('?',聽澥W?瘚€爁alse掍栵乄乀????????俉?伭呯呭progress',update剏稙,咓???倊',?俖?€^埾??堖???????乢絉啑媉媉俉俉媉媉??縪縥?p曢Int(((?偍buffered.end(0?/俫倐剹亗dura?丳*聽100)凎乺??囅囅.in岪??佡叿叢+聽'%'岹岹岹圤呯妛??妛妛囩剰澦/??€息w€攂ody€弨坉iv€噣€儮挕op0πrol挩id爯?聽?320€hㄕ24€q猟="auto》聽?ou?聽src="muirbeach.mp4佇B'?/€??decs俋vc1.42E01E€郺.40.2"'偘????webm"?o/€墐"vp8側vorbis偡偡偡偡h.ogg吙偤€悅穳塷ra傁'??伮€菍繉縺痠v孲杦杚丯0%偳??€穩帎噾灥u跨跨库籣彵9竾竾竻5€xb跨酷#8e001笻A衦ob栶侌th弄s醤d舖bedded ?線匳ideo閚萒ML5Now鬶at鱡鑑ve鏾ne€恟ough€@is鍃ercise,?to鏸€@you髈me鈇d頴ws.議il?e鉶de亼presented鎜r CH6EX5.html鱫rks?most咰-complian劻b鈘owsers,傁stopp偁侀ing侚Goog冟C呧剺as冮finish丂up佲fir?draft飂?book.詟Yw伆upsett偂becaus?€8d傋飖r喞imary餷at喰m鱤en鋏velop侚and鬳s俍all?僡鈥檴゛?es.?a/???With徕i叒inv偙gation尓discover?巄匧唓not嚛??<惄骾ze="2">can?y彍load倵倳拸?嘪r孁necdotal颿currence愑y靍擧旔??mon魊uth:摿兩掤髉ecific?閴5慬敗恷€an颾viou慇ut閙port斄fac嘪o佡e.蒮榡a??棅儞€HCanva匟丟丗w??岯arget愊愊愊愄S哅lly?汍汋?fou攁愘??墭?f錷bedd愾尶尲<v?>??ta洸姷餫g摏€憆eas娯why€z愺?n楕敒?昪?婬rder姟mak彊b??亀?ne抭o醖d夎?€q?晱桒〣()??咊仐仏厒WindowL斃ed佔佉func涹li匼:崋blockqu惱嵨4嵪嵥儳儲偉聽凎凍聽{
聽聽聽var€(啈Elem乭聽=聽docu€i.戰€腂yId("?乯");?俉?伭奌E冑Listener('焆',update剏嵗Status,false偆???倈',屛俖俕嵂)€瞹????婫婩How妏r狔抪礇i慔焿sol禷矑渶嘸b呅:檳捼a??€笘@o雗筽?a龌蔴梹??柋so?噃惫榄〒K€悹梈E?聽6-6峈窊嘓?単冐倧倢T?傋樒婮忥垂bjeal吶dy?a佔佔婐ter佭佖?perty垢?絚?b礰恏??s瑇ヘ妶乤,狂we媹徤潝€騽?auto仼???乬?oop丟t?S??t攬瓚ar幰p斃揦??讋槃鋱纋u〃丵?亪?s壚ズs禜睒圑噇僪官檋ng鈥攎anipul?璦t礐秼?亯quia殣her竀w??夲擿侽僜w韭偍?孡厾橶筬盭s?啌柌su?佦圛ed栥???洏??櫯奐創曯n厀?n鯽r夲毿?o労烓se?浝p?rful埖€醔?俰?mix??塀?es縪?浄浄懚5洸#8e001抶D柨a謫趭笉繙血5???冪F?壊mu宲lear峉basic懓f歸?儻?嵗a€!鎒w洂port慗搲??ゴ丄?immedi宧晙ob朇娨?掻work兞?巓扺.???丑€駇巑don鈥櫓Q皯o€€嵙€衦self (€P?剤熦come)崗壇筹崗崕4??st擓?embed潄揌墎尫尫尫??葫咢唥?on塰毞學毲?稵卂<倞>み?ta爌倹帾雃べu巌刅笽傔傔傌矦傁偺(aめilar柪nstruct)π巟se傘倧値嘰俹俬CSS?y??捼?劅劅?嘺亀>n?????⒁en?儕埾ノ?赤,棭嶆獖r標枑odだn萒ML, ?苺卛t韎ght靜ok靑ke鬶is:

<div聽styl€竝osition:聽absolute;聽top€?0px€hleft€p60€{display:none">
鍁ents冟頾t醦pear冮fire騟liably鱤en倗倗倗倖lem倰a?叢d匵in?哯page.苚?氞?as卶喞ne啽€8w?r?gy刌旕鰞Q鋣namically鈥攚e墍ll銈 湊??涳涬嵡匱a壚??殽亸嗊嗃唒JavaScript.犼徢3徢徝T劯妏屝噣ng廠??侴t閴燿?couple鯽r嬮es?hold塜ferenc€泧y垊???wi埰.詧蠂W嶌E伀嘜嘓冋?冓僶嬯傑?偪??偰tag廆hi傂伹?仭Div仧仒????俉彈?俴?潡?嵖?偳?ar犡壏犱€繀饍棤鐮鋩g兌1僘兛€`align="c傪er??1€xb€攃olor="#000">NOTE儣冿儚冿冿昗嚐僶嚇We??metho?o沵global??roughou桞s鉮ap?擈燲爕many焺s?俫俢,鈧0f?e?sim槈よl忚﹂?it熻児e駏icke?wage?o厵泚occanvas.蒮鵲u?ln洦bet卲?h犺儛Q?asset儬??媢a?le拘=尃0834193姉?嶇="blue€榰>C塖聽7凷渱俖俍暏镐docu?腛M颾j??奰傦癬亁?佭佭?佅佅n喐plac捹m夗氝?ju摪嵡灟灟勶勱?聽寃寁聽{Σ€*聽聽聽nt聽=聽奺.?孂"丣")ɑ佺伹伹伵'塒'伔伆丯body.熑endC比d(倕亁娗??坵坵?籞堖?嘷抚嵣a泚c?煪佔佔?伒,鍦pnti祾putt彊i縛ns亁斲at???嘜凙繆pag攫?€恘焥sty﹊ttri???????o亀亀dis晥y:none亣?線ch紺make嗴visi曍厀厀淨?beca炠alg?e楍妝剄冘???don?甗show凒儻儷檱???檱圇囼朩??攠憚?亀v.尭A宔("岅",聽"姛姌櫋姺??卭卭?忊?酣籶頴w〓頰me梘喛晸Type冞?攭hold恒resul異?a偮№峳彵冦,??supporV僘F?a?儂.詯Y偖return冔簛鍃te檋籧桗偉?成厫€8€鷅rowser;飯Qwis勑悹偱??鈥溾€?/tt>?藔€?/font> (an錷pty髏ring),鱤ich韊ans鱡醠ert鬶e鮯er€Ha€rre閟頾鰅deo髐ppo丂in乑app鎜r鑱 brow佇:

<匇骾ze="2€xtt>聽聽聽var€(儭Type聽=聽冧edV€笷ormat(?Element);
,醤d鉹ea徖僘ev冑h€皨8憆吳傜?canplaythrough偋??捵???捵?捵?憯.嬓At槓bute("媓",?muirbeach."聽+擥e悋侽侹addE?Lis姩er("?唝",亃Loaded,fals俶€*??????Whe淐滊has幦nish?l働弍,媤坥?剓冪媇崀灷c?厴熒?€瞫傜傜嶵vasApp愡傗funct搥嶹嘜??嶹??侻??(呞?峎爠噵w剋剆Be?栍cod?la欨se劜亐ll鱫rk烌ne寈to鋏岃佊啛氉氉氉??on.詡 ?s僠殝岪€鯈imple:€@nce厴?燍冪恎僜obj哷s鋣nami廼y?呩HTML餫ge嗞do拌憗v?鱝?嘥multi凘儫儫<source>冪冟tags.蒼欻a摿咉goモo殆?偗撃P洏漄夁偄method┋佭???嚢e巟u??t傪侷audio狵?泍.柧?3??嵸?呥呥呥呥?akes??儤para€衑r珋虸ME劼壐??乤t?繉厬兛兙maybe???敞bably丱両撊徹h傞(an錷p锤僺)坃坃歘炏僕僑鈥溾€潈G?(?埌倶??偳??€圞涜i徎browsΘkn€@€拵b嬝?b殭ndere嶪僄????姛姛④吳吳吳吳吳吳吳沗?匶conf晙nt湴唅?a昉啅n唓dis???????忕忕啑啑啑倗啑啑啑學學呄吿洦採€皠蟿螠劮潙r丟丟炞?饯埧埧??>W??he€0valu尐Б渉mЧ?medi?喒狘咢d饐?骗猠鬄à珘(exercis?assum僘庰b????嘄?丱嶰嶰乬equa??仐仏yes乷t>㈣f勝encoun噋錳?r庰s疨厴?any唹吀reeょs (荷筷E?俖俯啽竉擟test.圆梻t>塳E塃倃俻vari恅??杸id婏鏁Lfirs姺€€妟仛ha嗴榋嗊刧??漡丟???§from僙ca恏暓?篏篏?:礀煰∣彿∣傋傄?聽suppor搱峳瀈mat(忩)聽{
聽聽聽?聽孏姎聽=聽"";?爄f聽?.?e("檊"側=="堼"聽||聽??儝?ayTyp?藔€卐("video/webm")聽==聽"maybe€q{
聽聽聽聽€E聽returnExtension伕伆?;仐爙聽else聽if(?.canPlayTyp兾mp4兤probably"聽||聽俖兾?????????"?咓咓咓兛兙ogg兓呯呯冏呯???呯呯?呯呯呬?呯呧€b€弫磥鱽魜*}
We鋙頾t鉮eck鎜r徙ondit?鱤en€alid鰢y?mat閟€Pund醼 the騽鈦Yue€?鈥溾€?蒮€鴣媮9case,€Sode€踙as€纋le俀偵unc?m吜頴€蒾鈋鱮it囪閚匑way€筩atch侹呑劚alter僙庰gram鍃ecu?.讎貑爜簑it?刾est飬塭 <奩骾ze="2"><婙?媁t>噟僸亣亞alert()亸t>,姞i厁w凐escrib嗋previously.

V屢壭disp旞偁lik劻閙age悎愮?傦3傦悳彊you媄?o偼嫲??巗nvas,亰us巠壪圤>尷text.drawI剦埊?弽,釕1ough倸ar?円ing冭static啱.膐n鈥檛鏾靜ok????冑?冞冞憫挊咇HTML5脝麦pec摳ca嗎埅償fi彁it.詠榝ollow凂塺will墖墑stor尠暵varie頰m€爡o卬仮Element厀戱?暲媤侘乭x仧仒??y??pos櫍椚乷乶85亀??t>30?t>:??杇?杇?憃憃慼?nt聽,聽85€(30);兿ХХ儳儳儬However淵梔僘峖?娧fir爌tim忊幜ーicゼi⊙€move鈥攢槙ys??f`晉A懥€亗qnk€俬av琲ne髈me€羐?ong,鈛仜?僪.賭pju侾ㄝadd儤e?檺侂€癿a??ork⒆堊堊寃⒆⒁Set?寴r偙upda帢嗼攖?????J叡も嬯?iscuss枒n灷済答ap??兏c仒乣潖潏us囐??W懅楄?喆itself?婍促偋偋偋偋偂咅?€(r瞨むp侭€餴nu俻y?儤??new鋋ta憪om?к嚦?L饋?hidd夽晿?)璛o?桒?呚仚?ヘs哋哋????od媭倔n佭佫setI愪??壨?佅夓Screen伹瑥??y 33橷llise鹃s珣稝嵑gi榾?bo?30汯s鹂竵?(FPS埜縫p?埩?奝our勏勏稕App勄勄??俀?暳f?媞know媤潃s忇adedě????劘皬?.峽;
Example聽6-6汑s?u?櫣羔嵈け瑄??嫻???奜★★噂. ??8059???Figur??>骽ow?熆匤br€竐r抚??妢i??.聽Basic衬??兝圲<head€弨坢eta聽charset="UTF-8仧?title€慍H6EX6:聽Basic聽HTML5聽Load聽Video聽Ont€0The聽Canvas?/?偖script聽src="modernizr-1.6.min.js?侁乕侘侘爐ype="text/ja僪€簠鱳indow.addEventListener('l厴',聽e€筗??ed€爁alse)?var聽v喲Elem乣€縺籇iv€沠unction偋偊()聽{?€*聽聽聽偗n咢=聽docu€i.create€?"丣"剟佺冄伹伹伵'div'伔伆丯body.appendChild(倕??v乄乁?亀亀v.?Attribute("style"姩"display:none;?佲妚T巟啰supported挷Format冿冿?if聽€髠 ?""嫸?€3aler姩n?亰僞劅乷return€?聽}€g?姟嚳嚭rc嚜muirbeach."聽+?掿侽侼昰昫"can壯through",亃晅昰掛?敆敀妛妛墐?學嚦Ex凐s侜妑厪媷eo.勮P勮啞昞/webm嬮=="probably囸||聽??????夾aybe帍?峎収叇?吳嶐滆墍??兿兯mp4兤??儻?????????咜?咓咓咓兛兙ogg嬬呯呯兎呯??呯呯??呯呯??呯櫯€弫磥鱽魱W朩朩?矚S杻?勄剣傇M播?仺傐偡偡圞璬瓘傜?App(泧倗倗?乑侽欦欛!哤哖()哋娺啛?€D??痠rawS皭e€p??侓//Backg⑿nd€飥靋on貉.fillS甀庘'#ffffaa'剣亸亸Rect(0?€!theC噦.width€梹恏eigh畤倃勦ox€穬'?stroke効'#000€効仧仧仒勈5?聽€1凮勞鈭?厳?€聟/?/戧€莾AImage调繆?8凒3偔?師剸糠眮get偓ById眗?On潬厀?劕???C€?"2d伩催窜?楋?坟I侙rval(摽嗎3乷橶€(</script>?€薶ead€線慴ody€弨坉iv兏徺?osi棭:距bsol?;嗮op€?0px€hleft€u"儚倁墦溊d=夨┌悅="500€h?="3€p?聽You娎browse€Hdoe侶no?护聽HTML5聽媗?僛喦€葊弨墖邎鰐ml€?tt><唅骾z幐2剦€攃olor="?">Figur煒6-6.聽Dis敱ing狯昳飊葖櫭??俻墂匞塹p?11??劘劏5€xb劘劒8e塒卲儯V?Propertie凎伕€]p儚?儑儍W墍ave堗r楡y鬭lked醔ou?ome饌鲲f ?壂惏刌凧澨慱t> (inherit偁from???Media??),鈩Hnow鬶at鲄}嬼l??to?e銓*,閬Xould鈋閺yest嵄?see乊m€泪?.?屪塐塐>In伆is鍃ample,刌are鏾偰d愩?緲壏壊a饝紖??k?垝吂埛埛姺埛姷obj哺:伹伹dura啯亣t>,丱丱curr偫Time乬乬乬€鄉oop??size="2"?迉?autoplay, <€A骾ze="2"丣muted???€郼€恟ols丱両and乷乷volume乢t>.蟜鬶ese傳亸>duration仧?丱€鄉oop??丱丩?乷鱥ll頾t鮬date鈋cause勆y醨e骵t鱤en€戹ideo閟錷bedded.羖so,僅nce鱡鉧個乊??冮()?凐func?飯b?after閠僎preloa僗閚蔭vaScript坃???>韆y啺咮to伔伔fals屪?bu乭剘?偭娦yway.詟鄌?r匄operties??as??侌塸

To鋓s儂愹鯽lu傴?倷canvas,媋儕draw€蒻儮ex墾並嘩挧乣夬een???嶚媂by???In屝剤?朳B?w嘔冏佭冏冏冋tha?e鑑v嗋re夎d岮??:夻blockquo婸奅4奊奀?廤?聽聽剹聽()聽{Figur?6-7骽ow祼瓚attri法??k靑k缠勘珼?煩蝟ti繕??丳c?t><塀>囷?emb伕n甸?,粓d傱not<title€慍H6EX7:聽Video聽Properties?/丗佒script聽src="modernizr-1.6.min.js僇侁乕侘侘爐ype="text/java€粎window.addEventListener('load',聽e€筗?L€榚d€爁alse)?var聽v啓Elem乣€縺籇iv€沠unction偋偊()聽{?€*聽聽聽偗n咢=聽docu€i.create€?"丣"剟佷?iv侊侊來'div'佭佖丯body.appendChild(倕??€▉W乁?亀亀v.憍Attribute("style"娦"posi?慇absol€??op€?0px€hleft€p60€{囅囅?T徣囈supported撌Format???if聽€髠 ?""??€3al?("n杊亰僞劅乷return€?聽}€g廹嬌堢堚rc堃muirbeach."聽+?擬侽侼柗柎"canplaythrough",亃柲柗??€嚃姛姛壂塐?囒Ex?s侜姎叿嫰eo.?P?喩栐/webm?=="probably?||聽?婩????奿aybe幏??収叇?吳?瀈墾??兿兯mp4兤??儻?????????咜?咓咓咓兛兙ogg嬬呯呯兎呯??呯呯??呯呯??呯欗€弫磥鱽魱??東厫靶S柅擯勶劘傸M碋?仺?傔偡坰?倵儘App(泧??勬乑?侺櫤!咓咅()僟姧???€D?€趧盃rawS比e€p凣??//Backg⑧nd€飥靋on?.fillS瘉幨'#ffffaa'劎亸亸Rect(0?€!theC嚔.width€梹恏eigh畻倃勦ox€穬'?stroke効'#000€効仧仧仒勈5?带凮勢鈭?厳?€聟/?/應€莾AImage?聽?8凒3偗侊//聽T侌€蟼穼棁?囓?亸亸l倯€?"Dura綒辞?d€鋲 10匬28?傋傋傋("Curr?time??c?T€鴥26?????Loop:嚚傜傚l€袇?9偋偋偋偋("Auto?偳偳绩€魝鋫飩飩飩飩鞰u桓傋傋t.m€賯?偪偪偪偪媈€皉ols傋傋婡€魦/傦傦傦傦傟Volu?傔傔.v€鈧?4傁?ょ€弬 ar毧s暿doc侾倶get傯ById("?On嘲厳?厡???垑€?"2d伩?咍嶪??setI侙rval(╃?3乷瘡€(</script>?€薶ead€線慴ody€弨坉iv兏?紿osi湂聽abs?te;嗮桱50px€hleft€u"儚倁墦?d=夨嶈Κ="5狆聽="3€p?聽You娎browse€Hdoe侶no?s?HTML5聽媗?僛喦€葊弨墖邎鰐ml€?tt><侫骾z姁1€xb€攃olor=?">NOTE儣冿儚冿冿"3冪冣僶僪2">?鉧n骵e劯l鬶e鍁勅s醤d餽operties鎜r€騼諅G侫<垐媔V暓t??亅醫侼a鑢ef="http://www.w3.org/2010/05/video/me?銆€卍iaevents.html">http://www.w3.org/2010/05/video/me偪偣
<亃>why凘ad優傌儻醫醠l?Well,髈metimes墾帎y厴s嬢a僉呁€▍n坧enough.賝u韮!鱝嬥朳嚤occur釂K噭s侻,飏餰rhaps鶄侁伆us婙ransforma囜s婇i岎€賱n勑g?,銝鴗?ustom?c埨rols?ani?伜?mov€b峸壢歨曌塛塛T乆follow?fi?e?丂ll骽ow?勜very髉ecific鋏tail鲘袃弨9?剱侤cit偙w惲o嬽??潎勶潎棔5潅#8e001榅Us??urr?T彴衦o?t冣C妅焮E???塯塯?塨ir?啈烒?嵮棖?jun?澦ⅳ愯?濿濿t>呄e濭濦p?of愋昒儍?rigger斣.襡c橜僕僕僕僕僕y卆upd墄灨?牫撔揳?惲€鱫鈥檚錶棎伕runn寬?廜娮娮娫F杧o殘撥┾ヰ鏾?椚?a鋣nam撹obj獲??橔ai冔柷€p嗕ies:?刏4刜摟墬墥?塤慏达喛俫憦垾?崡r?嵅稧稟勛勛勛勛動︵s窹勶勶勶勶?倄A鬳x??揦?a??????匋x勏勏勏勏侽壌俹俹俹晀os㈣匬樌卛唃坹?厽厽厽??y?厽厽厽侽厽俹俹厽厽厽厽?厽僕橶??j樑备rr嵸傏??谷?cJm檧廆粪ariable畛Xd呥呥勀忴?.變紓`冦f澥赣(伣?乥appear)€楐ake劕??凮??刧妏嘝亀乿0?t>,??1???€??????8?刾se`dⅣ??巊?偡偛屓聽?聽=聽new聽A庨();
聽聽聽?[0]丅{?:0,€?"",聽x:0聽,y:0}佭佭[1佭e:1佭Thi冭I€ Mui剤Beach!倠9倱20偋偋偁2偋e:4偋Look咹t聽Those聽Waves偓24偞4偡偡偘3偡e:8偡偡偞R嫺偟10偝€@偘?俊泈泈?炂ǒ?剗?籸a?嶹for:n?兦?loop?s箰穫伹伷draw秞een()佺佮func※.蓚 剳倝剅test鍗8畮肛??炵炵??狆se嗋he佮??湩湩????鰠8o閟纭Z倎偗偗?倃倃俿吋?f髈嚥know⑺i€s螷禛崯仾ヘゲ€飥罘彿夣sing??幒彴Styl卂卂匵伔伌T恏師師皸脛 搬,偣duc剈resul?shown廀:

<?鎬卆/>for聽(va€0i聽=聽0;€R<€Hmessages.length聽€?+)聽{
聽聽聽聽€E聽俁tempM佦偄?[i];伹伔€ if?ideoElement.curr€@Tim?&g剏偳e.t€绖G俉€W€ c噣ext.嚵凴"bold聽14px聽sans"剰伩€W?illStyl唭"#FFFF00侊仧€W侊佽T€H€??e.埬,€蓘莈.勦,€噀.y)僌?€!}€莯?幐Figur?6-8.聽Canvas鰭戜isplaying魧@飗er€€鍁?s塮偢壙厪p匞匞殝Of?urse,鬶is閟狯ery卙mple鲀0to鉹ea噣儍.詇e鯽rious剫?傝ll頾t厵appear醘?飔her傪re俵d,鈛t兏at児just冟sma?detail僀poi塒of?exercise仚佡,儛th?de靑ke?,鵲u喩ld鋙宧mo傞ny€鑺亽a騯nn€y?.賮瀙au?厐€?骽ow侙€imation,€Xd?n仒ntinue飊c伀??done.蟫剹傹劺sk亰€xr鎜r閚p垚傓load匑diffe匲Ess€pi塇y嘥勦ma囮叅僗嶚tely偘?activ壈?y幉伿hoos?婣m?l???廲叅b偫惔il帬咅僡嗚鱡嶃幋.Exa?槩餽o嘫?e鎢懓?s寑g哃杹pplic寠勩??★?i兛淺喲偂槫?涘洨偘洀傔傔??碟?!doctyp儉html盦í€賭?聽lang="en"€鐎醗ad€弨坢櫚ha瀫凐UTF-8仧?title€慍H6EX8:嗙聽S嗞聽V嗰聽E嗿仼/伓侳scrip皒src="懮rnizr-1.6.min.js兒侁乕侘侘爣?"?/ja€簠弚瓈ow.add刡L幦ener('樍'碃?W?L€槩?聽false硉綵紵n偰€緿iv€沠un?on偋偊(?礧偗乭簥?u揩?€?"丣"拂佸冃伹伹伵'div'伔伆丯body.ndChild(倕??v乄乁?亀亀v.懤Attrie("style"姩"?:n焾;?佲妚T?啫suppor燻抁For▁冿冿?if聽€髠 ?""嫸?€3aler姩n旞亰僞劅乷return€?聽}€g?姟嚳嚭rc嚜muirbeach."聽+?掿侽侼昰昫"壯through",亃晅昰掛?攐奜奜塠??噵Ex冃s侜奐単媉?劺P劺唝?/webm嬃=="bably嚾||聽?婗?????aybe巊??収叇?吳嵢溊塜??兿兯mp4兤??儻?????????咜?咓咓咓兛兙ogg嬬呯呯兎呯??呯呯??呯呯??呯櫇€弫磥鱽魱/?朩傗卙?S杻?勄剣傇M瞹?仺傐偡傔傐殫璯偧?App(?俖??乑瘒侺櫤!??()僟姧唃g?€D?€趧?rawS癙e€p凣??//Backgnd€飥靋on簯.fillS?幨'#ffffaa'劎亸亸Rect(0ц€!theC嚔.width€梹恏eigh瓽倃勦ox€穬'?stroke効'#000000?雬€?;
聽聽聽聽€!context.strokeRect(5,€蓘1theCanvas.width鈭?0€縺竓eight€?傜傚//video€莾rawImage(丅Element聽?8凒3偗侊//聽T侌€蟼穫瞗illStyle聽=聽"#000€"俉亸亴€@乧10px聽sans???l?€?"Duration:"聽+聽哋n?€鋳?0喨28啛傋傋傋("Curr坺time??c?T€鴥26?????Loop:嚴傜傚l€袇?9偋偋偋偋("Autoplay偳偳t.a€魝?傜傜傜傜傚Muted傁傁t.m€賲搱;偪偪偪偪婹€皉ols傋傋?€魦#4傦傦傦傦傢Volu?傔傔.v€鈧?2傁偵傳椘Dis壻聽Mess櫚??for儛va€0i枅0;€B<€Hm仯s.length聽€?+)聽{侴俫€ 侭temp億??[i]?仹€!if??昈旽剎g剏偳e.?凣俉€W婏漮"bold弍4潫?佅?岟?狓FFFF?亸€W侊庍庂?e.埬嶼€莈.勦,€噀.y懬?€2}€莯棎O€弨弽対唫new聽Array(僕丳嵠0]丅{ⅹ0,€?""呚x:?y:0}佭佭[1佭e:1佭Thi冭I€ Mui剤Beach!倠9倱20偋偋偁2偋e:4偋ばk咹婬Thos峘Waves偓?偘4偡偡偘3偡e:8偡偡偞Rock偟10偝€@偞傔榣放傭doc濊桒get桾ById("c?One"??扡????€?"2d伩伜歐t.?幫?爏etI侙rval(憨Scree彻33乷/>?>牘/script湁€蟺蔴ead€線慴ody€弨坉iv兏?="posi?聽abste?糙5簮€hleft€u"儚倁墦∝d=夨﹢width="5?聽height="3€p?聽You娎browse€Hdo楺no?suppor€HHTML5聽媗?僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">厠謵詒??ma媋s:襬t€Z?刼p?増??Showing狍?c鰞on鬶e髴觊s€坋€悂P,鈛t魟佱it亣亗us倸lpha丼pacy醤d騾ds偣quite€竜侌r.詇es傽ype儛f?亴?鈋錫sil俬pplied鬿叝?嶽閚韚ch劽ame鱝仩s鵲u鱫uld?y?m?傕im犡飏坧欃?object.?巁奯奯>I凒啝example,鲀牨(鉹ea??that??c慪wise囪?chiev婻侤ff冐?firs悹侳ariab??="??hi坄剷u?o韫笁浖硞萳u嬡€皞U餽opert塧呚?夵唹e嗃.讉`??匨飖ts?傉吙吘()呥t>鎢nc?,帎?侊侇彌App佺佱:嵕湕?4?淿偳偮瑽?璊0焈焈焅愮傜備柸吳?嚡呄嚡嬞?w権彴嫄尓ea嬝€雝ak峱癏c?暩?l拃F懇扂ne?s谷弴?橻碩髈乹?resto儼炟af瞤€翋渁?溩処徝ov匑拋?涜depth€IChap儀聽2?ry
.觟n?倵?rk嘕immedi棥mod偍壭s顙恡a?棸?o韆nipul亪.蒼st???僋岝be嗮€計樣€讇斋悁缼梩he骯ve?顎卍鉶ntext醘terward.

First,鱡骯ve閠:亽a/>?.倎();墭d??y???岧upper-left靜c冸of€趘岃o飴`?anvas刧??乥W圦儑劘亀亀oH???匄堶奒help報e勭鎟om勼?er惙?峠峠惙勄劽ar聽x聽=聽100;
,徥偢?increa咅唨every啗??drawS乭en()倗哷?槓led.萶w?,坓?炞t.啌侴侭method圶qui坔?圗o搎佮傌圔o騛di犘夝灎pas擰i?lone€榬a個er槴followァli€饸 cod倿嫞valu?娪呯嶨嶨収嶦劎s?sto???丟n劯浛?>嘮InR??t>欁?旂旂欁傔欁??櫄啎聽*聽Math.PI聽/歚8樝樝樝冿冿冴Wfi?晼鈥檻0燡曪曢攁€h?飖r玏?柊point.讕`偼嘩叿岅帒b枠ak忈傎伅??X佔幙淚捓dd侎hal噴珿佽勄勄?疧勄勄勄伅勄oY佔勄勄勄悵勏勍s?ly鈕叺o焫??s檁?棵刧澫澨t紒坟濈勊func崚巟筭€€眃g?订巁慻鋪8beca猀悎ar€鴒t侺?эobject鈥攣Fin⒈?)o摾娇€眘av嬥be?€蹛跓懌嬀俥d妅採pd懜?嘒?伕卭穱僠抜徯椦矐h冟栢new?撋側n塜o???Screen?僎??鑕igh?髝€卼="4pt"鱥dth="0€`>c€恊xt.restore();
rotation++;鋏gree銉qwise餰r鉧ll鬿侘侘drawSc仒n()侽侶while鎍ding飊侌劰canvas.賝u€a錫sily閚?a僷?speed飂€j垍鈟鉮ang倅?alu亖啫y俬input鎜r€陞O匩侻??variab匑in伮last靑n€巶O嚄嚄嚄俰func?.<懴懛剹?儫儦傉聽聽?聽()聽{昛€*€鶂!€!//Background€飥鞐協illStyle聽=聽'#ffffaa'楏?亸亯Rect(0,聽€!塒C??€梹悋歞俫勨ox€穬'?stroke効'#000€効仧仧仒勈5?聽€1凮勞鈭?厳?€聟/?/澓€莯?**聽Start聽朥刞alcul柣仹匞匓av㈩€鱽setTrans?m(1,0,0,€2);聽?伹聽櫒聽淧leInR?佽壀勄卄Math.PI呧聽180???x伿10???y???爥zW朖32???H椲24?坃圽t圓妜e(x+.5*傦?y€杺S堽?侽珒(???幥幜*€總??浌Image(兪Elemen?,-匃勼€巹韨_?硉聽s瀦?冞捶捶???€鐑7唭}?调调a?lepos=淁755766color="b丠u>Figu哘6-9饭ws?班竒w靜ok?ke€餰n掺???蟾Xu佮璤獳?厀卼6055厀厀卲E??眱璤璤??醠ign="c怭er傌img騟cindex?0119?b簶秖"倊540倊543"儴岀屶€g仦6???辩变i??猀"峯-9.聽╧屇枷垟?懣勥?戇劮戄i??R庬a僑傆媂偡??笚喎笒<!doctyp?html>?€賭?聽l煥="en"€鐎醗ad€弨坢eta沺har?="UTF-8仧?title€慍H6EX9:聽V?喗?亖/亷??ipsrc="m曫rnizr-1.6.min.js儝侁乕侘侘爣y="牨/ja嵏€簠gw撔ow.addEv悙Listener('load'むe€筗?L€榚d€爁alse??€縺籇iv€沠unc囉偋偆()聽{?偗咢睭嶈u€i.ц?€?"丣"佸冃伹伹伵'div'伔伆丯body.appendChild?個??v乄乁?亀亀v綑Attribu?"style"姩"display:none;?窸?T曭啫supported捖F?at冿冿?if聽€髠 ?""嫸?聽aler姩n昤亰僞劅乷return€?聽}€g?姟嚳嚭rc嚜muirbeach."聽+?掿侽侼昰昫"痐壯through",亃晅昰掛?敆敀妛妛墐?學嚦Ex凐s侜妑厪媷eo.勮P勮啞昞/webm嬮=="probably囸||聽??????夾aybe帍?峎収叇?吳嶐滆墍??兿兯mp4兤??儻?????????咜?咓咓咓兛兙ogg嬬呯聽
聽?髝€?犅犅犅犅犅犅爒ideo.canPlayType("€?ogg")聽==聽"maybe€q{
侘€EreturnExtension伕伆?;亸爙€b€弫磥鱽魜*仧>funct傗卙vasSupport聽(勄剣傇Modernizr?仺傐偡傔傐囑Loaded偪倹?App()?俖?乢乆?侼if厫!??()僟姧唃哹奜€讑焵?/***聽se埲rota喖alue?€€r€峧0??傋€檰?聽drawScree€p??勪//Background€飥靋ontext.fillStyle?'#ffffaa'剋亸亸Rect(0,叞€ theC妑.width€梹恏eight崉俫勨ox€穬'?stroke効'#000€効仧仧仒勈5?聽€1凮勞-1厙匃€皡?/擹€莯茝Sta椯?calcul€j仹??ave曧€鱽懆Transform(1,0,0,€2);聽?伹扗angleInRadi佽墛勄卄Math.PI呧聽18揙??x伿10???y???澯W?=32???H嫼=24?坃圽t圓妜e(x+.5*傦?y€杺S堽?侽圧e(???幥幜洠€瘋?洐Image(兪Elemen?,-匃勼€巹韨_?restor?s瀂?冞?丆懴??++€鐑7??€弻窐棌docu嗛.get嘍ById("On碒??卨???C€?"2d伩菲?椦Attribu峘"loop"奨"tru僫啹伅仺p箞埛€鶄8I儀r玿(?侾33抱抱€(</?ipt>?€薶ead€線慴ody€弨坉iv兏="posi宷:湗bsol哷呚top€?0px€hleft€u"儚倁??d=媤"聽ヲ="500€hコ€s?聽You孈browse€Hdoe侶no寴s組HTML5聽岇?僛喦€葊弨墖邎鰐ml€?tt><仚骾z夎5€xb€攃olor="#8e0012">厠謴樾uzzle?冏p僶="3僶僰Now鱡醨riv€8t鬶e韔st閚volved鍃ample飂€鑙s蟛p巰.讈羍鏾ing鬿鉹eⅷ狃刯鏰me鈇s?on偸旿儊h癄鋓s昳€嫇,閘lu敌俬d? Figu●6?.萫厁厵僫step唄how咘€8€矃?飌e?:?崣ol??崵li鯽?="1"?€賮???俫??姼?load壏???鈛t頾t?閠.??/li勄="2勄勄勄勄勄?勄l鋏c剤墥many鹂爏帺wa寛?be嵄浫怢勄勄勄3勄勄勄勄勄?勄l??嚤><淍board湕t>棏墾th棙holds醾婛曥piece爔呥呥呡4呥呥呥呥呥??T儊僇?壭槸?a 4脳4鐁id刉刉刉5刉刉刉刉刉??l騛ndom壺坈勩滭??mix鮬墂?勶勶"6勶勶勶勶勶?勶l醖d醤鍁稝靑?ner鎜rゴus?uttよ剰剰剮7剰剰剰剰剰?剰l╔t剦i呼?扐??幌()擮t>匴匴匴8匴匴匴匴匴?匴l溹it塚堾€H卄lick瓏弐剣剣剣9剣剣剣剣剣?剛h甈硴iting,鬶e??髝€卆rious餫rts飂鬶e鰅deo鱥ll餷ay陁st醩€鄌ugh?y鱡re飊乴.<佅?3??When狨ser鉲icks€ppuzzle餴ece,閠厯h?l?閚鵨llow匃匃匃11匃匃匃匃匃??I壔勻h堾selected魒o匊s,増?swap亂ir餺sitions???12???????T匁?attempt魟鑥€8€鑺\back€竒e€爎髈髝郼an啇e愖怸媞€8crea嘓??/ol>
Setting鯄"鏰me傕俻丵€8p倗嘒嘒厫t朠媟a?go俰嘓set偂som?棤able枆a懘defi杊儱鈥櫂牀鄁ield.葪qi摡rundown橿俧and鑟w橍偂b嫪d:叢圵圵呑圵圥2€xtt>rowsboar潫劘劘劘俹俰A魒o-dimens廻a紉rray碵hold幢紟庣匴睶€噮績W僐醠ign="center吀img騟cindex?0152?basel?"呄40倊413"儴??€g仦6???奊奃i€敧or="#000">Figure聽6-10.聽Video坱媈伻€]??刉恄姌follo?cod緋nclud溞valu?or?緷角?媤??嗭?侶聽获聽=聽4;
selected<偀倖3倗們A耾olean刾叏剤initially骵卋儫優false儑t>.譭偫ll鮯喬佇se€╤e?r鱡骽ould鑴Xl剏釃箫r體itch魒o€伾劑e倯r鉲icks仌墖墖??">Noti?嗞?勻?nes墣嗊嗊for:next嗺t>靜op啋f?劑佔佒boar?伖array剎t喨he冐obj峏s.芶miliar?鵲ur?f丮夃construct鈋ca叐呬it懾ny鬷m?i?亁game.詥菂儊垁Xi揢are敧icular??ful鎷鴤?nd醦嘠墆requi仩a 2D鐁id儊ord宲圥be鋓splay?伾劺ip傂?:擔a/??枱枱奯?聽(va€0i聽=聽0;€R<€Hcols€?+)聽{
聽聽聽聽€!孊[i]伿new聽A孉();乢乗僄爅亁?€@?row?j?佭僩僤[j儃{偁inalCol:i,€ZRow:j,?:欄聽}刼俥}€拀?€9????ow?hav彂?娤???煬乆d,?c???r廝om€怋侷()俖俋(伻?惾cus?摳function燍rtly)?hi焋mix摖up卋puzzle鈟騼旞掄cing€麪0€qscreen"?is汑俬s?僸柹偙add俛eve啺li橦n朮楍塷噊喞mo?up??侒(わらr庤as?€憗测utton嘸樫?勮t?interva皹婫冞儀drawS???ry 33夝l?eds泧?慻慻泧?惪???€蕶虁*?Canvas.姁E坕L奣("墑",?M€qUp,槓棛?/祼tI?(嘩丳33??????喦喦喥4€xb>R唋??択傕?夬傋?傇T?壏榦榦呑椏?s疉彊pa樞偗偗?俈iab吚so溮栬per獺榿it楢鈥櫉ń墯剝"w?侌别?p渀偑剱o??a仼s?拰埛埛埖o漝??婞?first川?傽匋?+n溹??>姎??咘hol個儓凗d冪冡.偗偗偗偗垀w╀渹a 筆€`e€p卆.蓆s僅rpo糛焢?co?刬orig瘉亱鈥敔?d丂n鉹e嶀a?儀卂卂???仺璯帀?凂lengthУ偋捛囩?娀a喨斃奌斞倹???傔楨筆傋?e,単?匴匲?噲umn墵傳呄?0]?t>丳??.詶2orks寵a?嶲?ou???僀€`r崳s榜剫,?€umb榵佖伜僁匞m洜疭侐壭僎?欰撹廐n紑糉buil瞅s爼垝???Э?Э墴墯嵳??畑聽{?聽聽聽聽峹聽橗?€h聽A娰(乬乣?丅倐.?丟丗?丟?乗巁???嘒嘍Nextⅹloo?rough竸屇?儬,姶l€萮oos宦娿鎟om?壙?勭?偣mov?泩进o侘侘??嶹???嶹偗偑妢€!fo姌(娛i姴0;€R<€H尅€?+????€g凬1凂刉€`潗gn="c?er勏勆1阂€搩爋r="#000?OTE儣冿儚冿冿部?僶?歨瀜two睝st眽傇丟椘or:n?圇??戲s凁?on悎again穩厀攐?em??E摵ti?北?o醤閠e?卹ation飂鬶e飖ter頴sted靜op,鱡鉹eate醼葁醨ray乭at€賥ill鎬)up閚?second?op.詇en亖dro丄to??? found
呥埱埬[i]聽=聽€€聽A埩();
聽聽聽聽€E聽凱聽(?聽j仺0;€B<€Hrows€?+)聽{??€V?庩円false儫丟€W亽媖仛0??€W亇?亇?€8墴>洜奛囉?move椨ly鉮oo喴挵樬column,€b勮n囀€H墾o?殬he€x橧嗻sp狇(剰奼棜扴]€A?]?t>)哘?啅啅唺If?伇not仧仧仧仠嘮?圵圫爳?俖掔倃恛恏埵呩佭?嵾伳equal?亀乷so砇an鐑碄礉侊撨撨撨撡嶉?毶x峞歡俉噰俖俋跺溈ll╳炦炃炃╳僕僐$€W€!哹!?ψ?€W?zMath.f?r(€Z?(俻*聽栃s珡?€W偡Ο偡偡偡瑂偡?€W€Dif嗮樂樂鞍!嚽佔€W€W????€W€3}?€穩鲝鳝绛鐝'??Finally沚摚珯汢€悰藫瘣_?摋晐curre乸?侶ar俬?i├???倵?漍勨勣?毌?劮?熋?亀'亀?櫵?兝test?淟?劉won鈥檮纑?玕骯m?陁?夽`偓坬don垷up匃匃垷??etur喝t?丳皃栍?ー嚜`棍ces?愾愡愡?剹?摟€V匲[i][j槓枿檊檊]?佺€W仧仧俴岯侊仧樋€飥縺縺繅銋焸硜?欸欸欵壯歡墢墢墡4€xb>Draw?惡creen倛傜宧?3?倇椸惙?d偁S俠辩曏func泜?儔hear?€恆ppli湅糮糐c熜慲亹祤interval,锄?枅币upda慔偂vide瞂r?倶両o鋭垳銚g€饌竾?羚ood餺r?劯嗙嗙嗙嗙改ks靑k欒哋s榠haグbuilt韆n淧i勨lready嘸b??櫢begins歜咑backgr喩a仒€`嶑box唚勯欸愾惪嶨惪嘒C峔聽嚄???暣//B匎€飥靋?ば.Sty糏櫊'#303030'櫱亸亸Rect(0,聽€!?Canvas.?€梹悋筼勭/Box€穬'?stroke効'#FFF€効仧仧仒勈5?聽€1凮勞鈭?厳v?唨卆s.height鈭?0);
However,鬶e餽imary鱫rk飂€爄s鎢nction閟鈥攜ou鐄essed閠€坅no佖r骵t仛wo頴st€?凲骾ze="2"><勷for:next卂t>靜ops僠at鋜aw凷uzzl€8ieces飊to€篶anv嚫詣蓛憂eed佮o鋪 ree叀ngs:

嘩嘩/ol犠?咡W奌t?ur?鈟鎼0?嶰兦兞x儻???y??(???geX?t>,侽??Y?t>)匟ca牚鈥渃u?潰說rom曔?.讘槩QⅧ噋tak噊?擶擶嚙嚙乬?乬暦?欳晑?劔枤crea怈,?multiply勪m匷?兦t>?W帺兿?乷乷H恴亀嬞resp凥ively?僪n暩v€R飏ig泋poi倛(top-left???????巼)濌欉WSdis猦ya/??拂濬??r聽(va€0c聽=聽0;€R<€Iols€9++)聽{
聽聽聽伩爛伡€P伝row伖r伩?佹€3佲tempP??[c][r];亣亣聽橲乯佫.搈*忲侘侘侕Y侘侘柛侐恵;専€9娮?婏婎NО??kn€j憃慾???will嶮弞a?icula筦徢瀖,伇ne茶??where獂俢b丠?愁??hi燲秢d?e?m咺k€皀fus?,俙鈥檚?ally陁s憠mp侙arithme?.詏ㄢ淕挿椬柉柅э乢>厞эΣ嚚圶?,燊僟?煙煙儧tim?噴u?仺iterⅰ嘸lum刧俫t>c??,熕ad?侽侽侷?i€悿蟼讏孭a斗癇両number噛pixel?etwe儬蒋?∩?傔汞当XOff??whi?佔佔???摐up璸︺corn匔€蓤(i摠漴呫匑?F筶僕??颠儁劯ver景imi梮,鈛t鵲u鮯昑媱峯偋>r?峧?嫹垳?丱癬癬??l湙堥珖牱牊牊珖僕僐棧cシ+c*?+帍e伅ンrt+r*?伋Y伒???厀厀?燈欩?ra⒎⒉鈥渃u佮濓?亽剎挡ЭЪ梬? (乹on剺t醕tu傽?yth揳though)刡偮aga嵃???啓I癐()?廯fun繝on?s?總m僅飩P糥alㄈdy.萶we?,瞵1檖償€爏?冿冿冿冿堎accepts頸n夲a玚俻摕嶇嶇揥僩揟嫨Elem?僶€9倄悷偊3偋偅T唜箽嵵a煾g禭嬂愢?;?瀤cas瓈碻?.??????縶

The <仚骾ze="2">xWe鈥檝俙lready倝cuss倛how鱾塴culat€恗os?se鯽lues,髈閠閟陁€鴄韆ttknowing濓埛埍drawI咺()埧?API鎢nc?and?ugg侷i?variables:?a/??屜屜??c€恊xt.刜videoElement,聽婮X€MY€H撈€d幟€h
聽聽聽聽?沯伹伹伮);囘€9咷嵎哶悧her?s彴e靉嬂th?崁a€萭o嫼Ж屶墶丳姇.蒮?puzzㄈpie?€鴐ark?挊鈥渟el┴ed鈥?(嶗夁厴??嵷Boolean餽o?ty傃佺佹true伹t>),呇will鋵P匄yell?box唸ou??卶彲塷塛塛彲凎凃?€E庤f聽(tempP?.嗇)聽{幉庍伅€V?strokeStyle聽=聽'#FFFF00';?伩??侙R內(?扷????偪€D}€莯梹杸c€*}???婹擾???4€xb>Det??moui?ra撽s瀭働儻幇僄僁埿a?that鈇ck爉?灧傗App⑾旘?搑sen鍁烪靑stenグfor偡偡偙唈up倵倫喅匑睭伖俿h?l俰?僡減偗偖亰M傃U傋傂.譭顦ne湴佮c桜圍偱榃崌峅?峅凎淐heC眱addE刌L圠("噟",?Up撠falseタ憞タ??禢fir?e?嫙?堶冐巊巊娽?te倯o傌掛俖俕x侘嵙丠??y??啝a暙淮杮p?whe吽butt?┼pre贯嶒亯tho€0coordin?厛卆gu璓out侷?撁亐r鉲ic琲氟y凊瓧ce?徿?櫉媩Sinsom?row傌s髐ppor???>layerX?t>/???Y?塰瘮i嗮厔榗obj爃,嫆o???傦倫off檧????????欏儘b?.蝟穐t?ich??俬?嵖偀俁濰our吙剣愱叿?乄乄se呄丵variabl?埱伩?傜?e="2">靜cations飂鬶e韔use餺inter:

<倷骾ze="2€x?func債聽eventM傞Up(€j)聽{Cre斷ng鑙t鬳st敾-style鉶llis掄鋏te?儉冞暼僿3僿僺Now梮at鱡雗€hwhere?嘪r鉲icked,?need鬿?丂?r侂欟 鈥渽(s鈥濁ny歟puzz匬?s.蒮髈倰夃?嚙櫀sel唄ed奊?pro嶱t偺內倸劇??true侘t>.讎La?g?g佈倛form閟醾mp匬媑媋媱€蓩V唄倫ill乣€(us埱喛劘t>x剹t>,??た噴osi娛(剺刅)??呅inside????ne??匓n?鈛tt?俋彅.戺戺戶燲st嶳c?娦怹l鯽riab僷nam懆嘒??Lis啝嚐攙姴勝匯?體ap唻哠i咰??boar?傞array.蝒x吇?徹擿塓wo働s勑倵倵慞:n佽偗扁ops樖raver俻through釔蓞W匴偳匴匴匴蓭藖縼縿?剘,仛f?€P梇噋do?fin夽€餿op-left?rn晿??傋劇伻?暉?暁??curr〩滾簕?by俖俖圔[c][r]偗澸俋alcul?tho?valu姩劑pu?n?塷傜t>pla肛偪啅乄乄eY乄丳枍s:樒畂?畂傦傟?荚榃st踩new聽A忨()睬仌彁?伮c碆0;€R<€Iols€9++丰侁??侴侫€=?€@?row?r???€2幒果c*partW囬+c*xPad+st€怷O?哶侘€W侭核r侭H姃+r*y侼Y侻屒鹤阂孫稥煏焛?拞d抅跺堣爤?暠籊攋歑毟?it?¤mico编i窰∵徢t>if:斎监咓髏乸m?Р僸?澤僪ow澒fou?ond癇s?ultanely攚囩囩?刼刱Y >=溿?姾偘娮?傔傐T?炢r靑奌呧?an飏錻u皹溙(磶兞矦僌??????暩?+戺啑啑啑啑?啑啑啌abov篜唎?bo拱m唶唶唶唶僕唶唶唵X尶?傳?傔???叴r伇唃€窗R砵????儳????eX岤?喯喯喯喯?喯喯喯?喦噖喯喯喯喯儳儳>A?佋?渨韚?e※绰o熛?true噊煱?窤?eger±on礌y€8?€墦K咐無呑寚吙寚刉?癄€櫥痻揂痐&€*?阿?汍t亣亣癥偗弜?€(?仐??th佮?夁?崸囷囷">If釐笁丿I崌are魊ue, ?杸厀e骵t鬶e骵lected餽operty飂€蕄iece颾j€o true卭卬聽聽if聽(聽board[c][r].?)聽{
S?ping魒o錶emen徯in醼?di€坰夃婱儀冏?僶3僶僰Now尅ne昤搷??儵宻犡been?rk仒○?恛?拸拸彄?osi彥s櫝os徟乸?昤way,撻?ear?a沜play?s鉲ick堸懾puzzl?釡€chang夑?r攤儧噛ry噐ol喞偑侜.摱壸壸壴To醕hie佋啞嗞?尷classic three-咢?濭揋??濭倵倰柉埣柉€{榳楪槆佭佭佭槂?e1俉?俉歘俉氈.€}倸圧倃俉倃凮倃勂倃倃倃侱}€拃縺垕鐬鐬鈥g?1嫨?€`align="c?r寚寔1€xb€攨€or="#000犘OTE儣冿儚冿冿"3冪忥忥>This餫rt烾func?works鈋ca筿?halimi毐乊numb?伻晆橓can伆荤?卨冞撆???涏篽a鏰m氋ch釁Xoker洂hi€€requi烪熾lay刾淂冑厐c?s,鵲u唸uld口a髮htXdift尐gorithm?ests緕匃匃咉5咓?ze="2">鉧?瀫卹ds閚stead飂 <€1骾ze="2">2,醤d鬶en鉧lculate€y鯽lue偭€ih?.?/blockquote>
Testing偤game倄勣/p俹="3?俹俬Believe閠飏頾t,?at閟醠l倰code鱡頴e啺o鬭lk醔out鈥攣 r凐鵲u啒侾se嚴many鬷mes鈋fore.詒y騯nn匫me (CH6EX10.html).讐釀榣oads,傗should傫奫ideo厴gan圚d崹?16-piec傕rid.臿ch餫r嗀嫑伀wi喨be餷ay刪,陁?lik屫n岦ose?gic魊icks鱤ere?wo嗀醦pears坬侶se???€恗ultiple鈕x?ut孁r靍g哫arm€1?h?a偍嵿剤mov刪.蒼鎍c???€@so????刪cause,坹reality侷囍as?v刪鈥渃?潐蕧`way嫺刪imply鋓s堸佲?s?侷?a凱?圼圱偁?16€@depe€(n唄嗴饘駢笓c夽夐w?捠re-慩m傿original儖橜?樓朹朹?鎖lepos=0000791622檛color="b?丠u>Exa嘆e聽6-10揧w?e鎢屝?li??€襐圔Puzz廐?lication匴匴4匴匱i??.聽們p倐??牤俫俫爓gも<!doctyp?毠>
聽聽聽聽€E€E//context.drawImage(videoElement聽,聽i€筙€MY€Hp?Width€dHeight)僩?€W僕僕僕僄僄僄僄傽€h僌?€W€Dplac倐€J倗倗吳??€Dif聽(tempPiece.selected)聽{伮侊伅€W囘囏strokeStyle聽=聽'#FFFF00'?伅€W??R?(?噠???厀偪€W聽}€鱻穩莯梹攢縺弨峟unction聽randomizeBoard(b€1夦偀聽var聽new丅?€h聽Array(?亣亖cols乥偮.length乬乬乣row乬d[0]亅亀乼fo乸(仮i亰0;€R<€H儥€?+?侊€D咵[i]哶哶仹仹兛聽j仺儵€@儷呩€亙瘋?噂foun?false儫丟€W報ndCol噟???亅Ro啝??€W€!whi棄(!劉??€W?劅?Math.floor(€Z挸(俻*寭姺?€W偡呑偡偡偡嫑偡?€W?爾肹厯]€A?徹!?嚽佔€W€W怲嶕tru嶏?€W湕?€莯鳒€縺W晱晥[j暎啛啛]刼佺€W仧仧俴?侊??€瘈縺縺2retur⑿厺€彜wev硃MouseUp(€j甒亣憌爉乤X呄€飥鞾€飥飥鑠眽佔€飥顏讙g抋?.layerX聽||€賭?浬呩?聽Firefox倗偋€V哰宺俫俛?乷仧eY仧仜吳乢嫻???亙offset?€焵殕?Opera傁傁刉咃?刜乬仐呯仏咃乬?€棈C繀List??仐?绰逼€P鼻€9?摕?侴癓€@癘€9???€2?凧c*partWidth+c*xPad+st€怷O垻哶侘€W昪侭r侭Height+r*y侼Y侽侽?栵栬(屨>偍?唜&€*?嚭?+?亣亗兿儚€W€V偦埁冪?俫冪?冪eX冣?亁?兦?€W嚳ㄤcǜ].捊?亣€W€W€W??縊?偀佅€W漮漣?€飥W€W???礯?仹€W??€穩鱻鱻穵嚮唲?妛佔仹€W€V炞st.push({?:c,?:r})侽伅?嘒€瘈飥飥繂瘑O咺凣凘lengthㄛ2?仹ょ?1孃侴st[0紾伔佔乪2佔佌1佔伔佔tempP榶儷?凬.?]€.奨?俖扜乬佭佭?乄叅乄€{?傦?佭佭佭?喛俉?俉?俉厏??倃俫倃勄倃勁倃倃倃挧揰聽?珋€?犅爙
厽>奿/script>?€薶ead€線慴ody€弨坉iv?yle="pos?on:聽absolute?top€?0px€hleft€u"儚倁ビ扏d=?"聽汢="370€h欝€p00?聽You棄惲e€Hdoe侶no権suppor€HHTML5聽媡?僛喦€葊弨墖邎鰐ml€?tt><仚髴="5€xb€敋por="#8e0012">Crea症1脕 r泩飊鬶e脜鷦刧p?墍?凔娻颾vi挵鮯€`f倆?偓鰞抎is鎢nc?ty閟鬿銊閑鉼stom亜???伾,餫?,髳p,錿c.賝u韨爃ave醠?dy頾ticed凘at鱤en醾渻hrender€饑膷?閠鋸p侀?tai伆ny?唝勄劻.蒮鶆wa媥?吰??乊ne劻o厾ke€閙€眗f.詇ankfull嘝we啛啓learn佖most鍁eryth巃丂倽do倛is鈥攏ow€蒵奾??ut?all€p絇her.広掲廀4?掲掯4掤扚坰button懭憲憲憲偀>W喐re鏾?勜懕some?夰偼?崢?d髉ecific唄抪or嚶鍃ample. Figur?6-11骽?懾t俬€hee?刟?s?f off憄d€zn€rst匵s勻曠曕??弝屔p驆pimag乸埞憫懭?;€rbo圚m丟丟冐並巁∠帶???ignㄠ癶er?img棙ci樔x?1?ba旇i?倊64倂96"儤€g亸??????峠?剤"峅岺.聽?慱慪峅t?俙獰?€g?12?????1獹??NOTE儣冿儚冿冿?浛僶垹櫂don鈥檛檙忕?挶圲ヨ槩appl橜玵,€釥筰nclud?爔丂c??±?amaz溋9er晍programm€x??亪劇俻l刾⒈嚙嚘?1em嘷爘wiじloa瓩叞?鋣nam?倛︸猤劻€€n氶ce錫ch 32脳32?仧?栶i?u倎.譭奛刡倞?甊alcu唝兵i傌part婨勼珘秳傝a擼淥嚄?庯扲Pre圌▕煈偀憞倿fir瘓扒扒姞p???et.訍皣h抄?疛??瞚俵be€貋簣e嫃??a髿Pht嶡new旲r娙g乣侽multi颾ject贺F倆態嵙媮u湽鯽riab佇慼僠娺tt>?C乹侶擝俠hol嶤numb俬斅岪s?prelo?畝卆ding.苚r鬶is醦p€Hat顄mber閟魒o:€爀鰅deo醤d€rtile骽eet.詇es€恮o鯽riable侾re鉹eated飖ts佽飂醠l鎢nction?t俢op€醥ur蔭vaScript:

刞聽loadCount聽=聽0;
?亣亣亖Div乬t>,鱡壚so妱佮o壈r頴w嫀,倃倃buttonS?倧t>崏幦弝騟ferenc?宐image儜壯恈hold怈€鑗raphical鈧趕両wi帬u?f?慚play?nterface巼娮娍娍巼唚巼姀nt巓€粔纮?爣飮飵蠋蟿??We頾w韚st韆k梙ome鮬d?坧o晍st嶩ar巊厙>ev?Window?ed()凮???奌hav?s檲奞mo內槹溌chap夽漃irst悡?go濜刟?n嵏嬹刉刅can宷凎凁勻儤ndl?嵾嵸倛a掤?掲偡>?喫傁t>?婫???偪??.addE匢Listener("哾",?,f橉e)??????嫐夁剋夁傔夀in剺??伹伹伱through?侙beca儤,?獄m€恆刟r鱝nt?掵r愗atch廔a?s攈懭€@en?鋋ta巋s傝en滆f灡啫?側“醘?儕?i?倠佈焷ed.嶛墖3墖墐Nex?ne?榓皸.庄頀L??I埾埲objec?卄se坝伹伷src伔伆property刟Figure聽6-11.羺袀賗?墥i>篲篬醤d bH,???Y????ause俹???倃???stop俹??乄乀倗丳.譭鉶uld鮯e靑teral嬥lues;鑟wever,嫛€鴮焪ill韆ke醽鵳le?屟mor倯mpli婅帎calcul婦easier?swallow:

啛啚劆聽bW聽=聽32;
簾沧部?簾倃俽if聽(!嘮Elem?.?)聽{盯聽聽聽聽枑text.懴嗐S宎,聽0,32,bW,bH,悔€2Y€?;聽//P€?聽D櫢偸€*}聽e僶僶僶僶僶0僩僩僩僣up?墴??墂墂塸D?С桰???op崐禯仚斠?嬁??彟秡t秞昽仐昽昻?ワワ擮呑擲勥??楋????厽厽亸?亸厾欦吙欦叐.蝟tic猳?僿僿ぷぷぴ坓船瓆ⅶ姴need伭skip飫罏忺a剙瀦瀜?剣凥x?灄導凣n?斪斂斂?僟???毧毧毧毧毥聽???氞€9氾氳揂濛濛???????????傋傋傋傃64傊stopX€2偳偮S€槀驆牽牶宨犨???4€xb>Listenfo憙慭presses傴僕弍傦3傦傠We醠橦?l傏偲mo懽鉲ick.詇濱roc僠橓暊估imila仺o鑟w柹accoエi梄d韚ch?毟€H呩槃V犫Puzz樌ap亹ca曢.苅rst?苺?鈇ck閚鬶e canvasApp()鎢nction,鱡骵t醤鍁e侙handler,倃倃?MouseU倧倞,鎜r?伩伖m亼up亣?俍:

傋傊儓C?.addE倷Listener("兇",叿Up,聽false);剋€9?>true亣t>捄夝l僇亸??蛔蛔簯?匊檡tar湀亹墭???垏?冏円》y(ふ>ゐ慴ˊ&€*??l?+bH??ü俖yX?€(?凮€D侊?X+bW?稁亀?佇夑Ele撋.巸仧乷€W穛仹仩?勼伔亀瑨?専専?s??旔懭?懬嶗斶兿斶゜懬懤?旼旼旸榠儑亸亴curr坸Tim伹儻儴僄伩t>0乷乭?匁wi権retur班€馿娆y鎟?姧姀姀???聽S??嵪桹桹?尒桹?桹?桹?桹?桹??刜梍梍価梍?仧暱暱梉暸?乬乬.庣e聽儬0伔?嶨??寳寳?瓣?瞦??嵪??揥????t>f带旼珿珿仐儚墍仹琌琌殞鈥攜ou鐄es?閠€垏#?伆€i娷杮.蓚K??噺噺砡仐????亸砡砡??呮?i?溮s綘厂渿渿忳忳渿?渿Pa?藔€卽se
聽聽聽聽€!if聽(€mo€餣聽>=聽pa€y)€€amp;€*??l?Y+bH丟丟eX俹丄X??刉剋€D?僄eX+bW?€{佢?佔唴videoElement.侐d聽=侾false?伔€W€!?価();仐乄€ }聽e偁偀€還W偀倹lay倵?倲?€瘈?tt>Figur哖6-12骽ows鱤at鬶e鉧nvas靜ok€0ike€豦n€趪R閟鋓s嘔ed剤th僷ntrols.NOTE??儚冿冿"3冪壧僶"2">You€鴏l頾tice醤飀d騟lationship鈋twe?囇?d饝utt?.讐9one?鈥渙n,鈥潄抩€(r€絝f.€罷h€€€bec?w厛av乣nly?property鬿宩醫: 嚗??<戰榌扥??.儤er勻a傦nam?仐仐偧噃ing偳???懶exist唸?HTML5髉ecific?,塈閠戉d婹鱫rk亖a嬓br?ers,髈圦?唩勛儳噺噺??.蒼?揚ty,鶑0could??嶜巶swap飬0?or?d鐁aphic鋏pend垚佽丅冪冪???壸state屃?w勨ma泙偢悎毉塊mo嵷渞儵default婤?傦?潅???澫歡歡a殗瀗em殗瀏瀏img嬂cindex?0108?baseline"?5€饌|499"儴?灄?="6灄???圽i12.聽CЩ?﹃r炤堫侤塆??勏???7172剋??Ex桂l創1??s忊fu檲sourcod€垥0tappl泃琒?勶?勴i儳儭???圀?寚傋傋?攅縼!doctyp儀html>笴€賭?聽lang="en"€鐎醗ad€弨坢eta聽charse凐UTF-8仧?title€慍H6EX11:嗇聽V嗎聽W嗚€▎魜?伄?script聽src="m媓rnizr-1.6.min.js儾侁乕侘侘爣?"text/ja?€簠噖橦ow.addEv?L狧ener('load',聽e€筗?L€榚d€爁alse)?var壺€蠧ount=聽0€?爄temsTo伾聽€?€?爮:Elem?€縺籇iv€?牁SSheet€獉*func搃??()聽{?聽聽聽僕n垐?怭u€i.c?te€?"丣"喬佺剏伹伹伵'div'伔伆丯body.権Child(倕??v乄乁?亀亀v.?Attri?e("style"岎"dis?:n?;?佲?T榋啫supported斺Format冿冿?if聽€髠 ?""嫃?€3al?("n梹亰僞劅乷return€?聽}€g?姟嚳嚭rc嚜muirbeach."聽+?旹侽侼棷棳"can壯",暽梶梠?攪抺new聽Image(丟丟丄.繕?傜乷乷乮啝丷攱癓.png"亾堐??嶨嶨峉岟?媰Ex嚾s侜嶣剰廤eo.埜P埜妐?/webm徆=="probably嬂||聽?庮?????aybe抇??収叇?吳懤爯崘??兿兯mp4兤??儻?????????咜?咓咓咓兛兙ogg嬬呯呯兎呯??呯呯??呯呯?ogg";
€*€媟eturn€EExtension;丟仧>funct€?聽canvasSupport聽()聽{偡傋乆Modernizr.伀傐偝倧itemLoaded俫侰l€癈ount++佦€籭f兏€?聽>=侰sTo俌侴劍呁App()倃埱勛嘷仐倣佅?!?坸()冏冏埱埪冿€讋?€軇/聽drawScree€p刉??//Backgr埁d€飮韔ntext.fillStyle聽墭'#ffffaa'劎亸亸Rect(0,聽€!theC嚔.width€梹恏eight?勭/Box€穬'?stroke効'#000€効仧仧仒勈5?聽€1凮勞鈭?厳?€聟/?/video€莾AImage(丅Eleme??8凒3偗侊//D伕聽Buttons??Play帡€讚僶nt.pause?乬卭卭卥b円Sheet?32,bW,bH,p內X€2Y€?;剠聽Down劮?昉聽els峆?€飫???0????up?傦橶€繅o塯塯匫乷匫匫匫匨帢2?倆卲€9?厁聽P€H墺???€飫7???2墬????壖?墬€績蟽蟽蟽?4兾stopX€2兛兒S€槏o?儻儻οev?Mo叏Up(€j︾伔€3var聽m乤X?€飥鞾碉?愬償.掕erX聽||€賭?p0?嗐Firefハ倵€W劥ヂ俫俛匫乷仧eY仧仜呾????亙offset?€焵殕?Opera傁傁刉咃?刜乬仐呯仏咃乬?€擐璈i┤е€讔f(僊爵?喐&€*??l?+斬???俖yX?€(?凮€D侊?X+bW?⒆亣?乢€W朾仹仩僠(菠伔亀?€飥縺繈菋脻檨€嬶嬶嚜熀墬姺嬶?嬶?嬶?嬶嬶?€W??侚??仧奯奯孄奺?乬乬.curr€@Tim洶歲伔?兿€繓苾i€飱鐘鐘绠[垪壏婏?婘丟婘丗??刉剋?????仹唶??ed?faエ?伹€W嬊???∣篛??偀偀?亸倵?€瘈慷_€彸?爐heCanvas?docu儦get凈ById("c?One"凣???倊?C€?"2d伣佺併bW伜32偡€誋€讇讇靴陘?9柗€鳗鴣?€鱻鰫趢?3€€捌侘€澛侂70€飥飦邍w丟堶.addE成Listener("?up",磰M€qUp,?倗俓祊I婐rval(drawScreen亐33乴弴>樍/script?€蟺蔴ead€線慴ody€弨坉iv?yle="position:聽absolute滒囙€?0px€hleft€u"儚倁抍涁d=捛"聽width="500€hheight="350">?藔€?br/>聽Your聽browse€Hdoes聽not聽suppor€HHTML5聽Canvas.伮</c€?gt;€iv€弨塨ody€梹慼tml€?tt><偵骾ze="6€xb>Animation襡visited:蚾ving謎deos?剹p?="3?傷Now鱡醨e鏾?to騻霍he鈕unc€羈alls鋏mo鎟om Chapt尮5僸sh?you鑰D寑醕hieve?same錰fect呚th閙奝s醤d鰢?觟nce咺covered伻is閚厛tail€Q厪厞513591厪厪厛Example厛-厽厹(CH5EX5.?),冑don鈥檛頴?o鍌(in娻ll咮code鈥攋us娵chan咥that韆k噑啌韱@.嶊?挿嶸1嶚巁€`align="cen媊懴懮1懯噂嘸#?忴OTE曠嘒儚冿冿??僶2">Remember嗐啘?drawn宷much庽way釐€幨,髈廗嶺y鎒w塤幈applic?would€0rk陫羵(we媭侜a髏?c偯妏嗭嗩樳1em啩啞Wh憍?吚呩?刋o€墑??mo冃im?a?撍€蓤穲??Screen()∽t>鏇@啗he€(塠悧s飊挔懧?燄c捽??湉湉?湉湉彿栶???嚫r屝n?d唎唎牏??湣a鋣仒嬂obj潻吚ho?呴properti巋of鍩@⒁?look働li榖is:??崊4????tempB傴聽=聽{x:€乆,y€BY,radius€jR€Z,眕p濔€歋€Q€悘Hle€扐€Q€惓?聽聽聽xunit?X€Z?y€€Z}???啅啅唸For忟?wi堾岆栙imilar?,?????t>,鈛狿倢al怘屭嵎嵄嬬厀卂卂嬬兿嬫冴嬶嬶Y,侐:180墍偦:12€i?????媤?€???喛喛T?ig鋓厨re?爖?晩?no暩燻ra?坃揔?橦侜repres瓈倅╔仩槺宦暟;灨stead忷不⒎?t>參?淟丱丯嘢乄丳玦ⅹ剎nd恉嵤澤our?si骸?傜?秲??媩Backus墹ing?mm???????榃懛憻?榃埾埵c€恊xt.beginPath();?€蚢rc(?.x,€:y€;懟,0,M仩.PI*2,true侊侁close偡€蠆l€_椣椣??椚執??o奋姵ode堶傔偳偳堶堶堶厁儊I絀(儶Elem樞瀈€z堌€Uy€V傄€v儷噺噺噺勏勏烼?s?etty韚慈戳you囍do!誀a€ som漰?rs垽s犽(e.g.墯start?綠?c嗚沨焲摛befo?€恲侅mov晥)丵is韥饸悾塨ov剫€駇a傶仒s呥崺oムntr贬?o偵劀辫ot鵨llo楾,個ou?勣.湳湯826980湳湳湪Figure聽6-13溈溁shows鲖亗鵨xample库s洬with鈩c漚壘╖墘?.賴スse囥fu?敇?厀27276厀厀卲E?厇2?厇ィ????廥ign="庛傕img?dex?0030?baseline"倊54€饌|543"儴?書€g仦6???泧泟i??#剺"峸峱.聽Cヽ?anima揧?mo埼侤??堿?勶燉i媑媋僪Multi?儃彶e?嬂傜嫥偗"0pt"?蝷?<!doctype聽html>
€*聽聽聽聽€!tempX?160聽;??pY?9???Speed?5??mpAngle?Math.floor(€Zrandom()*360)侊侊mpRadians侜俹?俵PI/勮80侊侊嗚unit併乺cos(偗s埿侤??????sin???媁侽?v尅侭{x:勻,y€BY,width:?,聽height:12€is偂?傭€恆?€拡R€悆o儚€2x呉僛€Z乭y€藑?伡匓s.push嘕€倢鱽仯€?爏etInterval(drawScreen儀33佁€*伹>昋/script>?€薶ead€線慴ody€弨坉iv兏tyle="position:堭bsolute椥top€?0px€hleft€u"儚倁canva?id="€cOne"聽屄="500€h屗€s?聽You?browse€Hdoe侶not匄uppor€HHTML5聽C傄.?僛喦€葊弨墖邎鰐ml€?tt><侫骾z姁1€xb€攃olor="#0嚫>NOTE儣冿儚冿冿"3冪冣僶僪2">The葔) 倳??<嘓?嚐??錶em哷厛mbined儓th魝貗C閟醤鍃c憄ng,錷erg€P醨ea丠at?be€檈xp嚫?on?Web醩鵲u驍鑰爄s.蟦e鐎€t亐ample飂€趥I伖?d倝3D鰡醫?a鑢ef="http://craftymindm???="blue€榰>C仾M伂hich?ed岠o?€I?жst滖屻f?la傪browser.蟜薄rs伴穝al彋n伇痽俿c凐rol?俁菜猄贰コac﹉涴sh嗀us刬塐喯唸倕嗺?B?ean,皨朮┌di―?媤媤媤俀????喐d瑈 Exa?e◥-1?load ?謤卆nd餷ay song1.ogg閚狩eb鈘owser鬶at髐pports亖乛file?back,醩骽own?Figure聽7-1. (Reminder:頾t醠l勁僪劊€猣ormats.)

?Exampl儷.聽Basic萒ML5醬dio?俍blockquote倗倗倓喓size="2€xtt><!doctyp?html>
斒茲雰悆餂貍W3俉係Similaむo鰅deo?,鱤ich?靍arned醔out666305?Chap媹聽6,?e妸?r?€蹔鈩?蒼鎍ct?€亥苝p?s?be?wo??apen嗐.羢鵲u?soon鋓sco僅仼this銋儍€恛nce垚ere從need┤om?erious儵k.萶w呇?亪傿甈儾乲trategies岜衼roun俬?韆king冹e揁惫o鯁p??r噄lications.?憃?憃憁5慾峗梇8e001?S妔廝??嵪抴抴僟H?墵a駏ick妐岠??挸幏?醽◣\冭b悁?待.譭?憠go?垳婡s?顄mb禔?beca€閷assu嫚ㄐ鞁皊t仏of婐?product:喪tab?鰛則op磯r€弨媓€弨妶鲌鳏丄lef尫尣1尫??P吀?聽実実厴/th??????????礄?????????????mp3?????????????wav???/tr愖愖d€弰穭穭穭穭穭稢hr∪?兓d????????X傜傜傜傜傜傜傜傜傜傜傜傜傚仧仚聽聽聽伓亼?伩侴?????儚儔Firefox儳匴????????傜傜?仧??仐剋剋剋剋剋傔剋剋???€弮梼梼梼梼梼擲afari兛???伹??仐劅劅劅劅劅傔?剋傜傜傜傜傜傜傜傜傜???€弮梼梼梼梼梼擮pera兎啑???????啑傜傜嶇仧嶇嶇仐剋剋剋剋剋傔剋剋???€弮梼梼梼梼梼擨nternet舩p柏er 9聽聽聽聽The侶tuation閟韚ch靑ke鬶at飂€@e 儣="2?tt><video>僗凂?鬭g.詏髐pport侊侊侀audi侊來we?ll頴ed鬿鮯e劆ltipl匬eparate鎜rmats€A錫厫piece卶偛?a儴?play剒b?n唕saf嚤de,儈?thre傓: .mp3,€jogg€kand€妛av€?嫼a/婳="9婳婯?="5€xb€攃olor="#8e001堭Audacity帠丠庯???F媊un堭ly,?re巵a鐁e嶩f嗎堧tool醰ail慁廋?help鵲u劏nve嵭亙in?any堒.蒼飖r鉧s?峞伣€X夛夛夛夛夛嗊嗊嗇埈 (伹伹伹t/)?噣pen髞b,鉹oss-捜t垜餽oject鋏s?圼bring亪phistic尠d妕edit€醽(攁仺k燄?€hcurre叏?s渷works暠Mac,譱ndows?Linux夒壪壪摰a鎖lepos=0000842274堊堊埿Figure聽7-2??骽兝扻sam?c抙n挊om翃M議€爲駆oa噃塹匑戧?,閴8is湣s圍?嬮m仾.贁)嫺manipu婬?€魝榾羪佮y坔incl娙姂rimm€H,髉lit?塩du€€?€巶`n醖d錰f嵭s?aa牘echo,騟?€ytc.羏te嶌嗶,噦ex?嗀帳?檚?would?湁e???丅櫁欬檛?氺?blockquo?怾1焙恎?c?er?憍">NOTE惂儚冿冿擥僶?W椑on鈥檛钀壂pa?ズ?fully橀cri垁?癿惏?姡?bu?傞うgi??on?僪at:浰溔傕u溠泤?does頾叞?仼廫矲擷跟埬?稪???">獛答傇丱丱俉俉?係剒攞?國n渹?LAME??????encod?煵?瑆lame獥琖俖僢揋???撫ぞ偪偤.?瓉ls祲捜?檧??躇€嚉'em???img?cex??9?b灨line"倊644倊881"儴?歄?仒歄????婏?2.聽E?欵?朓椪?恄?塴碂11?焔劌5⑾劍8e堾卙Ex瞨:誷剚A暟T抪e茦瞫冿凣穡?冏獔窂穼4267?摋搻?窏掃,?ago絛emb? 40-seco?so瞴嫎€I1?娎HTML5餫gd鸱p梆?mas寈佅伻穊??s尔br花と€墕€sibl盄勄勄笜Цith??di陡r?楈s.姟€铇鄀嚝侼檅倂se?捗tt>auto?:攂∏澐斎4斚槦囷囮<冓聽冨聽?聽?>
Just醩鱡鋓d丳th鰅deo,€檋ave餷aced鬶e醬dio魕pe丼€roade?support鎜r镺S鋏vices鎖r€餴n乺list.詇is閟鈋caus傾ndheld仸do頾t€9well僰multiple錷bedd剺sour乸..ogg
,€jwav€k剺€妋p3€夦ersions飂哛song鮯i€0Audacity. Exam唜聽7-2鏸v??fu?code?p>NOTE儣冿儚冿冿┛?僶楖i>媻?偅??鳘埃510鵨栘醙o·Son溊Foundry鈥檚羉?m€餭-捁?software.€氅恆n醡az€閠ool玧?亄俻tracki垐仺p鍁e??allyept (?d:勑)厹︱?a啒偙餰rfecgamゐ?appl侾tㄉ?now伆畑by嘇y仾Wind摾飊l〩€竷勓b琽o勼Mac眣a奾milar奨y壌GarageB冐?><攈€悁2mbp:p乭b傝k┌€硛*?廰9廹廹嶶6捠⑩詀g衦o圥ties,苪nc囈眐E婐ts?僄挧僁S嘃t簶嚫兛?欚紃欦傐鬭g,伔伔伒漁伔伈娧皊?as嬁俉俈両団E燬俹俬DOM颾j惃,鱤ich倯der地d鎟om倵倵倯Media倵倴?壇岋岋偊5煼煻8e001僪崨?憌岟岟僅8僌僌咃呹load()厽??廹倃廳tarts靷濃媭毭fil€Xpecifi壚檺実冿儛?冏孁p擲y飂仧仧怬怬侊怘媝呄嬁??坵傳t>?坵坵坵坵倃坵s饌坵坵坵坵冿坵冏坵坵仧坵坵侊坰蓙藙?t颞皔,?will?ea?夁夁噊夁刜壺夌夌夌夌?倆P佱e?啿呉勛勛勛俖勛勛勔瑦P偘Typ??傜?偗偒Acc矘傍虸ME魝P醼ypme截﹞return咾valu崸?>maybe?峘睵丟姀robably乢乆i帗br掣e?砲墤冻劼慼夌?彊劤??鈥溾€潈?(倶emp摳str孭)儭粨?宱宱ο壡宱οοολImporta€效礂?嵂?峠儳Ther岎€ ma??俋瓳fin瓵媭殗垏?壱?坸e?.讉骻o?婡ocus硩follow€裝ec柋€眣亰€鵰ost扛eful?applica畾鱡溎uild:憋棌噰???dur倆哋梘梘?倗?啺tal靍ngthn骵conds,τrepres堭剋姧姧梾?抇抇鑕ight="??pt"鱥dth="0€`>currentTimetru圤俙飏 ??fals丟丂:鱤e?r?嗠clip骽ould髏ar?at?beginn€墎鑞僄僄?僿劚reaches?伩伨dura?仹t>???堖堖偗偑auto?偗媉媉媉倗倗倗媉媉媉?媉媉媉媇??€豻om園cally?it鑑s靜aded垪垪垪??勥勞muted勥???俹俹俹?????幤觘tt噥thi悙o伔伔傦傡s浫nc?亸弇姼仐剏bject撔gardless瀾佔佒volu晈僰?s媷媷媷??傔榬€恟ol侤傦嫙嫙嫙倗倗倗埛嫙?嫙嫙嫕Dis?s銊滄佮a??奯?奫亹HTML餫ge.脗mwill頾t鋬C飊岼canv書un?€恲醨€笭x擯倝俽(刬example,俬th釀讋?lt;div>??ver儼)?崐峯峯婏傦怗怗峗峗峗倃伯侞靍vel卞?婏婏婏婅;亰value韚st玚€twe獹?t>0??and??1??杘???倃倀paus△???倃倃倃朹俫朹?朹丟猳?仐?仐曵s暟???玜?倃倃嚟()倗個func礽姉姉姉??傦傟en傔姀姀姀俹俹俹姀嚳姀?姀犵坮砳?仐姀傋妼瓷焛濰through祒s錸ti?俉??????嚽嚽偗?urr儤Src偪奧奧奧倵倫URL忼source娉P悷儚垏僩垊哤哤哤兦哤傁揷re緼傔????倄Specifi??edia唻should⒈?崢be?e?甶橓?At€襱i€鴚ri副,€sproperty?bi?m寑?acro?browsers??€g喼1唝嗊€`align="c偐r壪壣1€xb€攃olor="#000">NOTE??€^冿冿冿娍??疈o骵e?ich?嫛?n楌償??穳M屃O懖弚亀乼筞suppor筶兯妋,鰅sit僨a鑢ef="http://www.w3.org/2010/05/video/惒厈.html??姀="b磹€榰>偪偪偪偪偨Rai粁勩喒曁retriev卛data鱤ile?巰呾oading鬶e鎖le. (This髏ill鑑€Ppotty髐pport閚鈘owsers,髈鈋鉧reful鱥th閠.)canplaythrough<傦偠3偡偝Raised鱤en嗏叅卄lculates€竌t€鈓edia錶eme凱could喒??from€xginn塉o錸d閒?art?im?tely.囎囎囎?囎囎囇儭?嚐嚐嚐嚐?倄Se唜o 偡偠true偀t>埧audio閟?嗛嚊???兛?儑儌volumechang兦哶哶哶偋哴?e挊嵃匶僄僄傿?喰proper晙o伔伔伈mu嵃伅伅y銋歴???卭?????囎囎囎俹囎囇孻back騟ach晍唚僟>duration僿唸of庽灪釙牊%曅op彑彑嚄嚄?9?嚄?5€xb€攃olor="#8e001?L㈧冮P栍?A劻堉侌?兛堢兘W?re鏾淒use埛埛??堢刯仐涀rogress乬乣ev爯嬝o〣伩伩<?>佺佮befo卲w?ry?剦萫€罌爃ow€鵨mb?崌伕 song1:埪寵?攚?岀??傎聽id="働?"聽c乣rols呹br/乑source聽src="?.mp3乸typ偍俁/€憗穪穪?.wav伔伈€憗穪穪?.ogg伔伈€憗禮亹聽畖聽does聽not??佮h倫噷.儢/峸峸?????imila⑧o韔st沄pplic淛s帯hav碃uil?us鎭樄衪嘿book,?w?c?巰揜伕ndl盒?嶹??枏枏乬???nc欁伩伜window?亁DOM颾jec?勦inish晿槨淴,㈨n厚l傁傁偵乹()傁側method?亣亞岯E嶜伔伆嬝堷??€良殑艡菐鐜蠋蠙莿坃w.addE岏Listener('?',掕€筗?ed€爁alse)昪func悪乄乂()聽{?聽聽聽va杊嚐n?=栺c?書get€腂yId(?僒??仒吙吔戸',upd摠Status,呄???倊??',亃圖俹俹俹.恈€麁*}?渙渙崸崸皦摗?嶏???沜淧dispat吼d,???vasApp暱?佇桰拱詣瀊撚儜?斢by?triev窲€hf?o呥兦椫儣厬壝?e萒ML餫g?嗿€矟8刋ith?淜o傳傳抇抁嗊僅. (?で?鯽riab?nam煥倵厙庍漌漅hat絪厇ouüe??╋o嗻o??儑?僌???.)讉:み倧倧嵐圤倰澼わ仐嚐嚐伳'???'傁偸燝燝燝燝燝燝欯佔乭喕稧氝氝勥勥勝?韆y鈲餺nder曺why巠didn鈥檛帨姛咷礟e?冪礗t楬bu垚姱仹t>嵐唕娤侊in@a眏剏i?o痳?lな€凉閯績牱牱?牪瀿r椄€ tw攁as緳倹is穋bo?暟y?僟嶶ide??t醩?ll.苅rst,鶍`wa€葌h壞髠翙饊釀isu剳⒐ssets€耼e渶€閍vail??€衦?疿am嫎騯ntime.觘c嶱,?ing??杸卬sures鬶at€(e鮯er鱥ll骵e髈mething€羏ul飏閚te仒t€眞hile鍁ery?is靜ad€X.聐伆€﹤羢tandard pre仼醫tribute,鵲u (in?ory)鎜rce€眗醬dio醩set?o冣鈋?e儾page€猻剎eca?鉧nvas醦p€(丂唫active醤d韆y騟qui€鄊any韨q?ha処o侤偣ed?e勞僩s,鱽坴oid€蕠棁棁棁棁晞2哛侎兲wi?€損plication.

?="5€xb€攃olor="#8e001勅Display崙A別s飪獵壊卍CH7EX3.html
)峩?lso???刼刼刼刲????摳殮€閺饙鷖hip晉twe?w?卙shown嫿昺悙?塒?効効刪<勞>?匄ta滆昈懴嶇嶇嶄夲僄僄>drawScr吀()??fun歅呰姩?ad呌follow婇cod???搩嗭儻嫥E?儻儴variable:啴blockquo塰嗸4嗺樋??c€恊xt.f呅Style聽=聽"#000€";
E?聽7-3阶阶叫?剴?墤偘焄穟browser.賱按歯otic糏粈?hang承ar佳flecP獯讍瓿0匟s到???.詇借€ju堥ur嚾r€Pstep穢ward剺teg癮?卻咁?,鈛t閬皩give妟a鏾o?dea嬌how?star咹o鯇`动箍僆恄箑e搩噽nd韆nipula?凘m€(rough蔭va?ipt.汉憻3憻篢??5935???Figur??>嚒ws鲗粖Happlic挂靜oks靑k嚚???exec?廰a垐b弙厷a/><椃棢??桜ign="c垹er?img怘ci獉x?0034?baseline"?40倊893"儴沢沗€g仦6???壾?i妎奿#剺"奧-3.聽S夎捒properti晙??媬倫犌単???The??also媥few橑樓「毣bottom?峘li榟洟暼ha柪淍伇cus??ey傕l?mr佮c€xs栙倎埊栟e()??fp懯凐佅佄HTMLAt佺t>?嘋only喗娰r?呧w漝n????????瀺ma?瀒壿唍圥help€桎?d榠i?sou濸€餯yn璈壒y櫂a樖濷樂p鑕ight="?瀫?pt"鱥dth="0€`>Example聽7-3.聽Audio餽operties醤d鬶e鉧nvas

<!doctyp儤html>
堖></script>?€薶ead€線慴ody€弨坉iv兏?="posi禦卙bs?te;??50px€hleft€u"儚倁嫽聽id=?扏?="5焊聽匠="3€p?聽Y聽browse€Hdoe侶no媊suppor€HHTML5聽崝?僛喦€葏噖噋勯loadingStatus?0%??????te;聽to?€卲:聽50px;聽left€p60€{">
<audio聽id="theA€q"聽controls聽乷乭source聽src="song1.mp3亐type="俠/€憗穪穪?.ogg伔伈€憗穪穪?.wav伔伈€憗秬*Y伕聽browse€Hdoe?not侶uppor€H嘆聽嚹element.兙/€蕚芼iv?€塨ody€梹慼tml€?tt><侫骾z嚢1€xb€攃olor="#000">NOTE儣冿儚冿冿"3冪冣僶僪2">This餽ocess閟鍃plained閚鋏tail€Q儅a鎖lepos=劏0666305偀倹咃呰blue€榰>Chap噋?澹筹姭canvas,幜?i?戰step鮬?ir剺tegra嬄搱孶?仭o梣away埶刉刉??剸朒樝廳?圍廐妶崯姱姱>If鵲u騟ca撠from 爣爣爡???熥焂??t勑a喎喎曗唚?鋣nami剦y啹啲帰€恘鮯?墬傜>屫撗T碃()??method徔佭佨僎V勝E剆侘侌obj?嵙fig澃餅纖敗淪壛魞皝漼澛a呅損cul?焸w焬??th旕very剙mi乊佲徚嶹嶹涳涳唂5硰硯8e001?D婘脥 ?n湝嚧嬃JavaScrip??漡刼捒刴梇?ヨ梑桰兛惷児収浛浛惪剻禦侶挮姩global鯽riab嬂?谤偀偀倶?傊湋偁?寊ho?坸instanc?f偋偋?墥偳厳?倞旲妐our砓l圥牜R浻仛僄呯??坾樤攢叺ο偀呥呥呥傯DOM??refe釜俙m醩倗倗???s縬n?厙厒,瀂倶収媉?厙厙僟??∈?.萶w辅r,咺y塟ess俬i乯塓s戻汷哥?1栄?€`align="c侤er?呩1??猦?OTE殗殗儚冿冿??僶灡on鈥檛?e濊d€ike?泬櫑棜s.聡骵宍憵槇c??sh回倯a鞯`恱ma倶伬栢俧嬝€駚X梠梠婐噊噉?1em?繏筯睴玵r鍁h戉l斝?咘wind?埊戹?憲??亣亗€鶺倆L佖ed?。Ins痐潒func喲?濩洤偡>??倵剨?潩???docu?沇汸,殘s??va拣??漁価?亼祾凁???礐氾?n????购焷p箞i铲ⅲ噄?plac?姼亜夸???垏僎攎寣?n呥呚僆〡???with?嶬€雰飪飌p檖Chil愮凅?o欴佭佭?.body佭t>腛M颾j?卐ct:

window.addEventListener('load',聽e€筗?L€榚d€爁alse);
var聽audioElem乣€籪unction??()聽{?聽聽聽侊nt聽=聽docu€i.create€?"丣"兡併乛body.appendChild(偡nt仒/嘸鍎s閟頾t錸ough.譭醠so頴侶to骵t鬶e偋偋src倵倫attribu彔of仹仹仭HTMLA坥t??obj?騟pres€鑴by?????厛a鯽lid醽!鎖le€睊 醤d餷ay.聈喅prob??that鱡鋙n鈥檛鶉萲now鱻蓆yp喓偡?curr?browser髐pports夿will鐘?informa?鎟om匟斀児乯?頰m?嚽嫄傷ed?F倐()?t>兿defin?嗋僋幦刱?turns?s嵏抈壐ue嬶€檱ex?s侀幋囯垇吂a??冟he唈旔冄僅侖,€羉onc?n??with倸噳傹sou?傔傏,嶁攇堊攇?怘傏a銟纻!伔伔伇etA暛奊?method朩佺朩朩擥朩▏▏▏?▏???T媭???????凎凊I栢櫾彈旴勄壡????⒓?瑻幚姍挶has鏾斷wro?弡hal懝ecu晳.詟檔d泭偍?di朾in曖imp€豾ay??an叝叝aler??ssag亼冟曢伹伷?伩伕埪榖毺,錰f彁ive珸?嘔?樞?堅媝ery騩b畞犪搃error噵?,??work??ak檤俙exa?揼弿弚弚揼??if聽扠揹揾""各阁?"no敿攩窸?墰€搣€2?给浛浉"澵"?"s恏1."聽+棫玖嬒杦杦??">Fin笐,靑塜柪牏video娐lis梙娭埱埰can薄thr?剋?v孒伩搘噺犨仼??颤?帎?dy榊兞幥囘嚽嚽幥凮凮嬚addE叐L嚭er("?嗼",亃L珮潬fals???劰?9剋剋剈5€xb€攃olor="#8e001?峱d硙S⑤粱Z㈦凎凮埜冪3冪冦Be帬?od硏?惰vious瞏卉汋悽?诡悷姛??⑾?犔.觟nc?a剎?嘔偋?俌??s鋣给i禥惇劇翅馥葏猟o华a╖?mu?儫優<摠rce>?冡tags欐?夰儵.蒼懶級啍go嵰o鮯墖僌?P?瀬???佭埧埧埧ct圧e嵷嶺which魝饌I亽娅zo鞏P卄l毣introduc廆you妽冏叝叝叝叝漃眕a僇pos=0000666305??blue倛u>Chapte線6,鈛唫refresh劻r?mor?勛勛勛勛嵓kes覆ng?para卙er鈥攁虸ME??纪乮t縺蟋x嶡儚t>maybe僌t厴??p禭ably丱両鈥溾€?(?h?)寖戠戞€0va墍s€igu?o堗?medi卲?幪胶ヱ.屎)晩尶尶尶尶尶尶尶尮傫粺粺玖rcis涹哋劙assum哸?b噚塆塆妛嵔僆丱姀姀乬equa?僠仐仏yes乷t>廐f?enc侧?甯€8?犂笅any喩摗?ee慓s (),鱡鱥ll騟turn鬶e鍃tension醩sociated?th€餫t虸ME魕pe髈亗sound鎖le鉧n鈋靜aded.

NOTET啺n?鎢nct圦is錽s勜ially嚮ame?€bon?國re塲in 刔a埵pos=厛0666305?儃喯喨blue€榰>Chap圥聽6?聽聽聽塇聽奧埅聽=聽"";?爄f聽?.PlayT?("€?ogg"偫=="?"聽||聽??€!????冟妟€q卂?€!厳厳"?;?}聽else吷吙儣儞wav吙吙吙儚吙??吙吙??吙吙??媑呯呯兛兙?兙咓咓儳咓???咓咓?咓咓咈?咓咅€b€弫磥鱽魜*}榳???Noti?do頾琍heck?ndiwhen€鵁魢讷$榜焎??簍焥€饹G汧鈥溾€潊穞>.蒮刐亹?case,€Sod?c??th兞玗m?蛋€蒾?writ堾磇a鱝胆o佇tc?喯叐al砐僙怘gramecu?.讏袊槈3眳€a???獋坬?仹哀lert()伅仺m桓ag?whi呚?escrib?厯e峨se圸蛋???彙?€`嶺gn="cer?劇1€xb歼假#?憼OTE揋摕儚冿冿"3冪?>忇you岺€◢P婜嗰err擧峸??凊俫????寘from抇?,?mply醖枒稩r楬harac?勷勅稧(e.g.???>秏楓t?丱丮祕??唞乄??壻表ge?歩檂??侴侳?e岮囬com抶t?e損杚憲揃??娰s?repla秺???亯?偢悋啫?a亨橑9??嗸5﹚﹙8e001嚫噥?処S??儀僟ゞ僜Fin嚇?婦?poi儉挊墭€袌?槹蠹zinsi嚾塈卭宊anvasApp孫幝‥.訚▊页loa濙傠orig劵?t僇媅瞏x杠糀叞a?ri幝寊a鏻昤l骳op?e陁嵗綞扴???嘪呥呥僫?瑚udioEleme?秬卬t
鬿髏art餷aying鬶e髈und:

<倅骾ze="2€x?audioElement.債();冪€9傁>Figure聽7-4骽ows鱤at?is鉧nvas醦plication儼ll靜ok靑ke乣en鍃ecuted閚醤萒ML5-com伆a?web鈘傂er (notice傴?w塸ave靍f儔e鋓s?飂€z堹餽operties?劼剰n).??塐塐塈醠ign="c媹er坸img騟cindex?0024?baseline"倊300倊5€`儴??€g仦6???惙惔i嵎嵄#剺"崯-4.聽S撫?ad嫎a€X墶€X鈥渙n鈥潐鈲蹘顐笒焻弶箳?1卭暓匁5€xb匃勻8e001吀L悏Ma,蝟詀g!僶兦?僟3僕僑Now,鉮eck飖恠fu揦廮n忶桹桳7782劘桹桯Exa?梂梂>.匟擥僪re閟頾 嚄?<擹>?犣ag鋏f?椻叐楅,鈫?▲櫓?s.詵 €our哫rs僪tep?war?tegr噚刜刕傫A’剄object?ith?脨2??樧廬i墢揅Pa?偮?嚢拫偍抩傋傋?咷姙!doctyp儀html娾br/€趢?聽lang="en"€鐎醗ad€弨坢eta聽charse凐UTF-8仧?title€慍H7EX4:嗈聽A殀聽W嗮聽No聽?伇/伨侼script聽src="modernizr-1.6.min.js兟侁乕侘侘爣?"text/ja岠€簠梬ow.addEv?Li?ner('煈',聽e€筗?L?€爁alse辫?var聽策n偰func???()聽{?€*聽聽聽?n叏=聽崁u礡create€?"丣"冹併乛body.?endChild(偡nt仧仒叿T惇儓suppor踩棜Format???if聽€髠 ?""喼?嗆l矆("n廻亰僞?乷return€?聽}€g?噏?Attri燌e("?"屫"song1."聽+?峞??徬徧"甡¢through",亃徿徬嶌勲彈彃奧奧塩??嚀Ex凐s侜奟厪媑io.勮歲啞怽/ogg嬃=="洁bably囪||聽?宊????maybe巁侘?厳厲?叝嵏椥塰咇呯兛兓wav呯呯呯兎呯??呯呯??呯呯??呯呯呯兛兙mp3兙咓咓儳咓???咓咓?咓咓咈?咓檷€弫磥鱽魱????秡S杒?勄剣傇M?仺傐偡傔傐毀d(??俒App(洍偗倗區乑侽侺欜!唎唄()唃婘喎??€D?€趧?rawS璸e€p凣??//Backgnd€飥靋借礨.fillStyl'#ffffaa'劎亸亸Rect(0?€!theC嚔.width€梹恏eigh畢偀?ox€穬O僇stroke勭'#000€勭仧仧仒勻5凘聽€1剋?鈭?吙?€聟W?匰聽T?€蟽讑?區"匼檞亸亸l倯€?"Dura庱:?蔽d€鋯?0聽,2匛偪傁傁偵Curr縅time傳傳c?T€鴥4????("Loop:噽傋傉l€袀?偀偀偀偀("Auto干偧偗?€鋫?傁傁傁llText聽聽?線?"Muted:聽"聽+聽audioElement.m€?聽聽20聽,100);
€檧!€!context.fillT€H€?"C€皉ols傁傁t.仭€駛?2傜傜傜傜("Volume傋傋t.v€鈧?4偳偳偳偳("Paus坃偳偭p€鈧?6偳偳偳偳("End偪偪偣e€賯?8偡偡偡偡("Sourc?偪?urr€@Src傜2嶗傜傜傜嶑an聽Play聽OGG???an?Type("€?ogg")儝僄僩€W€W€W?怬€邊????WAV????/wav?僄僿€W€W€W?捛€邊????MP3????/mp3?僄僿€W€W€W???爙€弨媣ar聽the匟vas聽=聽doc欯勅get?ById("匟?One"??圏?倊?爍€?"2d伩伖???()勶?setI侌rval(drawScreen埨33嗊/>啹></script>?€薶ead€線慴ody€弨坉iv兏tyle="position嵃abs㈣te;嗚op€?0px€hleft€u"儚倁墜聽id=夛?width="500€hheight="3€p?聽Y?聽browse€Hdoe侶no?suppor€HHTML5聽媎?僛喦€葊弨墖邎鰐ml€?tt><偵骾z?6€xb>C?ting崦呞翋嵝惃er?剋p傔墣傔傐Now鬶at鱡鉧n饌醤醾z溞e鋓rectly閫竛葕饐@鮯?曍 ?="2?坧???創鬭g,飏伻rough蔭va??鈟銌譫ynamic傳傳?噿榯??obj厛,閠鈥檚鬷me鬿髏ep鮬飖r鏰me.譭醨e鏾咮o冦€爣龍ier飊??墂??伮?厤al塰loa礹奊es儉hy鋙侀wa啇佇€pthis?刋ll,鱤媺僫伱空鈇k俬in仒?-compli?梽s韽兝ok鋏c埁?閟飂ten顎爏sary鎷鑔evelop伭偁i俬夿嫳esig噾?mo堷close啇matches?particular哷b煒奰労攎provi侶乣w拃娺幆勅嘒嘋with匬ar儉an?ok-and-feel鵲u匉re.柭櫩栫栫>How?r,?鎙exibilit?om勯噛cost咓咈∩頾t顢P?y螈伭m恜GUI厽such釃爑sh鈛ttons儤攫嶺€唵 髄垹r怈S彴垷峵摟摖怷e園彔丠m忚惄搃窅帀?擆r凣from骳r?栚could?侞乶瀀濨劰?,厑冄hav勅l佖d塱?凱囬un桒?鈋tw残?夓via?m僩s?al淏円寊b幮.賻悩a嘖knh嚞尶傂app?h儬怉st?伕?濜,髿薿n煥t宲ll?pun暡兣chap???N5€揷olor="#8e001瑅Cust?U屔??↑??????F㈱呅?l嬽嘝プ抔f︶e瀃s:?傱4傳傮眽/pa?n佉?勶?侞T盳?e?囸?勧呰€▋ d?i宧恱嶚偫?curr厛?検s?傌o俠劊 (i.e.廆€閰搻j僒)帎厳嚽嚽呄吶A渞?grㄐ?谷嚽嚽嚽嚽寜尅n?c?.蓆估s勧s枓m?澙t仒k汸堭煓盭?乛傕lef?€?詠萴淧?侸????b絏俌ba嫎擁朩?du抈惯关伾乬乫?T??亁夃?tiぃ僌侊絞絞?絜嶇嶇嶇嬶嶄n窺嫗volu?嬘????>??琋悵倲窘that鬶e??苺卻er鉧n韆nipulate鱥th徙lick-and-drag飌eration.詇is閟鬶e魊?iest鉶ntrol鱾ll鈛ild鈋cause胊nvas鑰 no顐Pve髐pport鎜??儀.
A靜op鬿ggle內tton

Figure聽7-5
骽ow怱埡怐s.png閙ag慔ha団c?ted.蓧恛ld嬋慼?丅s?懕惿€賸噀r?倄婅row摫sists坸:彋嚬ul嚽嚽嚹li鯽喰="1"?€賮??奯俫?戄e劒孖丂懁€?p棽擼俹壈li?="2???????backgroun扻?髄ider??凗3??????凖mov?儃??剓昲鰋lum熜乑s勥勣/ul暻儑儑俻se徃d??忕佺佺嚽忕嚽?劘俫?凣?忥忥忥?嬿忥??????忥忥???????傜???? 鈥渙ff鈥潏_??????4???????渙n???俖揰€壮'?劤gn="center勅img騟cindex?0076?baseline喯6?倀249"儬?剎€g仐???璗siz?剙#剱"-5.聽?甃坕€\刜?創11劅岕?"5峣??8e001勮Load?B宺羢set?兊??儳廹儨Sinc???l?閚?th?眲?*€惔+€挙?憄plica簷华ne?俻emplo抈r抙gy奠Ι礹0u窐磤re兪tw?唫?st??just舅T僫proces?s韚ch靑k俯昘n唫儷??肩尖666305婄肩监Chap悎聽6歼价when粭d℡徱?a鰻鑟.衦eviously冄埪c倹垻?鎢nc堿頰m€垙蠐雝t裤廔ed()嚫塉姫庅?by坈胶o盽variable壈?汄lobal惐scop呧娙俻?恾棄帥?s.苅rst?uts?啿佁JavaScript?揃匤岧hre奞w劮鈥敁鵆啡t搰t>,旝乄itemsT?乬乤狔亣亞保Shee傜亐:??嫙俖?侽?玙?倧跺嵃??b湹?柪皝?晳з?榅廰?丳?┼rem梱恓?扨凣嗙嗙嗙嗙娍娍嗺嗺嗺嗺偀嗶檙?eric劊?re?s卲敗悁??溈溁?汃橳旝?晫HTML鸢爤??卭???????偀?庽?hoa囪fere穉嗻厜???i>对show嗞辩扁886528辩辩Fig?蝷卽re聽7-5.譭鱥ll鮯e閠鬿鉹eate飖r醬di€垇prols.Her俻s鬶e侌d?th鯽lues閚cluded:

<偡倿4偀倹<叀骾ze="2€xtt>var聽loadCount聽=聽0;
NOTE儣冿儚冿冿?塯僶塦To韆ke宷?嘝iabl孒scop廆nly徆峚Canvas醦p醤d頾t鏻obal?€@飂蔭vaScript,鵲u鉧n錸capsul懷th徹徍in??劘?function()媜丱丩.詣衒inal鰁rs亐?掁?佂a?lepos=妜0992943?兡嬁="b攬€榰>Exampl?6??a??骽ow?at餽oces橓崌??em??Insi?哘傳堫ev懾Window?ed??鎵祺e岺w頴ed?se?倶?鑾@l壈鎜r€篴s?吶o靷?苺膭??nt冞t>,儥—c傴g?僉鎟om俹俹俲咾俫?凥亀乿濁乷乵???偪?啍.addE?Listener("朒playthrough",?,false)牤廏廏凮凮処?媋殮?媧i刱png閙age?firs昉瑂a?w塛啛I亖愡姠object儌唨c侎ref瑺n€`媹疈in煖偀倿徔偣≌.蝒x熰?搈??src侘侌attri傌濗啅伹啀佔?厡?烰?a?杔鈥敔hsas????凡俙n?凣凟ɡ偁凮凥殶桻?佭?????梠梠仹?hich?sam灖?國抶d炦絩堁橭???橭劅??光峘聽揬箣?t.塠丣唃??悙?"尟尙"毾毾毾呄呄吷NЦяг橽尟啛?狾幏姱r硄嫄€`qu佖俙?.糯 竓i宲?揧ll?処in?⑨????Cou?毲毬斀te熜????榅he佽r劶equ箞€貝鑘緺surp塒涐umb?埞s歐o秔e??∴€爏喐佽b囙嗙勭?sT?匃嗺嗮If髈塉墶侴侴侫?vasApp?穱寵噛tart飖r醦plica€蓷瘧戠戠棷冏円??慲愹)聽{杬€*聽聽聽宖++梉€籭f聽(€?聽>樐堲俷亱€3嚪??爙€弣垷橤機嚿檊9噰噰噮5€xb€攃olor="#8e001圚Setting誴?AⅱP赴憍Values凎凮嬋冪3冪冦Insid溝嬁弿弿弿弽??so涾v剅€県elp╔穖掍撋o€挨s竮sl凥rs锉A擜冑.懳???F紂矘?ゝH吙吀檝倠決勁;俹俹bW俹俹俶剨俠?ndar湊嗿 (囪y/pa皭,竝op/not€J)樝憞樝嘜慜劘劒奝聽bW32?€€窋钱僟僟?ex姌庿??€i唹back釓▼讋??B?墽孤廔倃倀volu懆倝gr溫?倵嘩ol倧倢als???鈥櫓葍"(俖俕?俉侾)勞悢仹仹仯拠仭嶗姺姛姛嶗偗>var聽?謤卲layBackW聽=聽206;
var聽vol€?0€?爏lider€?€蟺虷€?2;
We醠so頴ed徙ouple鯽riables鬿騟present鬶e <儬x冏t>醤d??y??勮ations飊偤canvas鱤ere鱻ill髏ar儼o鈛ild飖r醬dio?ntrols.讈\define俋os啇s??伂S偐X剋厽亸亸亶Y亸t>:

Finally,娚廕姌specify帶?帶???帶帶帰for偮梺/pau寴butt廥(???寚侾,僩????),?ing髽j鈿 grou厪?t>(?儑儑乢儏丵儳儳漙ume儫優?侽炋儣儣丱丱儚儗嬦儵婟飂€刼p/no€B巿gg澙?傳傯???????梘搊揥揥梘偀梘??柨棸????椚??奟?侲+bW丟嵵丟倃珖尲?俹W+璙仐仌偪偪???偋偋W+痚伩嬄伩傁宊?????go樍焁??懱€hvaluhelp┼sign揓add鎢nc揑alit?o蓆韆y骵em靑ke飗erk琎亪crea?哺many瞱,??癄r澆乭鈥渹榣鶅9own鈥潈@llis梚dete剅匉drag-€H-dr棬匫匢in俬瞋,鑑v?凊頰m嚝劏ipul?instea藏f?ter竊€鴎丄侾job韚ch錫sier.榐嬶9嬶??5€xb€攩榦r="#8e001権Mo尮Ev豪s?廹働?3??Sinc笲廜嬊奓?瑡??€坴塹betwe孉?m刏?佈custom紞徢徚?僷慳soˊe?媥ndler僰certain伻mm嵿?丅s?嗙嗙祐rst僕喦a倄up嶱拵鈥攱嚕杻r?乄乄se丳倫tha?朰holcurr??筄侘僄?筄?筄甛堺p??珡?焔塷?僶珡?は€嫝彚彚弮/??Nex審審呪忥忛.茘鰹t?恲両匴?劇up劎堣倐.詇is備fir渶〔ar髏ops饊竤椧??.讟鄮 ??値俍欎rmin佖he倶r?shou?儔jg儏?u椮slid崯崯崯妛崯圤圠倫C泜.毃牏L呉er("?",呹『Up,聽fe)帍帍帍???l巺塆峗?峖d儑峬夛夛侰窇/pa屪鳍槏耬d,?飞飊/of榅ogg烉乢乢掵/勳嬜嬓?click咹唸崢ト崁桂崗it??????????堘?seD€€?壏????↗敦ly歰?匃岟儜m?僄岎垏figu梙o火??俉????????龚渋€仠 valu€X憦憦徎s焦?瘁忳燌e瀤€A?怶怰h€饋簮}懁?ed?嬿嬤嬤?嚡??????seM€€?<仚骾ze="5€xb€攃olor="#8e0012">Sliding衛ay蒼dicator儣冿p儑="3儑儍The髠dp俛i俥閟魛駃mples?ntrol鱡醨e鏾仭to鋜aw飊€P亂canvas.蓆?no€8nteractive鈥攊t陁俻g€x?user狯isual?ion飂鑟w韚ch€a乤audio鉲ip傫left?吷.嘡婘噖噖>Fir冐俙all,僗 ?="姲?App()NOTE儣冿儚冿冿廜嘷僶嘪Unli崢when夗曢vide媂n曄s,巕do暿hav?搙庨刔傁??墴乢乗俀帗儂?枓檟n蔭va侤ipt,桪?s??tely骵par?from叿泋O憖旪厙?厙厙厙乢乢敺慂瀝ecessary?ca澙湩?狘???劦暲枍a熕?s濔廤廣濿1em??墍?????泑濿ャ???nd鈇ckgrou€X愡?Wёб鈥渃ut鈥潰亖RimagΩ??峎s仺l厳厳>buttonSheet厪厛俲俛load厐俍壜媴.png.詥?d枈峕嶡u匊熑寈錫rlier嗂?li璦?(i.e.,厀厀32,0?t>)圦崹柾star徥p?玧埼懣ho€0則泃chan?嫓兿????.萶wever噰噦riab叼?攽徎f??挌彶揝浶€褑弫 乭楕posi吹???瑹朩瑹??€恊xt.巃I嗁(囅t?,捹B?W,bH€nX€VY??甒??勭勭勨D?桱?燞ona饩hmo焛?焦ed.耬f€!攜i姩洍?縼屼?repres盭犤rel○onsh縋betw瀤€蔿eng崘???嵑帋€鵀崈x権h叏€喝刋?know鑰 far?x-ax??o犌bas咗?亼muc??o?h紜僜m塹愨堊淧嶩坸鈥檚陁st?si炐aぺ.膇穿哶僂?摟 (懽懼彟?滪by?du毙???倗倗€褽lem尭.価傜傕÷妟st彙嶽丄崩?偀妠In?偙俹濦?澤挩?匄c筗孍沖沖沖沖?沖剋剈?聽傄剸聽=聽奛/??n??????N懶楪?cu??勶勵x?堣?撃垈搚侊侊侊侊侀栭侀um侴侫敋亇(孅孒嬒嬋鱤e弐熝考侐乭u?曪?/p:収収俓S侷X+b??傊寶厞curr尷?叚敋婏?啴榶akν昸尷湂?非?曔曔匁背multipl毆?浖??tim奨埆浢cl?涳?撟撔?T侙兦?T洂坖it!?????儫??X楤(????)聽+聽
聽聽聽聽(歰吜*???礂??収収?a?洌Ps矺姪i箟昲€袝粳h?e?€鑣e?he€爎宱宬甶end產If嶪€幎Bp?挴挳?偭€裝eginnin?鎬単飂鬶e餷ayback醨ea醤d鉧ll audioElement.pause()鬿饊箓聛r鉲ip.詇at閟,鮪less???loop倧倛property佮髢?閚鱤ich?傽we髏art?ing兿兪鎟om€eginn?by侾tt乵??curr僠Time刼刼y?伩伨0乷t>:

倃?€恊xt.drawImage(buttonSheet,聽238,0,sliderW,bH€\X,伾rolS埞Y?H);Now?oě?愮>悧U昽昸╂扅澂澂潾???r??s???aftㄩli.議y €?/i滙not倧?仾ed?譭ll,燞e瑈s?bec癑嚢gen??€墖瘒療udown噰瘽盫rt湁a 鈥渄ragg厾鈥濓??瑳兏wi灨sh嬓you€Irtly?峎非非€鑳D坟婏啽a锠ht?p?-stylцoll籋?dete乻chec瞸册媟ダWe鋓scus噋?盭矤th€IChap?聽6峓????剮v︵o饀zz?ga(徃CH6EX10.html忨).蝟tic嵐a截e?側玦us??儲?repres?彑彑?x廮???y??沺?s岓?(佔佒p砄侌,?????)凴傖惡€r憇撚儣俫俤bW侽???H?僡堾寪m哻ound喼?a?搼.蓘訙 ?澵?wi扝滈笝?楡e雗楄?○溋愢澰???樧?唚??ゥ?╊奠(>?嬺丳&€*??l?+bH??俖yX??仧傋X+bW伆卹屪€g堽1垺?€`align="c囙er?墆1€xb??#烒袄OTE儣冿儚冿冿シ岀僶屶慔Аhad閙ag溞┴彂?摌p?瓂a灎,乺woul疿?sto?so犎叭伻f?煩va?飏?€豦x亖揵item鲹`on鬿p醤d?顎咓as鉲icked醫醤y飊e鬷me.耬caus€phe鉧nv乣works閚閙mediate韔de,鵲u€鑥ld鑑v仒o 鈥渞oll€裷飛n鈥濌ust靑k偅o€(r鎢nctionality鱡?discussed.Aft偘a鑙t閟鋏tected,傎ne嘆勦€﹔mi嘝whe?€鑑re鏾ing?ca呚?<凂骾ze="2">play()孿n錫si捀焋?僐塻傫t僠(€職鑶")?棄擧掚摡?:

<?4犡??単協聽聽聽聽€!if聽(?庌)聽{
}嫃╃╃埊埊埁Now,堬堫drawScreen扺扲煥oo眬??玵?:??(g傃簸纍gl廝彞 (two鑟riz僷al鈕xes)昦慼佡僁痀僀刞曄ぷ嶑,?匬佡傟佺佺佺佹浕?仹a??o釟z,?s伆t倳範歓i?h欯傝?箟灰垚亁,?児?tu灺?e怺湷剹剶inver唸rel?ship鍃is漲綷福?nd??y??r?桓歨慱3慱慬慦晨?懆煼桓rap懆鎟om€姟ow?i偝c侤rols.png嗿imag拠竱劎劍崼Shee劅剻(禮F箁聽7-5敔垹?璲嘷嘷摓樠?e啒d嘮r婭岺l€`it.觟nc圚彂仱????呈osi瓛?乷乶32亀?儕liter沨va嚴爥儔桿俫狅犺I孻犵偐瑮?o挆瑮偳偮?╫?惞ext.?弴t,聽0,0,bW,bH,?X€2Y€?;//show聽?猣?僄僄僄僄傿32僌僌僈聽僞?僩璯璯璬€g壠1塱壪€`align="c?r奊夾1€xb朹朰#?疨OTE儣冿儚冿冿?嵂僶崹Again?ouldv?滪扞掲掟僅セ揺剠傳濿濿壙乄丼?th?瞼bles,?淩ecid祂梚凾◥o髮噩矂differe?betw瘁€鶄sp?f?兦兦???乄?pixel囎篡?沊cu甈篳媋煚€啖0瓲c墣f格lac郭th粰?s嶰嶯?甠1em??動5憦憥8e001厴Loop/No虁@詏g紿聡j兎扺?懬儳Imp厸?孹傞no€B寈傟籣nearly閐亼堭崏i??泀/鞠on瑦n?綂a?睈?叢as€Hwo儗杊?bo€xm楑€?鈥渙n鈥潕拃iff€q咯榌坓坉哴Unlik冑嘜嘚,€笁0盓???傄??op塰:鬶e靑gh?鰛卼er, 3D-looking 鈥渙ut鈥濃utton閟鋓splayed鱤en鬶e醬dio€醤ot骵t鬿靜op.詟餴nverse,鋋rker俖俖俖俕?p (becaus俋t€塳s靑ke亗俵has鈋?pressed).

I儯eventMo儬Up()鎢nction,鱡頴呰?add髐pport鎜r吅/n?First亗tes?a鑶h€zpoi凐?唶?th€俢urr刋侶ca儽飂€耺勧佦er婣墭€id乭ical劑丄?內did兟€?p妸儃,鍃cep剙ha乺€賵穲秵qX坥坔and丱丱両Y丱丠剎fi乭啩啩啣壇彔動????Nex娪check?value偂勏勎掹Elem?.傾?t>.讕梪pdat?倠妼o?si€袇瑔m晙t櫂.蓛蟽蠄拑g垐峢??true?t>嗂榊慽o仐仐fals仧仒;閒亂??????仧劎仏:氜b?kquo坧?4??倧値if聽(€?Y聽>=憵)€hamp;€*??l?聽?+bH??eX侺?X??
聽聽聽聽仧傋仒+bW伆€{亀爡j懣懠?倿€W€!仐仈聽?嬺;伿侘伔€ }聽e??€還W??債峇傳侊傳嶨€9????Finally,甈??drawScr¦?捜will?crop?pa〩?偀倿熾Sheet倵櫓magewhi煇踩髏滱俙?▲楌溤ly桖.課豹э椧勭e穜ff穛偅椽匃瀏瀏瀏?沖沖﹚僊n僄傿潛反倃??俴袱,醙ai?側r??a倛换騟l?ship?兟s?媠灴惪惂惂灴?灴斚橶朹擶€!c?.?I幯(徢t,聽114,32,bW,bH,?€2Y€?;//孯棁傜欸冿€飪飪飪飪?2冪冪冩聽//聽no≯?汷峗汷汭?沷9娤娤娡5€xb€攃olor="#8e001嫄Click-拹-Drag謔lume觢ider兦???兎So懜w槈ma?癱饥as?堌鉫rt揌歺?le€蕄iec涥func?ality?侎恟洑er:篶匔s匓.詟焵洊 曣tera倫v??rol醠low?侭椥?o厁nipu?叒b焋??€pr噄飏卙f唺俇凮??伇厠e?耬哖??re?佔厔?nee炄o鋏fin€衞€鴅oundari?坬its厾??ul寚寚?li鯽lu?1"?€賮??捪俫???婌nmov熼n唕y-axis;墎璲always雃ep釅憽`擑斂焼y?卹.梍梇/li哤伭哤?哤哤哤?員f毙學懽s暛徦(€Yg嵚亄??x??)猌鑲 ??嗙嗙嗙3嗙嗙嗙嗙嗙??咼?€爔??€9挶揾桯瓺rt暳嗊嗊嗊嗇梪壡壜я鈥攤'?並S僡偋偁?汄顿???rEnd??峧婏婏婏4婏婏婏婏婏??W?【c┵?坥瀩楥ss€箃ha∝佌w榅?紹侇,煒佄將?残gg岃縄峧Е嶩mean侾傫i尗?徾€ymo€垚/?勶?偋r醕corЧly奧奧奧5奧奧="0pt">When鬶e鮯er鬭kes鑙s鎖ng€坥ff€騧o?鈛tton,鱡?ll醩sume?at?頾靜伜wish侶to骵t?vol乆,醤d侚st?stop 鈥渄ragg儓鈥潄jslider.僀S俽Start餷us狎? (??侜Incremen侊佽)嬻姌€鑑噣describ妏鑟w韚ch??i??飏丳€d嚍wher巠囃嗀sts孏孏/ul>
V凜傡variables?唥?hi珷宨潙?慠僊??冺憃礋恮o 100% (?刼t>1?皜曚傊li暣侊坥侊坥?乷嚳嚳灟侊??孯槸?r渿d稯?渕W偳啇瓵璸傋傋傋?self偡偡>?偗偐曠挓拠拠曠偗曠垙怋曊?杻+枂W聽-聽剬栫栫栫刧刧刧刧屒偛?婬亸亸亸rY亸亯??跪?懛仹???y?掃獔?竷晊斚侘侘侘斏櫶sa徯ば€ao€(r錶ement静彩udio敔ayer,??c€恟ol??Howev伖櫙佭?勭勬?稼qui挵a鋓ff??way.苅rst婸ak煷獊浄僿峯拸凎嬱add?僂c啡etwe?橍?淉歔侎?€瑲'?? 鈥搧t殢?multi緋囙by夁侴唎佔?roperty炁伔伓巎E?佺玱嬓a顄mb?囋??佺暱??恎猻瑀give醐蠌e弍€苫詓?ing?i傂from?弜wa€榿Hdraw?嬾?any僇n€鎒t倎????喛抇聽聽?(嫙nt.?*
伖€!());?僿?僼浄洶???嗭嗭嗛Nex欝cre汸懅噺揥凅Drag僩忇?iable?岄?us⒑a體it€缼眅€陆嵡侈s摠彙幚gg?俬巿t帶韔妝巊嚄??巊嗊巊??婜false;
Finally,鱡鉹eate鬶e volumeIn?ment鯽riable.詇is€~鬳lls鮯鑟w韚ch鰝2鬿閭Qase飏鋏€en??凒audioEl冣.???property鈧@d侷wher唖slider閟餺sition?€釀宐ackground.觿貋薽aximum唸lu勮f仐e俼??1劘t>姴simply鎖nd侜total?€€at偋匩can韔v垀x-凘s (儑尫olB呚W -侅W?t>)醿癲iv€袇w侘厀?by剫噐嶾will鏸刞?a?duc叀丂憴匭ulti??僄僄>x僄峐?妽吽,騟lat僘愷?嘷?S乯Star?媄仺匛姉?hould骵t鎿`?傳?栫偺:

<殫??歿傁吙ar聽欙?聽=聽1/(嶕聽-聽?);?濷濳?瀘凎凎凍4€xb>V捛捓func嬌ality傂??偳3偳偯N濔彆ha?discus汚媄焲憄e頴€皨E柨?€鴴倶k醔out犑€竨熰亪m牥倿o嶱厱s慹?餷ayer?e鏾od儼ws湋殠洨媄拹揚€販B?唀you雬q???ork.徠埾埾執I?彿彶ev冟M?eDown()帶?h湴l垖エ塸m氞hi呚est?int-sty?st,陁€竘ik杺did?◎侙圥/pa?焂loop/no€B鈛tt壻樞se佖he亹屜惽was鉲ickeюIf髈ビ檺??済侜Drag?皐濭佺佱tru亐mea卆??懝嵹oㄓ€@勥?畱寵圷?偢??drawS漙e嵶爋爋爋?愾?傁枀聽??€z)聽{??唨卻頾t鉧lculated鬿鈋韔re鬶an 1:

倃倂if聽(volumeSliderDrag)聽{
聽聽聽€erX聽=聽mouseX;?爞G丱>侘€〦nd傜伮?佅?€梺矁_聽}€g兛侘?l兛€玈tart兿兿?兿€梺脙邇賸鐎8嫥>,鱡髏ill頴搱懛伩t>x仧傌position醫鱤ich?draw匤s剛鐁ap€?譭鏴t€貏悂ame鱝y兩梂?冏????when?in刪al仺?variabl€蓚瘋瘋ヽanvasApp()偀倶func喩樓???樓??}聽e婬懅憌憌€棏v聽+攼audioElement.?*侴€ 暋BackW聽-媨W))揝??????Finally恓嶰嶬侶o€倝硤鐐鐐蟼蠄鐖鐙雬恊xt.傾Image(buttonSheet,聽238,0,喖,bH,?壚,圤姛€赮佮伔坾奯奮嬕煼偐-€w?*傹Incr?;婄婄婄???a鎖le櫒=0000923211執color="blue丠u孈gur?7-6鋓splay?custom侙ntrols梋browser.?????醠ign="c?er?img騟cindex?0027?baseline"倊300倊5€`儴埾埲€g仦6???懅懁i塷塱#剺晳塚.聽C斱髈und饓8暲with塐塊妿偁?厀???S?粿you鑑v?t.賭h樌鬳s?e釗墑剺咅CH7EX5.html兩峬卙rc嶺ode.詟坒u?€y靑瑦ng婢p乊HTML5脟+??獱shown偐揙揗785夌揙揌Exampl?5揥揜戺坵懐柇i???A媏?£∵嬸嫻傝嫙??∽?∫假!doctyp兏妬&g?€賭?聽lang="en"€鐎醗ad€弨坢eta聽charse凐UTF-8仧?title€憥:?揌?聽S換聽P?聽On聽?擬侚/?倴scrip?src="m廐rnizr-1.6.min.js?侁乕侘侘爣?"?/ja僪€簠遷澣ow.addEv殘L扻ener('load'?e€筗?L€榚d€爁a祊??€蠧?儉﹑0€?爄temsTo佡€?€?牣O刲€铂'?€够E刼刵(公疧?乭儶?畼ate€?"丣"哃併乛body.appendChild?€饋煵眳禩揜儓supportedA€笷ormat???if???""喼吊嗂ler吶no償僞?乷return€?聽}€g?噏柊Attri寴e("搻"?"song1."聽+?徟????"濰炑through",恞??嶇倛惂嵺new聽棵兿丟丄.on?亃?乷乷乮嗋丷忞疷.png"刼>塊擏擈幏幏嵜峠悧嬻Ex圶s侜幉効徢io.塇犻?敿/ogg?=="probably孒||聽?惪???挀maybe捒侘憞厳厲?叝??嵭咇呯兛兓wav呯呯呯兎呯??呯呯??呯呯??呯呯呯兛兙mp3兙咓咓儳咓???咓咓?咓咓咈?咓濏€?爎?媭€卐turn聽returnExtension;
€*}€_funct€?聽canvasSupport聽()聽{?聽聽聽聽們聽Modernizr.仜偹偋偋爄temLoaded(event偊傁爈?Count++係€籭f?€?聽>=倱sTo偐??€!剾App()噺??厀厀佺佮匞侓剒!??()??€V墈啛€讋W€軇聽drawScree€p凣??//Backgr堣d??唒ontext.fillStyle聽?"#ffffaa"勏亸亸Rect(0,聽€!theC囀.width€梹恏eight媑偀?ox€穬O僇stroke勭"#000€勭仧仧仒勻5凘聽€1剋?鈭?吙?€聟W?匰聽T?€蟽讑?卂卂亸亸亶倯€?"Dura?:"聽+聽audioElem槰.d€鋯?0聽,2匛偪傁傁偵Curr?噚ime傳傳c?T€鴥 5?????Loop:嚇傔傒l€袇?偀偀偀偀("Autoplay偧偗偍a€鋮o傋偳傋傋傃Muted厀傁t.m€賲6偗偗偗偗?€皉ols偳偳?€魠弬鐐讉鐐鐐酼olu嵢傋傋.v€鈪?偪偪偪偪("Paus圤偪偣p€鈪偳偡偳偳偭En甴偪偪t.e€賲o10偡偡偡偡?aP彣聽OGG???an?Type("€?ogg")儝僄僩€W€W€W囶匞€讌G匞匞匓WAV匞匞匞匞/wav匞僄僿€W€W€W妠潡€邊????MP3????/mp3?僄僿€W€W€W妡匞€鐓G匞匑Sourc楃?タSrc剱??傋傋傋傂櫽SliderDrag?€蟺藗顫瀮稗丠w聽????ォ聽or聽???聽if匄嘜渧縑乢??d?Image(buttonSheet?0,bW,bH,?X€2Y€?;//sho呰€﹦梻?聽}聽els陡?€飫???32???堁?埛僌?€縺瘉殉€鐎讑O奜乤?乢????114哋俛X€2奧?劄傔?凎€飪鲀鲀鲀?2冿冿??no?僄?€繑菙羈ackground?勭勭勭勬勅0帾B?廎€i廲€QY?厞刼僄刬?聽?刧?刧刧刧別€?刦€dX€MY€鲃O?埛埍s燡€€黺a?€釯ncr掹聽=?傏/撟撔duration侽侻rX?(?呧噏StartX+bW書??俉€2(劅兞*?Time?娗娗娗娗?38?匰勞叕??Y?娮僌娫G?搎聽t€Ps伾?濛濛咜ended聽&€*聽!???倃€!乬坓坅嫴0垙仐伔琖se(夛氝嘷€瘒YV瞨???Tes懶?硥俖丟垊寸淬噖乄捙乢捥mouseX;
聽聽聽?媭€?爒ar聽volumeSliderDrag聽=聽false;
聽聽聽乢eIncrement丷1/(€窧ackW聽-s?W)佦?爏etInterval(drawS?en,聽33乷/>}€_</script>?€薶ead€線慴ody€弨坉iv兏tyle="position:聽abs?te;聽top€?0px€hleft€u"儚倁canvas聽id="€cOne"聽width="500€hheight="3€p?聽You夎browse€Hdoe侶no?suppor€HHTML5聽C傄.?僛喦€葊弨墖邎鰐ml€?tt><偵骾z?6€xb>Case觮udy閚羥dio:觩ace襛愘s莂me刞効p?壺??If鱡€r€(r?ng徕ook醔ou凁tandard葕,乮m俌鈋?le鬿?o??乣銉竔nue飊働th€╫t€饋Ppic.萶wever,魜歩s儓lot韔€p俻play?嗰?a€pplica?伕€坰imply鏴t厹so€8侓?tr櫊€醝ts餽ogress.蓚 e靉st餫rt飂€垊(chap??will劆?t傕c嫳s嫳: 媷媭.讈?at?hrough髧Qa€纃ea嘆劯attemp剺卄咅?wor卌噐effici?鲉h€爦榡unc圍姏€c€尯脰虖i挴挴弿挴挩5挭€揷olor="#8e0012">Why觨unds揨pps翇Diff嵏nt:舦???撓撓撓凣?mak憼鐣樶?鍃a幦e鎜r怤s?噅?媝ll,伵?perfect侢becau崹it?d厾icult?redi乆how?ny傹柖?岃€鴒n巟ime婋啅啅歐you慼n閙agine,??壚so卄揵?o撹de凁d僇栵s鱤e?寉佈氶匇暵伜倰,叚傃厑ed鈺(d悜嚴r塰擰?乸槀ho垑€莵髐sual歅b??ync曍nou晄un墊焂.聤紗B倅f俋or?櫒ne?厛承?湗?tegy巓巓?屭flexi?僸?甔ce-?枟嬒嬒嬏To奿唸儌幨trick庌寵幦娳us?Java?粪兪?氂乹歚婮爋炏叏撀炤愥s塇til乹hav囜瀺model戇???H┾?assu?恵?橰reg琍?槕??恄w??kn垹畠?噞燨="焵<禭动t>颾j毨?ol??⒋li鯽lu俙1"?€賮???俫??Af媓a橌噆,氼~菠?嵺嗁s屭?幰鈥渹I鈥潥﹣9??傎昲wa€笗€8€x乤. (F傍o胞巃晳徯瑎.)縒縌/li圇奞圇喯圇圇圇??P橭曖亹?冭?旔殅€爉廞a愯m偫丳溔t忴web?gチ兛厊/ol攪?坔ur擑憮?狕煾???w“g竗A暫禒钾u竒?篰氱s潙庱wh€皢鑧?€A濺o穐╤欻?em???咗Sin忴儌€慞灡钧??夞猯??佈on妜go慭?a莽ad╔瑎Ho屓woo斷€未{uc?碒ui掣?film侾,埵ain偙?幑part?c剺r?埵e僅F佮都傾倝樎儘得:倊f宧梡懭?windows鈥敊B欃?be€8吧姌???li沺奪亥嵏彙堬唃皃cessar剤oclu卄€鵧ynamic??婐娦滱€摲挀翱[,靍牐慽禤o脦硈 ?color="b??u>8???180798???9??朮hic?ひ磆ep鋓寛?揹???摢琄C硦穇栕9栕?"5??#8e呧甴I祕??乆€]欦欦?栃漘漘將?f?笢????.臿埜on侓atte「悜sol笲恥骋餽obl度€豬ff咐朖y楡irst刉‘挕穲ic?€q刜刜饯溑歅椨?倢discus.?倅勥勜????nt??巰卛ze="5">Space襛iders莂me觮ructure閟醤閏onic醕tion鐑Iwhere狍warm飂醠ie丳nva剅attack鎟om鬶e鬿p?€Yscreen,側d€俻layer鈥檚阰b儥to鋏fe?world.詟Xr嘾move僠鑟riz嗚al靑nes頴ar儑儑en.議?each?騹i仺?€悂崉塮ield,閠僢s鋙wn倃n呿n?it?dire?.婻a/媤媤媣唓囁幐ntrol墵髮 ship鈟兩ing儶mouse墦f??issil€Hus?lef卛丠鈛tt凘譭垐e匟o僢?鈥渟hoot鈥濗ou個every鬷帬宱?a僂夓刏冋h堗€塭nemy呌?,鲀譺e峳乆m????n?explos奌?哛a搥not廐mit嚟numb厁嵢喐t嶽娊俻?刪hi彣mean?a吅俬could鈧衝y侽侷?勆凧惛?s偮兞simultane媊ly.蟯r鏾?曈manag偍ll傾宲dynam欨?愾愾4愾渄焸s?4?Stat嬭晥桜灧灧揋俉揃劙潚ru國憑a鰪﹩Hpl嗻傔n廝A 燩€z燭昚s?奀?ow?applica??exist?only€(?仭揵尟尒扨傴乥do?亼t冐g煿€豮i寈屶?啽?t鎜r咹ngle-徧噏s幚ca榓傕?愲數ho忇a橮n?傂Bool刡de斷ib?w?僆劋咜慲勸moment巓??has呚懶埵掗u?variab尐憳匟怗="瘓婸恇STATE_INIT刉攟blockquo張埊倵倰A悢孹set鮬?oad媌瞼s€纒勑倃婼€噮噦鲄噮噮倯?聽吙聽=聽10;?箊僿垙"9???垙_LOADING偗埀叿埀偗垻wa晉執帤?埩?硤leep鮪til?塊乆?b促?ed壸壸?壸?喯喯壸壴?夑2夛夛夛夛???夛RESE?夁吙夁偀??抺in盤?槳拸埧€噲績厽厽埧埥呉埅3埊埊埊埊???埊PLAY挆埧偳埧偗埧抩稜缴懇垜﹤憄gic埛埛?埛?収収埛埓呠埪4埱埱儘€g僴1?僿€`align="cer冿冮1?€揷olor="#000">NOTE儣冿儚冿冿奜嘩僶嘝A鎖n捦獴酷yp袄?渒a鎒w盚r珆,髐硃灎凟偡彠壣END_GAM呚墬乷乯碢?€還邆G_NEXT_LEVEL俉?亅,?t锎`ca摆ud糀慞no归qui?殌m穢?柉崸em壙壒T?hear傴f?攞mac捐?剣咡run()収?f絇?,几i?佮c朠?忌n焋惏?鍁ery 33孹llise攼ds妨僌僌?僩>?de偍m匵s儼??凂醫冟y鏸vti恜us?a僩僩switch喦僢垝m枲.仧仧?仧囐upd€癲凙a鋓ffe?剴刡婇program仼rea幮仒mo旞壓d廐髈me?吀else塠伕cess嵙嘔啠圑朏厳嵶嵶厈??儵圫偐樣巖ommonly雗ow仒 ?loop?澂?擏匃匂?聽匓聽{
聽聽聽聽€!?嬚?€飥!??INIT:??€ 绸App();?€€ b寛k€飪se聽ST?瀫匒TE_LOADING:
聽聽聽聽€E聽//wait聽for聽call聽backs?乷€ break;€飥糲ase聽ST儔RESET??€!resetApp()?€鲀€飪?PLAY啛?€DdrawScreen?€鲀7??爙€b}
<仚骾ze€鑰xb>Initializing鬶e鏰me:頾鏻obal鯽riables僅儳p?="3??Now俙at鱡雗€ha鈏t醔out?state韆chine鉶nstruc亗will鮯e鎜r乣is剴,閠鈥檚鬷me鬿骵t鮬俲preload亰our醩€鑣.羢倎mentioned丄viously,傁鑑偍w倛ounds,骽oo匵nd鍃plod冐b叞咘lso亄h嵿閙ages:嗋player,仺?ien€Qd€續issile.墇屪墴墴>Remember鑹x壒ep岺ay尮we囏d鋙醱ay伕th岟岕閚坕壚applica嚛s?譭ll,兏r?垐€Q唅h?en?W俼導尋,?嵮hav倶?chanism嬦?€袐Z僩€蓾Q?寔呇孾勦ste?of靍verag€閛nly円DOM勲ind側?="2?梎倎棷t>鍁幐娝姱姱姮I垻倧倧canvas烞偳偫func唓??啫嚒叡嫍噲旳嬎抝剰剰剰剤T剋剋t>?S嬹刜刋僊悙ld摡橦urr嚴峔櫤ant:?燱????凓働聽?聽=?INIT;劎嘒??We堏嬶儑巘C泋t傜噣櫋乷乶itemsToL??椫exact抰s灡橞?d€﹎?audio潓曶on鈥攅xc洝?be朸mo櫴刪媷坵坃坃媷啛媷?媥0疜€聡嘾孼€鄧繉?兛兛揝??摟I??t>,乢乢乷乶崸亸??亣崶姠杫宐?岠狢峵歸?婫婫噺噺婫?柷嘑妟new聽€z诲??丟丟丟喿??噂峅峅吳吳吳吳>程S磻偋?亣亙禋亀媤媤e騟f栃ncニ溩俉佖HTMLA?El磤?倐objec畃橅???噂噂噂儣?噺n棬?爢讑飱飱飪弮彨噧瘲鍑Typ旝珗壪?ext笻?跌€塿挊绝f懆魝P泛€馼rows㈣dis慽≠J墽???墽?墽?堊堊堊偪偪堊傔焆o?X倵摨乄乄eY乄?瀒?悼??x?僟??y????寎凧姧?囷囷姧?姧圀?€媃??????僌ㄧ?倵壡撓掟鋣namic洿€豻h澐偀???????笗ship (c?roll兙圧)???????僰?{x:250,y:475}婫婫婫???Bo堊??ns偪?乄?瀈乬乥rray杦d靑s?墵岟ǎ燅煑醿聝b偼锒觕anvas奜???奜厙奜?碠A厑祰肚??嘜媑媑凮凮枺n▓Юv哫onstan國set嗞numb???(呥呣ALIEN_ROWS<??tt>, <€A骾ze="2"><€郃LIEN_COLS<乢>),鬶eir髏arting靜cation (???START_X侴儫亀亀乺Y亀儾and冋pac兩儤scree冏俫俧PACING俫俙:

傔傓const聽厀嗋聽=聽25;
鎢nc彵,鱡頴e岃o骵t鮬鍁e?h崘lers鎜r傋傋mouseup偡偘?乢乢乊move乷t>.詏鉹ea嶐呴game攈op劅劅our?terval€筩al€@嚐僿t>run噊噊噃懽婏娮娮懽傔傏儛C妸.addE?Listener("垊",夲M€qUp,聽false)忬?????seM€€??€*埜I坾(噣?33?嚡?????t奌is餺?灴嚪姀妿wi孁be?岪徆????鈟?煈崏宔醩soci忦d乸th€陠xue飂??appSt亁凮?帋??嶨俧4€xb>Preload剻扐凱ets?out鏻ob?variables奝姱儀僟3僟僛We陁s僪how?ha婇????>儲鱝s梹itial仺楻??へTE_INIT?which韊ans?wh?凮?庽??惏??嶒ir嗻time睟倗倗吂偋偆戇偵?熧ood煇ws (卙lea?儞?discuss佮)剦唫兛兛兛兛鋙es鰁ry靑tt娙坽煱av?ot??dyen鈥攊t?伿€htext斮€y?醦pli贵咾result?蝟w?do倶檛any掃捾?挴挴挰I?de壢low,吷ic唎are鮯?s?str掕gy.讎la墍ng??婤?槈?榗紬?itemL??倦?瑼仹仹仩sTo伖仧尷枃亀t>5??(thre愯rap杸媝?tw皹ounds),€妰軘g倧??冪乢歡E_LOAD紣亣订傷e?忹杕彯愇??姂simp媥review尺彑??儱聽梀聽{癹聽聽聽?C堌t=0盞€粚d聽=聽5€?聽expl厫S姂€騞ocum慀.妓Ele€q("audio"?併乛body.婸?Child(偡nd仧仒?Type僢suppor?A€笷ormat佺佺卂€?彉Attribute("src"?"?1."聽+僿雇侴侳??canplay撠ough",棷,??倠痐ot????刜???偋亸僟????????圇圇圇圇圇圇師lienImag帲?聽€z(兎?€?on昋乺?乬乬乣喞丣"€?png"乄聽卆er凎凎凎丟???乷乷?€珓乨mi慈le???丱並???亀乼?€磩+?︿€辚鳐饌_聽}€9o碂?碂f鵲uヘ?,??儚?粺?h磥锅our??run?伿?;涣?wai碻?德soccura仛哖?冻d鈟盁兦??凗缚父,鞒爃鱫rks鍃?ly靑k哗偳偳偳偳喛?礨wr唹??饞??cep砓硛?ha嘪穚?i侚al俈s:

?畝?ol鑕ight="3pt"鱥dth="0€`>sound崡姌徝l伕儕ga楶€I???凣傦傞run??func嬔婭?奝€h侚inter堷壪壪/ol>
Re櫊t┱?倛傜悎??稠?偡???愱,仧仧浄浄佂s?樖杒佭僿?App儫儫玙tur獽s侴侴僗rtL晲l俉俀.蓆?so??volu?别?殭?€鑟 50% (?傼.5偗t>)篨f?偂?伔ハハ嗊ハ乢?PLAYING亣t>炦憃?幙?傋炦炡媑?昇?(歐溝?壦棜.5?汫?盃??櫑櫑噭櫡?朞嚽枟囘囖T??愊愊?trav法e愸?悽ne?d倵倵徯:盿倃俻loops,鉹e糥悢rows?砢ens鈟畃堗紷Ea枲砕w?仭e醤並棙e饀sh綘dynamic?博o揼劮揵?劎劆array憋follow勯propertie碧姺姺拸僕姅peed僌?/俹?number埞pixe犔?贱?靍ft飏騻Q骸e墤燅?劘刋drawS奝eワ???嘩勶嘩偗x俉???侽?摬媃偡偡偡?pos緕垜坁噾€is啋.詇is鰵萫閟1抜?拫?>c?multip傝d佱亣亞ALIEN_SPAC?佲,醖笀嬒伩伩TART_X伩嬜嬜嬜墢嬜偡?y俉嬜嬜嬜侽嬜嬜偡偡嬜嬜嬜嬜嬜嫥灲嫃傳>r傳嫃嫃亣壸嫃佺嫃嫃伩嫃媻?伹嫃嫃嫃塆嫃偡€鷤o嫰嫰嫰俹嫭€倞G夾image?劅劅?劅劅>乧劎劎劎劎倃劋€雱瘎瘎瘎痟t="3pt"??秬卛dth="0pt">Here閟鬶e鉶de鎜r€jstartLevel()鎢nction:

Mous撫ntrol俙偪抈俉3俉係Be嵃e鱡鬭lk醔out曇game餷ay閠self,靍t鈥檚駏ickly鋓scuss韮趽(剺handlers,鱤ich僗ll劙llect醼`乆r閚p??僎.議en€z儭?move殝?,?梠梚兟囼M亹殶殮剕溬c凁ed.詇€h?飌erat僅just靑k園傽s囬?堣cre?d叇audio匼,鍃cep啅la俙two個nes儥o?€庴e?唚唙x?咗咅??y??pr?ti側of偳仧仚匰伹伬obj尒嗭鈇ck屶??iable鋏fini圔s亐壀f??canvasApp?傾幮掵??傌圽吙魛pos??傦?洩傦?亾冦呭??drawS嘆en匃???敆敀€z?爂爄f亜.?X聽||€賭?猶?聽//聽Fir澃x倗偋€V櫔佡俫俢乷亷Y亸亱Y?乢バ?lse?亙off柸?€焵殕?O洷傁傁刉呥?刜乬呑亣亜呥乬?€?爳?x?冸佭??y??乄畤畤畢?抔抎T晽拠ηseU殫ΨΨΠ玥╋╅press毿?relea€iぺeft瓕button俬?occu?a韎ssi?濖f摠卭卭>乀??偫almo◥id傴i厫焿滸侽佽衡??剎烒?nclud唄佺佹speed佺t>,?????????嶛??璤乄?彸乢瓏.訂€硴嵦瘁iring酚娀篽礃爆€ぜR儚?僩????琂猺岪刞瞭動儌ship珴x-ax卲(?璷殞+.5*e.壙冘)壝?俉匫匫?勛勛ip,堗nu桟嬅丮朚卭?炌 -?卥嵶卾?炦炃炃?僩??烏?τ剫s.push({?:5,聽x:タ??h?侴?y:噀-嘩嘨,伮:€讉_俖俔仜乷?});墽??墂墂塸Nex峺?re︵y鉹彔々line帀cod?or乑su?atú:醬dio.苼歴Y杸a戄Spa浝RarsB傫box庤llis妐det幦€P傴僕啝傦3傦傠Be惱祤e绌q⒒ma埌par爒gam夎ogic彸hould鋓scuss????.譭頴ed ?線卼o鋏tect鉶llisions鈋tween鬶e韎ssiles€jplayer鎖r€坅nd€猘lie仺?閟?ing鮬on.詢(o?is,鱡鱥ll鉹eat佽鎢nct兏?at鬳st俙o骵丠he偘r魒o颾j?儼re飗erlapp?.苚r靉ck飂俻呚t亹name僢ca僠冄僄hitT內().

T嚢typ劆f鑙?兞?go?哷perform埩剚ed匢ound?box嬬?増厜mea姾埌倧倠igno€€嫏intric奩嶡ails凲€蒪itm?僪graphic崜simply匔??an俻v凘ble 鈥渼?鈥濅rawn?厜傆€Q傿each屧尛s堷th?僅ilar???o儕帳婯???Re?圶b佖???擱?t>噿丱丯柆乢乆dy懆ic揘we??d啠啎pro帎ties:傦傦x偪t>,??y???€鄧騺7??暪墛?暊戂was鬀憠?伩梬佔??coul??hem醩鏴ne?堝,鮪specif€爳(傾?on-s壈○惸灮hey騟p±en??漄?d権ny慄倿侺?鐬?(bos枅弶,餺峢-up勅匟myギ€€tc.),怋if閠?幆幆幆∧n鮯?s儔??堘﹪醙ain€榠t朹朹朹俕work玴y﹑燾奐op,靍ft,梐tom咉r倝鯽lu涚c丳琩??炦炠姩犃o啝?潓.陇_n澳匓瓑b?iscuss壺i€x€Q撍倄or="b儛撹u>Chap?聽8Space襛iders:?blockquoー?4???檦峿聽櫷image1,€:2)聽聽{
€Q€!€!r1?聽=聽亄.x;??弍?1.y??徻?侾聽+€n咈伩伩戵伹傪伹1.?佅佄2呄?呄?r2呄?呄?2呄俇?2呄伩伝呄傱伹2呄佅佀et栃伜false???if聽(€?>卬巋||€陞?l€髞a€飬€鯃h€靸儫€D伬壀儘?伬€?亣啩啩嚪?}聽e€葌€邆?tru??塆€鐏飖r椥?佺伇憋€8氱沜????4€xb>Play倄傋獓獓俹Now伨dy×p偁.拂?STATE_PLAYING??call磥汞伩>drawS妒骨骨狓备hi瑯??heartぇぇ?irp丏垛稗锤pl禜?們稘痁仿?瘈?労.蚾v?乿偁quieas垁Wep?rough乥array簣ackward筽upda?坓坓t>y??乖?椽郝佭佭仺speed??勮I?e嚝俬€r竬報嘐贱re?€癿鎟om哋?€靽'??缶 ?縇匞匞plice廮匷?element孁祱勡€訉賜ot醘f剐婼length嗞僷di?d?is,俹would?skipp粪af笯仭匃匃匃匃凢窏湻????窊o?(va€0i=抅.哠-1ヨi?0;i鈭掆垝?犼仴[i]?乭€痌.???伜(0-€荾)儚?傴?i,1)?€(??塯塪D?樑??漙ilar1??刄鈥敇ra鎒w鍃cep烓s.羴麜R查戧唱,€Zwhe烌y毃??摃暲va?櫁dow朹巜>20噂泚ix眻醤d鬶e?蝷卬騟verse鋓rection.詏醕hi€若he?al閚?,韚ltiply?speed.蒮傏aliens醨e韔ving鬿劽ight (俉冞冑 = 2倧t>),伆is鱥ll韆k嗠侘侘侓-?侙,鱤ich侞subtract鎟om侴侴侫x?囬osi壣醤d咺凔嗢啍left嚽€踙it€鎯de飦canvas啯凎凎??孆?aga巰b姩嶤i嚑屒俉屒?嫃?-2 * 丟媩墢錻u?佔佒?彚T囃伝嗋n塴彠t叞cau暊倗倗倗卄??add嗻?伔峗伔伆value鎜r孏鍢愻im??>drawScreen()俉侾搙called:

??//M?聽A惒
聽聽聽聽€!卙聽(va€0i=懹.length鈭?;€?gt;=聽0;i€悁)聽{?俖€ ?[i].x聽+仺€彃?伹伔€ if?乬佽儵€爦8C時.?-?€倓X||?佊l佈0?僄€W単勢聽*厐-1?乢€W伅y?20亸?€!}€莯穱g侴嘾嘷庴?侊€W刦咅lice(i,1)刜?刜€飥緭梹8?>?刼刪arra矘ackward)l嗁st盰a偸偳偳偳t>卌偡偟琡t個甯@y哢?€丁3埓rmine凱e儉?掂嚚a塯.觟nc??aalready?俻匫匫t>癶T凱?卋fun激倄on紭n?刬iscus窢hat僅pp寵if刉磤勅嶴ed.苅rst侭チ???play??倅幀伔伓expl廥Soun聪?挬伻seco憼cr筽?鞀Y偍?旲?i?a儅Spa奾Ra给r嶡i絧a?饏Ps (甔attempt曇€?價劉?s劰巐疊???Af凁侌a塇?澯呺嚪掔惿?捹傽丱栵捗乢乆obj儴s飖檜ir騟媓懝?s噃?線?k亣??儚儚>睜:?儣儛檡椄佲暟a€ no瀖left?shoo?se€垏蟼嚾ppStat啅債佽乢乛STATE_RESET亀t?瀐桓??韔剻刢緇c玧嶐€r幧屶€◢鑞?継卝燻???????le:粀籸χ粐粐粐癘€D侸旕M俒聽伻偨拆伩伅咖侀j咖??€爠j?俖侽凣凟A俰??j]礋亀€W竍ぽ咷e,俧)冪伹€W€V?nd.?冞?€W€3??伹丟€W荤荤(j伔?€W€V?儺仐?€W降€噣蔷w€繆??師帢聽&l巟0奜?€W啞浖?毾T匞乬凣€噣憸'€8檞>playerImage飊亽canvas,醤d€俧uncti€鑙s鎖nished:

??//D?聽Missiles
聽聽聽聽€!for聽(va€0i=m?.length鈭?;€?gt;=聽0;i€悁)聽{侽俹€ c?ext.埳囈(偆€j,?[i].x€w€py);倸偳倲}€?/倯聽a?n???=?????????倰?傠?€g咓倵咓€粚]P惡乄亀冪冪(?e,€c冃€L児捵€8?>Space襛iders
攽not釙 ll鏰me.讛Have杙ly閙pleme呧橦nough鬿鏴t栆卻€憇ho侤徟髈?楬?乥?sound樮o鋏tect鉶llis?佅佅鍃plod?佡.櫰?9??檥5€xb€攦@or="#8e001欯Itera溡#1:袃坕ng觾As誷€ia觻8le蟗j匵寚屵剙刧3刧刢妏jusescrib?牃ir€爄?of€篸ynamic醬dio厁d寈It鱫rks鈟醫tempt勆夝c???()?ゐ?僪both伩伩??佭佖峺亀乿屧亣亞s?ten€Inecessary.詇搥app珢廝喞啝坰,鈛垬f鵲u靑s侚care斞y (猭??€葎p唄some鈘ows枲韔re?戻?€?,撱帥槹r暼o掋鈥渙ff,鈥濓r?€簞€娎卨€becaus毑儴鯋紑9惛o惡?岋?€箁e??刢飗櫪€鶂I.羵厠7?HTMLA悏E淪媁婸w?呚掵ign採o飌捁圓咗wa嬋Y姌殹te摪€篹xa炑榈湜 d嫧?u?損runn唓⌒CH7EX6.html∶n?r葎?-co俙ia吶web宮.衦徣梷?utt側厛quick帹€Xpob凥坅彺愌h戦€榟ow?亁奨塸掄夝鈏懓€饄幾?仭wro宎ime,鋙n鈥檽Y?,彂€潖窂?╔?劯=0000969771?※blue屝u>Figure聽7-7w嬥h凾?焴??靜o烪l??a?妜2:胷e€h塜Unlim?d膜L炡т?ээ剣э剠So,櫬lmo?g旲垰€榳憄傽wi??爇丂r暟in?烝odditi???況?櫱?檞?擜洘佭洘洘洘?multi欋捬?f+炤had??搏嶗墂墂塼F敤毄seco侤坥ego㈧tr棙垐瀀€坉iffe▉.蘣t枲e?媃h珁豪墛s緫y銖艾鴚?????Кeヘθ?傄帣?絴啥眩坉oes泝??庤effici甶?樔me?y?▲坸别??r,儦埄a雃嗋ob€蔼bI?actu?刌hordea.萶w呝,靿tproce峢絁揳夨夠嶗blockquo壺?4??梡琍="c啝er妏img哫cindex?3?base?e"倊500倊€a儴/兎??"6???牱廃i牱牪剱撹.聽み罕??from魒矵犌爅側?厽棢匴棟In擄擄礨vasApp?偙楤will曶cou淨檧?nt硄嵏粯戉挕③le?掟瞘?暆o€@丄associ僅d箈慈s渀.讋$st€1re箻抪亰?γ匄????suppor傕?熦mat?噞攤?匬di爤?狋笰st?囸va?乵冏冎a儔Type僶灎varia?梒崯?崪?also孨獂rr煾婣d儻儻嫞儣儛卝帟熼塇hold糏呯?たた倧ぞ墇劽.裕賱蹆:te僢鑟w韆ny?謤咃bjects鱡鑑ve鉹eated髈€檆an鰅sually骵e鱤en醠l鑕€(b乭ks靜ose:

const聽SOUND_EXPLODE聽=聽"explode1";
鎢nction侎each?勜鋓r?ly,媦are鏾偮o孴醽譶am屝??儀S倅儳儭.詇is?accep廯two餫r俻ters嵥嚳嚳峠儚儖呪僟€9??俷3俹俴One?壛嶣an撾撆abo?that?tain厐乭囜佂売file嵾嵾?兛??volum?????倃>A顄mber鈋twe槓?傼0傋忦a厛??1??嚥represe埞嘺?囎囇愯彂囷囷??>T佇?he?媠s掕槹勏勏?勴鍁ery鬷劆it閟楻嵗by槯槯偀?儮Elem嗚昈橈橃??乆doc圚nt伹伬DOM勌.蓆佡n?壾properti嘆(倧?rc俫t>,儻?πp???扥?>)弬attem泜崈?.蕌st鎜r囇,靍t鈥檚饀sh?媗in佖垏兎?s兎?﹂珿愾樓愡樓傁偸宔聽⒖僯,嘖)聽{?聽?嘔丷玆峕.彑彊"audio"侘佄.嵏Attribute("岃",聽+."€B?Type???崙?false??d.咰?€[??d.?€绮u.?(丗?}宊矡溸??溬愡愛s癑歒彲岀寳?敽pass涘椕?s.????儦i兎>煚ntMouseUp兿摎媥ks靑ki瞕擄擄囷兛僟???T,.5綏????璌?啩僌rawS?en啑啋Π啹啹啹啹儫儫啹僩啹啱EXPLODE喛喛喛喛?懛鋓s懯篵anvas鑟w韆ny抎扽ha簚呼掆ad?喐?d??叿????埱吙収収埱?皳€恊xt.綪lStyl湗湭"#FFF€"氂?llT€H?("A?v亹娛s:伆??length?聽200聽,480媜媜媜呄呄吺Now,鏾醜ea???example缠i>CH7EX7.htmlFigur?7-8髲p?hat ?Space襛id煇?熰a翰#2枾e.蝟ti乣愴悎?so緲挼媮??bottom颊s悞懝凒搹搶are囌€柎?賝u姲??cov?two閟su鉴wit妨姁叇掚olク屒拰li鯽堾="1"?€賮???俫??厔?剨almo?n?aо媃囆loa墆fr垹a€p├鋜擷.聈t??ag圶嫎亣亐rem処webs嘪,丵墤?鋏fin丳僯鈋fo€衑ach動俫??ed?惏li埧?埧嚄埧埧埧?埣numb峱忴??勔毞犺object㈣嗃hu坄锤blem.苚r搒br?昿,髐??Ch?埢兿釤Z?caps飲X?ab€I50.羏懶伬at,崙巓y丅ll塤塤/ol?坥燝坥"?ign="c竊er國img巟cindex?0057?basel巔?500倊€a儴剣剙€g仦6???獥寗唸?="#剺"?-8.﹉?rs鉹e?銆€卆ting髈unds飊鬶e鎙y
<仭骾ze="5€xb€攃olor="#8e0012">Iter?內#3:胷e剝a觿懶ool?刜p凎="3冿冸So,頾w鱡雬Ddon鈥檛鱝?to餷ay醤 匞="剎HTMLAudioElementWe?imp嵥嗚solu掤t姳傽s??彈彈妛塴as鏴n昿l-purp夾俖弌弌??.讌keep嬇帢媔?chang?傋傋src偳偫attribu擆杧懇戼孄嫅桹a掟嶒ap曕rs€眀?錶eg???re塀噣much€A噃sibl扏憫ddi乲o鏸v?恏a巟t唝flexibilit嶡僢whi?惸勛動幭幭幭幩I?垏>昲vasApp()埱t>搝婤滀a頴w@nst兩nam?倗t>MAX_SOUNDS?t>壾倞熰res捝?maximum滐偗偗??滐??昲槝on巔ime憃al溫re叡飖r??娪?愥rr???亂仐悾t?desc捜e閰0桾:??崋4崌儻峩孂聽?聽=聽8;
var聽劸€覎?聽A?();匫??懐??T?big毉he嶩氾?傪攁硳抩埡func梚.伞"宷par€8墣橺€箥駀rom壭懂2,猥聙貍da樷刞潃y鋓ff勦nt????????聽唚姴,v?me)聽{嗭奯奯僩僩奬first鑑lfイ唦熑op?rough?勶摲摲旼旴啊whe佽场楬?侽璯璯璯氾段侚?瞚availa?窟汮d?mi涐焌by懆eckρ??儉en度冏冃propert玐Sinc恆ly佔佔???咟?h?vious俬bee简d?痶箊?in€袊?呯?呯兛呯熜se?侊侇true佺厵噄科叏s慩nish匑??.聐┽€s癕?亝remo€爞慽ssu奌怭r伿剱蹿笛勥娮娮娮娮娧壸笶hi悹i壺?l琗d溔?渨???渨?剒ΟF€)Σf畃eЁ€鸌寑x€?€?爐emp?€*if聽灀欼.length>佖炾?聽聽聽喪乸!?聽&€*冞冑&l?傁偹倴偪傏聽?勻吢佒[偡]吳佺€ ?併.擱呄?€D呯?撫偝?聽}聽e姲?€邆&剴++侊侇?€?>€3??匫丷?????亅.氳Att?ute("src",?聽+聽"."€Ba朰Type???挴??d.?€[??d.槞?扮扮椬椬椨If澅don鈥檛瀁氹,滰犢樌畷瑲沺les?瀇欑>MAX_SOUNDS劎t>?go醜滰傟c潗湼a頴w侴侴牊牊倃cai玿佔佒垱亣?穮喢push∈嗼.圆9kee负嚖from鏴tto靉rge啝?ma硓su甔?啫€ noo€鸶槄7???竒?brows厚t?ne鬷me:?鎬?/p>
聽聽聽}聽else聽if聽(soundPool.length聽<聽MAX_SOUNDS){
CH7EX8.html
閚鵲ur萒ML5-complia彣web鈘owser.蒼偒case,傌鱫rks!賱冐r鍁e內嚶,凜he価鋙esn鈥檛鋓e靑ke?uld唸th単 #2.?嚳3嚳嚮Unfortun?ly,僆re醼 som側ssues.蟦€儎$s丮?still狃aus?e倄?呺饚榿hjust匰??羐ain倝俬happens韨)often鱤€(?pag儕嬹ed鎟om堗鍃俻nal?s傂乣€皝矆竵噽0ally?a?寈???">T冟??manifest呫of?埲?n莖ogle胔勑幚??呇坆s?庛ti妏€鄖媌?ed圶lso悎n苅r奌x? 】【湼?t>惂銍饓@?釋纻object?mak暪剼hoo偁??explod叕丄捔?擲vice鰫a壪壪壪捹h-oh?look孒?e頴寈ano?恎. Figur⑷7-9厵ws溼Spa卄Raid厁滘???晿娐煥啒n劯烉?媬嫹t>??坴宲ign="c珸er偢img騟cindex?0018?b犎line"倊500倊€a儴οθ€g仦6???磜嘍i媉媃#剺"婫-9.聽姉姁??奰?俋?塝憞11??剷5€xb剹剴8e?匵I?4:襡us帺Pre焅膀彁?剋晱晱?Ev?ough榋c楢減#3鱝濸retty鉲eaバ?si疕y瑘d顨喇仠u┼Inst瞼爤椳to p?i爛毄侎?妟lu僢?ess錶eg睝,鈛t€颖a濟?n别凘??冑?Tァ?ma8叄b湪¬勓牶珬珢獷楓姉姉姅F??fi?奛坖劚goo塒狈溌抱???窓成op€褋*a?ff粊ay.壮亖 寵r?猒炵>儦灴猦﹦?倵勠?帶???珚块宭up墮崺奞?峳a凮凮凮凮処怤cur凲?唹be壯啫帬I?匑c僗剭鈥減r?饀mp,鈥濄re??re?????錫ch飞?two嘦硆?t?€餾ix傔傔傔傔傐?呅贺r噥怷pplic疤Wh嫲扖m夝囻seem愺?er囻柧湤?榩?渻ai樶we堭憅€8br盭?屟樠啋?偵mo?娵iv娦挵?棢棢よn囩囩canvasApp()?t>崅set妸伩诚诚伔>▲?爔嗎伔伓6乷??c?ma歲t鑵豦r欳嵸娨exa?枟im乆€?圷numb絸廀?丮挗ɡ業:赶纯赶墢?塺?聽圇聽=聽6;喦策槽審??國?n匛旈variab濸嗛ho堌?凮僠HTMLAudioE??曶:歭奡e奌pl鄙?鈥o坥卭卭坥??卙聽偓兑聽;
?幧??sho?偵廮倧倃倃嗺嗺嗺倞匤?€痙2€穩穌3啑啑啑????刜刕init??fun熻禍?醠l飂鬶?雬€卐se sound
??explodeS剄聽=聽document.createEle€q("audio");
?body.appendChild(倗nd乴佉Type?supportedA€笷ormat伔伔€焠d.setAttribute("src",聽"?1."聽+聽僃??addEv厫Listener("canplaythrough",itemL嫄ed,fals?俖俓2???????倧2厙€焽焽焽焽焸?嚙嚙嚙嚙嚙嚙俫俛3嚙嚙嚙嚙嚙嚙嚙倧3厪€?嚙嚙嚙嚙嚙嚙/>shoot榞噺噺噺噺噺噺噲倃乗€弴_嘷嘪?嘜嘜侘杦??????侺杇???????匴€晣O嘜嘜嘜嘜??嘩嘩嘩嘩嘩嘩係?嘩嘩嘩嘩嘩嘩?卂€晣W嘩嘩嘩嘩?曌嘩嘩嘩嘩嘥?€8?>The揅push錫ch?閚to飖r曌??Pool儫暩array.萶w旽r,晿is鬷me??m醩鋣namic颾jects儤??骵t梑following餽operties侤hi?don鈥檛鍃堭匟???HTMLA?T厀卲冔橲??橈偪偦呚e俖€9??俧3俫媐顏栾f厷婯fil烒o饚?(agai寜ithou圼ex?s爛).幙幙吙僟吙吙e?呑呑呑呑呑?referenc卝嫍?嫍嫍僶嫊???儻??>?ed偡???倃俻A聲坋?tha娙ells鮯挊e唄r晄寭h?僑飮伀8not.讔鴈€▉Z敿y鈋cause?ar桝tt暪廋€鄦_?僘哤?s涀殜,鈵Cy劺癏凱儤en?ye勑T啓m嗚泩?澂儚>豪夁儕?噳偭俙傘?o??tru楋?冡?丱峗儑儐嬶嬵榰娦read?槗鈥攳俰燄it匳??屶wi竌?I?劮?ギft??淁凣徤犺捵簢揥暻揥暻兛.?({?:"1"?滛:癢n盗?:?}窾俹俹俹俹俹?倃倃倃倃倃倃倃?倃倃倃倃俽解俫俙緒侽侽侽侽侽侽侽und2,聽pl?雬€卆yed:false});
soundPool.push({name:"shoot1",聽element:€扴乮3€皃l俉俀/tt>Now鱡頴ed鬿韆ke徙hange閚飖r <倷骾ze="2">鎢nction.詇is?s傎suppor侤咘s饏鑙ng?Chrome,鱤ich醦pear仛be鬶e飊ly鈘owser€坅t鑑s?sl啯傴sue啫th靜ad偐?傕t凙manner劑e鎖rst鬷me鵲u?俌亯刧,兞r呉a餫use刞fo€憜tarts俻o醠leviat匒is?e倠ea咹偅typ?c?u佮e冟?volu??婏婎0姧t>奬will岓su?厲s嚔嶈a€pready偐?傾噖勧c厐儚儚亂挷?巣垎:

<捒挧挧挘??愅聽懽聽{楆€*聽聽聽凮SOUND_EXPLODE,0橠??D_SHOOT???Level(€莯罀餝t崍聽=聽STATE_PLAYING?剹乹}?毀毀???????偪櫙沗per勜暵?imilar鲙Yo撊€閬9#3.蓆徖op??ugh廽儳儲⑽儣儛arr偍?k檌柪拞汄?can?.萶w?r,歯€hs?梛check炾e?he櫛刜刜刌HTMLAudioE剹剱瀴en朅(佭佫.?.丣?t>)飏閒吷侷not漻e?偀偀佇!偆?俹俰yet.讻(lso?嗙澿al坺嘜傔嫞倵嗮par畧??t倛嵐佭佭>佔佈r惄ty飂仹仹?伅>颾jec?n??悧仧>?乄嫷劇 ==?伅塇牱樝樂樂牱?牱牪樼?,???€3var?乊F€)瀝窧焔乢乚I懤x乑0???temp?爋?€ if聽?絡length聽>偍厏亸€E敦l(!収伕amp;€*??&l倅??坥?????嘡?[?]圇佅€W?(洤洤聽||聽欉欃劯咷冚應??堊僄€W€V堬呪tru巼?€W€D剣剙佔佔乬€V}聽e憍勄€還W勄壿++偪?€W}?€瘈飥莯暁嚦?歐歐">Us琷hod琤竣瓻only?甴€脦?醽悁恆lready€遥i俒f曅盽a苞僠ne€io?穩r▓?use€賮?(mostュti瀽僰傄s厹t?et?muc禟丵?hem僩If€蝝o儼係磌禒儾€蕌p鎟姼,搬set╣?MAX_SOUNDS孏╤僪a顄mb瓐g垬囆瘚€膯爡皥紕+勴do塀劉will銈"叏w????s?儝f嶺(al廐縆徆愌髏傫give鵲u厾嬰礰圞娟rom€衱eb?r洁揼厪厠?漐炵栂溚獇?毧??烓皼俁€[仧?仧爼()甮乷?玾??)??儑?doc勦彸E嘂("audio"刲侊?叚昤Attribute("src",変聽+聽"."€B倐Type偀?偀夁夁夁乷仧夁壿?◤塽push({痽:接姳嚉:俷€爐匟:厼€垽K:璉}?岋槒ㄏㄏ昽昽昲G澣h??try檏code溹t?CH7EX9.html闆3?鋓s嬘ion∈毩⒘?乁program靵h?.殕勛勛?nt骾ze="4?顎?>Other髏uff鵲u鉶uld鋙鬿閙prove鬶e鏰meSinc佀next偙ple鉮apters閚trodu?偭€鴣ppts,鱡騟ally骽凲n鈥檛鏾韚ch鎢r厇with Spa?Raid偍.觮ill,閱swer?oing唩finish劙is兟,?se醽(匶€萵gs伿m喠劻s傖垁€?嚜a/>wait()Exam聽7-6}€_倧supportedAudioFormat(a€a偽偅var聽returnEx?聽=聽""??if聽?.?P穚T?("€?ogg"偫=="probably"聽||聽??€!????冟maybe€q卂?€!厳厳"?;?}姞媝吷吙儣儞wav吙吙吙儚吙??吙吙??吙吙??媑呯呯兛兙mp3兙咓咓儳咓???咓咓?咓咓咈?咓咅?伔r乭侘侐???梞S朇撹勄剣傇M??仺傐偡偡?倗偗燾ons僠STATE_INIT€﹪(10???LOADING?2???RESE倁3???PLAY倁4?滶app???丟丏?C├t??€鮥temsTo侸?僃lienImag僑new聽€zM乬爉iss?亀亀亀乿p?er乷乷Η堖堒OUND_EXPLODE摣expl彣1撟?亄SHOO媿"苦ot乷乷燤AX_亰S丷6?厡糂Poo咐厎Array嗙乛劕祵€€€????d3?刉?€騹還還?€鐎鐎?€鐝E?爕嬤€庁ouseX伔€縮eY€繋邘貕:{x:250,y:475}丱掲?妵Array()?鰛?
聽聽聽var聽missiles聽=聽new聽Array()丼?燾onst€鳯IEN_START_X伈25偡??_Y???N_ROWS????COL?8??僰PACING?40?乨if聽(!canvasSupport())聽{?丅€Wreturn儑€?聽}?妛爐heC??document.getEle€YById("?One"??啓tex啫?倊?C€?"2d伣佹function?temLoaded(ev儓?僄爈?Count++??€?聽>?倯sTo偐俹伔€3shootS伬d.removeE冮Listener噿playthrough",?,咅alse圵偗偖2偡偡偡偡偡偡偡偡偛3偡偡偡偡偡偡偡€2explode?偪偪偪偪偣偗偗偗偒?偡偡偡偡偡偡偡偝?偡偡偡偡偡偡姾倅Pool.push({name:"僤1"壺e?:?n姂僆ed:偮}傁傁傁傁傁傁傁墆傋傋傋傋傋傋傋傋墴傋傋傋傋傋傇撘偳偫攇偗偗偗偗偗偗偗偗?偡偡偡偡偡偡偡偡?偡牤傁聽appState癤TE_RESET?亅猳€妧︼﹄nitApp(ァ=ハ?9€飿/唹璷璱cre厾瓌("audio璆佱乛body.?endChil珮偡d仧圷?Typ坈s雏edA€笷ormat佺佺卂⑥setAttribute("src?暒."聽+僿滸侴侱add煣煣煣煣煣尶倧泤????????偧仹儚▌坃坃坃坃坃侽侽侶坓坓坓坓坓坓倵倵3坓坓坓坓坓坓坓坓偧仹儚?坓坓坓坓坓侽侽侶坓坓坓坓坓坓倳圤圤圤圤圤圤圤圛偋亸僟樧??????圇圇圇圇圇圇?????????槜僶€茍????????????倗盺????????楪僶€茍????????????瘇lienImag瘍new聽€z(兛?€?on?乺?乬乬乣喨丣"€?png"乄间r凎凎凎丟???乷乷?€珓乨missile???丱並???亀乼?€磩/墔ppSt損?STATE_LOADING?聽}嵶€yfunction悙tartLevel()聽{?伱€3for聽(va€0€傽0;€R<€HALIEN_ROWS€?+侳?侽r(聽侸c?嗻?N_COL?c??侽慦s.push({speed:2,x:ALIEN?麁€卂START_X+c*ALIEN_SPACING,聽y:€攣Y+r*
聽聽聽聽€E€W€3??width:alienImage.€妭餳eight€譭.€搣);?偪€ }€莯梹杸c€巉unction聽resetApp()聽{?伋playSound(SOUND_EXPLODE,0???SHOOT??startLevel(€莯繿ppState聽=聽奨TE_PLAY堗?乛???聽drawScree€p??坾//Mov僅missiles??for?va€0i=?.length鈭?;€?gt;匬0;i€悁儈?€E?[i].y聽鈭拋葊痌.speed坥佔€!if刞亀?<?(0-€荾惸)凮?€W?s兏lice(i,1學丟憌?€縺縺繆蜛昳娍娍娍=枈姱姱姱姱?俷?嚵x聽+仺€強伹?妝乬佽儵€爐heCanvas涆-?€倓X||?佊?0?僄€W単勢聽*厐-1?乢€W伅張?20亸??€噰g噂懱嘼嘷懁?侊€W別憦憦?刜愖€縺縺瘧塂etect聽Collis濦懣晣晜:?溓溓???偀傁爞JtempM俒Z殫]伩伅?侀j??爅?j?俹俖刉刄櫼凘崿j]婫亀€W?hitTest(哤e,俧?伔€W€W??.5廮?€W?ⅶ?伹乬€W捪伌j伔?€W€Vbreak儺仐?€W橑€梹菙蠆讕飵锜{=焪乷€W禬禬禤RESET匞乬凣€噭讇繖tBackgr?€飥靋ontext.fillSty杢"#000€"冿亸亸R?(0,晿€ 狑€棥噦w勭Box€穬'?stroke効"#EEE€効仧仧仒勈5?聽€1凮勞泚厳?€聟,?'raw聽P棎er€??d?Image(樫er€b,€c.x€My???聽湆Ψ?撨侽吙吙吅偆吤Ψ等€w癌?偳?€繂蝺澱€喛喛?啹啹啹啹侽啹啹e湏啗肚x€g?倵?€繂岲T傽€飫毀曪#FFF€曪亸亸l倯€?"Activ佮?s禓"緢聽s€yPool??200聽,48???€宖un傂o眬?i堁1,€:2娙娺?r1lef勑哖亄.x哋?top?1.y??r沬?侾喪€l?伩伩bottom伹傪伹1?佅佄2呄?呄?r2呄?呄?2呄俇?2呄伩伝呄傱伹2呄佅佀etval伜fals祵?碂?€?橧卬巋||€陞浯i垾€飬€鯃h€靸儫€D伬壀儘?伬溸亀啩啩啨?晉聽e€葌€邆?tru??塆€瘉聈r棬?伩亸??eventMouseMove(€z?傳??.layerX聽||?麁€?聽聽event.layerX聽==聽0)聽{聽//聽Firefox
乮€!€E€Emouse佡俫俢;伩?亶Y亸亱Y?乢聽}?lse聽if聽(亙offset?||?€瀱?Opera傁傁刉呥?刜乬呑亣亜呥乬呝€瞼還紁噝.x?????y??乄?€峟unction勽M伖Up壂垯亣僌傪issiles.push({speed:5,聽x:卭+.5*€cImage.width?倃倵€ y:?-傸伝height,侐:€讉弬弬o€!佀仧俹})埾佅?Sound(SOUND_SHOOT,.5亜?佺???s€1,volume奊仹€3var聽乑F€)嵰fa曕儑乢乚Inde怱0???temp???€ 樎俠Pool.length>楧亸伅€ wh夽佇!厳聽&€*?匇&l倅??坃?????嘊?[?]囩佅€W?(?.elem涃e伻倫?!€軗劯咷冚.nam噚狇兒堊僄€W€V堬呪tru巜?€W€D剣剙佔佔乬勄€飥W勄壽++偪?€W??€飥莯梹棆飯G壪?嚨昒廏廏廋嶕収??夅泂俁€[仧?仧媫(爓乷?睧朹朳?MAX_S)??儑?doc勦攛createE嘂("audio"??叒兵Attribute("src"?匉聽+聽"."€B倐Type偀?偀夁夁夁乷仧夁壿?搘塽?歛:ǐ姳嚉:俷€爐匟:厼€垬S:?瓍??€彫楷籸un(??爏witch(appSt孹??燾a?STATE_INIT:??棭nitApp垷€還3b弜k€飪?LOADING??€!//wait喰o?call偍acks?乷儚€飪弮峈ESE啑?€2re換啛€變?€績?PLAY啛?€DdrawS楬e?侽???弴€弨?theCanvas.addEv搥Listener("mouseup",e€罬€qUp摖烩凣????move侴seM€€俉劘搶etInterval(敯丠33?/>?€儯/script?€ead€杸綽ody丟€坉iv儴tyle="posi榿:犡bs?te穉op€?0px€hleft€u"?倁c圧梄d="€cOnewidth="500€hheight€s?聽You暔browse€Hdoe侶no杙suppor€HHTML5聽媱噂僛喦€葊弨墖邏tml€?tt><偵骾z?6€xb>What鈥檚蝒xt儛冿p俉="3俉係Since鬶is閟頾t徕ook醔out€萫葔 儫="2儤?噾嚄儷鬭g,鱡鋓d偄c?r鍊(y醩pect飂傝at頴w娲爑re.蒼桜ad佲f禈sed飊??s伾刧刦凚??傫could鈋鮽Yh唡弻譭愀歞魒o閚-dep?lica曖s俒mak??勃?倉侙鰢!differ厁鱝ys:醤釁 鸪 r倠€a唜ne倄n墍a倶a绲▉s兏ny儍s鋣稑劙lly.膗ring乗rocess壒learn唓€羶珓皡1姲hile坧伭a鱫nderful?re,?嗛?i嫎pit⑧ls?go跌檃捬旼掲掲>I嶃n敔婜伻p匤will鍃p偂up?las幦?嬂鱡餽esen?卼ed鑕re,醤d鋓scuss鑟w鬿閙plement鏰mes飊萒ML5胊nvas.

Chapter聽8.聽儍莿0舠s剱ials卙don鈥檛鑑v帥spa媃?ov婙凥r冃ype?勱you塜倫鱝?垘,嗋€爤 ??e楏a俋唝悅med嚬?pics嵭cess?廻韔s檇.羶 勅e伻奐帡帡咜a鈇sic鉲o庤乣A儛i嗻亪l婡€?i>A擛roid棸i>?嵎€豴?roug姭喴i?冋?b?ir?屄巌so€笍<敀iqu愯哬draw?梑rans€╩偑s媓ecif劺?our傭厒visual颾jec朰T冡嘢elp鏴t亗fe€Hw€ 剱tak刉刉凾塇帄?previo漍奓???揗椄arcad梒?ic呞.蝒xt?槣?????欳愌丷?抃mak咗毀殹Follo??儻█⑩o嚝俍嚐啗lgor?mfinど?氂?傝?€葤j塽焽剻?i?d?oduct??W﹫猄宧瀦???澘倗個Pla???嫺rows漻h爯??叡歳popular醕tti旤I渁n?︷r媓俋g?戓b慬?埳dir旞??祊梌庒栫県a刄匘枌fun刪o寴it?k僪???韚ch唨狧powerful採n?囆啇e導?導導對5將€揷瞂r="#8e0012">圠C硏咢恴Fh峖嵎嵎嵎儣玥炐捪ш?ear樃r湈猲睭??a靉r婡porき娻d尒瑡曇烅尷嵉d慻咈膏f櫒,産楤柸剻?嚁off偭simi懕峗峐?erta撫?卼la秹?撋岺re傝?f?ur箼f?峅壘4壙壔N媽鬷mel侶仾龟quo湼嫃佔佉Th婡椴豲-よ嬌侺楘ani琸rinヱ???me堧〗ne犥oㄨ啞瑝倊s殌榊€xg/僷pathK仭own?偢upds堭????淨sp牥靑st???伹>娒AS3弇崣總氭id濄?碿僕働;攼犖?add鑥nd?廈挵d禷phy婅€H?鹅?兩熓s玚e拆?擷Ιon塸ⅷ姞l??劇(眞閠self)夨夠?爓圵爓爓爓爓?Do巿勡O壣爋爋儚嬤儘Eve?ough俔欦欟檸撢敢€箥粓t?m崑nic杻?,垐?so?傭streng擧?匴掞匱A恛嬱st枠??嘩?>嶹岄s鉲o?巂k¤徿啌S偭ば瘶檲「ctang耽pie?埜?Пl鍎H己堣撫b??t?g毎測摪ly.羋vanc€貎兌煩魞恛gn?劒拕€a叓恜灐叐bot?懴="?BitmapDataLog??恄恄恄?篹giv枲u娏挃犨傋傂?嚬徣弎an梙umb恱l剹伹t塦瑽u嵏Java?榵ol?圦俕嵢墛me???痷嬟妎奿our靜gic?唨卆l鏰me颾jects鬿鬶e餳ysic€鑓anvas.
Our耡兝莿橦TML5苅le凁傂亖€8p偡="3偡偝Before鱡髏art唩develop飩鴄rcade嚉,靍t鈥檚靜ok醫 Example聽8-1,?most鈫r咺傄劰will鮯e閚丂is鉮apter (CH8EX1.html).譭?亹唖by佖ing?傦5鬳刾at?defined?啑啈啝8263啑啑啇C凜聽唶唭.蠅袗K咞be?200脳€(髊uare?屝彠岏4岟彜i壪壢.聽T咹彛?? 圌咓寖07714??????€8亁?勻???斂斀2€xtt><!doctyp吚岄>
Figur淧8-1閘lustrates偀倽2302偀偀倶E凨偋偋.

<彈??弞醠ign?碄er傌img?夬dex??4?bⅳ"倊橓倉201"儴揋揁€g仦6???噭崗i??┭"姉-1.聽T?勦ic葲h??埉?€\??07714儫儫儫嫰>Chap?兏嫙傳嬻?汫嚳嚳>N挔,鲿苂i櫪o韆ke飖呰i>As僷oids?-li€術ame伆hich佮鈥檝旔€燿亖Geo耹a伇聢亖?觘?囅嚿1759掔??婈7嘒晎姳熻狚橖final勞閚釟"?伻€2mbp:pagebreak慉€瞼*昦塛9塛塖??€xb>O?G儀?s膃s?嬂匴冃倗3倗們a?鏾o醩su咗ωt鍁eryon屝ho榒ads€括╟忹雗痻囜坔u橜rn?Ai剼c?攜arcad崼巼巹尷o,靍t亽▃鈟鬭kú餰ek伹伮亁倞-?y錶em櫲踩煭囅囅奙俖俍,鋲鈶饍蠩d蘯g冐瓙L话襛ins揾?r傽熻丅?廔1979.詯?pitt?a靿醫riangular魒o-di?s惱慔vect壺sp?ship (?player骽i?杸卲)醙ainst骳reen醘ter€mof醩€€oid騩cks鬶at頴eded鬿鈋鋙dg€hand鋏stroyed.舦ery髈?t偙髉ace骯uc傴would錸僘th€竷鋞tempting傖倀?play劰hip.

All呏s髏art厜侾game€仂arge啱;飊勦€饄鱡re鑙t,€|匤split閚劏two韊dium-siz偁?.議?伬鈟噃厊missile俠se伹伷?€鴑??sma?傯T?€弰絠mply?嬐鲃E(亙w嘪嚬final亹z€Xor釅ds)姏??妡嗱孏儑侸€蓚n,國new?韔姌慁sl債厫f乺仹唲appear噏i€槓饘栗nti?冧exhau佇d?嗎?惵?At錫ch 10,000-po妏凥?mark孊?埳awar朓an偘tr??坥坥掔喒抧objects嘆v俙(剱匄?,峢ta€S國/嫺flo€?鎱笀Pacros?噣i匟壝,嶩i哖repr懾橦??旲冟歬?倶湀啝ne?唄創?f匸sid佢?,閬 嬕re嬨媺?opposit伋丂n墄rp-lik戻a?on?div>G娏Grap?s:膔aw牘with衋thsN?Asset妏奣姱姱姱?>F呚噏A???,€酖eo耹焥Basic?栢?牥娚眘嘮岥?撻clud宧:?u姽勛勛?li鯽lu?1"?€賮??bl狿quo?俫?烻勮l坟black鈥(ground孭?塦li兛="2兛兛兛兛兛?兓?p粨墇猍? (!曺捜煇or緓奐焎?侭眻?fr?s?nimだ侤敊t曖冑:偢鈥湽餿ic鈥潄搫€蕜+€螆穲穲?埛埛埛埛埛?宭auc埌垔fli呧噊硡矪hoo瑎毶瘑勶勶勶4勶勶勶勶勶??S?垬贱垝奐硋濦劜?畱棝squa?宲毃?厙厙/ul湳???侷廀diff€€熰metho?e惴Y儤oy剻d吂?:鈏tma┄m勜r皤?茊鞊 Ю憭chap烜烑foc?s猋佷In <蛋ile?=?1180798b尭嬝u>C偝聽9國a?截唨嚚ho唄o縋nipu赴e??嗙?s娤U嘕?凲倒塀秠?Ma塸啒rac啫喯?凮傐緲挊瞷┣鈛t餺werf?wa?mimic??秢?c瑺???昉could昛奯奭彧pur?痟冮怶崲?攊go埍刪悗漍€▽~佖冯?no帬?n笻??.叹4祭櫫嫉??價e怇p忥嫥4嫥忥忢4応汙蟥獋o璈(1)帍帍帍傦潧晥囸併屘偡p瓥漚啝?歊20脳20杙id,※??個??01942???Figure聽8-2???塛唎┏align="cer傂img騟cindex?004??baseline159倊158"儴??€g仦6???嵾疾剤?澛剺"圇-2.聽寜?p坒漸劘庍刧庉爇巠嘸慩HTML將餽es?d峅峅12302匞峅岺Exa烸卆1峎?爅牋w漰冮??tt>扽Screen(??
鎢nction鱥th鬶e鉶de閚 <伖?lor="blue">Example聽8-2鬿鋜aw傗ship.

}炏€9槒泂€嚈1槺?€`align="ce?r檹檷b>DRAWING譏TH蠥THS働儻?儚儚"3儑湕?>T炶list鈋low閟狎efresh焵?戓?p囪s:冪冪噴ol兦兦兡li鯽?"???偋俫???>Always髏art咗new匤?厤伩栕栔帶仐仈call圙團/l噂2噂噂噂噂噂?噂?Set?€讍?灣啅仹啅befor?壻痓边??単??3???????劧Use?combin︷媥of嶨?囅囄?嚙?嚘?俉€邆W俁?俉??>壐?匭m偍s夞pai?夶氊nes?坥??4???????勵E???榦唃囘囘?囘?囕?,奪ú??浵佅佅僄獓洴仐仐">夨?夢/ol>,???t>. Figur糚8-3聽聽聽//€?聽background聽?聽磯乄牭墵lSty哘=聽'憠€';乢乢乆Rect(0,聽€!200,聽200?秬?;
聽聽聽context.fillStyle聽=聽'#fff€'乢乢f€@?20px聽_sans乄乄.€)Baselin偰top乄乄凓T€H€?"Player聽Ship聽-聽Thrust",聽0€ 180?俉?/draw亼€瘋troke??乷乶beginPath(塛€.moveTo(10,???噄?9,19???0,???9€€?0???侙???聽t妭€蟽鐑?,13傦?呮1???凁14??匃18??婘??????弿強?€鐃.close?/>}
<偵骾ze="6€xb>Animating飊鬶e胊nvas冟?p偋="3偋偅T仺p?髼狑e陰樸勷ted鑑s魒o鎟ames (st儉c醤d儉忛),鈛t伭can?ly鋓s倷釁`ngle侂醫€恡ime.蟯r鐎潃頴僅to體itch飩x哸伋of僪??b?d噀刌?€i?p,勻i劆傦o騯勸?丠o伕is傜咞ccur.蘣t鈥檱萢k吀駏ick靜ok?僸code傂cessary債墐呧喬?.嬺幏幏?幏幇5幉€揷olor="#8e0012">G偣T呹Loop?廮廮廮僌?s?HTML5慭騟嗻r厛喐us妴rep?upd€@/rend冃?p峑imul噳?.譭鋳碽y俙敼俌?="咢蔭vaScript鎢nc傃,鱤i惱巣勁?ca€€a?呇孂choo冣峘m仒ise潗悎儗s.臿倄€紒皪?怬嵸閟韆?up?1,000倃nd?If棭wa嗋彿揅冃30壸壱cycl孁p撫?喐櫋?擪仚?? (FPS)騻H.詵4僷唌僜?倆fir澿棟i?呺寴30?庘sult?岡numb儉??ds?鍓9僓:杅η揻4揼柉彠彚偢s祭FRAME_RATE?30┿va紷僥?€?呅/仐乕戯l(絙涏en線?侚捪?瑉?呑呍B捤曪哋哃儳曠曗擵?泍?勦彺n?????1勆?€`align="ce偙媤?1???">NOTE坥埱儚冿冿?庍僶垚Some檻s榬?f拃?囀甼?釛憚%倵?i>乻矵kExa呧殬8-4杬彶卄r內o糛c櫱櫱>棸硤Ap地櫙鉲ass-level鯽riab?pa塦w?殮j垇abov??溈溈溈溈塹T獻卹b?懭go焿forward€A?剣s嵑并鏻obscop杹s?剹剹噺pp剰剨obj啺焮晣懴榓嬿-4.聽斞?斞s斞?法斠呉戩??⑦烑儚儚??<!doctyp?html>琜€賭?聽l?="en"€鐎醗ad€弨垺`a聽卲r?="UTF-8仧?title€慍H8EX4:聽?聽A唥聽Loop乊/乫侖scrip?卆="text/ja?€簝Owindow.addEv?Listener('load'瞂攛ntW?L€榚d€爁ダe舶?挜乄乂()聽{?€*聽聽聽恄?}?俫?)???揌C?蛤尃um凁.getEle€YById("侰"僜?if聽(!?爘|聽€噦!C徹墣?佀€3€Ereturn;
€*€媣ar聽context聽=聽theCanvas.getC€?"2d");佺併if聽(!侅)聽{€鐏€Wreturn?凮俹€?/c兒App聽level勱iables丟厠shipState厷0;侚0€bs€癷c,聽1唗rust僩?function聽drawScreen(?呄偢upd傿埨兦e丱丩€?+?€韷J収?gt;1儑乄俹乕=0俹壏€焻?聽background聽a€)尮乬€ 峔.fillStyl夳'#000€'僩乷乲Rect(0姲€!20€30悢亸亸傳'#fff€傳乷乮€@丆20px聽_sans乬乬乣€)Baselin備top乬乬?T枹嬝"Playe懤S娙聽-?im?"啘18唌俹娾?仺€績'.stroke嘷嘷??.beginPath(壪??moveTo(10,娺??囇?9,19???????(9???o弨????壙???=梍?????厳o(8,13剰丟効囦1丱?丱?,14丟丟倧嘐18丟丟倗嵵倧?丱岟倵炵奜伔揙e懣€鱻馽lose捛?倗亝s榾FRAME_RATE暘4?i偫rvalTim査1狆/伹亸etI亅(猳殬???/>勏></scriptā€ead€梹恇ody€弨坉iv痲涏="posi畞:炄bsolute皹犺€?⒏€hleft€u"侼倂炽叞d="€c"聽width="€hheight€s?聽You墣brows?doe?no婡suppor€HHTML5聽捍?僀啹€皜弨墖菆辴ml€?tt>When鱡騯n <倝鉶lor="blue">Examp?8-4倅w玴骵e鬶e皤j鬆閚€殘Xer-?傂rn€餺f€蕡#.詟`桔醤d€貭憖抏s傮al拃n€€飊錫ch鎟ame.

<壐刞€2mbp:pagebreak?€硛*a€x堢9堢堛囉siz拹6€xb>Applying詒窗for睜?s鬿莾枨raphics?垷剙?3??Our鐏釂瞤robably鑑ve韆ny墭卙idual靜gic€@dis姪颾j糎凐hat頴e塇o鈯鵧埲d堁a?ngle報鬷ck.讒J傴k乣s?嬰敁?ck (??國掟s劏()揙t>岒乄乂restor乷乲func墛),伿冡兩t?€饎纓rix哸ensur?fin囆output醘f囀on塜懧urre?垞?a伬work峺on鈥敎(乑?i€鄵T岤怬怬?怬?5怞槸槰#8e檟嚾暕?稰ck渙恛恛恛僕?梒?巿嬌庩巟岒夞re?e€葯yis閫m?a勦w炋?婠坅佈ani媃€p撘?beca寵??佺梂嬰嬬嬪俫??嫃嫃炣bas炐岡flow鎜r恅剚?嘗a傆looks靑暊t噚:嵵ol姀姀嵻li鯽グ="1"?€賮???俫??S湙噺?匥垬€眳倰€俖弜li?橀?傳?????寀??冓嬜t???3???????R摛嚀敳?from圙??/ol楋傜傛As啺宀?靍t鈥檺@et?懌ro肮?懇??pσ狟?e閠鈟 1鋏gr磒盬盦觟nc梤?幀枲姽攅傦垫top底底?,倉go?o韔塸凘濌new朄c?卝d戓澣涊俀嘒嘊唫¬冿冿嫚?擸€`:€鷄xis靜?蝷卌ation鮯ed鎜r騩t€揳nd骳ale飌er€.觨,閒鱡雃pt鬶e骽ip醼c0靜剶?刯勅it鈟€0s鬿p-left鉶rner,鵲u鱫uld頾側ee乮half剛time鈋ca??傼仯b嗮f乗o?儬傭edges€貈襝anva囙Instead,囻will餷ac伻???5?????.

W凈呧using?a嘓HTML埲de醩閚 ?color="blue?u>Example聽8-4,鉮ang僘out飊ly弌哶哬drawC墇()啹幐func嬃.詏仒僗if?is鍍訆縭emov娒??媃S惞??variab昲?concent暔庿n?柋c€:€y.讑Gadd嗰墭thr?new倴s醔??嚄嚄剹嚄:巶a/>舁凥s鮽@偱€竾plcu瀤€?蒼?n倄???唄ll鬭k嘆?ep垬look嚤som圚f伮僶僰?w甴儶in飖r Geo岿€YBlasp耡sic€猤a?

G?莚aphic詤弲墤X懛?傁3傁憂嗮saw喩慠revious壡?抋e嗋ly戶??鐒 ?壥op-lef怸rn垁by墵ing彑彑彑彑彑彑啲.萶we?,?凃尓ne敻?勊obj吶旔創盎慩€hr€悊H匫匩.詏鋙€豬s枃c乸g晎刧刟餺i哫儴?戓勎埥刱怌??孫?堭5?€揷olor="#8e001壐R姕P灮Ship鎟?謤卭m鬶e胑nterT佮code鬿騩tat€P€榩layer骽ip鎟?its銉"餺int閟醠most鍃actly靑k侂倐used偗?醫€騮op-left?rner.議€衱e頴亾modify?凴價of併ranslation.蒼 <囇傴lor="blue">Example聽8-5,凒嚇c??immedi吀-刞e鋜awing倫?x哊?size="2?tt>x,????).詇妜ha嘂eff傎僷岅嗁€箖攺z峅峅蝟w塈mu彣mov弅専n嶉?慍唗偦:擩a/>NOTE儣冿儚冿冿渨嚽僶嚴滈俥€讏晛蕠o???€還邅鷦+???variabl斎repres垚椸tribu晈橋nip瀽e啺ll鉹ese佔s闈袃湠?9271凮卼嫃瀲瀲8-6瀲嬬a??.尶尶ㄧ"1em寃ㄣ櫒€no煁on?chang?make;€塧lso€秷箟?aough↖υ?nt?仒欩is?sub梮湢hal?啛???each????尛尅卶path呫sequence,払?偀扺扺??亣?乢????檁檁偳??めTo(10-?€Z?br/乶lin乯9乷€c?卭戇戇匃匃>As鵲u鉧n夽?彴m乊鏴?筙ttl笽nfus?ry€:懩隘檍惐?n?I讳揱sh毁mor?rocessor-拡ensi???僪stants挂€葰榓s勦搎ould奾殘y廥rd?円桟枲va浶佽Remember,??攺壏窸丱懬懬恛?欭嗻bo斝??2穏?穀懓?叞ers促?look髈me姁垬lik?is撨?庯庯撨?撨撨0,鈭?0);聽聽//擯10,聽€9擄擄9,9乊丠9並€B喛撓撓勭勭ア?嗻od鱤e壐庰ualcu官巑 (擊嶰啹嶰?嶰丱嶰乄辩s)晀mu燩?flexi€罁竓冓峸呍仌侙s柨柨. 鼻鼻迸監監監監?槱tain殎l?椛?墶ei€恟劕恫ha殸commd?八娤搯曫倉忱掛嵡嵡挜i匞匑.聽Rotat岏?ima碃its弊垚聽聽聽聽€!context.rotate(angleInRadians亜伅伂//drawShip?€鱾痵trokeStyle聽=聽'#fff€'凣仧仜beginPath(冿乄冸hardcoding聽in聽locations乬偡偛moveTo(0,-10???lin?9,9???俥??儣?-1???俵劯儳????埾埼*€焿fus?th?width聽and聽悑€萶?alcul忴??唚o(10-抈?,€Z捒佅佅呄19佅€c佔佔佔佔儫h,佅佅佅単卋儣伹伹伹儚幠伹匴佅佅佅懘佅堢伹伹*/?€穫嚈硺??close?俫徬/restor彴伂?俹熡並俋伖pop聽ol?s爥€`??screen僿侽伖ad亹?渀??€?+厽?}
<仚骾ze="5€xb€攃olor="#8e0012">Alpha痞皀g鬶e衛ayer应兤?p兎="3兎兂When犷ew饌Cs侤閚 Geo€YBlast€養asic€猠嫎rs?game髪?鱡?ll鑑ve閠鎍de鎟om魊珸par佇鬿飌aque. Examp?8-7吶ows鑟w?剱徖?i匑冮form嵰?our呉.?岟堿4塆岟岝4岒U圍擋global?attribu実実実?">To鮯厃e ?="彔<挔??揼t>儣飂劵anvas寠si壈y骵t寫嬥彁umb巰betw嵏儚儚0?債nd??1??be?嬭e浜◥鏶raphics.讓邔贀觱ariabl憍尦笀咘lle儳儳>a囩兠?傪h撃煇?ur揨亃??鎜r?梘p劎in劚??by冏冏.0噰噥unti伬t騟aches仹仹仐亹僪泬?actu?y圲攗曨淍咗t偡偡偡岉嚇n仺ar?嬇level.萶w€Hr,圍榬demo漘jus?p凥儜敞r倸€I橑曌橑橎i溩溞.聽?熰?o剼嫰i榹?傳傳涚?圍//栿Ap??聽?s?€?聽x聽=聽50?€蘺€蟺蟺蓛騹?€飥韰C€鱻鱻駬r€陘绲濛??1?乨func?聽?S()聽{丱磄傔傔?偺丱乢珋lSty峺丠'#€'亸亸亸Rect(0,喨€ 20€30具伅伅??fff€?亸亶€@乧20p嵃_s瓲亣亣亜€)磮elin?櫊亣亣剰lT€H€?"姑聽股聽-嵻"?18嗊俉媑媑兩佢??亄s竊();聽//€Y€趣?聽潏t€€i廻€Xck???etT?(1,0,0,€2偝聽re?聽to俬d傌ity??乮竄l兟湼?歓聽orig処?€丝"€萬€尀偀?寖偼(x+.5*?,y€Y櫍妼?劄桱犃€邆邍鷗roke抴抴仧仧仛be唒Path嬓兦丟兞hard硃??a涃?偡偝mèTo楡-1???敊?9,9???俥??儣?-1???俵劯儳????埾乷嫹k曆???close?俫?/斬tor拋伀?俹俲丩橳po湼緃?on?迉?聽to聽screen
€*聽聽聽聽€!//add?rotatio並?聽alpha+=.01;€鐎鋓f聽(?聽>聽1)聽{丟?ha=0?€蛚€梹`/tt><偵骾ze="6€xb>Game蟗ject衕ysics醤d羘im坘/b剰p傳="3傳傮All飂飖r鐐筼偤s?€萴ov€恘狒wo-dimens傴al餷ane.譭並use鈇凥鋓r??侚仒t鰛榦rs鬿鉧lculate鬶e鉮ange閚€r嘩="2嘝姼x婏t>???y??coordin?s鎜r錫ch嗙ct.羣閲very叴level,鲉|be鮬d奨ng勈delta?(冿冾d?凁)?亙y亣亣>d厀亗嬭???嬝€鈌r€眽餾im夒娸.詇e嬭僌僌勏夌???>鯽lu壚?堭ed??峏l€1??嵮whi?壻a傝両咞厑?媭?logi??s?y?儔灗?ir騟sp?擑収収喿喿?喿?喼劏?仐搊亸偪?搊?偞峅嶛f佽淺?檡yer骽ip嘯not櫔stri塜僄?剋剋???>崢ca偣it頴ed噝?ab嵢€Xfloat俍tur嶉depe€(ntly.蘣t鈥檨燼k仒鉲os厾look釒藛<炂now.?????吶5?€揷olor="#8e001啇How蠎0P僀S墆W墆M儛?︾︾︾兛俌嬜嬙摠枊峱c唄?axis虿寲纄椕湚侱p斝s?€纋ef妅r?醨r咗keysɡ佺佺佺Ⅸ亣,婄匫榩cceler焣(thrust)㎝吽?厐fac?.聫軄r€鄐岃攛掕哸appli濸楏?,?垞奰inu??curr?刉d冘u亹??ff儀?奺乶狕?冔楢€ph€x?婏?煱嬞?a?w夌夈垘夬涜c?gain攐惙4惙攐攎4攋?哢俋betwe匄娪凓棎€X撨撨撨?撨帠can嘃??嶨僷猵庌兂宷媁t佅.贫鴗姽reason?働㈤盤ply?clas?囅??????猈o兏屃劑啈?縵苯x偤y氿e樠丂嵭嵢ep鈕th骵稱f偨綑?Aa?tim佲懎憞憙亇bu堷o€悎?奨埡▂厵draw亸桳揳俴?担mi壚宲pro?€X僩鎸8??als穂倕庣僕漌O埬-勱皼?巕圧孫孫?X寃t>;?y倈i?侘侘侐Y侘t>.丟丟摶?愖乢乢偀?嶢啟玚d?朙坥??was餺i琀d???€^岄fo?僤a??亽僿??欁穏穋?┥ext?冑潿?挼冝??????窜?des偘傜?橈?毐ward鈟猍寎碐ey?媿??傔剝onⅧ€佻I佽瑿?Si咇栢kn傪坁廼焋?錫汸y€Xlcul儅拨?嶀?勱€皫衐d庘実旓朑朑朑乢朑乢?篃毾侘侎??????ttri?°?擄愾愾愻Firs?c沊g壔婲from慲greadians:?blockquo嫲梍僿梍啅唹var聽?InR偅聽=聽凖聽*聽Math.PI聽/聽180;?€9冏嘷="?鎬?pt"鱥dth="0€`>You鑑ve骵en鬶is鈋fore鈥攊t鈥檚閐entical鬿鑟w鱡鉧lculated仩e騩tatio?rans侙m€{俒閠鱝s醦pli亼o仾player骽ip.

facingX傝d乢乢乕Y乢乆values鎜r夒curr墄鋓rec刌.讌@nly鋰箒wh婸?a埿go倫垕r厃becaus墥丳an鍃pensi嚢哢嗿processor-wise?could噰噥侶each鬷m?嫓ch夬叞夌夌傝bu?勈so鱾篴dd鮪ne儵ary?飗erhead:?a/>T犻do匬not颿僠∷呥涜涁濣up雃偘i>.蒮×did,亀??偭float;瑲€宧椑?倛瓊僀dⅡ猨modif娨嗙嗙??????frawit??榑?僕乢乢榑儑s楃挧拸拸楃傔嘢?x+則栯y€獃€瑫鲿鲿鮾褨儚儚儙4€xb>Redraw盧幥幝敻start醼笟0僠兛悍悍僕As鵲u韆yl椸挫fir張dr欨儭imag€ǒ仈皠p檙ha?杸i呅e寑(€ytop)?卲??up挭昘笡偵ea漻乸嘰?it?暽re?撾be勧珟i厫hi稟o侐?椈唗兏劚瀴犫篻n冸讽al糡.詥崉h-?儑佳ctu剘崗?-9孈? (???27??)鋏gree嶽瀶呰wa?o靍幢e粈y墾恖w嵿瀈?is寶will?澢??棺寡剣吀塆犘?ook靑k祋i???柗柗兿兯var聽凎凂?(惊PI聽*€h搆.?聽娻聽))/聽180???刼刼?摡€soug悜ode摑ㄐrk惱in懶?椬涙b?琎be抈乸??叆魊嗋€鄊摏.羴`tt侾method刟倄kee偢??壇峸墖峸峸儞哘榖涳匨檟€〇〈僌僋斪傖楓(篋r娽)敌a塒le禶=0001051835弢color="b偍u>Figure聽8-5?ows鑟w媯蹿?is.揥揥庯庯庨醠ign="c?er兏imgindex?0087?b(l廆"倊160倊€a儴挿挵€g仦6???椷婌i堶堮#剺"堖-5.聽j揼圸n?嬔0??奆傂榃収榃卂榁?察?╮彈宻梎iⅲ爂爂???儻垙搗//fa?g聽捖簰c?ext.簮eTo(鈭?0,€2)粵???€饊讈還?€讈瓊梹鱽聛總弨藖蓘鐏瘏G匔?尟尓塱屜9???5€x鲸懐懆8e沨夎C€╮ol冟皨P懗S氟it辅€↘eyboard<?鰛?font>
<€]p>We€xll醖d閚魒o雃yboard鍁ents醤d€ 醨ray颾ject鬿鑟ld鬶e髏ate飂錫ch侎餽ess.詇is傯llow乯player?dow傂仾?have閠騟peat佮thout?pause.羠cade鏰mes?quire偢?typ?侾-凓€鴖pon伆?a/?="4??<塱骾ze€鑰xb>T卙嚊卐our嗺es???傳傪A夣坖壩儻="2儴tt>trueE僑聽8-8勷湪絘ntire萒ML傭飊篒gain.?圙圙溑i僩僠.聽環troll??殻骽i金iщ?傋傋煑煑煉<!砅typ儀html&g睂€賭?聽l墣="en"€鐎醗ad€弨坢eta憼har?="UTF-8仧?title€慍H8EX8:聽S?聽Tur犘With聽Keys乤/乶侢script籋卙="text/java€粌W蜂扏E幅梐ener('load',?€筗?L€榚d€牠隆\?乄乂(檉槦燾an?App(涚倧倛乢獙???C??屝um?.getEle€YById("侰???!?爘|聽€噦!扱壐煆?爎et?倧?????傦傦("2d勍佺勽侅?????ぽ?敻岎旔劏iables
<?卋r/>聽聽聽var聽rotation聽=聽0;<€€鷛€?€蟺蛓€蟺蟺蒮acingX倗€鱻鯵€鱻鱻餸ov佺€鱻鱽鐎鱻魒idth€?€飥韍eight€鱻鲌'onalVelocit嗢;聽//how冐an€燿egrees聽to€ ur墾the聽ship偋偅thrustAcceler?.03?乗keyPressLis?[]?墭unc?drawSc?n()聽{?丱卄check倞s€飥雐f聽(僕st[38]==true)係丆俔?€蟺迏歛ngleInRadian垐叏扥*聽Math.PI侶聽18嫍侴慓佮亃cos(偳偭)伹伹?伳sin伹伹圇侊?佽€d+峎峌*勪???€f???凮?}€弻菍菍?屌?凎屻媄摾counterc暊kwise乷乶尫鈭拲7梍y?匃匃匃匁9匃匃儚匃効?効劷+劘劘y;劮劮€帳玿+?乬そy€軐??聽backgr?d杫€(tex棁婇娻xt.fillStyl啇傂'#000€'儻乢乊Rect(0,?€ 20€30朩?傋傇fff€傋乢.f€@?20p國_s?乄乄.€)Baselin偰top乄乄凓T€H€?"Playe炐S聽-??"唋濦毾妵tr刋form?€摺O溝匞匑save()琤€Y€萿rre垇s揔i俋€Xck侊侊etT?(1,0,0,€2們刪e?畫id偍撪???l僢瘋canva唄orig冮皕€蕚?o櫢€妏姴俹?倽(x+.5*店,y€Y礫憦伅.氂厪厞盝喘€讏穞roke撶撶乷乶be?P岪?倧僝hardcod沨孠?庲??▄媥嗎€變&漻eTo(-10,€ 囷?.枆??????1???????1?€?1?????塯丟嬱妋€鐎岍爏e媑?estor亃€飸?檮po瀈ol﹁橽洷晀scree漮?倧?樔FRAME_RATE慗4??i棛valTim択1/伹亸兏etI亅(??⑧??囩佂docum氳.onだdow咢僗func搃(e)磄?剆e?e:win仒.ev??禇C嘸oleLog.log(e.?Cod?+聽"僸"峸伷缚父仸]儾?仐?啅啅伻u???僶灢仴body佅佅佅伩圙圙圙?圙圙圙圓up?伔???fals??幭>垷€?lt;/斃ipt&g匋€ead€梹悋鶂弨坉iv?="posi圷:赤b唒ute榅?€?灌€hleft€u"侽侶id="€c"聽="?€h€s佫聽You榅brows?doe?no?uppor€HHTML5聽C偤.?僀?€垁弨墖焾秚ml€?tt>Once鬶is鎖le閟騯n閚徕?,鵲u骽ould鈋醔丂to饛a佖e鞀0醤d騼)雃y€纎虻"?s?飩纓s愀裔xis.蒮傭俫up?,伔will慝垊﹢眃ire?俻厑矉.

Giv倶價P胶觿Ya蛥癿um謊婐ity媤嬒??3??噸偢€纓h?拱嗿Examp僵8-8崜壥撊i?w崄o嵭ms:

<?杸卭l鑕ight="3pt"鱥dth="0€`><亁倧倧倝We鈥檒l騟solve喓first閟sue鱤?w儴tart鬿鉶d?comple卙game,鈛t鎜r劏w,靍t偢s垚ok醫鑟w佱apply釁秜e厁ity€醥ur鉼rrent韔vem€I僫.觰ppos刞僠i?乊player坈倧acceleration?2國啂?up?卻??凗X侽???佺?凖???剰剦幯n€恱is鱫uld傃崀敤乤€X卛揙俒?p??榽B?嶐嵣柣冧alm炶哴?垝i>x燘€hy€j弴?倛鬷?T捪捪嚙嚑俛唌i浭??勻mu劺u橉a鈦Hmo塓ath嘷嘷嘷嘪F?漘a焫?h卲偢嵱dd兛勭variabl?塙:儂a/??"4冪怬怣偍聽僗V?聽=聽2;?€9傜嗊?傼Nex喰堩mak嬭u惓嬁??劎栂?凣栬掫嵂執忚be?e??僿亖new????抁乢乢烵沇汸s○崿d勯樶ith??崕s慖d咘st慉劖?儻儻???乢?乢>滒垜僡柊歒?ied憦幆帡帡憦僩憦勪New憘€|+thr徯A皐n*fac€?
≮se伩伩槒槒槒乢槒乢潔?????傔傏if婬??<狦€槍恵棦聽聽聽呬棗屭槼?厴???}哋??div€悁2mbp:pagebreak?€硛*噥廮9???6€xb>A耡sic枪镕r€0work冐???偀Now懂have鏾tte?fe?w€ (s┄òp厛)鈟鬭k?a餰ek?so?湼悪graphics,魊ans粓縌,?b厞phy€8??i兓箒幌loo?h匟乵struct禉a坧mp籤f囧?a???m囐鱝壺?嫲扻on萒ML5胊nva?瑎g凘?丣??st佈machine厫€閏喞t傎?.位倞introduc儬嗢鬷mer€蒭r梡鎢nc?顾溞?墦fin唸y偀?勎reus冡颾jec溕帀穜ispla崍?塠驁2剷儴runn啈in.虌靏忚嗻rted.湈抴???5?€揷olor="#8e001?暁S姎M姏櫹曶曶曶儑A導將?敔ro?mm岨奿垼?ow維宱o彔撯nl?咅ng奨糂c暿??n脆傽?憻?刼??杹c冟e?i>傋傇
GAME_STATE_TITLE颾ject鎜r錫chばat倢?ain鏰me靜gic頴cessary伈?伃o鎯醤d€乧hang€襛伕w丩whe?ppropri€?聐鋙ing俻is,鱡鉧n酲饌鷥醩tructure単劉乤嚝by噣mply兓倅out??e垁of佊刐埀i> (as倅嚶refe嗚?m).???Let鈥檚鬭k?look醫€Pve塦bas夃€Xs?凥嘫閳H?.變試盿奧凧ence攼塸bl堘lled??cur乣tG埲S?F彑彏,釃9働€@?i堌g嘸?????e偪扨懅hol忦嫻亙廰lica唫嬅寛€H€貨:风椣婩4婫殫勏勈呧聽匃勼聽=聽0;
厙僩伩﹪嫃????哷?fr?tick.员y僠ows?煛e矏穖筀O~笎劮唎唎???倓蹿偂?幾幙幙????刣,聽?€橳im柛)?爡郑鳀穻/亄(????吳吳緊s?秡omple凋de綇so峘sh荷厱s鎜r佢庂o嵏妛窾乫.耬亁嶴丟丅rts,摋摋婄才瓧?橶on,坷d餫s?紘紒吘博挳惩a擆凎凎棁宊棁??學?????//***聽?礗?惂迪???愗劅惎惎剋剋">In <绝ilepos=0001069201?color="b?匵u>Exa憠聽8-9,?€咓e鱥ll鮯e鬶e GAME_STATE_TITLE髏at佇o鋜aw醽衜pl€坕t€0screen偫at?be騟丵n飊錫ch鎟am亖ck.

Exa?聽8-9.聽T叞ti僿剴window.addEventListener('load',聽e€筗?L€榚d€爁alse)?function乄乂()聽{?€*聽聽聽can?App(?€*}€_?偪亸)俹?var?heC?聽=聽docum凥.getEle€YById("侰"兇?if聽(!?爘|聽€噦!C婐夎哵佀€3return倧聽咷????傦傦("2d勍佺勽侅?????€?/applica妔?s?尙ons匄檊檆厞0?丱丱NEW_LEVEL乯1乷乷乷€ZOVER乯2嚄墂伕urr嵃G毿S卶????F憱亁null傳挧?switch佫(new€J??僌剣?仈効亇傘嵭伹伱榳仧伩桰s傕墂?:亀乬€W匃??g€礣単?€W聽break壏乄僶??PLAY忹匞?€W匞匞匔旔€侾layeL?嵞佔€W??乄??撉撁?亀€W??妛妛€鵒ver匴?€W匴匴€鐫O澴€彆冡??倃聽soleLog.log("娕仛Х亸//﹉秇?ackground聽a€)亣堓.f竂Sty?垹'#000€'?仧伅仼Rect(0兵€!20€30勛伅伅僕働fff€僕亸亶€@乧20px聽_sans亣亣亜€)B慲lin?top亣亣剰lT甁烒"娨聽S绞"唒5啓9啎?庍庍庍庈?楘????廂擸佡?儚€弮弮彇-儑僿儑儑儑伇儑儑€弮?爎un仭巾?沷沷伀(傜傜€?/***昉犊逗r暉??爂?偡偘偪偦loop?秿FR俼R俬應4寸村i憖rvalTim捤1?/伹亸匵etI亅(塴????/>垏>叄叏obj氳聽prototypes聽€趤g壌?幟聽util佸?朻?嘡ructor€規噽蠋潉穬U?伔tha匄w?€衋ddeo€賰乴ass侐?_摪壱?(messag?夡if(噥of(佁?!=瀁ef炄d'聽&€*???ull倵旂?楆冋嵎數€3//唜?/擯tic吳?€鈬貀囏ssignm椚侁妵僡嚉?g徢?e??仛?丼</script><侫骾ze乭€xb€攃olor="皔">NOTE儣冿儚冿冿"3冪冣>Ex弜?8-9Putting蓆羖l詏gether.

<亂骾ze="5€xb€攃o儦#8e0012">The誴date/Render (Repeat)脃cle兤?€]凁冏3冏冇In醤y飂飖r醦plication髏?s,鱡韥轭eed鬿錷ploy伕im丼and骳reen鮿阺.譭?埌h€鑜e鬶ese€踱y骵par侙?兩code閚傪dis€癱t 埀="囏?()聽聽聽?);€?牂艀?聽?€€2€*儑倃???/?聽椥s€飥雐f聽(€萈槕L礍[38]==true)厪乧俌€蟺蘶ar聽a▔InRadians聽=呰o瓵?*聽M?.PI?聽180??fac?X佉乯cos(偡偙堖伔伈Y伔伔伔嚽佫沸儙€d+?Accel禾*勀冞?仭冔€d?????巓寃寃宻7寀??//?桺c金terc曎wise乢乗孶鈭?€ealVe亪ity嗊劮劮劮劦9劮劮劮劧????+刼刼剋剈劎椏檝?亯x宺x+巹俫聽y€趛€軐剛邆邲畟邌爽?聽backgr嫄d棭€(tex槯宨宍xt.ЖlSty兝'#ц€'劅乢乊Rect(0,聽€!20€30棗?傋傇fff€傋乢.?20p堣_s槇乄乄.€)Basel礟亾top乄乄凓T€H€?"塳/寋"??浄?tr凁睒m彚€撷澐????勥勜sav?僡€Y€萿r?匵s敚i俋€Xck侊侊etT?(1,0,0,€2們惞?弜o?d偍昲???l僢硏傝anva唄orig冮侎€藗e嚢o?€妏眡er俹屪倽(x+.5*碕,y€Y??伅.?╓╓厪柈Ship€讉O埐trok秷??乷乴be?P岪禃?僗hardcod涴孠焾庲疵?﹥媥嗎€變&?eTo(10,€2??.朅??????1???????1?€?1????唃壡乬孫栺€鐎娅Xse嬊?瑡estor盉亃
聽聽聽??燾ontext.restore();聽//pop聽old聽state€`n聽to€xcreen
}€2€*?st聽FRAME_RATE聽=聽40;€騰ar聽i?rvalTim倄€?000/仐乕setI丩(appS冮GamePlay,??);
We靍ft飖t鬶e錸tire醦plication髢另achine鎟om <冑鉶lor="blue">Exampl?8-9鬿骯ve髉ace.蒼傋傇74865傋傋傋傃10傔傏,鲉0哖si?y骽owing鱤a嘖倹size="2倄夃g娻??Level()姱t>鎢nc垰m妐靜ok靑ke.As?oids
醤d€〨eo耹a€俾asic€阹e?屓f€瑞rocess嫨仼?鮬d叞s墿ensu?媞儴-o?render伣€襭扝?gic攂delivered?媺?凥敇a?iable騼@.蠜`w侌丵e働wh徛鵲ur傟閟餰rform儭up乊par€羺)椄o侙?use飂?f嬮?佈攜o匬(FPS)峢寕.耬low?a欍佮刋t櫫can鈧e倫d掗any刢劙銚R?儵乣vas:?嶹扥湩湤//***猦懣?聽聽嫽聽崁戃┅?仹仴()聽{????.悂乺丷瑠璽?忶T姲€鷑ew聽D€惐丱俿?L倶丷伣.澙璔亸亯悙e矐?€鐐o劯t?劘砱>?嶞坣.帄?s=埈?喯喯喯喯刧刧++€蹃爄f聽(嘷嘳聽>=侘埞+穒凮?€3C剐oleLog.櫒("仛聽琍nt"剣亞嶏嶏?儑卲伩伩??呥?伩伩寚?€鶎穾鐜鐜鎪矖??樧樧樞O煭?汿減in甔nc?瘨?c?穇毧?愶s???€e繝‖tick煈q倗倖俖俖?讌蘷ri?硘curtた????????⒄粭粨0948?粭粣ExaЧ聽8-11籊籅骽ow?he獱凊s鈟醖d?co碭儚儖7486?儚儚儖0儚儕.蚢k綀硥??夆defini岾徺?墽狑狋夌夃懃搐?孈???????墭u嵣??擩?App幾幾嗰b慼be??嫚inal侽侽<絏ipt俫俙tag.羖?nat?ly,祴??欚it噾it?w囆傳傳傰\??s,锘雀埡 朰.js聽聽聽co?Style聽=聽'#fff€'乢乢f€@?20px聽_sans乄乄.€)Baselin偰top乄乄凓T€H€?"FPS:"聽+聽frameRateCou丳r.lastF€﹢妴?8啳傔?/...Leav冐everything€`ls€恌rom聽Examp嚒8-10聽intac?here俁}偗刉凷唫new聽剒€譺(刣嗋s俬FRAME_RATE仛40€髒a?儓ervalTim?1000/仐乕setI丩(runG儀嚚佺佱儬/tt><偵骾ze="6€xb>Putt姁蓆羖l詏get壭冟?p偋="3偋偅We醨e頾w騟ady鬿髏art鉶d傎our鐕x.苅rst,鱡?僪look醫鬶e亹ructu侶of€妬戓nd髈€H€琲deas鈋?d€妼ious醠gorithms傱e惃o剅c劺t佽t.羏媭佇a?餽ese埜倎fu€坰厫ce咘€坥r Geo聲箒饦hic.堏嫙嫙?嫙嫎5嫐€揷olor="#8e0012"??愰訄晲専専専儳T姀姀妺pplication閟鰵悇鄊ila埌o學伿?嶫e媊o鈛ild錫rli?in乭?chap灆蘣t鈥檚鬭k?鉲os??俠?func凒崰?h懓€鄖孲work僗?婘嘩4嘩婘婖4婒夆?n兓s夨夨夨偋偁O晞劊h`螅鄋鋓s檂ct奯??.讈瑂to??s摳n廯?ants:啨炦嗭凮嗭嗧?<犡G⑨ST㈣_TITLかい??NEW_€yる???LEVEL?2???PLAYER€iRT丷3乄乄乁倵?丟丟倵_DI?5丟丟丄€ZOVER?6ゞゞヾ懐娗娗娗懐帍帍昰戺戺戺傦傞Each彔琾idua怸俀抇an醩soci€竏??bPall€鑰竐俼挡鬷ck?毾?ality伖揼厀坃坃??栭S叐Title()?囲媁?偳偯Display爔?t侷蟋8?text熩waits卹犼pa珮b??s?be?歓洺s犩???????New徤????傋傄Se咗up池l匉defaul啘a頴w反毫?arr埄?hol蛤ⅷ塓颾jec侌篴reiniti巰zed鈥攪鰡w唙lへl?t>稇愢o亸亸0乷t>,孼??亇sc?仧?傳?傳乛???妎?俉??L?岹岹岹岹傔傏In撊ase攃僌???valu攈尐ne?牗彂?鈥湁zknob鈥潄儉豲疩tro悑偮?ffic惾y.觘朣upcom忛s彉燅坆藘丐竨?a>捖detail?嬤嬤?嬤垪嬤eP斝er€Xrt嬿嬿嬿嬿傳傭Fad嬙?e盒raphic娯墄熞犆from岟刧拸屟alpha撨乄?1乄撠蟦th昿€媭plet巔尦洑絓嗚墂墂墂唶墂兦墂塹昗塯塯塯塯傜C戨?〗搄吺.蓯悾槚w剋剅upd刋?壔?乬乫render乬乥樊椥s鱡?€@矴€谐#棻筽?keyboard防put€驈tship槶???圤?卂?敍Di????傜?壶xplos?篭?啒€€whe臣哤p禒垚燳i絟€`h€@?a騼?骯ucer,飦x€Z韎ss炄攙e儫斂厁(?p勑icles閚?秬咊he鍃plosion鑑v€yhausted€閕r閚dividual靑fe鯽lues),閠骵ts?mo佇to€bGAME_STATE_PLAYER€iRT髏ate.??gameS?G€HOver()?€9p><傳傓3傔傐Display営鈥渹y蟼€鈥濗creen,醤d厵r?a頴w鐏1when伜space鈇?s餽essed嗭嗞a/????"4€xb>凚applicat崄func€Is側??偪嗭偧Aside鎟om匓叢偋n?傋,?r?€!顄mber飂?鱡國憄for倵怷run.臿ch偀亽刾ll鉧€(亁s€蠆Hs俍ed:???哤??婡etP嵿忕埛忕忕?偓R?徲?噃柎cent囒?怺怰readies槨圓€鷤彑枃唚兿唚唚>checkForExtraShip啩啩啩啩傔傏C侫啝o潃?帣?r骽ould鈴war?啝燖儼€豬p.觼罇瞖?A倷ing?屻艂鈫檿豼啅a>夲details餁a?algorithm???嚙???ndOfLevel妵妵妵妵傜妵妵妱枌騻s猍b慁destroy姩唜a鏸v€╨凒懷?f髈,up?嬜嬜嬜嬔09456嬜嬜嬓?旡∫嚴媜媜媜媜媜媜媜媜媜媜媖?lBackground婳婳婳婳偳偮F?渃canv狆w劺€俠傓嚦咇efrzick??????>?T?Style咃咃咃咃偡偛Sba?t俻?倄惏嫺€攱€w媓t北⒆n???僩??╔nderSc僗Bo?????傋傄Is璟曮??蓆涔oe曫d疿溉児,??s?main燻果幨ur匬t芇S??囩囩囩?囩囩烻Keys嚡嚡嚡嚡偀?啌傳傱keyP緣List?t>?ray嗈n韔dif氨玙圝醫tribut€貝閵鈦!va澵s園柫悁瑘??true兦t>塤塤塤喦塤俹>崜塆塆塆塆倗愶愱from単?GAME_STATE_PLAY_LEVEL僩呰?i國urn俲嬁俖匴匴嫑fun戓旡individual斴颾j岥塷塲€g壏??倵倵倰?????穐儚冿冿?冺T毐nique?鞊袐╞elow洡囯搥fe殏type浬厳厬.詇e俖(獮excep奲伕喿喿傿???)厫疯loop侾g倱?p倒窹嬧偵凜?ssoci?i﹊収収t殝?愮勭凥x?淎亐??y??沝冴乷乶d偀偀??偋偋?亀亀?Sauc??朇c€x??logic頴cary牂鱤e?﹑€坮e埳a?w髠鈮搧%any??縟?oul?i窗a韎ssi?a?テ櫩曇ul晼?晽?li圞="1"???倗楓€蟺藖彞飱彅煍煢?€o€kli?俌?????€蠀'????M娵纯単?€o単卍3単単単単単€蠀g"0pt">updateRocks()<伹?3€蟺藖弨纼閰?Saucer??勄€o??5?????€蠀/????Missile単単?€o単卍6単単単単単€蠀g単単単ePartic??勛€o?/ul>.蓆閚魎rn俲s鬶e俖俖匴侘鎢nction鎜r錫ch俙dividual鋓splay颾ject醨ray.壙壒€g壏??倵倵倰?????s冿冿冿?冿Like垪僩慻僩僩僡,伜unique€缝ist崍below騾r壦diffe€坱魕pe飂噖噐.羐ain,匄th傗excep嬺乭??垎P?埛匱?(becaus?re閟飊ly醾@ngle饋怏hip),匸儃仒喛will靜op€衦oug?彋亂僣s醩soci壈d?i€爣zand鋜aw伖m鬿侜game骳reen囸?€p?when乯?丅?p?rli€h枴h唄chapter壐熱????by韔v俛?translat傚canva?創poi?at?i?偂a崙o偦our?gi欻嵍W兡侙剺傫檂m乑?if頴cessary)?p廝偢儜ath凗垙n歄朾ulㄇ?<?1???槆槆€烯??????╃╃?俍?????€蠀'?????単単単€o単卆3単単単単単€蠀g単単単rR亁??劮€o??4?????€蠀???r倔??勄€o??5?????€蠀/????彠単単単€o単卆6単単単単単€蠀g単単単rPartic??勛€o?/ul>.觘挥s乸?Apply?喥膃t侹?嗺a綈兝a鋏ta傪?iscu?航?topic珡媟?????fire傽????傔傏Cre硅夃縢????縚道稓en笎?癸硅寵匶s既?嵐r?亀乻埿fac?堖堖堖?堖叿堏溝堖堖堖堖堖堖堖??s?堖堖堖堖撗伈埛埛埛?埼???収?匴?Di??偡?偀??n鍃plo朖??鈟鉧樌??爣?E侀d??,醩鱡ll€Achang?傃?a洶ica埡st?櫺??GAME_STATE_PLAYER_DIE僄t>?????傳?????="3pt"鱥?藔€卍th="0pt">Accepts閚鬶e靜cation鎜r€奺xplos€憈o髏art醤d€趎umber飂饊竔cles伩伣.boundingBoxCollide()閒剄y醨e?劙侫??fals????.觘e?s匄恲Apply凒?抮寫侸?detail婅敥?fun乥抩抩抩弿抩?>?itR侌????偀橶橶s嵃e妵僩僡x?奰??€鴜??氣?poin?歊?new騽餾旙will鈋鉹eated岮a靉rg廆r韊dium亗旈destroyed壪壪壪?壪匞>addToScor涽壸偪壸偋壸壴a鯽惏偢€9奱椦er?s傾?厇a/厽="9?厽厺5€xb??#8e?哷Geo耹as殣莑ob洶G?謅riabヰ喥??冞喿冚Now靍狊look釣鵱ti櫲set?g??l烶欌?pe圥兡?ed巂彊our亗?冐囎峯?>呏愩c厴rol傴ree?low??哤俖>Thes劅揅us勅棲tit棳鈥湁闛㈣鈥潈竔rs?ppear.寓俔坬張???榢onc哰朼rawn.讋\卭?媊偪偪偪偤,偀匬労崻淡spa兏b癶?厛pre?d€X?e韔v?竅?ex嘮幥t湢:曪曧€噹g?????聽嫐S犻ed聽=聽璪;
嬥raShipAtEach噂珡仧仧仛sEarned仹穳闯,??2770⒆??war开?P艃i觾q????姺?姺?啅?彶0惙爈evel€穩磯瘔獊1嗻?????璼?€?揙揙揙揙唶唩堿field慦?坓?佺???maxim??min€b夁?収憦???coo??剪僷煾g熆幏€噹穯W幏兎幏xMin嬜嬙xMax€?崡€竬乬€痽乬€竼G???勥">繗絼??喯?侘??偡?e擛?€醥bj涾煕?鉧ns独y??凮?凮???bigR侌?塉5?聽med€鱻?5€?爏ml€鳉,€爏auc?€?????呯呫?呞踞?nt?嚽?佺???so晲human-read€釋s柉th?騼錽,醠low?u岃o€癿ply€h?勫?st偁巠a靑teral傠巃亐n鉮ang併?悏if癏eded廹廹嚙廹嚙廹廹廰勱聽ROCK_SCALE_LARGE嵆崳??MEDIUM?2???SMALL?庯呑庯庯卭Logic囏稨梚楑?噊?????s峘幚?偹?arrays ?蝷卼o鑟ld鬶e鯽rious飥hr靜gical鋓splay颾jects鎜r飖r鏰me.觘e佲upcoming髞(ions醤d Array冭f虄訢冊O冇凧fur卝detail侌n錫ch:
<€囪eight="4pt"鱥dth="0€`勌size="2€xtt>垹聽?e€@=聽{};
?撔n??manɡf╊?we錸counteredrli劺i椛is鉮ap€袠[乣?cus?ima橝,騩t€T?mov??ship醔out歸s?en.讜hav柪lso醖d傂冣€痤ew匴€燼t鵲u亙no??鈋檲e榵壚??????匷.maxVe?it搆5?€魝"朳掽€虄S€讇議alfW伨1€飥鞨佭€鱻驃籵nal劅剻?r.塇?Acceler乺?.0呄喓棾Fr嬝歐?俖€蔲宲e樓樓瓘娺娺?嵡嵙嫃嫀埼?t>,乄乄?乢乊舰?亇噂嘾伔t>.仐仐刜乄>?乷剋剋乼simpl编t?梈堃俁€瀴訅癤s,髈n柌be鉧l碭deach鎲y鬷ck?m礖ip地尐彶s€皊id磱code.浴W????>嵕】倝numb濦¤?€訛bwill亪?呰tw湵fir??儰範Tⅸway,?r噚n瀦?佖爔奝ead妷珗m冑ordna瞲妟de€萶y鍁ery僠wi媂litt咅緒.獜獜晱獜?爣槶??嚰峱seo??true佺佮?囎餽e猦奫up雃厔诚诚诚诚喿诚?剰程Geo耹a娯r菎袮lgor壚ms??墬偳墧?our寑搚€(孭焗攼t峲gr悁d甭栯tou杊柂砄砄r.蘣t鈥檚砋?働岛o?topics俋w;壀??孡??de曫l€QC?聽9尦媷媷埱媷媭5媯??#8e?愋Arrays啞Logi焋膇s悏辖殞`?専専冞?u家?敇hol€x堣岺屓僰娙僯o僰狢??n侞鎜rKtyp?亄 (??r靶叏桮??>sauc?丟丟丟浿M???偩???仧?ar?亀乺).艊亯??嚴??坧€渘st.讐鬰?丳e?€`鎢nc?寉draw劉upd€釈娰岎宼揙粐従1廰徢€`align="cen暩?嘺1???">NOTE??儚冿冿摟?僶娙牨擑唩??cs?oto払?ilar﹝兡?岧蹿R?C矙er
鉧n鈋閙plemented錫sily鎜r鬶e鯽rious鋓splay颾ject魕pes.詏鉶nserve髉ace,鱡鑑€xnot偳偫俬m閚€@is鏰me.萶wever,€醩e傑s鱫uld醠low鮯鬿骵parate剴upd€Yand鋜aw?de鎟om€騝urr儓€癿mon鎢ncti?,亰?n餷匟€Xa?佮in?佱individual?proto嘾W喬includ啇a襬ck?釄纻8e僅of嘖chapter醩?鍃a垜 (see E倇聽8-13
倽€You€€ll巵i壗saucer啓d騻8€Pre宺n乭th餺姩s弡愋弍韆nn圞€檼a€pship剺p?/?="4冐??咷€鑰xb>嬦s?噖??3??T儼卌唞棸s旡髊u咅劰喰巂掗c堥wi敥r嫺u?r€競d?stanc侌偔嚋厙?tt>冴Asюoid侤i>⒁?hi?h?bo瘈sm?喲larg孖兪丂⒊on?g皑?o?擨卆嶀?Geo耹a僘耡sic僫.蓆?t檟м噊尪儸屵?O?28脳13鐁id (us刬paths),閠靜o班囼紵紱04243???Figur?6?悔崸澫嶏嬒嬍?ign="c戻er傂img拡cindex?0051?橝line"娇05倊226"儴?€g仦6???抴?i??#剺"圇-6.聽殹?鋏s俻坴佽?効擮剋?碐碐ュ匃?円忳磃?熜y繎i?渆偪?偗?偀倽だlthough叏€I煟濖?勥?斄冚.羖so,檿鋙n浝t?a倫皨;?is兏ways﹔at僟僟0?t?専佖so?tai婂?侾??z川靍vel墎ma樔??頊X惝榣eng欼fo姲珇.萫?偐堣s嶹爲∫灜砄灷偛de?l?upcom?s嫲園 :毞枾毞???啺ɑ.fireR噽籮嘕€薋€募迊噀De?亸亸€蕘梺梹蔆ount经??missSpeed傁€隡€鏳;幭??扒???捌偰跋跋跋??B??韨?€?脳2-pix?厒幻緂疅灖峯噚僰??歼仐?仐仐癱??p抭?y?囩囩熌噚mpl濜唺毤錸牏⑾欄o瀀?m醕ros洃?scree簇哫丂?cul撊?f櫋?s棁彈廮匴廮垙梾PlayerMi?迉卻sile.dx聽=聽5*Math.cos(€JPI*(player.rotation)/180);
newP€騇i?y?h.sin??????刱仈x+€LhalfWidth伔伔伆冦乴y伔lfHeight伩伩伕life佉60???Ctr????w勆?2???h??/tt>
<仚骾ze€鑰xb>Explos姌s醤d餫rticles偢?p偗="3偗偒When狎?,骯ucer,飏鬶e饐*骽ip閟鋏stroyed,€餫t颾ject鍎)€嚅nto俋seri€pof剣.詡x?="2??create?de()堖t>鎢nc憏銇*s儴?so-calle噖??.袃曖re僗mply劺dividual靜gi侙鋓s嗛?s垚th嚈ir飛n匴匴怚?t>,??dx??尒??y?嘓valu?R亁om厛gener橷ng劇se?韆k€0each嚙醦pea崁o鈋鮪ique圙喲ll€裺tor墾in幰劘劗戯勭>?ray.?旝扥扥>Like項媠堶?????崄嚑h搧嵐?憼y醠so銇Xa呚enough?form嚵move啽m醕ros慖噣懓栄??彔cul??巕髉an垑fram€萯cks:嘨溓湉嚐湉??熧??r庘()*3?丗ン丟丟丟乀floor?伅0+3佔??€x€蟺蛣藋惎"9???5€揷olor="#8e001壺Level薾ob擑?儣?撟?Ev廐th愙we顐`ォow怞l傏numb€皭X€弶,仚撻adjus洢?ffi憳ty鍌xy慀仒﹁捇﹁s鉲?ed.讈竷€燽1チ窣倠?variab?堢戹1婳涐曖re?牊牅be榅柌?begin刪ref嚐円nce棄丼?醩 k孄iトwhi??歺o乣淍肮s㏄c?.萫墿冧喤eu?勜卼傏氾巓毀憲埛厃+3堢悳擥愮?倇N徝崊曪曢?????lR侌MaxSpeedA憭 =妰*.25橭???僩僡偂x偘???伩??凧S??勑1+(€?1?????儑奯f?懜aneou紙儂娮吙吙?吙吙吙erOccurre旽R璹?*?叿叿叿叿?儁Perceh楎?傿?广呥呥呥俫呥呥呥r悽嫝.5厳厳厳厳厳?俿恛勥勥勥勥勥勥勡FireDe匇20-10?????僩係betw╕妱空厳厳厳?厳厳厳厭?2?????僌???l鎯@醫?皨???偳???rM垉惎.2?????僶侰涐??紈厳紈厳厳紈紈紈?躇G笽En擛集呑僩厪僥?n厵辫眬?癷宦偭?e€Pso睓ca?ransitio€Xo錳寴r峱new伱瞚禼next?.矡峅刜嚳嚱4嚭?凐啅啅啅?唻憭唚?厴ea箞fr匢tick.詤Hfunc啀do嘼?琾k靑k贯i缚怬怬唎唎摲摮?聽勨For崘Of?(){
聽聽聽if聽(rocks.leng?鰛卼h==0)聽{
聽聽聽聽€!switchGameState(GAME_STATE_NEW_LEVEL);伩爙€b}
Once鬶e <伭骾ze="2"><俙r?s偡t>醨ray靍ngth閟伅伅0亸t>,鱡髥們*s唹鬿佅佅??俫t>.

夾錸d垚堬侶?3??We鋙頾t頴ed厃check鎜r?俻飂€Zg傫on錫?fr€qtick.讇筶y??when伮player靜ses狍hip仮兝th娙insid屜塤塟儽愨P?Die()塤岪function:墻?夛嚽夛僕僐侻聽儳儳曠聽if聽(par國les.?聽>0聽||聽嚕Missi????爁illBackground(棗?r孒erScoreBoar??爑pd厾R朡€€€鸖aucer???P喤???嗺丟丟俓?丟丟喚厽€€r厽???厽???刜丟丟俒厽丟丟峚椦R嗮C峘ter.c€AF€眮唩?爙else彈??S榒s--?€龘?<1戇乄狦狦狦?€ZOVER唃伨勶€繄廵set垉圙€兿兿兿內PLAYER€iRT?冪€棶窞钱樊窞W濿>T?s爾€榓t€賑allへョュ鋟ringg牀?唎R_DIE?h儕.苅rst,閠с刪o骵Α?傝re瞲e??ng╤any饡祫蓞騝reen.詥慹nsu??w璻摳il?r鑑s鎖nish嚇explod?珤als?mak儬???俫r鈥檚順<偁v姼偔?i畝ivπ甇s髈?can?鉶llis宧s鈋tw?媜媜媔儥?貉a噋俼伩较较酵ga矘t乷乷s?籜媨w縛圇囆揾憄rn冟?tr邓?凘?傜?灁?剤?净杇紈杁Onc窸??憓傜噄埿乷乶嵳乬乣??lef挧摷,嶀sub嘝c夌偀>1俫槐rom匴乄圵圧仹仩variabl?叏佮n蟆驍i?涽涽?倗娏f?佭??仌numb庰寛堗氣n??嘷?崻a嵪9嵪嵥?="5€xb€敆鴒r="#8e001傪Aw洁艗騾lу?憲憲兿涾wa僅?a傖?r暱ps醫騟gula囸当v燻鈇sɑ??柸瀲?by?tt厃堾am稟飂餺?ぷ?櫷u浶?ie揱劏?頴w凧鈥攤冥Rhel勑us雃ep?篔?偐峔€p?侷ed:宯镑斑堬尫庍広板聽?For孃嬹(??Math.floor(?/姫亂AtE嘆仩>聽€苨E匯俹阀糠ps++€鱻魝?++狗?斶??圤圤??幓羹竾竻╥??峆?洘娤堶堶卭?e (煱煥侤decim擰stripp攊ff)?gre盒r?悋悋悆.蓡@ur???暩匞匞匒???lu暡伹牕0000亀鄙W??t?s,佺佺幭幩?绑仧仦僟僟炦简嫆??厀?餃鄟€?亀嶇堊堊侐wi戰equal??﹪絩whi挵? ?巰卼han鬶e extraShipsEarned鯽lue飂佅佅0乄t>.羘鍌Y髠`閟鏸ve儼o兪player,醤d凮倗凮凮?凬偘increased鈟??1伩劙

?="5€xb€攃olor="#8e001傪Applying胦llision膃tect€P儎,??y???€鄥簛7?畱乄乂噑乢?attributes.蒮あ嘮嘃ar嘪verlapp?,?嘨?嬅??孻僶磥?not,椐佺佺㈧?侊苯崡崝T?侽t>甁蚌()偋囸ㄨGeo耹aster耡sic璦quiinvolved.詧:?cod?ist?i啝ile玃=0礰122643??b锅?u>Example聽8-12娎嫃媹loop剳s愢?.誷儔們髐檟櫢夬揃嵃ow?嗁渷help髏娥m€;_籡肚焈烥嚡肚収參r伆s:聽呧?€楥tr=€贚eng皭€ぅ!=0€u--){噺凣凣嫇e桨妧塉through?幀剙ious?魕pe岏at韚st鈭牀懣醙1t飰@a嶱憟.聈涁e鋙庒鱝囪僷仛?偠倎w孭prev儁ly?嬂oy傁飻隆\槧o錸su??ew伕醡ou働?崗儮s噲cessary,伖hav搙榠ment僡騩u氳斮劆e€豲y?憠???b慀k?摳stat倰??孫孖H毟棈log?be槰尐€垊d?ol??捈li峆?="1"?€賮??愾俫??C唜?a嘷嘷昪噂?堔厫n囐r?挆拹??倉倃?rray墾匫€豯i?佱?呯??????剹>miss????si唃佔唃伔┄era??垙垙??playerM?倃堊堊堊堈3堊堊堊堊堊??Do埌b權d?box??twe廥暁佃?瀝暎€拪<.萎摕 ????€爜慹佇漍2?舶仏?remo滰e?s (w換勣よccur)瓻?with欨醘f吜儁€耺ember??ぱb唹yet婳婳婳4婳婳婳婳婳??If壖a墔啠d籃嚋唜m鎟om€Qir€竤p唓€貑rs捽浺ca畝挧?reak??瀫卭cks醤d鬶en <€侒ize="2"><伹?3??C呧inue靜oping凐rough吢嘐鮼(l€檡鑑ve醠l鈋?checked醙ain囙伇curr嘔r凁 (un?s奼奼塁?奜?was鎖r偘off??/剕鉶llision)堬堬堬6堬堬堬堬堬?堦嗰錫ch骯ucer,€oer堼,憰餷ay€缊m乥of€趪:.詠7do娙not愷?靉be姳caus?ere?only€餾屶囏偭ance偨俢偯??匥?桚乢乢乑M栕仐wi弜f嫧ow儶sam憗gic釒讉g>??.蓞殕砤?嚇tw抋on捜勮弒,欸欵ir槰sp橮i?墏侾ft奾檍曽堗歳?rom伹伵浺s懽懽懽7懽懽懽懽懽??O?w?檘?怓?欰厭埳鐘羺?伋€驄?徝峸婫淿峈?鯌鶏鏱as嵿?扝熧妡,燜嬃war叡爮夈棆岤乁尙o??a彉夨嫹嫶8嫹嫹嫹嫹嫹?潎墴墴?墴墴墴滝?墌mann?呯呮/ol>哼d⑶m椙??祌?i€榿d紶?瓙(慞犫监)剋燗匄s?m嫎?垷垷?垷垷垷垷垷??Be劯玴埊埉b涃?BoxC?de()??fun???u倫tha緈堃?房傔揋揋揇?亣抴抴?墎,髃i廀唒?嵚???4????????魒o?de剺樔??啹?啛?殶亣丂tru??T擧墯no頴沽o?咀驹╢?昫???5??????浵h桼?枷枷?涳涬浨??礣侊佽粵亐n沢????钵凎佺佺?佭寴姉姉姈6姉姉姉姉姉??W?ll棁梺-det嘪tin礱礍竴t攬re坃圶旂瓾惞 (ゅ愶)夿抰儱挼wit帶垪?嶸刋丱丱楃楃椻??/ol>
The莈o耹aster耡sic苪ll觨urceExample聽8-12骽ows魟豦ntire骵t飂?de鎜r飖r鏰me.賝u鉧n鋙wnload伆is醤€I?侞e儯?s鎟om?book鈥檚鱡bsite.嘊奧嘺4噂嘾i??.聽奯奯c鎶Ys奪靑sting<!doctyp凁html>
?€W€3break?€蟽base聽GAME_STATE_PLAYER_DIE:仧亸€W?????erDie??€W??乄?単単€ZOVER卂亀€W卂卂卂卂€鵒ver匴?€W匴匴€鐌€縺弨弨坒冩兾Title()聽{丟倓if聽(t?丳rted聽!=true)乬亀?illBackground()唚?€!setTextSty冡??壱ont?.偙亂€?"Geo聽Blaster€Hasic",聽130€070倃俉倃倃倀Press聽Spac?T傌懇倞2倝14倳偪偗€ ??帢??屾else壙€蟺!//wai剤fo啇s刐key厾lick伅仧岝??List[32]=?仹仹€3ConsoleLog.log("償p侷ed"?仹€W爏witch杶(槯_NEW樎?伹€W墴墲fa堣?佅?€莯棗G佭桮桮匓New叀(堢垏垏垈仹仯")仧崠?聽up聽new???l??0垙?cor嫧€飥邔XナShip斷?3???.maxVelocit憍丳5乄乄丷width?2儣??heigh喨???halfW倊1丱丱丱H偀乄乄乀ro媹崘al?唞媋ho?man€燿egree埌t漍tur?th夽s塦傜傜傖thrustAcceler?傗.0塷仧娂issileFr幚De€爦飦噥噧杘杘亀????盭d徯愰Boar?????W_LEVEL暃佭???棁静?儻rock攌[]劅劄aucer???erM姵???牋ic??僌僆侽??涊++€蟺蟺萊哷MaxSpeedAdj嵳€?.2?玱玦佺佺佲>旲3壏佔儻佅Т灟Ο?€瘋S囉ax歔+Math.floor勊/1风佭呄?厔5厙亸儑亣椷乬?€梺莈rOccur杊ceR捜燈+3*?俫?????厽佭冞佺佺冔3??€梻'??1+.5叿亸叿伔伈匶匞乷?亀?匃匃€梺讈誇irし?20-10?伩?佺佹<20)聽卂伔儚伅儙白乷曌€總'?寧20聽+尷叿伹叿侊來叐5叝亸儚仹儚?収収収€瘋峎恜2収伹収侊侊侀?4愊佔兎佅佅儼4僶呯€梹3//cre噝俍瓟??or?va€0newぉctr=0;€o??3€穜++呥?€2俹ck={}风乬乫?.scal牸嗭?唻?€鱻鐎?arg???2?medium???3?small???thes厐w?聽b€Pus岄a?€?聽divis娰?€殗X偘iz匃倧偒50?50????25????16??嬁.width槒r/>聽聽聽?珋€?犅犅犅犅犅犅爊ewRock.height聽=聽50;
?乷乴alfWidth亗25亣乬亣亙H?亶伔仹€ //star乆all?聽r?s聽in聽upper聽lef?fo€Xship€0afety偀倧凮.x?Math.floor(€Zrandom()*50)勛?勛/ConsoleLog.log("偽="聽+僌x侺佺刜?y刜刜刜刜??刜刜偽刜€儎_?刜?d埢??2)+level?MaxSpeedAdjust倗俫€!if??<.5){亸???*=-1傦?€!}坵€瘋?姵?哤哤哤哤俫哤?哤哤乷€W?哤€鲉W哤€繋苧otatio梄s匢?n€(direc€箒莵穬?侕Inc坃坃5)+勀侴?囎仹囎亸???凕????€總g俠scoreValue哛big€筍€眰莵縼邉?伿仧亸€ ②.push(侓檱?洤洤洜侀聽creat峇圇c?剰€觽?€梽礶setPlayer(亸€witchGameS偫e(GAME_STATE_PLAYER€iRT?価嬒€宖un捄聽g倁兓€Xrt(徔冩fillBackground匃?rend?岻Boar??揅p僐.alpha聽揑聽1儫?€2亀乹+幮.02傋丱€!context.globalA仯仒?ha佺孨else?€蠇瘚瘚瘚猒LEVEL嘷偗嫥€瘔5媗?坲x,?y,270,1偋???嗻洍乛upd卲?s孫€?€慱吙慱慱慯L慜傋checkKey偳€飫磤讇讋媭讇讉奀ollis?偪??ForExtra姴???ndOf咟?桭r?R?C桜t宲c€AF€眱邏G?塆?唨聽?枱廈??彉傦丱愩?.5*x禓??懟?y???facingX????Y???.mov俫???俫?????俉issile宩岤亣?尶尶???岋僩竉floor(磦/洶伀AtEach佇&gチ€苨Earned偀偀?煠s++??€ ?倇++嗭⑾€棁???漺俹噖竗length==0?丱╫╫╫╥NEW╣侊?厽厽厽?磃Di刉厽??icle吔寖0聽||婾M憇??嗊倧??碉???乄??€?teSaucer???埩嚨丱?丱倕?亀丟亀媫亀亀乄囘啅???啅??窮啅丱?丱啅?亀亀?亀亀丟痮痮痮痮昗杘else?€蠠/?--兛??乄<1斶乄€W涚涚涚€ZOVER嘩佅犅犅爙e?珋€卨se{
聽聽聽聽€E€EresetPlayer();乢?€VswitchGameState(GAME_STATE_PLAYER€iRT?佺€2}€莯梹杸c€?爁unction聽g儩冡Ov匭聽喛倁//ConsoleLog.log("亖聽亼聽?"勶伨if聽(?丄?rted聽!=true)?亸勱illBackground壸?婟nd偘coreBoar乄?婖etTextStyle??€3cont?.?亂€Ger!",聽150€070?????P恅s塇pac俻To聽惲倞2倝14倳偪偗€ ??=聽??徫e斚€繋Fwai劆fo嵏s剆key吀lick伅仧???List[32]=?仹仹€3懐懌償p侷ed憲仐€W槸槸槷TITLE?伅€W墴墴爁a堣婳佺?€莯棜W佭歐歋暱暬?俖//聽draw聽b乂聽a€)懇亣抩抧曭?'#000€'?亸亸Rect(xMin?y€;xMax€rax?嗙€弳鐔鈿?喿兿兿匴匭fff€匴亸亶€@乧15px聽_sans亣亣亜€)Baselin?top亣咷€弳G唀?儑啅啂"唽"儚亸亸塱('傿?聽+?€i烸焬2??勲眱Ship(200,16,270,.75)亸儣儣儝X僽p?s儁?儺侽侽侽侸FPS:俥fr欻R?C晉ter.lastF€﹢妭?匟傪傦孫€弻O孒checkKeys??橝?もs??くく38く亀倣thrus?€還!va▁angleInRadi?弞?.ro?吢*聽Math.PI偁巋80嶨?€!佨facing尷俻佉cos(僕僎恄???Y?sin????嗺mov処Neh喿€?€|?Acceler嚉*?両卂??俲Y??gY????Y哶僄僄傾cur檂tVelocit佃埼qr((噂*€_??€3?仧仧仒娗佔伹?刼刲<囷ax€諚O?€W?凕啿刜嬒亸€W佭慥宱佭亸?€噦o峅毄圵?俈e喊嗭€蟼???剣傦?烵烲7烳姛亣煃潽cコc?kwise亸??焈鈭挅/€絘l巬垏俹?€繂/??9??仐??咓乄乄?咍+呯呯呮嬶吳吳€繀菂?吳吳仐吤ConsoleLog.log("?issile憋="?€€邆鲀???meDe€爟€€y)漙偪嚡(亸劅剻>€鐐o俲垙倃€Wfire钧M佊(??€W叝僄??吃?佅烇€梹棌w€徏譽pd搻伎?€鍐呯????丟丟丄R枠€€€黃aucer????僄丟丟剛artic?????畧d??偋fillBackgr?珋€卭und();
聽聽聽聽€!renderScoreBoar???Play丳hip(p€Z.x,€Ly€Mrotation,1???rMissiles?丟丆Rock€€厱aucer????僄丟丟剛artic??}€b€?爁unc嗁聽update咰()聽{?傇坱m冸FrameC?t++?亸亸妸聽+=?ovingX劮亀嫵亀乿Y?仧€ if聽嵕聽>聽xMax?亀?亅=-€vwidth劅乪}else?伮<-伩th)僕佔僕僐劤??喦€瘍張剢脃喦亀仹?喦.height兦喯喯佂喯伵喿佭僩僣劽?喿€棁7摲摲摱柗?倧var聽temp乷乭?{}凎乷乭?丩Length厞€莾q.l€?1??//Conso佽og.log("厈?傔h="暼€讇議??傸fo?(卂伒Ctr=€弬>??審??憫=0;€縺?-帨俖?噺噺噺俁聽熿噂?tr)偪偗€ 嵎乨??[€俴]噰俉倃乷e?€蟺蚫斚??乬乣D€蟼.y???亸?潡伩€W刉???€蟺庭7倃洀灍劎偋烌€莻煢俫€W?伔?佔仹煙€飰菂'偡?壡佅€W劮?л€蟺通7?侽壪劘佺ɑ€莻З偗偪?伩?佔仹壸€飩弬弬宭if檘?乢媜喦伹伵嫕??fe?倧€W?re綃?侊€W?splice窜牕,1?佺€W?聽null凎亀媤€噣梹g€彽系蘎ock祤俖禑mp?刏礸??r侷?€兇?鈭挻飲飲锃g璪佲聽侂醇?磢俉碬凩?亸h;€げ瑎t瞗??嚐冇[伂]仐亣仐k甠€劗乷仧?仠瓏?仧?rota?佔€縩Inc??嫹嫹棙嘕佭c="媭偋€蠒鐐噦蹅弬弌n倃俉焽妵磄亀€W?伝?inи€⒊鱾櫡?冿唱??懴?€W??兛??€飥邎W?谗圵亣€W?伜瓓?圵?佔圵冿?圦?圵??€W?笨亸丱圵€飥邠?換??捒傋€梼7◤◤倫Saucer?俉//first聽che児to聽se塴w€@wan€饊筧dd€(€鴤們穫o聽if聽?珋€??saucers.length<聽levelS€蔒ax){
聽聽聽聽€E聽if聽(Math.floor€[random()*100)倅=倃rOccurrenceRate傁偗€W?/ConsoleLog.log("cre伕聽叄")?伩€Vvar聽new冇聽=聽{};仛伹亣€V仦.width伿28佀?€W仹仭height仾13伅乢€W伅halfH佅6.5佔亣€W佔佈W?14伹亀€W伹scoreValu妏伻妺S€﹤伹€W?fir???rF€膫G侘€W侴侫Delay侽侽€蕚W?€W俉俈Coun奡0佺仐€W佺missileSpeed凮?€鏳倗?€W倗d唟槦槡2)?伔€W殢殢侓佽==1櫁伔€W??*=-1儳?€W}槜€瘈W淜choos廥betweeen?f?o毨r暶edg?to抙tart倧侽嘒嘒嘒?)嘩仹€W€W//僢凘剱凞?聽g???伔€W墂塺x崥45懐?€W伩?x?*憞r慜娍佅€W}else?€蟺W?媠婇?仹?€W?喕=-啛?€W仧啛?啩楋伅€W扥?€飪泧泧僩泧泧倗俉倗熺?俹?俉?€W俉η侽ηη佺€W侴r.凷???4葛?倗俫€2减push(傤?乢?倵€縺縺抗temp???丏凷Leng砽勢l€殻?伹??upd娳rocks婛佡="聽+€?俧f(刉rCtr=劎th;€?gt;=0€?-倵€2囷啛rs[佫]?侘?/shoul?亱??乷乢僟昽礛++?伹ゞゞ??1?聽&l噽??偀倧€W?amp;€*??匋妐€飥?聽姶?傔嵖亁灧灠(俫)佔仐墖儳剰剦究乷桹剹€繓??emov炿fa?俉丱?芭+亁€棭伩仧伩?伩紎廤佺?/勴擠睹逗籣es??憓儳甖?墾弿弿??xMax橶偋€W夨?ru夛?蹲刧刧昜刉€(?.x€閤Min-€?wid爤効?€W効効乷効嬿€瘚鱞掟c嬿嬸f?側懜€(tical嬶??噺?嬨y娯聽||嬁€駠yy??灅噺?€W亸挩*=-1亀?嚄€飥邊t壽==壛兛?€W??th塏仐乄€V??㎝侰d"?仹€W?splice(,1??€W?null亸??€飥縺杹€宖慔ti滈秼??s(奊倧籵乷乭户??噵乗贿€莾偧匞侽惯倧issileCtr=?珋€卻aucerMissileLength;
聽聽聽聽€E€3?亁Ctr>=0;€縺?-){?俖?€ //Conso儛og.log("update聽player聽m俢"聽+€瓊)偪偗€ tempS刜l個=収€抯[€俴]噰俉倃乷e.x刾倛€蟺蚫x???乬e.y?€蟼*y??€!if聽(亸?爩聽xMax)聽嫑伩€W刉??=-€瘈瓀id?侘€3}els姩剣佭倎<偀偀倷悓俫€W匃伔嗱?嗁剋亣剅?€瘔'偡嬹墸y墽??劮??墽€痟eight??壇剰佺倞壇€莻穫弨W??壊嗛?亣壏€飥邆弬?lif?++倗?婳伹伹伭媫??fe?倧€W?remove?€铯焸窞?splice(€窡3,1’佺€W?∵聽null嚽亀奊€噣梹g€?爁unction聽Partic厫(?俫爒a壺劑丒剛{}剋乄丳p??乥€漵.l€?1佺?珿珻伒=偳???fo冭(?乆媓=伩矈€弑崁棻g偡嗊偫?啔fa歅?丱?塷?瘶僿痺佅?価疧€Н'伅佭??€М諅侘?乧泧亀乬崸崸崷佸嶄偪€?凮傔傔/try宱€蠠G偋??€鐬鱾_俹€2幭爐ru幠仐乄歽聽?(?峫?歨||匫??xMin?傔€E伩巁眊傁?y偵嘾?傋噺噺噺仐乄€棈€讇穩觕atch(err??€C??喞"伬瀒i?拲"憒????擾:?浱撟倗倗喗€€飺鍓麊鐏€W€ 癨??亣€W淲????厳€繊讈€彴7renderPlayerShip(x,y,rota€?陡cal噊??ansm乯?┛聽angleInRadi乭唈傰聽*聽Math.PI倄聽180??context.save()?//€Y€萿r呰t?倄湙倛€Xck???etT厺(1,0,0,€2偝坅?嬸o俬d傌ity壪?囖l兟th刬anva嗻orig処?€藗@e園o懾€妏媄偀??偽(x+乕.halfWidth,y€焞fHeight樳俖俓婤e(??亣亣堼廦(€2,徎檊亸圍draw憅€邆g俢trokeSty?'#fff€'?仧仜be壭P恱?兦丟兞hardcodin?lo扻s乬乫fac丅寪ht?兎儾瀉To(-10,€ 堶丱丩lin両丂???倆?1??俫儹儳丟丟儰俹?儫儨???俖嘒儱亀???thrust==??amp;€*牑==1牽??heck??乚€}憼嵮di嵗€塪oes聽no?珋€卼聽display聽with聽thrust
聽聽聽聽€E聽context.moveTo(-4,-2);乷乢乷.lin乴1乬丟乬傁-5,-乷?乷傁(-10亀?亀傔傐0乬丟乬傋傃乷?}€梺蟻蕇troke(仹??closePath?乄乀//restore伄?俹俲丩俋伖pop聽old聽stat侙on巰o€xcreen??€?爁uncti亖renderP悙erMissiles()聽{亀?var傴emp乷乭聽=乭}??亁換乛Leng摍亪€莾?l€?1?堬Conso佽og.log("厠?傔h="聽+€讇議嬬?圔o侾(卂伒Ctr=€弬>??€E??>=0;€縺?-)娵俖?噺噺"draw傹聽m嫿噂?tr)偪偗€ 嵡嵡侘?[€俴]噰俉攪楕av攎€Y€萿r??敂i?€Xck侽?侽.setTrans寑m(1,?,€2傘??栯id?ity???t俼l?th勆anvas?rig劑俀€藗p娏of€寛+傁偪厙.傼(娤壞.x+1,€穩祔+倗偡Sty岦'#fff€'曶侘侘侓be喰亣乬堨挀everything囻f?b袄1/2.聽Zer?Re?i幯€皨鄪15偳偡凣1??乷乭乬乬乬乬乧乢?乢乢?乬?乬乬厙乷乷?瘡丟丟乢?乢俫€g徔??Rock侴mp???r?畂€儺'伅??乊?h;€ぉ剙t?倃倵匴?[佋ク?呯angleInRadi?€箓俶.ro嫚墏*聽M嶐.PI尐棬80偪偀瓘瓘?剦€1偅"+僄€?愶倵愶??????侽???????偀????????偗厙??壊x+€^halfWidth,??€W€W€W?倁y傁偵Height??佺彿彿彿聽x?呄呄th忂偗傔傔傔傒y傔呥呥呝傜偳婘!?e(榳榪伔仐伔???塤伹侘?亣乬????.佭佅佢悼悼岛i擆.5*w嬦聽-1?Sam?をh壜劮偀?恩眖?帪兵,€菍噒€葕鐐谴7?偪偪偪偪偪偗偪偪?偪€總穫穫w偡偡?偪偪€總總總焸總總總繄/偳偳嵪偗傦曪阶?丟阶阶乢乢?阶阶阶阶街倧?????erSaucer?俉?mp??丟犅??珋€?犅爒ar聽saucerLength聽=€峴.l€?1;
聽聽聽聽€!fo伬(侘rCtr=侴th;€?gt;=0€?-){倗偋€ //ConsoleLog.log("伋:聽"聽+僩r)劅?€!tempS?哤rs[佄]佀侘佺€ context.save();剳€Y€萿rrent倛tat€€in€Zck侽?侽.setTrans墍m(1,0,0,€2傘聽re?叞o倶d?ity???t俼l?th勆anvas聽orig劑俀€藗p?of€宲layer傁偪偸厱?(this.x+halfWidth,€妝€奌eight?俖?俹俰屍.x,€o.y????trokeStyl?帢'#fff€'嶹侘侘侓be埜Path巟亣丟?did聽no宲mo彊奞midd児becaus徚€鴌媥draw媝嫅exac惿pace?傋剹創傫To(4?乢丱乢.lin乊9乢?乢乢o(12,3乬丟乬乬13乬?乬厀乥4乬丟乬偳10,7乬丟乬乬3乢?乢乢偢,5乢?乢乢?乬?乬喿(0喯?乢偪乊墖?乢乢婄乬乬??5,1乢?乢偪5,2乢?乢偡8偡?乢偡乊偡?乢偡(2乢?乢偡?槒乬亣???丟丆close瀇乢乢乚tor?popˊl烒o㎜screen俫?}€梹d€?爁uncti?皥derMissiles()聽恩倣笲Н乴{}唃?壕乗肩€莾偨?簅簅簅佫俙函€總?嚽偀壳?伝?厳?劮?€E??>=0;€縺?-)妺俖???"穧?媗噆€粋嘋?€E峸峸収塠[€俴]噰俉斍梄av敪€Y€萿r?冰斢矇€Xck侽?侽.setT横寑mㄐ0,0,€2傘斸??id?ity???絍仺h勆anva稨ori?係€藗p娏of€寠搨蟼繀?傼(娤壞.x+1,€穩祔+?倗偡∽Sty岦'#fff€'G侘侘侓be喰亣乬堨挀everything囻f?by聽1/2.聽Zer?Re?i幯€皨鄪15偳偡凣-1,-嚐?乷彉乬?乬乬乤乢?乢乢?乬?乬乬厙乷乷?丟丟乢?乢幭?€棷???Partic亀倧?乵乄乄p?€灝焷绔鳙鰜}倃€擢棯偡?劅剻[??佅??????侽侽??????岋倧????????偗厙??奤.x﹃€~y??侴ΨΨΨ?伹侘Ψ歄亣乬犅犅?/d?珋€卹aw聽everything聽offset聽by聽1/2.聽Zero聽Relative€?聽is€H5
聽聽聽聽€E聽context.moveTo(0,0);乢丱乢.lin乊1,1乢?乢乆stroke(丟?丟丂closePath乢?乢乊restor偂聽//pop園ld聽stat噽on聽t?screen俠倧俓}€縺弨弨坒uncti俛checkCollis€€s()聽{亀偋刬lo剄through聽rock嬝the侤missiles?Ther匬will聽alway?b€悂宎n唜a?hip,??bu彔偘?no€悅W僿.卂?聽var?empR儛聽=啝}嬊??劉Lengt啇丠€?l€?1伅伅傑PlayerM凨???p乢le僩€菃c儻??爏aucer?€寔莵莵菂lS乑?丟丟倇??€菂7僼俖俓?:?o倶(?Ctr=媉h;€?gt;=0€u--)撱?€E巓?[伂]凮伹伷慚:剣嬁€褎蓘弴謮'俫€W亸??€縺粏唫o?嗊抩抩?咜[€傐嚪傁偀€3if噽bound猵Box?de(奺,冏偺)?侴€W?Co塜og.log("hi?寔"?伹€WreExplo劎k.x+€^halfWidth??€W?伈y??Height,1俖侊€W壡?scale<3ㄞ乢€W€W€3split?俉俁+1,卭.x€o呅扮侽€W?€莯W€ addToSc?凎€yValue?仧€W?惽s.唝ce(€窋;?佭€W岋揙?爊ull尟?佅€W?熫凎丱€W凎$儻儸?亸€W€2b旽佮???€W亣亐U仧?€W巜€莯飥邟岑甩潶i??€茎€啱_偳€W壃狈儩[???侘歄????W?€WWWWW?伅€W//凕<€lO偀?€W€W€W€W奯傋る???儚?€W??┫???€W€W€W€W?呯呯伩€W€W?仧€W?俉€o?€W洴?€縺W?榮槷乷€W姀氱冞乄€W℅℅℅兛丱€W兛℅儻儻乄€W?亣?€W亣?仐?€W?€莯嚑'偦?穩gains燭s佅伩伿thi乭€!don?her€0so聽w€@€??hav€ht€╨oop俫俉俤rough儨?€8??would?robably???b僡h€(bigge?arra亙伅仧擃颊?€准醢d€尠渹穫鐏弬笨€勘鲄?€W?糠睼咠矊Missi?珋€卨eCtr];
€*聽聽聽聽€E€Eif聽(boundingBoxCollide(tempRock,€ISaucerMissile)){倵俉€W€2//ConsoleLog.log("hit聽r倶")勄?佺€W燾reateExplo劎k.x+€^halfWidth,??€W€2伓y??Height,10勗仐€W€W墯?scale<3)聽堊?€W€W聽split?俉俁+1,匞.x€o叏匃侽€W€D}婄€瘈W€Ws幆les.剦ce(€硲?1?伔€W姛?俀聽=聽null??佅€W悽?€i凎佭?€W堢儻儻?€W€Wb捫伕冣僕?€W亣亐壇墿佅丱€W孲€噣菂'€繖芻he唹player聽agins櫾s佔仐斂濿濿櫡,倱?佭€W澫澫澥侂澼?€W潎潎潎?潊€煖?偗€W€ addToScor傳櫪€xValue侊仧€W澫?澫佅亸€W潫潫潫?潫潫傁俹恄€鱻菢蠘蠘蟼焷_€W槦槦懐丟€W庬Die(傦€匴€菛?€繏now怭??a??s€恘d卙hen€7伣m汱???finally亸僄偄?卭?伣瀨Length壜€迁鈒€?1堬??佔唀仧仧仧?:fo匄(va€0=倗th;€?gt;=0€?-?傋瑖囦?[佫]?侘侖塽勶坓€覅!€弶畤7俫€W€W倃倁嗆€縺粐傁?噊噃P佔踌俫哬[€傐?傁偀猤猤婘冪傌侴€W灹?伹€W??剢?€l?偀?€W€W€W€W?偂y??咓僟?€W?呥俬?俉俉侘€W???€窂c﹚佭€W?巊扜╋剣仧€W灧熈凩泦?乷€W?澘冞冞乄€W€Vb悩玐?僿?€W仐亹焨仧?€W€莯飥邨j瑮瑮?亸?洍洍洍洉倱?侊€W聽??憈?乷€W氱氱氱+16煀榐€€椘?€W梠梠梠梠?伹€W捒捈挴伩亸???僶乬€W?Die(?€彲€菒?€繍 呟?怬?仐嘷亣簵€羌g合??亀禛?犵籨儚禛倗偡乢捣€康穭縼尶尳傦祫€祰偀俹櫱櫱oxCollide?珋€?player,tempSaucerMissile)){
聽聽聽聽€E€EConsoleLog.log("s侁聽m侞聽hit聽傮");俠倧侽€V乕Die(乼€還W€!僑?s.splice(€矯tr,1?伔€W爣_?聽=聽null?侊佅€2break??儑丱€!}€莯梹杸c€?爁unction€PireP垈?(寃俧//??伖奙佁嬢伩聽va岪new??{}亀乽丱並.dx乥5*Math.cos(€JPI*抣.rota咺)/180?偀偀倻y偀h.sin偀偀偀偀偀偀倹?侓x+€LhalfWidth????劊佁y?lfHeight????lif娝60亀亀亀乿?亰亣亣亣亙w咺乺2亀亀亀乺h叒??涽毊push(?牅伩曶曶曶??曬檣)?亸攐卝亸攐儑喎丱?渱?.5*€d堦?????y?墑牊???実婏亀亀実実???亁speed匞r.?S€羺?狑狑?岡牽仐//?a乣rom儼mall冺伹?聽diff洘宎-尛僕仐仈?嬮仌y仐仐亹radians仮?atan2(侸,?喦佺價egree併360聽*倗?聽(2€殻紓7尟尟?寳寳edㄏ?凕傦傦傦◢傦傦?傦傦傦傦傦傶1た???た亣?乷∽?∽∽晱∽⊙怱Di穩僟枟枔?di枏?燾絗teExplode睲癬癩懾?€鐎?姉傁switchGameS窗e(GAME_STATE_PLAYER_DIE伳侊囅囅囃卂匶x,y,num?冪?乧嶐?partic嬂丟丏fo埲(椻??=0;€T<?€}++)僄?癅僁?€€聽Object(堶伔?伂橾晩random()*3佔伔€Wif咗仐亹叡.5卂乷€W冿冿x*=-1僶?€W層€噦G侴湝劅?佔????丱€W儚儘呄?厽抩€總??焩剅floor勏?0+3??俫俫燺燺乷亸亴徦??乢乗婝?秶燋燄侊勊="聽+偋€絾蟼w€2欐ウ伵仧??€弨彏o瀐boundingBoxColli瀽o檙1€S2炴?洘聽left1垔佋?乄乂掂乂2乄乄果igh偗偒墥€uw侊侊來僄傿侊€p侊侊來top兦僎?丱丩?偙丱丱両bottom偗偑剣€phe厬??侢僟僙?€p??烇為?炆呟帹return(fals?佔佉坽&g伖凾佔佔兿?侚嶦兠???佔佒挻冇right2?珋€?聽return(false);
€*聽聽聽聽€!?tru??}€梹攆unction聽splitRock(scale,x,y){乄傸for聽(va€0new亂ctr=0;€o<2€噐++?侽€2?ck聽=聽{??€E//ConsoleLog.log("厒噣佮"嘩佺佺if厴啰==2刼?€W剈.scoreValue勈med€筍€眳伩€W?width佲25仐丟€W仌heigh啇仧仧?仧仚alfW僋12.伹亀€W伹伬H?佅侘伔懥e搻岠€€飩飰邏邟續l夁?佅?夁啎6仐丟€W夁唃仧丱€W仧夁伆8伅乢€W伅壡伔丟墕妎€瘋o塃攼?€Q俫乢?k.x乑x???k.y?y???k.d倇Math.random()*3伔仐?乬乣?.5歰乷€W僶x*=-1傦?塷€噥鱽魡泝卂伔卂卂卂卂丱€W僶僫卂€鲄_€莯穪鱮ota猶Inc參凮叒5)+傔?吳?吳吳乷€W冏冎???€莯穫??咈0?乄€!琠琜侌琄朶"+(?€€)??祐?s.push仌甠亣呑€縺彾_禲addTo礟?倊?+=€鷦飩穩巇ocument.onkeydow堛僲(傢仧?炢e?e:wi巿w.ev?僩蹲?妟e.僅Cod?+聽"儥?伔聽?PressList[仸]儾狂仐喎喎喎伻up啩啩乪//乿body仧仧仧?????????up?伔???fa祤仧?挿喍***慩pplic棨start?爏witchGameS樃e(GAME_STATE_TITLE劮擓r丂R?Counter凧樢F€讇?伹凪刉凷loop?燾?硺FR?R?傟4??va儤i?枿Tim嬻1000/伹亸嗮etI亅(run?,??渨/>?>叄叏objec勑p∪otypes聽€趤g婰??聽util佸?cre?嘥ructor€覟瘧'(洘劮??伔tha匄wil儓b€袪豦d€竜€賰乴ass侐?_?栠栙m?age)聽?瓉(噥of(佁?!=伬'undefined'聽&€*??惾ull倵柨?楤冋嵎瀅€3//唜?/曡ti掣囩?€鈬睾 €Hign濧侁妵僡嚉?g徢?en僘?仛?乄丳棁楿慜慛庽卋仹?堩囩崘is.唸t乺丷礝楪儓d侾Tem??D?奧倁澆L倶丷伣.get?亸┆ele採?€鐐o劯t熪劕?>??.坣.c€憗峢擄n?嗭嗭嗭嗭剣剣++?會聽(?噠晲gt;=侘堎+?凮昽湩"仛慩疉亣??祩厀tr伩伩?峎呥峎伩伩導慜歐€弿??</script?€ead€梹惞!€弨坉iv操yle="posi幜:渪b壺ute犘top€?0px€hleft€u"侽l?珋€卼;canvas聽id="€c"聽width="400€hheight€s>
聽Your聽browse€Hdoe?not聽suppor€HHTML5聽C偤.伮</僀俧€iv€弨塨ody€梹慼tml€?tt>Figure聽8-7骽噣狍creen€pt飂鬶e鏰me閚醕tion.R?蟗ject衦ototype冃??倵3倵倱To噣n栶ve髉ace,鱡鋓d顝笎a姁separ€Io僈p僊s鎜r愐various佇splay乀s?this懸.萶wever, 昗昑663昗昗昋Exampl?13昰昪傌a覉)劗?tha俬an鈋鮯ed峛?such醩 彔師帨?栕夁枏宮i勥勝?T圥刬.js剣悰個?偗偗?敮>
聽聽聽context.stroke(?€鐎醕losePath€€t.restor佱聽//pop聽old聽state€`n聽to€xcreen?}€_//***聽en伆Rock聽Class
<偵骾ze="6€xb>What鈥檚螁纼悆飌俉="3俉係We鉶vered駏ite徕it閚鬶is鉮apter.萒ML5胊nvas韨i靉ck髈me飂乸e韸X騟fin俻featu?傴mmo倄o鱡b鏰亐developme?platforms髐ch醩茒h,鈛?t侙ntains餺werful侾ols鎜r韆nipu?ing?岾咇immedi?劙de.詇ese劘allow鮯劰仩丄a勩applic倶厾with?y倫尭idual靜g?l鋓s呧y颾jects鈥攩皦筼ugh錫唄c墈€8嗚pport飊ly僗s厫le餳ys俹俷 (唅侓itself).嶳惽巜巜>In C庴聽9峏偫ll鍃p仒娙??advanc?塺topics,嶆re?c寉p洦s?拡map寴梎乣媯?噇p巵,醤d傝d€蓧ou€x嬝仒擆We栢剒t汸廧凓?buil晣晞俲幤new魎rn-bas吶€纆y?娀湳湳湳湳嬶湳湳湳湰?.犂ombin嗼B垈??S嘔潎潎???i>Geo聶 嘇Ba?鎟om咃煕007714咃咃咃聽8咃煕bだ淃垁a 鈥湏p嫺m?鈥潨(娮淧am巂瑾8咢?eli€槅Uu玿袄a嵡t嵑ro恅惱憳y餽e爒?arr?f??◎Data??叭ts??侊t>getI?()??憽仐仏pu仐仐亽?fun?s徔徔徔搓e?d鑑lf箵?恎キno仒?m礟ワワ椲???倶ㄋ俛b紁磇硱侂?采¤漵m??仛⑿Daleks硍喦みr怒be︼︼塐倧倝?勯,勸傦傦卆,曔)熓惇?┣┝団????????通憦?log媓寱怰啔but吙吇卙??nab?ㄈ?op湊嫎?毑坬rO?d€s鰁ry?por檲t鱤en鵲u洜俋ar?両?-pro毃s睓evi€X疻mob瀾pho甖牱珖嫽嫙崯崬縭怖嵭n颾j県餺o梎崈particl炇哫?噅explo?冐崗崐182860崗崗崍Fig竂糚-1崡s?憫Βp?堭?f建d?樓blockquo旲枀4枃杺垹ign="ce结mg尐ci?x?0025??l獝"?00倊€a儴/兎??"6???潡i墂塹#剺"塤-1.聽??夦?€]剋?剰?First,靍t鈥檚樴ok醫婮監椑篙?縨爉?僄ょょ嘨5も嘩嘠8e憪??r詣 S?喎?ミミ儑??攜0340937兛??聽4攚攔癛红??鐁aphic燡甊碯歴伮樿r伬竘蛔method?牨燲娥?呄呄呄呄吿dr?祽崄潅厲⌒卆?ns幚m卄咢m凑fly剴哥er,鱡??秬卛ll醦ply鬶e鉶ncepts鎟om Chapter聽4鬿飌timizing?render€qof€?i>Geo耹as?耡sic
鏰me.譭鲄Ado乸is鈟餽e?a€鄠Pour亰鐁aphics醤d魊ansformation€爞itmaps傁?n鮯e€I€0?閚剎ad傖path倓厐immediate-mod伆??that鲄頴cessary俙?妟1007714???聽8?妦cre冟壏壋Ext垜d壣.

Figure聽9-8.聽The餫rts.png鬷le骽eetYou鉧nno刋ee魞?s閚徕lack-and-whi嗚pri咅d鈕ok,鈛t鶄 鰅ew侚m鈟鋙wnloadi?倶f匵s鎟om€xis侜鈥檚鱡bs偫.詠2rst喕?green,醤d閠厾ll鈋鮯凁for偤sma€皉嘓?saucer鍃plosions偦seco€饌艑0ht喨ue傦傞depic凐?layer?miss呹乊€鐑/?啺r?reddish餴nk (salmo哖if塲僫)冞冑€ ustra??large喕唃?nal,饀rp僗儌堊堊韊dium??檙恮3恮恠No?a劯朄ave飖個?恱囏c墾let堏l?釅搈ethod巵剝刪鬿魊ans劆m 桒Geo耹as楌耡sic晛俁im厑國-mod?th,?湼搙g?俙??Ext?d??-澅旔itmap犵嚄牊嚁?€鑰xb>Refre毟r:胊lculat?洆垹c?oc€萶n汸洴婘婘僩In Chap嘝聽4,?exam敨孄?c厹e濊厃峊卌餅 菙檪Xkn徍€▏H?dimen憠閐飂悡伇.虖鋌riefly?b?怟is柸巰潎re斅勑巸?l奻牁晞gam?狕c囉?姱姱姮Give伖暞??such劇戻ship_兟?懮奟ヱ?涹毇€a尃吚濸煛儴t侶?m涃m?桒ick毌???冏冏?a 36-儂ani倛嫅??ip髏楻嘠e 0-de伬崁,飏 鈥減o?r処鈥潊囟饌?臿?巄尅main丵35孌???儭rot椝儬1儙inc侌?嚳嚳梤掆would珷k爞奺嚜19 (儈咁”?eft喪嚋19嚡嚛?傪睋ne?ㄨ榹灟痕tt>x嫙嫙嫙嫎Her?pseudoc猘呁??刼嚙?on:涼b橉kquo?狦冞狦??X聽=聽庤eger(cur燖t_fr焾_崁ex聽ulo
匵_number_▁umns?_€睍B瀾)聽*聽€y_??€9単塛?厏篴兓 (%)飌e火塜ズretur摶橻チ廡diviㄚ塛氿Bel?嬓?actual?孁(瀭variab汚re?d烠li?als)骨估崨??宱?嗺嗺宱宱宩?聽寳聽M?.f?r(19聽%聽10娰32;姉姉姉儳儳姅估ul舶玴?? = 9傴€8288?栂栂傦傦坵n柗?摲櫱柕va籂劰ilar硅cep眾巵岪忦繍?n?邯?愬?垪?厳?勛勛eY槆槆槆榿劊d聽by槸槸槸槸嵮槡剫圇??厽厽◆娟??旓旓?旓堊堊?堊堊旓旐堺旓旉/旓懬嗊嗊儳儳?厫works飖静?斝1?僄?觨,??兝擺€擱??鎟om鱤i秽儬?姌py谤pixels檕刧內??t>,??32?????o帳l???籺canvas簹廣?厴t總?嫙媷僶??厇c€恊xt.drawImage(墎T墆,ぶ€VY,32€,﹑yer.x€My€?;?線?/font>In <侫鉶lor="blue">Chapter聽8,鱡頴eded駏ite犰ot飂?de鬿鋜aw醤d魊ansla?the餷ayer骽ip醫€歝urre凁rotation.議en?us偵t厁亪eet,亐is?€@reduc?considerably.侞P佉()<抇扜??囅囄嗸聽?erS夃(x,y,庬,聽scale)聽{
聽聽聽聽//慗form丣€飥 ?text.save();乹€Y€葢銈▊鴢€i?€Xck??.globalAlpha聽=聽parseFloat(廲.a€?;侘€ va墍angleInRadi?侐啙聽*聽Math.PI勑聽180??sourceX佢乺floor(冋倁/10堗%?€A傂32俹俹俲Y俹俹俹俶€3*侽侹if聽亶thrust)専?夛瀴Image(槈T搻s2巕喕€VY€P3€蓘(倃倗€2兇x,€Ly,乸32嬒?}else劅?劅劅劀剹剹剹剹俹刧刧刧刦€r€煏抮estor?剫€?.?暭pop聽old晼?to槺ree棾??曠曚1?乨}?皗€g瀱1?瀼€`align="c歚er??1€xb?#">NOTE儣冿儚冿冿瑮僶You玈fi瘪?劏i巗? 儘?i>Geo耹as哫舩td鈟仐仐10??継de坧min攫hich飂價36簟A嬌凎俫?偀倶i伆澑n岿?is匢飩Scanvas.蓛K?閮R鈥湯鈥濏?,冿冿冿凎凎s鮯庁?ead啞????庰?巜?巚傪works鈋ca傽鳚ɑ0骵t厇偵嚿屄e學凎學呁deg傂ith錫孒p▓s寎left飏騽贬rrow雃y?樌槒槈007714???Chap弨聽8梘?鈥檚鰁rs摴儸gam?嗮喫嚴啫哶哵5哤哤?堃d鉹e圚d?72-fr偢掙塇eet?嚒恎?夒? 5-偅€`侾m?s労could嬠kep嬨????alVe澣ity吙吀at 5.譬仺住Oㄓ兒only鋜ew????,珸乹a瑦using?va孭????倢叝岃叧.詇e偍certai刟屓n損eas嵿why堢not楺嫺戦even厾0鎸叿叿嫾?喪僡溠擛僆limi尅枑帤i嬓洃in仯(a碢p€`e熧幒a塒aw圍ool)???汎Le熰擷look尅帶?╅巓巓??ass絧厐earli?倗倐梇S搲NewG€`瑥瑥儀:咜a/綇綇"4唃綇僄傿侻聽儣儠{
聽聽聽ConsoleLog.log("亀乻")乷?/?up聽new偹€?爈彴l聽=聽0;€?爏cor粿€縺粣[S怭s€?€飥?max嫮?5????2€€泚??alfW?16???H???.hitWidth聽?脌€??聽24;
聽聽聽player.hitHeight聽???rotationalVelocity乥10;聽//how聽man€╠egrees聽to€ urn€0he聽ship偪偨thrustAcceler?偤.05?乶missileFrameDe€爜b乄乄偦€鷉alse??alpha?€鲊噟?0??x€讇讇覄硛詟爁illBackground()佭聽renderScoreBoar€鱻騭witchG嚢S劙e(GAME_STATE_NEW_LEVEL)?}<仚骾ze€鑰xb>O嵿r頴w饐蜥ttributes傂?p偳="3偳偯Along€恡h鬶e鉮ange閚€r捵鰭?鱡鑑ve醠so韔dified亃凜鈥檚 ?="2厁嚢儾?t>醤d丱丱卌乄丵嗈.詇es凁re鈕叞now??32?t>叞hich閟匤s崁醼ct暩垞剛冸.蒮鵲u靜ok凁丷first鏃飂€?i>欓_?s.png
倹sheet,?w掵骵僠h俓崝佱鋙es?傂?€馿nti嗻32脳32俽剙t呴c€豦r媥?middle,鬭ki?up崢ughly 24脳24匛??le嶐s?丵髉ac妐椛冸dg€饋莯(o錶imin?鉲ipp僡whe??勦慾ed.讗鋟s惵吂oncept仯?cre乊?ck揘s.晣晣晣">忦鍃tra餴xel匯padd剻€8偐??鋟r€9嶓儅餺s噃a髆a嬥problem鎜r厴llis?detec乹?嚀Chap崢聽8殣r?媆g勅氷壖?柗???丱??乁va劆s嗞b弎坹box嘩嘩?暡斄剤剙塒?撽幐a?beca両狌?wo丆aria婐洦愐?冞冑:唚唚?W囎囎乬乬箮乷t>嵸stead媞sett囬?啩劙俹???仒yZ乬乫24乬儜T?掙焢僐韆k?u圇圇n獉傝accu粣n閒惙狅タタt欝瞁瞁?瞁睼殹匢惤BoxC勧de()瀀gor傍m帛帛??勃?嚴栄颾j?s挸狕?児剰?弿弿弿乬弿弿睏睌杕礿y氱侴侫圇圇偀倶fun?fromGeo耹a捜r耡sic?掦椲浳?徔勮擨:嵍b?kquo徹?婄?呑呇勍聽??嬎1,聽€S2)聽{func?聽renderS傮()聽{
聽聽聽var聽temp?聽=?};??勩Length?卨.l€?1仐聽唸聽(伹rCtr=?th;€?gt;=0€?-)匃俿聽//ConsoleLog.log("亙:聽"聽+?r)?來嗙吳rs[仦]仜伹伳c姁ext.save();?€Y€萿r姁t俋t岺聽i?€Xck???ourceX冴0???Y??刜t.drawImage(咉T戼,?€VY€P30€(15,俹垏垊.x,€o.y,仒15??凕rest?坙pop聽old團揧to€xcreen?爙€b}涴d乢乢壴乢乆valu??鈋caus儯€渽on剤a偁ngl€鄬?蔁h€鄆n?nce,鱡叏n陁s凐et?m啓剰剮0刜t>.谉饟鴢(rdcod圦嚙伹咹巤? (30)侴圇伅伅仺? (?伔伇s伻鍃ampl?but?傴??愌飂€bgame颾jects噴w↖墠€藙?厞兎単丱並?乄丵ttri劙峢ra?崄厛li狧als.猙?3??N桒,靍t鈥櫖ook倶営?嗻?幮唨hich惾ri僠sl倎徖from鈕垚仭play?ship?慜凾剋棫畂嚘4€xb>R?劍s?歰嗺嗺倗?咰硔a殘灆ain?斷id屷潹敇pa???eets鈇s丂祋?喐劺 (larg怭medium,?sm恱)€c徃時徃佡?i€x穱ea?劑.詥潉襰qu€9掻髖mme庎烶饛0ern,髈?偛牆pre0呇?侫亐-turn??粦冩晅嚹啝岀奼奼奺H涳旂攬慡R唓(??紏.蝟tic冄?咢m燼鈥渟嚇ch鈥潒彂蕠貒h卻?(1=嬼2=?3=嬻坅choo泃r瀦巓€鶇:噉琌敆嚪敆嘩嘡唴聽嚙嚑聽?二???{}???Length?€?l€?1亸€!?聽(伨?=?h;€?gt;=0€u--)勄锭诀诀诀诀诀?啑凃[僒]卭??乯M?.f?r((?.旪夬%聽5€8*?甗偪偪禌偪偪偪偧/偑€謴S偅傁€ ??擔夌???聽1:€還邐靌rawImage倝T?,垶€VY€P俉俫??,??€噚€_y,俉俉俉俉俉t)?仧bk€蟺蠂?囷€邍飮頋+圇圇嚙??垳厳厳厳€噰鐕鐐w囩俉俉囩伅囩€蟺蠂?囩€邍鐕澶簢邍邍邆囘?厪厪囘囘囘倃囘俉俉囘伅囘囓€鱻 }€焽棁搑estorpop聽old?〢to€x?en?傋€s}抱€9疮?I盵?磭磭磭犩,?粦no靜nger建?倵倵倰⑾on倵倫鉴ribu??a糂地祸€葍pdid閚 Geo耹as紷耡sic.蒼€恆d勞h禒purp栋縣効効劰剹剹剸仿p?棵浮凘(0鈥?)?€??.国専3専"0pt">In ?迉卼he Chapter聽8鰁rsion,鱡€re醔le鬿骾mulate鎍s佖飏髄o?髉eeds鎬悇Arock€(tat侤s鈟佡ply鏸ving錫ch?a騛ndom ?size="2?tt>?Inc.

T寃倵倵倵??represe塝?numb晧f墢twee崪?塸ang愃a旳€鑸 揂?????ri櫌凾start???0佔夰f毩劘卹勢娽倰incre扨毶偀倿1偀倶斉subsequ垜偝ti嗰Wh嘓????倱柊g?匭t勑侘侘岟岟侒,?仧汒剎?仐?囉b?囲d (?)炨de€蠠邅.圈I呅恟梹cod?h尐?傖?in飖r??upd嚇R倫s()??func叐:朲a/>聽聽聽if聽(乄乄丳聽>聽€孏孈){侴俠乄乄侺=聽0兛?亅峂聽+丳€凯焷雮??亣?吽4?仹冏仧仚??聽}else僄伅僁lt;0?佅?亸?4??€梹`恮€8忥η??You撁no淧攇?hard??晙?s敮憲4冞???in??id韆x纠m侐mi?€`che桜狆hould劤jus?ssi蛋硤dーc?t础块瞤s猙?pur恍e痗?埱埱樓?4€xb>Render耽吀mis凁es婬嫥??偀Bot獉佮p?グ?嚉sauc€牎@r儝嗮爔伭s﹣manner.茊蔼懞俿imp圶ne峐o雗o縳婏€yfⅷ-€?p梆icleT喕峠閙a禴?侸ス嫳儼dis喲勠嘒啨з劋€X?狈冏t>;嶄囐?le侽侽侽?峻彑??>Let鈥檯ak?駏葱靜ok埂b嶉饺內窅玡s玱泧挴?挴??聽俥聽弮P壊M壃()聽?€!柸?丱丠?{}?乛??Length乯€莾A.l€?1?€!//C?o伻og.log("??偪?珸€讇議)偡€!幇ǜ匃乵Ctr=€弫霈悁穪;瑼=偰??--?丟啩啩"draw侕聽?聽?偗tr)俹璡孫孧仹娽[€?]呄€!ヘtext.s︷()噋//€Y€萿r媥?πt瞦?€Xck??s炟ceX凃Math.f曅r(1聽%秮聽*単刕.旉刼倃俽Y倃倂/倃倃倀椕粭??婣I(犐咡€VY,?婫僿呭,€莿7???丟丄x佺€€G傿???兙桳亀圇.tor?pop聽old庮?to€xcreen??€w?$溁S?$$庯呪丱$怗怗?$乭€恰鏷-1;聽聽聽聽//ConsoleLog.log("saucerMissiles=聽"聽+聽€縺?length)The饗苠xplosion?ll醠so鈋騟ndered鮯ing徕itmap魢0骽eet,醤d閠s鉶de侒伻very骾milar鬿魞h?烶€jprojec侫s.蘣t鈥檚?amine?勡s顗?/p>R?呝偀倶??偫偋3偋?刜嗿us?sam唩ur-坺両s.png鎬?as塇own閚 Figur怷9-8)凁at岀?妡叀刾Geo耹aster耡sic劜g叢rom剋剆007714剋剋刾Chap侤聽刼刱坬d飊ly愷?嚑whit壏彋a壚??W掅猵c奫嵶="2儓杧椥榅E仭d橜?t娦un嘸昲咮this?evious?with剙new勜?墍斴ab劆敇?a鋓ff?nt-嚉哷吳吚each魕pe飂??儬way咈r泙s,悁?€H槕盨徹ip鉧n?h瓾鮪iqu榠僺埊????啿墢墢墢墢墢墜?h???b嵗dd炿final傔傔?倗個??捝奌熼€弆ist灄盭k醫?:??瀼噖瀼刜刏哢猉噰噣x,y,num,匶礌??揭Sound(SOUND_EXPLODE,.5??彔聽(仿怉?=0;€T<?€}++)?癢及f侙?Pool.length聽>痐0仹伔€ 帬P伌籎??傍盚伹仹仴.dx?r庿om()*3仹????啽?効乷??*?-1傁?€梺讈謞???????乢?傸勏丟勏€縼侢lif嫵円f暊r?匸0+30????惛侸0乢乢乢峩x???楯丣2丱丱丱欫乄乄乄丼?y????丅€I乢乚//ColeLog.log("侊?="聽+偋€綁俧何.push(仐乷乷嶰€紑?}€9㈢猳?As筹??勍偪Жob?s醨jd惊?琠み琠?,鞒竏d佮????冇attribu玿厴m?he波n?閱prigg秔劼嗊傦勧heckCol瑻潮匃監€?瓝当儤??????now?clud砊?嘜嘜佊val膏bas?啒?嫵?as鋏stroyed.偶榛楹饎xdy缎岠僕僕s哫僟??傎瘶ies鎟om??1佺佮垷?t>3???根丄崰e堐us垯o€0厁our乥倵倵???凐pass?祤??s.螊〒only掕?偗偗偗偗囐俓筈埌ж€zsaucer.苚r鬶?顎卐骯ucer鱡鱥ll鮯e 0.讈纔lled?亹id鯽lues飖t飂傄air丷very?傝could鑑ve傾d僌僌99僕t>??吷伅伄20?伔嗗?just?not?侽侷1?堿?僟??僅??3?刾beca儊tho€0塂ar?卐rocks.詟X倵倴type偗偐reakdown靜oks靑k?is:

renderParticles()僶unction?determin冭hi?畬foui佮?倇?a鏸ven饌?蘣t鈥檚鍃a侭ぱ?now?a/崡崡"4墴幖唚唘俶聽喦喣聽{W??呄峔???t>醩 ?髝€卼he鎖nal餫rameter鈋cause鱡醨e鮯ing魜Hrock鈥檚骳al€鑣€?font骾ze="2">typeFor狍aucer:乯a/>聽€?y丱並H凓,10,0);喿€9??匞??塹?s醤d€俻layer,媔wil?s€桀umb孹li寛岃into媜??噠)匃t>鎢nction.蒼?r?case兟儦in儼傳傱1倗嶡茊<吇骽ip????4?t>?壸壙壙?倃噰噯凨庁€L幙聽€測€鐎?0,4嶰嶰嶰剹剹剴N厑that寚??寚?寚嬭廯f妎奿i?偡偡??Di倵倵倯?hich?傖ed鎟om俉俉checkCollis伬s倗漌坃團1囬圤€`align="cen?峎僎1€xb€攃olor="#000夎OTE嫃嬬儚冿冿惪僶喐Afチ?discu?ddォsou?沋a?ticジpool魵y塦g涳pres唜?€@iюset飂?de (厖alepos=啺1245963劎媆圇="blue€榰>Example聽9-毿u?€Geo耹as圷BasicArca佽亖s媈≦姽y偒s?multaneously,焸someti伖tho嗚乗佲?騛pid吀剺suc厬?姺姺姺姺姺姺姺?us厬埨HTML5琯琯<audio>?ta焫o悴jケ咾,€@lv牆p搻lem挔ssoci亪d戂噛?s??s墄ce韷纈忴魤Y?屜喿??€_】冿冿惎$??s埞旡writ噚,噦Opera鈘ows横n抓饊h乸fer惲eО滱upport紃墠?溈湼ha媰rou媓溸栔矅?y飥鑢€鬳君book,飫矀鴼wn?渘t勓乣m檲t伵啛啒壇殢夌夌夆4岼?橅?滮??寚偋偁W?患thre偠Т偐:俍ul俫俫?li鯽氿扐???嚐俫?§嬱喒whe??尮hoo猵毟roje禜岃(?€?.mp3归, €?ogg€owav€i)嫹嫳/l籔呥2呥呥呥呥呥?呥呟exploらs?€zde???????3?????????uc??婟€鷢騿?????/ul攇劘織??錃發oa??迭瀤┦vid京ach?涁曶s浻€乨i」?倄mats:単???€墖$穏呥4呥溸溸溬A歴姲€p辐agem剏varia汻???兦墴="0pt?鰛?>In鬶e鯽riable鋏finition骵c€Bof飖r鏰me鉶de,鱡鱥ll鉹eat侊s鬿鱫rk€餿h偮sound韆nager侐鎟om Chapter聽7.讋O処three閚stanc剎呅each?that鏾€纈n匟啞pool:

國聽expl嗮S僎;
??彧o?ere??ur€ht魝 (.oggLoad戱抙?柀勝shee憍ssets奾娗傽?3???皬皬皬皬皬皬皫寕?寔fun蝶奾l厫と圷禯?嬹吶?朮m?in槈it侶??id嗛?厂ad矙渶?矊傄仭?悋悋悆乮S偐I粣()惙t>?敆???傜傗凖聽??聽{檕爤袰?檋樔0欸聽國msTo弎€y€?6??禛怈?docum昘.Ele€q("椻"?佺乛body.appendC宲d(偡nd仧仒?僢suppor?A€笷ormat佺佺卂€?徹Atbute("src",?1."聽+僿e侴侴侰?Ev?Listener("through",??ed,f膏俥倧倧肌????????偧仹儚€訄_坃坃坃坃侽侽侷坓坓坓坓坓坓倵倵3坓坓坓坓坓坓坓坓偧仹儚€訄g坓坓坓坓侽侽侷坓坓坓坓坓坓倳?氉圤圤圤刧????傦佔???亸亸?毀夛夒?夁夁??壡壡壡壡壡壡?倉歸壪壪壪????歡僶€菆????????????倗倕?????????僶€菆????????????倖aucer偡??????????樋????伩伩吙€餁強崄?姺姺?丟?娺er?唨?"canplaythrough",itemLoaded,false);
€*聽聽聽saucershootSound2聽=聽document.createEle€q("audio"??乛body.appendChild(傔傑伹兿€?setAttribute("src",聽"丟t."聽+聽?Typ唘倗倗倎addEv勑Listener?????偡偟3????????傔3伹兿€鲌????倗倗倗??????偡hipTiles埡new聽Image(冪?es.叞丷"€檁t€ng"亀亀s.onl凁亰刜?亣亙曐??????2?亣亝凣凣凣??仛????凣€珓乬乫???仌largeRock尟凮凮乢乚刧€聄€缹讈焷焺焺焺焷?爉edium劎劎劎乬乬劘劏€藙穪瘉瘎縿縿縿繆鋗all劮劮劮乢乢劘嵃€羷焷焺焺焺焺焷猵article剹剹剹乄乀剰€箘g乷乷刜刜刜仹switchGameSt?(GAME_STATE_WAIT_FOR_LOAD牀/>}
No勮e鬶at鱡韚st悛册nd餽e厑?ree骵唄€賗nstances飂錫ch螃?濡悂h?€8ey骽ar債佽唒?鎴X (or€Js).蓙﹊s鎢nction,刟o靸駃n飖r魜箂hee?詡槷xlica亼骳ope <囻骾ze="2"><垚?sTo婹?t>鯽riab倫will鈋鮯e嘓o鉮eck醙a?呞僄僄僄僁匭C嗻t??墮俍佅佅勛仯???ba凱仧啩戅()佭佖?whi尭姞?d鈟妶l醩禓s?噽冄ed奱丂?mak匵t帬sy鎹?圎?ang孒斞巿戙仩跌€﹔t鸲0ing侁g徆wh惛?鑑v凎Let鈥檚鈘iefly€纎孁嬘囩囩囩囩囩?now:

聽聽聽聽€Eplayed:false});??soundPool.push({name:"saucershoot",聽element:€縯S伭2,倵偋兎兎?兎兎兎兎兎€績?兎倵兎兎/>丱冞witchG儓State(GAME_STATE_TITLE)仹€ }?}
In鬶is鎢nction,鱡鎖rst騟move€鴈鍁嘓靑stener鎟om錫ch靜aded閠em,丵n醖d仛?s鬿飖r€s饖懫inally僐c€P亃<吂骾ze="2"><哫圵圫)?t>偵se偁侀g?€墍atitl凁creen.

P峆ing?奨姺倄俖3俖俒忷s€槅╞e饛掯s俰??唜?伜?嗿寘媍Chapter聽7.譭勩no庱pri侙that僿here,鈛t帢咶in??124596???Example聽9-1??鲀 徤gi捿nti€榮et飂俙d擑or幘叝慱?????醫鯽rious唒stance€Q斺儮戰??nee柀忹晙剎e啠???搙?Expl俬???pre晿t傌earli欻?涷c崳€€clu冡€瞝ine:?瀼杇?杇勛堖堏SOUND_EXPLODE,.5????">W??wa戱壖a?婍暬塱煛焈????夁?●as崲?co僇ts朆姾?凨亯€qvolu犺挐€?蒮?卭撊佔嬋availab億?槦灎??伱€趩I3???Now,靍t鈥檚慝!?奝a溊?魕p劉applica戙?鈥攦yobject猭?儈9?惎媴5?澢澙#8e瀾">穪?O?I橢?慻??儣潣ha喐look堿炟収婙案hey嵷l櫒甊沍K慩侁??榼彔cep摙澒偯?叕???鬳chnique鋏sign侷僠傞pro喰im灷so廀伕ver杧嬘?屄醨c稨儯尶n髐?唭?σabuild傝.聐劍??槻avoi?me刟s勴or-?ens㈱ask?倃倃??fly鋟g卻execu卆.詩1€especi?嘜嘕姽partic€€es伻匟???韚lti╤嬳冋s儁fr糱ick尃壚?wer-p€1??t渀m媹壴a弍ndheld?vic宍憃壜c??p?s?r刪?????憌憇n莈o耹as?Ex嫲?棗棗棗??I瞇嫅幒爅婇矒哵?封?嫸朡?urs侹囬e剛???k屶憄唅拣€hsaucer崙?y铫棏饖钥equ恍?巺抐罚儌废houghデfoc篽徿?翍Z?se伬ad業媉n湿鳶cri????塦si僫?憭fu睒?廹孫廹廹廹廱A?€Avari梺潬廤廤廤?︺嗞ne?坄侤牽牳co媹僟僟汢mak?寵勁??妳亏硷囩勥囩合菏聽?聽倕?聽=聽[];
ray屰ho敼lis池f侴侴侲??橨畨wai嶈眶.議en傔傔?E炨de()??懕恴忨a廎,抽呪fir厾股礲e冐he?瀜刌欚il瓛歚?囑.蔁?€墎偳叞鈥減opped鈥潏癴?top?€Y哶?媤媤咥?ck?異c楶刡哥?newParticle鯽riable鈥攚hich閟狎eference鬿鬶e餺oled饌.詟??髢?t>createExplode()僟僗function鱥ll骵t傆rope偘es飂€拏繀鲄鱾焧>,醤d仭n 鈥減ush鈥濋側叧e€饌琫xisting傳傳喌s傜厁array.

O?a埼鈥檚靑fe鑑s鈋勑exhausted,嗺??upd墾?s壙壙壙pli尮壯亴鎟om傜傜嗙嗙嗙y夑墿墤back閚壧侽侽侺P怭俫塅讎檝e銗尣??temp巁?摕嶉allevi侤??墴墴墴墴on宺ne剄o勌倛?insta僡姼ea棸fram€鄆ck彈彈彈彁椬剹冟max剘刼?lue嶋be鮯刾in憳枲庣c噾d偳偳吇Object嬦噂傶嬍傟?嗴偠傽?偡侌g噚St側Init倵厞堌堾?befor?庉倸sou戣涷i?she瀤load?events奒a/妎妎妌Let?tak?look釥藚穲g坓坓呑収now:凗blockquo呚凟4凣凜僶僴俶聽兛兙{
聽聽聽堷聽(狧丳tr=0;€0<悧es€?+伩伿€!伜?e聽=聽{};丱丩?ol.澅(伔e)?爙€g燾ons.log("?ol="聽+偗偑length俒}娗€9?巜??As鵲u擯ne,憽simply?er挷媜媙0儑嶡漰??1??姩懜h僗憃?湉湉湉湀臂plageneric飶"?擷狕elem枲殟竡浫沉寡疧劅?各曠曠?楯??鱤e個r倧倧??偗偍剺g儮r塠?嬜亸If啛啔availabl墣??ad嘆?偡勏嬜傳辰f剚it傕ttribut苦a?set?no???non猒猋??旀1攭旓€`align="c嶡er煑叐1€xb€攃olor="#000">NOTE?槆儚冿冿??僶?T?on劺ty櫌啝exten娷?実嫎掿嫿?愰埜塛焾紐not峬h杙儻儵侶our儴a?婙孹?侾comm?so溉僘algorithm坓犵?em??H攫傃呇バ牋modifi贩?橶橶??€?巿irety瘲劅専専儻瘲瘲凗x,y,num,type)??牏0yS笁(SOUND_EXPLODE,.5)瓽盙€0帺C眀€T眮?€}盻?爄f侙煑煐聽>聽0仱佅佁監阐?瞃op(?仹仹.dx伜Math.r└om()*3仹????喒?唃乷??*?-1傁丒稛佔佔dy???????乢?傶勏丟勏嫃??.lif嫵円fr?匸0+30????惱侸0乢乢乢峩x???楻丣2丱丱丱?乄乄乄丼?y????丅€I乢乚//ConsoleLog.log("侊?="聽+偋€綁俧?.push(仐乷乷嶰€紑?}w???T赶?t>upd⑿刄s?慲p﹢rough籓倗籓籓磕nstan?€卌es,鮬date鬶e醫tributes飂錫ch,醤d€醤鉮eck鬿骵e鱤e€╮伈particle鈥檚靑fe鑑s鈋仩exhausted.蒮閠€?仾function鱥ll餷ac?俶鈇僷in€玱ol.萫re閟€抍od?€侎ad?o 嗐P偆s()仭replenish僃:

儳儲if聽(remove)聽{
聽聽聽嗗P唝push(temp匁)乄乂s.splice(€岰tr,1丼€*}啅€9厽?p呏9呑呑呎5€xb€攃olor="#8e001啒Adding孮a觮ep詉mer儣冿壐儑3儑儍In Chapter聽8,徆cre幚d剺sim?忕孏FrameR?Coun俋塛徹object餽ototyp撫at鲿纔s偫愋di嬝ay搒urre?f倷驒y丳€裧€墎箁unn堾.讇鄷@go壉侤exte?棪ality?th杧c匊乤朓婮鈥湙皃魦a.鈥澰?€煑脜X偮€檯€ff?n欯calcul?betw淚呉厴o壾?鎍cto?剙€瘍佽?劮??接lsФtwo挗熪-le歅骳ovariab竫?︴匉勏勎欩勥勜傝憗毧???卭????last竔峛泍T緋.ge€?);嶁丷冄?1;勏?????????偋嶣塩?櫺??€`which?reviousco篴惫iX嶰嶰勛嶬寚寚?寚?bm〃睧??牆t?倧嚽嚽偗伝ωea嗮唻tick?ч堃oc儼撀??╛╛僶亣亣?仾s()乷乭㈠摲徔彠娮摲?劅劅r.prototype.凎s=儏(ゾ?爯鴷o敘洜聽D€悤潄w乻尡Di娥?c梬梬梣-槦€€侹?(倃俼/1000)*Ы伹伳?兎兎厛婳??娺娺歿丳al嶨?????抩橮朻subtra嫎杢偗晽晽?倇from??(竩?偳偳俋垪垥??return僈)瀏瀏埧埞瀏儚瀏??,鋓vid伔伔姧姧?燽亸亷惐??(傃number飂頌ise︷ds?a侙ngЖ€?,醤d韚ltipl夡妏€x奺desir娯r噽.蒮€趃€憦(runn帣?surplーor€q俊cit?崏betweenOks?巢Ε?噺噺噖t>刕悵偗?ok曡ng圚tha囘?o鎖nish谨兿gre嘝r鬶an 1 (a鋏ficit).蒮鬶e鉼rre伕frame鬿ok靍ss鬷€yhan醾榥gle?,伈step鯽lue鱥ll鈋伌亯<僸凣凣凣髐rplus).

For鍃ampl冐i叄las厪厛€(靜ng€H餽oc凱?嗭乤匯compensate鈟韔v嗋錫ch颾ject噚litt噚bit?r?倅喯單圛嗙嗋埆of乷乷?丳.蘣t鈥檚閘圥tr剻this匑th嫴嚛図塐塐塐塇倁say鲊ha凁峑aucer堎噃?i€(pixel峱o?r倯飊?娔ick.詣zould?a啩啩dx啹??乢>5乄國唶唶唶徦坺忲啽?also?屓吚ur柊sired呬奟伻??40?卲FPS?mean曻t夘坵坮塹use鮬傁傁2嗭偵m匑iseconds (亣恄000/40 = 佔佈槒埱埱廏s?uppo劏吺?僟傂濹Diffe榅ce僶?betwee栯檊噾and沖€泭梻鲊?倵囅囀.蠈鄃佷runn沘匟?慜偋橤偀倽饢P剅鈥攼陯菂z僯?僫?tak€Q濻Ξ??to嫥嫥嫥嫚To鉧lcul??叝燱榑榅,鋓vid伔伔岋岋?岃y亸亸懮?t>:??26/丄掟.0?浛嘷嘷嘰We韚ltipl??灀刪?汳儳儲fps僌咗f?溼寵?亸>勝 * ?1.04侘€9???捝偀???曌乷奟儳厳榃椉.耬ca熒昤?曐in揙承嶡?玪?敘察sl唹娯蚕a汓瀙傴€皡pn炑?铴駜捊槤Ta剆??t?????磯I???倠侊媜媜媜儑靾貒侊冏佔敮???擨??????朙i晥穃c剎ge粯n?m?v屓ors忷崐峝?仚upd煴functionΠ剅allow?,?ke嫧a騟???smoo綻look鍁獺wh玸?a€ fluctu乸偫儏?強addi??僙嗿劶廽cr??冿冭﹫si??mann┬acro將e塇rio懭br?e囸瘔sy亁m彁res壻?nl粎甕???檋r師師師帢H?剄new寚寖珟堚岀屸:傭a/?="4??憞憜?er憲侷blockquo姞倵倵倵倵倵.x聽+=聽€t哫夃X*嶼R?Count€葧?
<偳偖4偗偗偗偑咥P偺.x嗙€x喛喛喒?乛堖€穪埛埛埛埛??W嗚ave頾w鉶vered醠l飂鬶e韆jor鉮anges鬿魎rn Geo耹a內r耡sic閚?€鱻駿xtended?.蘣t鈥檚靜ok醫 Example聽9-1,鱤ich哷?吚entire?de鎲€inal鐗??堊憞庍庌5€xb劮劚#8e厑"噂噂d苪?Source寳厪凎屒凎凃i?噚.聽僄僄鎯As傿噆listing媔??僩僩嘩??<!doctyp?html>?€賭?聽l惏="en"€鐎醗ad€弨坢eta聽?rse凐UTF-8仧?title€慍H9EX1:噅聽噒聽噠乤/乶侢script聽src="m?rnizr墾6.min.js價侁乕侘侘爣Y="text/java€粎Gwindow.addEv掟L婡ener('load',聽e€筗?L€榚d€爁alse)?function乄乂()聽{?€*聽聽聽聽can凘App(?€*}€_偀乕Suppor哷倧係re澚聽M堩.亱偦倵倵爏俢edAudioFormat(a€a傜傗va??岯s侜グ""傷?if劯?冡PlayT媹("€?ogg"偫=="probably"聽||聽?埇聽????冟maybe€q卂?垷厳厭?叝聽}峢?咇呯兛兓wav呯呯呯兎呯??呯呯??呯呯??呯呯呯兛兛兛咓咓冪咓???咓咓?咓咓咉mp3咓咇敡伔?侘侐樝?????敓?!欉梮()呄厽呥冴匞卍婣伅€铣癈傭?獂um熜.getEle€YById("?"????倊?C€?"2d佔壸€??/?nds€焸眘偁SOUND_EXPLODE孋expl?1宱?亄SHOOT乲shoot乢乢乚AUCER仐亹aucer伮"伔伒MAX_佉S乺9傁?咼Poo宠?new聽Array?乢爢L?nd€飥飥?€鱻鱻?€鲃%呴偪€還邆瘈鐎鐐焵鎴穫蟻???????漅潻櫉?applicatate憌岞GAME_STATE_INI帇0?丟丟WAIT_FOR_LOAD亰5亸亸亸TITL擲1傔乄乄_NEW_€y乯2乷乷乷乯LEVEL乺3亀亀亀_PLAY暪TAR?4亸亸亸亰??????DI呺6????_OVER乺7亀幷currGameS嶀屪???F?歛ull愊愇titl個screen€讉媭陚Xrted?fa℉??g儤聽ove旾俖俖爜O?倃倃倃俿object獱fo佋聽p磮乄兦€醗nviron珌€鳈碿or?€鐎醠eve€纭traShipAtEach晫00乄乄乀sEarn喸???囸丄?嚽唙?field€穪離Mi?偳€遖x?€飥韞伹€還輥莿_矎壝valu佸bigRockS婃50;
聽?畝?犅犅爒ar聽medRockScore聽=聽75;
??sml??100??aucer?3?丱?/r侤乣cal?constants?€?聽ROCK_SCALE_LARGE兓儻丱丱MEDIUM丷2乄乄乄SMALL???creat匄gam€0objects聽and€(rray厙囦playe€@倛{}冞€魢€鑋]€飰繅竴€傋rMissile???artic????????Pool??憘axP僿媃恎?new?€鐎鋞emp€飲飲靗eve冭specific€鐏髝鷶iMaxSpeedAdju庱?亀乻S囥ax????OccurrenceR?嗼?亸亷?偳???FireDe嶺樧乷乷乷凗3乢乢啹帇??仧姁keyPresse暱俆€誏ist=廵?佮t傪宧hee?挦hipT抷?€讇訙?擮吜伩€鐔萢rge庒€€ium???al愙€€栵€鲊_€!function聽i?Loaded(媂nt)灠亣亝€!l?Count++儑€恝HHole.log("乤ing:"聽+佔t)伹伳if聽(?聽>庁劚sTo勆剰佺??ootS侌d.removeE??ener("can⒘through",噺,園alse)?偪傔傎2傜傜傜傜傜傜傜傜傜d3傜傜傜傜傜傜傜傜爀xplode埊傦傦傦傦傞傔傔傔傔埊傜傜傜傜傜傜傋傜埊傜傜傜傜傜傜偳媧秤慻??????偪??堖????帲傔傁漦冞?冞冞壸冞冞冞冞冓傁偪兿兲??凂儥?.push({name:"嶵1"喐elem凱:庽n噏縝d:?}嗭傔?????斚?????????????????峧傳傪?傔傔傔傔傔傔傔傔傔埧傜傜傋傜傜傜傜傜垷傜傜偳傜傜傚???€繄鮽總瘈2??€鲀??僄???檊倵凎凎凎?凎凎凎凎凎€繈$偡偋凎凎潡??witchG內State(GAME_STATE_TITLE?侊伡}€縺弨efunction凨卝(嘮,volume?倗聽ConsoleLog.log("佡?"聽+€\奯佄var€霧€)聽=乢乢乚Index乑0???▓p呞??€ if聽喅?length>倶?亸€Dwhile佇!厳聽&€*?匇&l倅??傱?????嘊?[?]囩佅€W?(??.e伻倫||聽!€軗{劯咷冚.枡??堊僄€W敺堬呩tru巜?€W€D剣剙佔佔犅犅??硛€?犅犅犅犅犅犅犅爙聽else聽{
€蟺W€WsoundIndex++;亣?偪€騺€還顎噭2€oif聽(僙F€))勭?€3ConsoleLog.log("仾聽f€9")?仐€!tempS丼=啢Pool[嗺].element??€!//?.setAttribute?rc",偞聽+聽"."€BaudioType勄倧偗偓loop匉fa岎仐亀仐亾volum嶡仩€[伅亸?仚play(剕乷専愃??.length聽<聽MAX_SOUNDS)????堒not峎佭佅卂峊doc喐nt.createE?("娨???峎峎峎峎峎峎偀偀嫹嫹嫹仧仧仧嫹丟丟婳push({name:€獏`敶:俷€爐匟:厼€垈蟼縺2兩ed:true}?弿怗€弨efunction聽runG劆(弴?curr匄€鵖t?F伂噖偪€弬?爏witch?(new€J?僿僿乼?仌儚娢傗朮伹伱傤仧伩傾a?GAME_STATE_INIT:乷乢仧?圤??g€礗ni?侘€W燽桯k?€蟿莿莀WAIT_FOR_LOAD?仐€W???€礧aitForLoad??€W匞?僩匞匔TITLE?乄€W????Titl廹?€W匃?€邉鲃鯪EW_€y?乷€W????New?凎?€W??€飬?W_LEVEL?亀€W?????Level??€W??€飬/?PLAYER€iR檞亸€W匞匞匞匞eP?r€Xr櫩?€W卂?€邊_卂匵姀仧仧匫匫匫匫匫姉?侽??€繀??姉DI旂?€W????妱Di旝?€W??€邊??€ZOVER?亀€W????€鵒ver??€W?甇€绯煷'€彺'冡穙偋//do硛othing聽whil園l乸€倧鴑ts聽oc?侊囕onsole.log("do亽俓...")亸卂卂匽c嚇teObjectPools匞僟for法va€0ctr=0;€0<maxP歅icles€?+侊?€2侁盒亝?{}寳乢€!p?剻.push続佸嗊岋€棃鲌鰝wol="聽+??length偪墬墬庯荤it(恐冞姱姱)挿乄€ 廰Count垈0??itemsTo??16俉丱€ explodeS俬丼docum?.剆Ele€q("audio"剬?亸.body.appendC敇d(傜nd佅佄倰Typ帿supportedA€箺餸at???咃€?setAttribute("src",聽"?1.?儲倃倃倃d.addE欰Listener("canpジthrough",??ed,fals倳偪偪偩2????????傦傝佔冿?d2????????????aded,fal?硛€卻e);
俶€E偪偪偣Sound聽Manager傏Stev?傜12傗75備€*??€ titleStarte偢=€坮ue劅?}else{€縺還 //wai?fo剤spac刾key?lick伅仧€ i坸(?PressList[32]==凒)僌亣€WConsoleLog.log("償p侷ed"姀仹€W爏witch岏嚢te(GAME_STATE_NEW_€y?伹€W墴墲fa堣媉佅?€飥瘈縺線弨宖unction聽g厱New咇(?堊堊堃仹仯")仧嶆se嵷up聽new???l?l嘮0堖妿cor孁€飥邔╨ayerShips?3???.maxVelocit懭丳5乄乄丷width俿2???heigh喨???halfW倊16丱丱丯H偀乄乄乁it倵24丟丟丒倧丱丱丮ro??al??0;嶑ho崹man€╠egree婡to€ ur懆th屝s嬸傦傦傞thrustAcceler?傟.0?仧峀issileFr慞De€爫亣亣?橭丱丱丣alpha嗐??坥?搰??x???.叄???珣Backgr玦(??rend柛椦Boar??W_LEVEL渻佭???瀘L湁?儻rock汼[]劅劄aucer??堶erM????жic??僌僆侽??⑴++€蟺蟺萊哷MaxSpeedAdj?€?.2摋钵病佺佺佲>櫂3壏佔儻佅?€瘋S囉a?1+Math.floor勊/1織佭呄?厔5厙亸儑亣?乬卬€噥莵繭ccur杊ceR捜⒛+3*?俫?????厽佭冞佺佺冔3??€梻'??1+.5叿亸叿伔伈匶匞乷?亀?匃匃€梺讈誇ir??20-10?伩?佺佹<20)聽卂伔儚伅儙2?厙曌€瘋'?寧20聽+尷叿伹叿侊來叐5叝亸儚仹儚?収収収€瘋峎恜2収伹収侊侊侀?4愊佔兎佅佅儼?呯€梹?/cre噝俍瓟??or?va€0newぉctr=0;€o??3€穜++呥?€W爞焎k叢{}?伔仐€2亴.scal?噊?€W//乑?€鐏'/1畫arg乄?€W//2丷medium乢?乢/3乑small乄?乄/thes唒w縳聽b€Pus嶻a祱€?聽divis孖宺€殘H傕iz厙倧€W//50嗢50乄?乄丵嗠25乄?乄丵嗐16乄?峯峫width亰6斶丟€W仏heigh?仧?€W仧halfW僋32伔乬€W伔lfH僶伣佺仹佺佸it儚48儚乢€W伅t儑伓佭仧嫃/star亪扝徧漛聽in聽up?硛€卲er聽left聽fo€Xship€0afety
聽聽聽聽€E€EnewRock.x聽=聽Math.floor(€Zrandom()*50);侴?€V//ConsoleLog.log("傊="聽+僕x俉?€W丗y剹剹剹剹佺€W剹剹剸y剹€儌W?€W丗d?凮凧2)+level?MaxSpeedAdjust偡俫€Wif俖俒<.5){伩?€W劅劀*劆-1僶?€W}€鱻穫w倁y=剹嗭嗭嗭嗭侴€W嗭嗭嗭伩亸€W?d?嗭伔乄嗭€鱻菒Erotation槇?聽剺聽direc€箒騻佭唚唚唚唚丱€W€W唘?Inc?喎乬€W啺else?€蟺W????乷€W壌?€邆讉詀nim傏Dela溓溓埾*3+1?俫€W偡偟Counト偘0佊?伩?侟scoreValue佢big€筍€眲伩€W墖惤冏佅亸€Vr伆s.push(?嘩?€W???聽creat擨崯cぇ勶€觾/傔?€菂esetP?er(伩€witchGameS傪e(GAME_STATE_PLAYER€iRT佋?慻€峟un欌聽g倁兓€Xrt(樚亸?fillBackgr彉d??rend??Boar??渰p儂.alpha聽渷棎湉?€2亀乹+張.0?仐亣€ 嵶嵱?ha峝context.globalA€?倃??€繉弻弻弻宊LEVEL?佔啹r.??fa僗?//?dd?chapter聽9噂?幭€咯B帳hip媴x,兤y,270,焪?埾埼乢僑棎帢扨単?倣heckKeys?€飖pd夅€讙o?€袃A垪???Collis栘僩??ForExtra埪???ndOfL郭??fr徃R呅妧c€AF€眱迊瘝W???y儎摋劮?€飱'?€讑'€讉弶??圵??????????堶?€弶墄?喐聽塛毲??曍梄劎丱槪?.5*xMax??檣?y???facingX揣???Y???.mov俫???俫??┳??俉issile將晶亣煰渙渙?偋︼爐ru厩?€弿摲摱???Math.floor(s畅/ダ伀AtEach佇&g册€苨Earned偀偀呥┐s++??€ ?倇++嗭€棁????俹噖rocks.length==0?丱醋醋醋囱NEW聪侊?厽厽厽erDiX刉厽緼article吔寖0聽||婾M撁??嗊倧illBackgr?d?ё?惐Boar乄?哷R婇?€?teSaucer???埩嚨丱?丱teSaucerM?硛€卛ssiles();
聽聽聽聽€E聽updatePlayerM亀亀乬€ renderRock?€??Saucer????Partic儻丱丱倗?亀乄亀r啅亀亀亀frameR?Counter.c€AF€眮秮邅瑌else{€縺還 p円Ships--兛?€!if聽(乄s<1)聽偗乬€WswitchG勦St厴(GAME_STATE_€ZOVER嘩佅叝?€蟺W//reset夈墽?€W刼刼刵PLAYER€iRT?佺剝€莯梹杸c€?爁unction聽g儩冡Ov匭壪倃//ConsoleLog.log("亖聽亼聽?"勶屪屟?丄?rted聽!=true)?亸勱illBackgr戰d壸?旂偘coreBoar乄?婖etTextStyle??€3co暊xt.?亂€Ger!",聽160€070?????P恅s塇pac俻To聽惲倞3倝14倳偪偗€ ??=聽??斶斶€繋Fwai劆fo嵏s剆key吀lick伅仧???List[32]=?仹仹€3懐懌償p侷ed憲仐€W槸槸槷TITLE?伅€W墴墴爁a堣婳佺?€飥瘹€g€彋曠曚歡俖//聽draw聽b乂聽a€)懷亣挆挅?哛'#000€'?亸亸Rect(xMin?y€;xMax€rax摟嗙€弳鐔鈿7?喿兿兿匴匭fff€匴亸亶€@乧15px聽_sans亣亣亜€)Baselin?top亣咷€弳G咷leTit唎僩僩唎僅唡54ebeb?仧?唡20?亣亣???亣???唦Credit籤啅僿啅岟岟?亸?岝2?亣亣???亣??唡唀?儑啅啂"唽"儚亸亸墶('傿?聽+奝€i琲瑧2??勲緵Ship(200,16,270,.75)亸儣儣儝X僽p?s儁2儻噂侽侽侻FPS:俥frR?Cter.lastF€﹢妭?匟傪傦孫€弻O孒checkKey抴剰??柄s??鼻鼻38鼻亀倣thrus?€還!va祼angleInRadi?弞?.ro?吢*聽Math.PI偁巋80嶨?€!佨facing尷俻佉cos(僕僎恄???Y?sin????嗺mov処Ne柏喿€?€|?Acceler嚉*?両卂??俲Y??gY????Y哶僄僄傾cur檂tVelocity埾sqr((噂*€_揌+偡偋€ 亸亸亪姺伅伅?刜刓<囘ax€諚??€W弌凕啟刜嬁亸€W佭慒宊佭亸滐€噦o?殭圵仧?else喦€蟼W俉?a亁剰刜傦€繜?7?妛亣烾漴cc?kwise亸???-曠€璦l嶦咓?卬伔俓恞0卭亣€W犅爌layer?硛€?rotation聽=聽350
聽聽聽聽€E聽}€聙飥縺縺縤f聽(keyPressList[39]==true)聽{亣仹€ //刯e聽clockwise乄丟€ player呯?呰€瘈猘lVe?ity;???伔俓>園匞仐€W?佅?1?丱塆€噳讇縿讐?壸剹仐€W唶r.missileFrameCount喒€鐎鍰e€?偳倃€W伖S?d(SOUND_SHOOT,.5)娤乷€WfireP儝M儖(亸?€W姇?呠娳0併?佅?€梹棆g€廸unc崼upd搻(婄?€鋯呯???s丟丟丆R枠€€€黃aucer????僄丟丟剛artic?????rend??偋fillBackgr?偀?侒ScoreBoar???塖Ship?x,€Ly€M殅,1???圤丟丟丅嫃€€r嫃???僄丟丟剛嫃?嫃嫃摨懴嬁傋榑榑榎++?亸亸x╛侚ovingX*f?R儤?€萻tep単?宑??Y???侽剱Y聽xMax噂亀冿亅=-€vwidth匫炴els??伬<-伩thΟ佔僕僑劤?★喦€績弶3喢y喦亀仹?喦.height兦喯喯佂喯伵喿佭僩僣劽?喿€棁7????倧var聽temp乷乭?{}??亁匔乗Length=€a.l€?1??//Conso伻og.log("卥偪偪h="杊€讇議漡o勦(?亶Ctr??簗?悂=0悩傋屵乬乥--??????聽牸嗙傋tr)偪偗€ ??侘嫽[€俴]?俉倃乷e]€蟺蚫x★★¤傜偳傜?e€蟼鎦傜傜傜偡??侴咃?瀢伩€W???烓€蟺挺倃渙?劎偋熞€莻煢鱾g€W?伔??佔仹?€飰菂'偡屖?壡佅€W劮?ń€蟺桐?侽壪劘佺€莻З鱾瘋繀'伩??佔仹壸€飩弬弬宭if氠緀乢媜喦伹伵嫕??fe?倧€W㈩re????€W∵瓝splice导?,1佺€W?た聽null凎亀媤€噣梹g€彾琑ock禶?丟?劊????r侷癧丣€偟蟻瘚邒弋菄垇?聽佦禍傳礯俫礯丣?亸h;€ご寑t碂侽??硛€?聽聽聽tempRock聽=聽r€Hs[€1Ctr]
?€3仐亼.x聽+仺€哾x*frameRateCounter.step;侽?侽k.y侽侹y侽侽侻倃俫倃k.animation佢++?乷€!if聽(伔伔伆聽>偗€Delay){偋倵刜伔偗偐?0?亸€W佫rot佉堖€縺窱nc坵倃俉?佺倿嗠4?仹€W剹?侞??€W€!}else???lt;0凎佅€W凎侊凍4凎乢€W}€鱻穩苺飥邏g栫?xMax)聽単仐€W伩匉xMin-€idth厪伔塐冿????墬?€W??ax兛?圵€飥邎W滐圫y圵伔伔?伣?y?圵?伹圵冿?圦?圵??€W??圵?圵圵€蟺2//ConsoleLog.log("updえ㏒聽"+€S﹑)?傋€杻7€宖unc杮倱Saucers(?俉?firs?che児to聽se塴w€@waⅠ€筧dd€(€鴤們穫o??s.length?聽level凷廰凮佺?Math.floor€[random()*100)倅=倃rOccurrenc畾傁偗€W嫰嫯cre嫪叄"媉伅€Wvar聽new冇?{}ゞ伹仹€2仦?伿3?乄€W仹.heigh?13伅乢€W伅halfH佅6.5佔亣€W佔佈W?1伹亀€W伹.hit伩嗺乢€W伩伜匞?乬€W伹僵coreValu嶈伻?S€﹤伹€W?椚憿?挆rF€膫G侘€W侴侫节侽侽€蕚W?€W俉俈晶奊仐€W佺.missileSpee?凮洅€鏳倗?€W倗d唟??2)?伔€W??侓佽==1?伔€W????-1兦丟€W??€熶choo癆betweee?lef?o瀀r?edg??tart倧侽噂噂噂塛)噖仹€W€W//僢凘剱凞?聽g???伔€W墬墥?45懴?€W伩婱伱-1*懬r憦娺侊€W?嘷€蟺W嘳嫇?嘡仹?€W?嗊?嗊?€W伩嗊槆喦極伅€W拸?€飪涚涚僩涚涚倗俉倗燝俹俉?€W俉?侽??佺€W侴r.凷梠梠梛4既慓倗俫€2?s.push(傤乢?倵€縺縺考雝emp槛荐?丏凷Leng祵勢l€殻伹//ConsoleLog.log("upd娳rocks婛佡="聽+€?俧f(刉rCtr=劎th;€?gt;=0€?-倵€2囷啛rs[佫]?侘?/shoul?亱??乷乢僟昽淡++;聽聽聽聽聽聽聽聽聽if聽(Math.floor€[random()*100)聽<=tempSaucer.fireRate€衋mp;€*聽聽聽聽聽€E€Eremove=true;丣亀?€ }€飥瘈Eif?係刾儚?€Wp?Pool.push呄€?佺仹佺?s.splice(€岰tr,1併?佅?€飥縺縺弨廸unction塝nderPlayerShip(x,y,rota€?聽sca???//transform乯??context.save()幦//€Y€萿r兏t傝?€€i凘€Xck???globalAlpha聽=墷seFloat(p呞.a€?弒?聽var聽angleInRadi厫??聽*聽Math.PI?聽180???sourceX侜亽floor(?倳/10墍%侾€A傪32倧倧値Y倧倧倧倣€3*俹俹昍伂thrust??姀妶drawImage(s彣Ti擑2弎?€VY€P32,€聽倵倗?冇x,€Ly亖32宱斚else勥€蟿邉邉遱勛勛勚?俹勄勄勄仐檹?€?/restor暀勲?叝叒丩?pop聽old?揂to歲ree橲俖俖梘梘???€彏?瀧Miss夞(????乷l匵儛{}??亁奒乗Length=€a.l€?叕?埞Conso伻og.log("卥偪偪h="聽+€讇議?傊???亶???;€+彻=煼傋?乀--氉???嗻朓?聽m?喿傋tr?偀€!??侘嫬[€俴]唃俉?瑹瑹瑹瑹瑹??湨=ョ(1б4呯勡.wid?偋倵偋烌偋偄偋偋偄height?傋嚳⑦④???Ⅺ俖侽寳?喌,€莿讋雪邆'俫仹仯x侴€?佭????€莿{?倗俫塛俫?€g?Rock?侴?mp?み??r???€€伅¨ˉ乊櫒伩?€臓魛t?俹夌氾氾氾氾氾侽侽嚄剷[凈炏???伜?((倕.ro?嬝媓?5殫€驕飪??Y????/傶€譂7恛?€2switch俹scale媤乄€W燾as妶1:?€飥W???large僘???浵俉€W崡?涘嚪t€嚍髝Zy?侴€W傋傋傋傉竜仧€W€Dbreak丱€蟺W?2?€還W???medium奊奊??€W徑媆嘩嘩嘩€噴'?倃€W€W傋傋傋?仧€W??€縺W?3?€還W???small??倃?€W??嘜嘜????偋€W?傋傋??伩€W??聽聽聽?硛€?犅犅犅犅犅爙
€噣Econtext.restore();聽//pop聽old聽state€`n聽to€xcreen俠倧?€杸c€?爁uncti?renderSaucers()聽{?俆var儀emp?聽=?};丟丟剺?Length丷€媠.l€?1伹伵fo伬(侘rCt?俫th;€?gt;=0€?-)収偡€!//ConsoleLog.log("伋:聽"聽+儑r)効?€!嚽劅rs[佄]佀侘佺巼.sav巑€Y€萿r嬓t帠i孹€Xck侽?婃ourceX凧0厪?乄丷Y乄乄乄勴drawImage(喅Tiles,儈€VY€P30,15€@偀倧墖?.x,€o.y,佢婫仹刼椬椬椬椬椬俫桹棷棁棁棁rMiss嘺椏俉椏?乴楓???乗?€莾倶g?晽晽晽佫俙曌€總?倗氱氱仐e曅=€弲n毚?沴偳傊乄丼??啹啹啰摍聽play毩m娸嗃€粋讍穫煋_?屻勄埳滾俹潉??漘漘漘漘漘侽侽?漖Math.floor(0聽%聽4搥*?匎.wid?偳偡偳炏偳偭/偳偳偰height傳?爋爈particle??爙俹俖岀?嗗牀勭勨,俉?俉仐亹⑶€€梼拏蟼瘋蟻弰^?伹仹塆倧€椊P宼亀?乵乄乄?€灔佺亇倃€撷%€棥g偡尫?劅剻[??佅??????奯俉姀愗悷??/儼︺?伆ype=啛?€力弬/獨witch(亣亝塷乷€Wcas唸0:凲?亸丱€W婼?€鱻W€Dbreak丱€蟺W凜1凚larg€hro?乄€W刜刐2乷€€W刉刉€蟺W凷2凴medium刜伅亸€W刜3?€鱻W刧刧€蟺W刣3刡small刜仹亣€W刜?€鱻W刜刜€縺W刔4刏???€W??燺€鱻W??亀?€飥叻'圭?凨??棺偡偋偡棺偡偝癸偡骨厳偋骨骨骨骨骨骨侽??篃剹箂€Ц倐俖?丒?傳傳傳?噺?噺?????倧恄€梹g€`€_?燾heckCollis€€?偪瑖幮剎throug度泚s€乪侤m縦s.伹伷Ther呧wi?alway伕b€Xan?a啫hip嫰?bu?聽not聽always聽?硛€?燽e聽missiles.
聽聽聽聽€!var聽tempRock聽=聽{};??聽r?sLength丣€?l€?1伅伅傑PlayerM????p乢le僩€菃;儻??爏aucer?€寔莵莵菂lS乑?丟丟倇??€菂7僼俖俓?:聽fo倶(?Ctr=媉h;€?gt;=0€u--){倧偗€ 巓?[伂]凮伹伷?:剣嬁€褎蓘弴謮'俫€3乷侒?€縺粏g佺€W啍???叡[€偝噊傁偀€3if嘓boundingBoxCollide(?,冏偺)卂侴€W€W€ //Conso堾og.log("hit寷")壏亸€W€W聽createExplo勥k.x+€^halfWidth,偗?€W€W?k.y侽侷Height,10囮€簊ca囆厳?€W€W娂侘侎<3)殬?亸€W€W€Dsplit?倗倐+1,?.x€o唨匴侽€W€W€ }乄€穩W€W燼ddToScor?凱€xValu堬亸€W€W槸??ce(€窌?1偀侊€W€W???null?極伹€W€W勀≡?丱€W€W捵???乬€W€W燽棃佽凚兎?€W€W伓?佅?€W忳?€莯鲄穩蠑貌嫨g€潻)?€晶魛啩總莯W奃磜儩[???侘淿?????€W€W?€W€W刕€l?傁?€W€W夛??俹?,0卭佺€W€W卭卭珿?匫偗?€W€Wデ侽?珿珿彿?€W€W?厀琽琽乷€W€W€W琽倗琽垙€o琽?€W€W洀喯€蟺W€W?樉乷€W€W???亀€W€W????€W€W????乬€W€W??€鱻W€W伔?伹?€W??€莯鱻鱻?/?篳gainss佅伩伿thi乭€!don稜her€0so聽w€@€??hav€ht€╨oop€Phrough偗偀偑儦?€8??would监robably侘佺侐b僡h€(bigge?arra亣乬?縘眊€卓}睖€尡詡穫W€W€W兦俹匙€縺淮僌???佋磑嗈搐傔窜?€W捶捶捶捶儻偂达?€W€W达达达搭俫伹€W€W佭€W€W姱侽傦侽€W婄瘒ck.sc?硛€卆le<3)聽{
聽聽聽聽€E€W€W€3splitRock(temp€I.sc個+1,聽€瀤€ok.y);?俖€W€W爙丷?€還W€W爏aucerMissiles.勯ce(€矯tr,1冞伔€W€W€ 厑S倗le聽=聽null?侽伅€W€W爎嚚刦€i刉??€W刉売???€W€W€3brea佽凚兎?€W€W伓姛姍?丱€W崸?€莯鲄鐎蟺2//che嘔player聽against呾佭仧€Eif聽(boundingBoxCollide斁,倹?&€*僂.safe==false)?傦€W//ConsoleLog.log("hi匄侰"幆仧€W燾姌teExplo勛橉+€^halfWidth,侽?€W歸亼Height,10,???佔€W燼ddToScor刧伬€xValu侊亸€W媱伩儁?佅亸€W∏∏∏∏∏傁俹捵€鱻菧7??偀乢€W冨=浄亣丟€V?Die(傁€??€縺縺繐xnow懭樂樂摳滊s€恘d卲hen€7伣m????finally亸僄偄??囅亹?Length€乾妉€?1堬?佔?仧仧仧?:fo勑(va€0疺=倗th;€?gt;=0€?-?傋?嚰?[佫]?侘侖塎勶坓€覅!€弶畤7俫?侘哵€縺粏杺O?喖P仹洞?叐[€偒噂偀偀爣??奊り冪傌)嬿俉€W珶珶珶?珡?€W剰€l偀?€W奜佌y??瑖0?佺€W琌琌俈琠?俉佺€W?泧€穾儳莵還W?崌慻牗_?伅€W??凩欥?乷€W??冞冞乄€W€Vb彴?僿?€W仐亹濆仧?€W硍€莯飥邧Z?亸?毞毞毞毜倱桓&?.safe==false?傋€W牃鳉鱾4??€W氉氉氈16焸?€€榾縪縤傳偋€W樋傔樋樋?佺??肯?丱€W撓撓撓伔亀涽?丱?懣€棏弨繎[呟瀍憻?仐嘷亣篧€羌'簭??亀?侯??儚?倗€W€W€W儑肚?€慷菂弬崗仹?堵€肚偀俹涚涚涚孄桏秜????????匥聽湩湨倧侽擶擶専€€Wsauce?硛€卹Missiles.splice(saucerCtr,1);
聽聽聽聽€E€EtempS乺?聽=聽null伱侊伅€Vbreak聽僺?儑丱€!}€莯梼€弨?爁unction€PirePlay僃(){亀偋聽//ConsoleLog.log("佱聽p侘le"埧佄var囆ew?坿{}亀乽丱並.dx乥5*Math.cos(€JPI*(冔.rota唓)/180?偀偀倻y偀h.sin偀偀偀偀偀偀倹?侓x+€LhalfWidth????劊佁y?lfHeight????lif娝60亀亀亀乿朮亰亣亣亣亙w咺乺2亀亀亀乺h叒????.hit?仐仐仐仐亼娳亸亸€!斍?push(?€粠讬7€彊7桻瀢?溿)?亸棁厇亸棁儑喦丱扺熶扨.5*€d????扥?y?寽???廤娗亀亀亀廤???嵡廤仐仐仐仐廤亸亸亸亴speed?r.m€薙€连???"併忞η仐//?a哖搆乣rom儼mall冺伹?聽diff¨廞-彎僕仐仈?庂仌y仐仐亹radians仮?atan2(侸,?喦佺價egree併360聽*倗?聽(2€毄膫7尟尟瓽寳寳ed?凕?傦傦傦畷傦傦?傦傦傦傦傦㎡傶1???亣亝痉で?でで晱でっ怱Di桨丟儎柨柣昡di柗?燾reateExplode竲稄秿?礯€鐎?0,4傔傓reset?(€埾witchGameS昏e(GAME_STATE_PLAYER_DIE伳侊??堼唃哸x,y,num,type?伹笨Sound(SOUND_EXPLODE,.5厽乶fo奌(檴part彴=0;€T<儀€}++)盻?€!if??iclePool.leng>?佋?侊€W??偋l.pop嫹仹佔乴滿檢random()*3佔伔€W?仐亹圌墵嚙乷€W冿冿⒗凁-1儚乄€W彸€噦g俫牞効哋佔????丱€W儚儚咃仹亀昽€飩_俖'剴floor勶咾0+3??俫俫乷亸亴?碠?乢乗w枷?乢?亄h孔亣乬亣亜???乢乗灩乺€I亸乷??("?塊="聽+傋€綃O倃?甒伵仧???€縺縺弨彟?聽b?ingBoxColliobject1€S2???爈eft1墛佋.弿乄乁縳乂2乄乄丷r庱偗偑妟€uhit????僟僙?€p???爐op凎儊懽丱丩?偵丱丱a?硛€卹聽bottom1聽=聽object1.y聽+€whitHeight;
聽聽聽聽€!va?2?t2?€r????if聽(凬<聽top2)聽return(false)?佔佇乆伖g伖刲佔佔兿?侚r勓兤left??佔佔乤冎?佔佔兿??tru??}€梹攆unction聽splitRock(scale,x,y){乄傸fo尷(岒new亂ctr=0;€o噄2€噐++?侽?乀?{??€E//ConsoleLog.log("厒噣佮"嘩佺佺姃啰==2刼?€W剈.scoreValue勈med€筍€眳伩€W?width佲32仐丟€W仌h朖仧仧乷仧仜alfW僋16伔乬€W伔lf櫝伩伩亸伩伝it僩24伅乢€W伅?伔峅?旤e柸?€€飩讔?書ml??佅??唎仐乄仐?哤仧丱€W媑?媂幥乬€W伔?伩伩亸伩?恮伅乷伅伅僟伔乄岉嵶€瘋o尛?寖€Q俫乢?k.x乑x???k?y???k.d倇Math.random()*3伔仐牰乬乣パ.5?乷€W僶僪*僷-1??墢€噦?喕??伔????丱€W僶僰?亣乄?€蟽蟽蟻弫€W?凐rota?Inc嚜?乬?e傔€蟺W偗偗曗偋乷嗊€飥邆w.anim倆Dela屵.floor??+1阶俫倗倗onCoun氹0佅佅喛伮仧亀亀?竰侌竗涇"+(湳€€)厪?€2仼s.push仌?亣奊€縺弨峟unc呫addTo瑀(v??倊?聽+???傋€巇ocument.onkeydow?儘(?仧?e?e:wi嶘w.ev?僩丒//姛姎e.僅Cod?聽"儥"?伷?PressList[仸]儾tr喎喎€弳穯瞮p啩啩乪//乿body仧仧仧?????????up?伔???勅a瀤伅?掔圞€鐒***懾pplic?start丱戞witchGameS檖e(GAME_STATE_INIT匞乺c喞?FR?R?勻4氾曤r倄R俻潚er?毬F€讇?俉僕????p?€ va傝i俀椚Tim?1000/傋傁噴etI亴(run囇,??澢/>揰>劊劏objec園p?otypes皑€賮g?墘怟聽util佸?cre坔娔ructor€覠扺(溝劮??伔tha匄wil儓b€孝(ed€竜€賰乴ass侐?_???m擷age)聽極?(噥of(佁?!=伬'undefined'聽&€*???ull倵楋?檙冋嵡煃€3//唜?/柛ti蹈囩?€鈬爻鴢Hign焣侁妵僡嚉?g徢?en僘?仛?乄丳??楆憌憈佭叿伩樤fps)聽{?硛€?br/>聽聽聽if聽(fps聽==聽undefined){?丱乯聽this.亄聽40?爙else伋?亸亰€@?爙?乬.lastFrameCount伜0;?爒ar聽dateTemp€鷑ew聽D€?)丱冋俀L倶丷伣.getTim亸亰delete?€鐐o劯t?劘€呉偙僟僟僞伅伀ste?1?>堊>圸R俬坺er.prototype.c€憗婔unction()聽?壙劘壙壙丱丠t厫Differenc啅啅唹-嚪€€?喿僈(倃俼/1000)*愅伹??兎?亣尫尠++?栵???聽>=侘?+労壵?聽ConsoleLog.log("仛聽event"剣棢??哷儑卲伩伩€???柉???????摋></script?€ead€梹恇ody€弨坉iv聽style="posi擨:聽ab壺ute;呚op€?0px€hleft€u"侼倂canva柊id="€c"聽width="400€hheight€s?聽You夃browse棄o樶no塒suppor€HHTML5幇偤.?僀刧€螁貒_€墖飰tml€?tt><偵骾z?6€xb>C?ting崮ynamic詉le觝eet醫覔饜▌h勄p?="3??In Chapだ皃,鱡鈘iefly鍃勦怖魒o餽inciples?嬂鮯e鬿劆lp錶i乆?鬶e頴仼仭ec嘺e騩t嚇湢飂颾jects閚魢羢嚵s.脠艂 傖﹢亗?s兪b?umbersome醤d刏up鯽luab乭夞?at鈥檚亐t噃髉熰匬sewhΠ凓卙剏.?巊??>T亐idea€╨l凙?tak??ng冃im?叐a鐭垏d (e.g.,儌first啠?medium?ck噂t),銐隺 鈥渄慣?鈥潙ir慿,圝sto喲t傎塒array騛?r垇崺?岄d€(d叴???摟坥坥>To醕complish倶is戲忢m埩屔坖seco?潈卄??€@刟?="2?湀ㄈI劚穐a()?t>嘕仐仏pu仐仐亽∶婊l揱If鵲u騟ca?from???????,勛勛唃勛勗扟thо?urit浶rror闂貓瑙狃?嶋庱s頾t飶夽b伻rver?嵎嵎嵈Cur徃tly,侙??Safari熇?劊?劽幯剹?曢s庱d?┄a?懥ystem.苼x佉?son愙hav曕epa攼?€鶎l嚿孞悞i>Geo录檮楨xt昦d
毸?匤si?y鋏m幦t傃鑵皦0could?匓i€鸶悢yreplac?嬺?湸?wit栛佱櫨侙?媜媜媓W??tart鈟灀?獦慦慥篏醋慣elem嵢◥n飖r惪:従电劄4劅?儻儺?更?诀诀诀偵256诀€tstyl?歱i廀:聽absolute;聽top€垈?0px€恖eft€榾r"兾聽Y嘪聽斣聽doe?斷?uppor€H圛5聽?.?奊€W哤員2哶3€a巻€i哶哶哶哶卶囏唚唚唚唚唚唚唚唚唚唚€'€寧6懴€8惪昽愖畤搭??斚??,顧P瑮伅>亱乷乮槀?r?亐朡hypo洂ti?浐s橜e hich籲?残dis?ホ侤cach€裙瀅?度崣漁漁囩囦?咷囷囷囷囷囷伅図2亀圅哴磹a鋜aw爥surfaco拷嗼啹l?秬卐鎟ames鎜r飖r鬷le骽eet.

We€xll頴ed鬿骵parate鉶ntext閚stanc傪in鬶e蔭vaScript,飊冟儴each <canvas>:勈a/>mediumr侙s.png鎼?Figure聽9-9)搥om僽Geo耹aster舩tended儦g敔醩敀s€(c慶伖dynamic昈t.膐n鈥檛靍t?is?f啽you.讉Xre頾t鏾ing昦€閍囏fiv囙俋僠?佮傁鈥攐nly兒firs傝€鄻脫????ign="c?er堣img騟ci嘪x?0144?baseline"洤1倂152"儬庣庎€g仏6????榺i??#庎"?-9.聽T國惽惵?t庮侾???勥?In???,鱡岮d峅岾嶘crea咹mul€Xd騩tati?anim€R.萫re??巄梕巼??draw?€鱾x備e閠??溩淕t>鈟乷乷10??degrees,僇侶n孹p摚curr嵏???geData俫俙pixel咅?楢劜墤a埲rray飂倗倗倗倗>?,侾ll?佭佫嬐I?A??t>????囒rep幦呫p損ess??摳?嬬嬬兛嬬乷嬬?mo犂??礍a靜op鮪忦戀ha撊36€豥ividua擿箾奧?奧奧僎喨res巋?庎?晑?沜?ck剨嵲房?G娍房勛房峸島储[]厂爠濬嘔?0€牁筍熧€襫ew聽俽(的?.addEv嚚Li烉ner('load',聽e€箒*L€恊d聽€╢alse??src僇"??"矾//埾埾埳堬?埱??嚾iab爔昩hol漛鐔保鷤煇W怶俉毀とhichΔ暼us?a?trans慀慙??極極?垏?垏倃倃??倵?sw潛display栂栂柾檭朻僌嬒嬒嬒僶ba???囘囕佭佖伆dem佦隘垏垏垏啽仚僄僄敪僄垉柟ed,伹伹伭梬梥()??func塉瓛獳愬墭tur皹€爱8傳傳t>拃rtup偗偗??伩伩伩伩刟敘筿▽环?▓?婎?渙淲媁?劎劉凊聽勻U勷{爖€*聽聽聽楡聽(ctr=0;€0<36€Z+=10伂亙€!c働ext2.f啺StylΤ"#fff€亣亣亜Rect(0,0,32€?乬乫s盤?€€etT濫(1倄0,€2)亸亰?gleInRadi仒卝嗋聽*聽Math.PI聽/聽18?儐—l崍(1616勥乢乕?e(儻儵??亄draw瘬槑?0€!?,-儤€!墬侽侽.笜t?壇?嘸?d?圎伃get冴尭兯僅€)奼侰㈨.push(傓冏乸}€g爫pI儓rval(噥S楄en夾00聽伡}欉??椙椙珤殸clears??疅僌?with湼?汎color,?磼n髷0玚t┉欻ck.诐虏\late鬿鬶?粈€卐鉫nter飂飖€8bject醤d騩tate鬶?anvas鈟€surr仺 ctr).蝒xt,鱡鋜aw兟first鬷l€Xrom mediumrocks.png呪sav呌result凁to犷ew靜cal??imageData凮?instance鮯ing偄佺佹getI価()??function.

NOTE儨.議en佲loop偂complete?set鮬屓?夎夽僗婐峛姼€€兦兦t>滖S炟en椙椙剤鍖Xy 100韹Pi懓onds榹墢擮墝To鋓s摖+an堭倐€爓び?us?昦im嘋唘???pu濓???ze摠扨擿倶髐ccess刪,鉹e劯犜simul?f厽.羢嗋th??巰eidn鈥檛瑗咮36僺s侴價亐could?ju?fiv?Natur?塷坸mu呧smoo€袟q?mo??.聴壜p狜喐勦椮鑟嚬sy椹鴬╫嘯?懭魊ansfor僉優s 鈥湇%ly鈥濖a冓th?pre墴hem妬牫?:惡a/"4?巓巎摻聽斪()聽{Exa摴聽9-2晫搲i栘code?扱???i傁側.聽A鋣namic滸t鍋#聽聽聽聽€E聽context2.translate(16,仒6)仐亣仐2.rot亂angleInRadi?)僌仧伩伕drawImage(tileSheet儉0€!,32€,-?€!€r倧俹倧凚estore(乀?乷€ var聽i兞data聽=?.get剴D€?凷聽凁€)偡偡偡?ion侜Array.push(僋?仸}€梹攕?刋rval(堸Screen?00聽?侇€?爁unc?聽佔()聽{??//噷.fillStyle="#fff€"???llRect(50,€尶亸審t?妛(??[an堭€rame]倷50倗倖丟丄++??if聽??me幦=儳尞length)埊?僟?愯櫁嵪€棇G/>€_></script>?€ead€梹恇ody€弨坉iv€噣€canvas?d="€c"聽width="256€hheight€us巸posi咺:啫bsolute;聽top€垍?0px€爈eft€█r"冝聽You橮browse€Hdoe?not?uppor€Hth?HTML侙聽C勻.噊厈倿啛啛啘2啩3€a啙€j啑啑啑啑聽?啛啛啛啛啛啛啓唓唃唃唃唃€蕧噣寧棌畉ml€?tt>In鬶e颚栾f€bchap?,鱡乆ll靜ok醫鉹e曫ng狍imple舄?based鐤愼s€鵶o€X俵techniques鎖r?discus亼in C劵聽4.

<塇€p€2mbp:p湢b厐k奾€硛*a€x坵9坵坰冇siz悎6€xb>A訃[T嘫B嘮G嘪??凐偗3偗偒Let鈥檚韔ve鎟om As哷oids鬿釕Hher鉲assic妰genre,奒媉maze-?s??.議en鵲u?re?孮early佭?s,鮪doubted€饎hPac-Man刏e?s怟onv€`.丟丆was飊廎庪commercial側successful??although閬癳rtain仒偐園倵債its雐nd.詟竾飯髞ctu儮we晙c婬r僗by鈛dd圛妑develop嗼bef綻韎cro叏瞏€眞伕鍁奾勲t餺奌bl?嚴y亐ni亇崘孻inf甶???h醩壣Dalek廧毐?craf孁?嘺嵢60?倫€X70s.蓘裪s蟾悓渨?e?turn愊愊惿Our€R,?M噄詀nk唄z?剅倷be鈧 烶se?o溫叿丄but?u?敋俌sprit烋柺瀲瀲瀲瀲瀲瀲瀱??1325769???Figur盄9-10侽侸閵橌増ensh捀?掋nish峔?犙┃瀢瀝暼ign踩橞?imgc?ex?0噽?姪line"?80倊€aゑ兎??"6???ェ2剦塐塈#剺"??.聽恄怹???夦?瞁??勝11勭?刴5?刼刬8e巰???De?ip?兞???儻栫栫?忬??str?gy牐play€坅 15脳15濿慀ri8Abeginnえea炶氎€醾:r (€ag搧橁), 20獝em?€€s?曖€儊 5?毃儽?叡ng叞goa€藖胮hoenix)幄r丳om漙冐c?冸厬㊣緹€硤亪ry?渞oad鈥潈粊閣hi啇灲祍侹嗕侙task僗wit囙ett坅地?匶obj?oru墈in?ll僪┵?勠堶ЖOn娝峺娤玠?亀璸邯墡sp坄塰啫)垪垜Ne劏侶偋矵€{偋s鉧n倹of壸錮ge瑱€泚鼏餾嗆?嗠偀k,鑹葥Z€@瓷侭?暀俖俓?o厠??侙d帢ro晛垇re匭dΨ?boar噣????傦倎€菗 僴囅€雋級the鏾a?粈€卨鬷le鱥thout醤錸emy鬭nk醠so鑙tting鬶e乧on€bsam€坲rn,€zplayer侶ns.

G倝progressionMak叏u?嘪堗朠d <摖?pos=0000340937剰剦blue?u>C聽4?堎倃俼1007714倃倃倃聽8倃俿s?倃俿63865倃倃俻A篓堯苧€0work傋傆矻?on.艡  Micro該!Maz婡i>rel皭y疧斄甔Ρ悹l駏i棸叏ew靑n窅瑈od甴We嫚?h塇maj巟po揱s,猹饞Xdon?t獩spa殝discuss瀁?detai醇揋彑彑?昰 (嗻浺_€?png嗼)冄a埁g刪?o朠柎椓鰞眆带liar篭?????彈?屒.?廩329676???Fig朄聽9-11侽戃hows嶪嘩嘨壇blockquo峱睴夨夞幡爊="ce?r兝img噽cindex?0114??弶"倊128倊256"儴/兎??"6???】「狆??」壚"堢堗.聽?枱枤悷t壩俋?掔勭掑W歚樞a憇sm博por??穉內s?汷汷?儻専儸Ro搱?丣匴?仐?滆€剙綈?朵ロ?s愠€?礌伖0,?r?熇偫∩?p-lef孖rner?勛???????仐灃綂哹?ca漼an柑χど瀈?咎ed哾3唋?o囇o?s乭堻€趷??€檭緡??厀">Goa??????剚?韚?嶀o伆匰?.涩*€亞_??€趓ow (偛hoenix)???勶">P凜?啑啑啑伅崚?妘mad櫒p樐Цr劺?鐁e磓嶪?带噦弙泎e唞?u礃?仜瑝s?from?o嵪嘩嘩嘩叕E楰嘜嘜嘜仹嘚?嘒嘒孫嘖產嘒嘆侙?嘩嘢anim嘜嘜a慲t?噖噖lockquot?線卐>Our鏰me鉶de€衛l髏ore鬶€ ile閐s頴eded鎜r錫ch飂?se佦objects閚醦plication骳ope鯽riables:

侾聽playerT勅s聽=聽[1,2,3,4,5,6,7,8];
侙stance?d鏸ven怞n???凙S??t>廜啑??廜偡廜傓???偪偪偣I吽?n鈥檿itializ堅tate,鳁詩!?囪assig??壸壸壸壱圇匴??圇傔姧嚿憿new聽價()掋?.src?"內ks_悅.png"墴墴墴刧刧刟Next坓examin燙setup煬煕?field.噡傋9傋??5€xb€攃olor="#8e001國栙P傉?哤僗?樧匃?橏a 15脳15鐁id哘32脳32欽s.詇i愢s?total?225€髠 th€袃R愙??480餴xels.舦ery伬?奌悙rt佖?勈,釀x??厫c濔r傴omly餅9媟厐??慱>嘇F嘇[]彈擿array傘ho?佭佫15仐亹row伋咾嚕伩伩伩伖?umn?s鮯夌?a??easi嗀access噃?掹imp????][儀嘜?syntax?愶桏?傱4?Cre?ng?boar摌揼揼揼?>W?first嶜廐?㈣筗e垝???喎嶠潹?婐僪?n?儎???嫓(加勻actu€衴騟仜so絹仯卬椑t??Х????)?墬墬?Ⅺ??創綂籀p溚Unlik??,€倎?嘽no碒i杙噒?啹啹啹啹啹啯.僧癳ad儝殧漺籪崅?ir飛n棙ll??儈?僟t>欒o囆sur嘇孭ne樔er厒勯€Xno€{goら♀颿cupi?幚Ч撌sp姫€粖弶ó誧椓?o?咉厪厪厠items厪厛廤廤廤珻侽侽侽?also璒璈two-d狜ns敤嚢?燩晥?l喨hi汸?c?ider唄?鈥渟e€燿鈥濎妀??data?呄呄??咁,閠?on枑?u惱ma倛帾n甈wo癁(帲,岆,飏幒)帇峱巬嶴嗚幇build伙犙mu?d眖?beca?戠?塜怌?a劒慈dd卌嚽嚽嚽嚽嚽????On呩e鑑v檰敄攇爂潑吙a??槳嗋厵current?楙d獠槴h?伬.苅懓l僟??檍牥?傞t崢???們??殙????code鏉陠↓嫍嫇溮P嬇()嬜嬓func?じf鵲u鱫u?曐oОview攭now,?庉?伖 Micro垣!Maze胦?「G斮C喞 (?傹268??傴Exa倎聽9-3侽侸瞁娮娮娧A癐喞濁醔ou?妵妵?奊夽孍sto??ppli?骳ope鯽riab毙:剅a/>傂聽勎聽=聽[];€擤:€縺絰Min€?€瘈╝x€?8€?聽y乬var聽yMax聽=聽480;
To鉹eate鬶e <侀骾ze="2"><倛playField?t>,乺game鉶de倫ll頴ed鬿雗ow?maximum顄mber飂錫ch魕pe€itile.詇es?also鈋醦plication骳o乸噃iables:

Micro詀nk蚢ze騟quir?€8庎a鎒w効s.萫re閟€衛is厫咹descrip憡?慜垏?嫥哤哤er.row唚娞巓?倵?奺?飰?5脳15壸儑??>鐁id鱤嘠侚崵埌i嘪.捛烇?剋?儑?挵儚???倵???um媹??儫????????剰?儑?.nextR????偡?嶚勛榹mov厁oxt,醘t歈髐ccessful雃y饐(s檏at鋿hc斞啩啩啩凎啩啩啩xtC嵾啩啩啩偡嵾崨喛喛喛喛喛喛喛喛喛喛喛喛喛喛攔挀T皥嗊嗊嗊嗊傋嗆抪病??鮯传dis僫囘r鎟om勏勏剦s剹暟array嚐嚐嚐勏嚐傋?t?傳噰噰噰偪瓽?star?point嘝up,髈啺???0杧儖.議瑦圙忩幨on济€豧our鈇sic廤s勘偫俇?chang瑻?儘嫢捇僌?値承甀facing姱姱姱圇姱姱姯spee?姉姉姉偋姇numb??pixels愮僶僶?穘歰ī??妨tick???刧?儫?ㄐtin嬯X????傔?f?l喦?x偀啒俻?for圧32脳32佅佅垙垙垖h??埨?惲a€?晒@e①潗嫇top-lef?rn寑儚匴僩匴匲僗債€?膗r兪擮?m?暠anim?phas?g嵢棇valu暩eǜmin檂蹈?個伬犙iv椑ㄠi哖?x-ax侙刅?????嚐??Y????傔???t>y偀娗??佅匃?????????儚匴僩匴???????????????y??????嚐?r.楃徔徔徔倗款改傜殢偗?皥圞寚寖€紣|?弮???剹???庣???倗??傜憦??????????剹???媷???倧靠ayer?迉?鈥檚鉮ange閚 x,??0??or????depend?匶the呯嘠卄呰€筽layer叀mov厜??俴.dy刧€9p><偋値3倧倠T剘屒屒僕僎?屒屒屒屒屒屒屒?屒?屒?屒屒???屒屒屒屒屒屒屒屒屒?屒?屍hit刼屜屜屜倵倫Set鬿嗭傁true偀孭whe喕?呰es侀a頴w髊uar尷ha寊occupied鈟屫錸emy鬭nk奱a鱝ll嚽嚽嚽?嚽?攩ead?囅囅囅偀倶W唓偳偳妵偪>啈乷???擿撏re俙c?恡?僶僪Fiel?僡墧xplos戦sprite.譱th????s幆乢厪乢厪頾t叓nder叏?叐g沘screen???婄?兿娊win?峸峸峸倵?傁啑啑峊f?r鉶ll?旲唅oal颾j€垎o唎冞冞ホ曮an埜傔sh梺many飪塱attributes,醿聐鈕嵭us橊?type伖calculダon歜毄醔ou噣厬rid.蝟w靍t┶examin塜€爜勠啱?c侶垹cted?婙a/?="9?峠姖5€xb€攭萶r="#8e001媊?E僡嵽丳????E僄嵽呞嶇嵿?攰ha圥i嵭ow??塸婄?very偫milar暢o婬寯摷蘨k嬰€?睸夈潊洜??ance?嗺嗺嗶H檟嬌傫code?om煆嚐嚈欻ateP熃()?國fun眥嗞嚑s鮬俍囅妾珣?姛姛姛啒:哣椃?啛惂傁偸徻Loc昍Found聽=聽涶;
var€xemp丷€陒}€踿?row€襯歑Row€€麚爛﨏ol€€鹡ext伆?0€飥飦爛飥飩萿rθtTile??勆t喴€鱻鱵.x嘽?ol*32?€硣珋噰h?€秙pee夈€還躣estin凚X凮???Y???卌€莯艅髝莯姆@€蔲als嶵€锊蓘鱻鱻螗YCompば姵?擟.push(亷)€鄱Xms[?]€J嵗]?1;曠???暓暓?淍爥a?u劙tra欨ings鱫r?poin?g铽i汭d吼?firs???榞???×n庁s潂?l簆???t?俬凲?€眻d??>anim娾剛匠枠啒ⅳ.議e俢楶i堾b卄al)h祊劑库??搝,磠偭﹤娦nsie乸xt兿妸?discus哾detail喌仮s壺侫玸?玏?Also,頾tic甶??╓堶?????dd嘋婄侘侘侘伆ray緬we?狙侘侘侐?侘侌multidime墾ona?倅?€╱r稘?扝?嫳o亪can囆礎€餭呰嬘揾嶤峂.系袕D€蓭櫛按﹊n嵃個幭??呚??哋???a騩a卙?劑show?儊卹撹榌???鈥渽P溭岯鈥潅俿嚇ca榅乤y?啋醔?敭board?y ?鎬卪ove,鬶ey韚st 鈥渦nc€╮鈥潃硫oad鬷le閚€妔pot亾wer€瞓efo€P俙ing.

Now靍t鈥檚鬭ke狁uick靜ok醾忡oal兂to髈lidify鵲ur鮪derstand僷飂亗€鴉刾nce刾twee卌playField醤?亪?颾jec凱?s唻a/啹="9啹啱僌="5€xb€攃olor="#8e001?T?G嗋兡叒啹啲?anim昦through書liж咢fi張圏爧﹂噽怮d鎟om浰am沗cr剺揁gain恱伜℉挀兾夾吂湩呥桇乤deT??溄:慛blockquo垑嶵4嶹憲?傶var聽?es聽=聽[17,18,19€27];冏戁僨懴?甮ext,?娛examin殱ti囆塕fl瘶妷呰mach?o鐙壆皯y畅?h仺媙logicY瀀igne???坵坵???urn-Bas?G僸F厤?S叒M叓?塯氱氱?O禈?偛垈哷┑瓑坔16?挶儀塕珋?奫applicat挬runs?a拠弿40巊?fr凁s穰竤e價erv扁mer?彲彈?姛儑儌s睒ch壣塟(GAME_STATE_INIT);
?t聽FR€馬€钄:40€髸*勁T劯€?000/仐乕歨I丩(園兞,佺併)?杦杦嗙嗙嗋睉孵o€(嵥?n Chap刾聽8E癶pl渀9-3?姉a??).聐?w,皰ha柏s咯mo恛?懷嚢?旪┄緭?玱.讒腷?k橷嚝曢?俀埬€見躶€h?fol璓搻??匙撽em??嗐4搄ǚú掲?抔俫俙T彧熲loads卪a慩t唹??爄?囈a?亯悺仒only憟?l塜幐骽e??no髈un傝?Micro詀nk坟z防i>涆匫匫?f戼勝in?凒圥揌姳??€墖_WAIT_FOR_LOAD俴u梙秇侤儊鍁╝h庿ocㄒd呌崯咓崯崯???嶇垷垷偗嶇嚾i榾y囆k紁su岃?a旞墯tem広凣坓凮戙?機嚵?pro?ly.蓷Rn嬊嬊嬊e <?顎協ont骾ze="2">GAME_STATE_TITLE髏ate.

<傋"4€xb傁偽b偱倞俹3俹俴This冦骽ows鬶e鬷tl€€creen醤d€﹏鱝its鎜r?space鈇€po鈋餽essed.讈at偣happens,閰xend傠僰machin僗o 唶塛啅NEW_€y塷t>?喿????偡偝塛塛塛倗塛e騟se圶all飂啰game醨ray€笁坥bjec?夗c乭?勄噡婬偢PlayField()噊愋function.詠?????銇:???p?侘侌?乷乶enemy丱両囯慅new埅,醩鱡塒€@壊?倵凕er偀倶?鈥檵聄ting靜ca坘On?捫h側finished揨媉??r擛er塯塯塯塦a伆ng?ti幦?dis?偤僪tial鈕ar廥梣?櫅旣抇抇抃呞?comple尠,樼樻?now損ad內o?丅€榣儞loop惿乣€do伕by韔v塱勄偳洠堶堶浨?WAIT_FOR_PLAYER_MOV?淲淲?淲淲淲僄僄僁湻奯奯傜湻e?嗱拑嘺ひ?e漨four晛娻buttons抰伹挷妑so屲witch僛me唨check揁尷e冭hi€饌玾佮▇Ba€8?dir枑??傘?灖傫Bou┌???戼梄??b権kquo圥塽1??€`align="c?er屪兩1屢€揷olor="#000">NOT寪宼屜/儚冿冿峗?僶?嵶儀ntain﹛鉃??cod崄嶡i渉柛嬨logic?at⑧峘v乸o?玃娦viously滺?book.訊8偭up洶橓s宒啎alepos=嚴1360453叿屼?="blue€榰>Si?詤)M?L?OverviewPac-Ma峏i>偭?woul劆欓?mak?u傌倎?a€Pll€⒊ 掣紌do?€鵧糛?ecau塰wa?岕and屒??be醔僗?堸mi猦ke嚿??冾s (侷仩夬troyed)被巊巊巇If?攬id?厚?柼讹讹讹gesetP佢D刪ina仼????話G€萻y?坹僄僄t>?.嚈?X??垯伩伩伩伡Y伩伖ttribu?饩鞯嫃驒▉簨??笩冿兘嘩伔厽厷nextRo砢伩?仐仐亽Col仐??嫛儑侘????岼multipli墄咓倃刧咓?楜伔伔伔?伋b?淽仭 (??32仹t>)しけ儳仹儳愡挆媜font??巰卛ze="2">player.destinationY醫tributes.詇ese鱥ll鈋鮯ed鬿韔ve鬶e饌Z€檌ts頴w靜c倸.

<僫髣蟭>GAME_STATE_ANIM€APLAYER?匄is冑n骵t醼b鉼rre俻game髏ate凔a/?="4???4€xb???b?喯喯偡">Th?func?塟?塯塧冪圑審nX嚄寜nd亣亣亣?亗??Sinc峐剺€a魎rn-ba嶢塱,鱡鋙n鈥檛鑑幈o€€儛y飬╮餽ocessing鱤il俤啽m嫅€`oc孂?彑堊堊埿On錫ch?er?,埵嗊??幠T兝??喞r?哖by??1仧t>朡伆朖chang?t啌a咼僗der?梙?next?in単僄単?s儣嵄rray.讜a伩嶗嶗弚弚亣亣弚亣傾e錻ual吜?侊乣x仐???y??valu曅fo晿曵崑忲侷anim劜浫op,€)済娽嫞娳?凎燂洐EVALU涚_MOVE勭勦???摕??僄僄僄傽烵??傜>Now戙??s戉彁?噡?棌圇?r.row嘜峎亀亀橓ol亀惇?????劰R儣儣仐仐仏C兎亼,櫪spevely?壇壇墿?,閒壇r?nよgo?????win?囅揦礥囩??tru犚I刼刼鱝侾刼俉刼刱hit倗刪??佅?仧壇壇壇墾Wnop€Pough醿0o呌??enem瀲劰obj?愋?se塒he?痁?py俠s澒轰??y梆,獍鄝飩!煟儾???崗昗塤佅塤塤塤塤塤?恫?G?G爡NEMY冿?傳傳???倵">挡?us塸?homegnse罥鈥攄iscus玖礟Simp弍H偖AI蟰ervie犘u匫a>?夽choo儼a鋓r煿檖儤whi拘€鴭驴:恠tank戰t懭?唨絸朡ing€€r杤紛乸?apply?e亁gic?m儀divid窐???fun匰first奫a靑tt囏梣-b奝d韆柹o鋏termin??梘?噚rel帆乭an嘷嘯漥cre嵏唅?ra?f墴圥唄緲鈨蕚Qhe姼calcu傘s俠喊?€魷爏櫺埌键刋a€`riab哖佽l俬??兿ToT兏?毀??毀閴臍G?俬?ceR嵷omM?men??厭 (佭佫25%乄t>)????悾i夝姧姟?ju€癱omp帹d,飏??摍缴扝out▋?y栕r?傋柶in塷塷塷塰I恜i儕c幮壓m劉heck?vail嵑? (佷幚?f媷壇伅To媮?痠?僫four?楶€貑鼏憤1媯皼??冑橲tha壖no咹桻劺咾side啳s棸e????O慩堁?伜媁媁壼靶摋??朄in橺X圇柴帢亣亣亣Y亣斦扛?瀏揦?负偋?筈€?*鴤瘎/亸亸亶?亯灷?栶d?妛妛妛妏F啺╔墢肪state鬿 ??font骾ze="2">GAME_STATE_ANIM€AENEMY.

傜€鑰xb傔傔傑b傉偸偗3偗偒Like 傋叿傔傒PLAYER吙t>,鬶is髏ate韔ves醤d€ im€恠€餰鬭nk鬿閠s頴w靜cation騟presented鈟?凣凢destin亽X冞t>僇亣亣亣?亖values.蓆韚st鋙呺for錫ch飂厒enemy叢s,髤刘s哾儑儐亃M囏Complet€@unt冏円riabl圶o雃ep銇儊how韆ny冪冩鑑ve鎖nish?€餴r?慶師師帨When醠l偀偀e冭匔偋偁嶪e鏰me巐埲chang?塈囩囩?摳VALU?_MOVE??偛?咓???????梘埾埾傔梘咷咷??梜哋棗棗loo姲at?柶巂拏椡d媓rmine鱤i揂n抪ne娪be?stroyed幭???If醾籵ccupi敶s嵐ti?a€媝layer,乭w?,飏檖o€衦侐弅侭哫鈥渼G凚鈥潤8敁俒沯扺凔€`冿le偝亜偫al欒傦傦傝T?€鐎?潛set牴倛cing嵖嵖true岀?in昗乢乊hi湡£ttribu働涀嗩?哣導導導尃T櫯厴伕n殏櫙刜搊搊搈OUTCOM揙櫁櫁櫁?櫁櫁櫁????嗊偳嗃unc柡梟﹐壙Ⅰ?壪??楘?a堊堊???恆俋仹??篕暽獞do攭溼凘鈥櫜飦鞅had侘儫?兎伹兎牱坊鍃plos墆?re?蛾c淍?俫??E伾de()偪?pass佡栰object€p?nce (媩?宯)?亄cas??牨?圵圵冔俴濫re柣from俫醨ray?扜扜?儫極?ANIM昷XPLOD楪楩妟??next樋兛樋樋樋樋儣儣樂樂唚偪?炞啅厫忣s???靍ngth咥g強?憟??0侘硢?ooprough淸恀?im傪m鯌覅僄厎deT厪厧.艂闁弮>剎?恷??坵傦坲af?it鎖nish厐it?呴仒.转Y揓?奜奓儻夌僩夈厃垹伹攇愑CHECK_FOR_€狾VER偗??慦?????????傔樣will?rst鉮ecse玵e繐瑹仩烝礿仐仐儼?s鲗AT?mea孁猻倃cannot?愢?k韆k帰嫕goal飵搒寜tr??籓嚐嚐嚐浤冹?惱t?圫c殘g?嬤?嬬PLAYER_LOS嫧;咥??,咥??傳傳傳WIN傦懫殆nei婤o?僆occurre岃暜?儚儚儚WAIT扲冊M抙冞浮憓r?傼嗀er洑飗er愔?beg熇尐r魎rn楃峸楃楃楃楃??棢??倵?勈摪s塠僕堟maxE攁???in籭sド箈侀啰坬?傢鈥櫌飩?scor靠偆跟checked醙?線卆inst鬶e鉼rrent骵ssion鑙gh骳ore鬿鋏termine鱤e亁r犷ew?e鑑s鈋en醕hieved.詇is髏at伕aits鎜伾space鈇r餽僷醤d?n韔ves儁剦GAME_STATE_NEW_€y僛.

傦€鑰xb傜E_PLAYER_LOS傴b傰偤偀3偀倹T厾player鈥檱笀獔checked醙媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜媜堊"9堊媜傢5媕€揷olor="#8e001儼Simple詉€(M勷m?Logic蟰erview宖尶尶尶冿>Micro詀nk蚢ze鍍Xoy増儯t儬-to-€A堃冣using?鈥渃€悓Xof姩?鈥濎勯嬡€b騟li姼帬mak侎calculat?€箤`倎gam?harac偐巠re巂慇?僩僢?e飏igin餺i勦€鄌ur侽侹乮s摫?top-lef婭rner.耬caus侶f?is,鱽郺n錫sily區?at冐傦傟偢凐??旾n閾◤g扤x懣懜???y??coordin刋晥梮equal昬dest€釞蓪K泋偀兦偀兦?兦?兦s栕掞掞掛W嚬劇姲?厬?key (up,鋙wn,騻A,嶩鞂羇rrow)?fir犩mu€(熮傫⒒幒ry敋o?€Aa斸legal攭宩埩灖噖t>侷Field嚪t>.蒼 ??i>,醠嬂挭孉傿攍n憪il€挗d?of掅崘dg?€kboar?So,閫搯攚an憼唘塆堮?墝?堏???噛敘晙direc惒bas欻??層d朂堊堉梇SW┼ForP??()塷?fun?.萫?倯switc?≤瀁甮甮?劸?怹卆:撈blockquo渶禛?哤哘if聽(侶P傞List[38]==true){
聽聽聽聽€3//up€縺緜:婻Bounds(-1,0,聽呟)俖仹爏et壝D?();乄乂}€qelse儨呑呇7呎聽儚?//慟€蠀鲄鲄?,?咓俹仹咓咓咓丟咓咓咓咓[39咓儚?//桗€讌?咠咓咓亸咓咓咓?咓咓咑??40懬仧咓漚€蠀飬飬霊蠀飦咃咃咃乄咃€溸€9櫁櫙櫘Noti糂〃??倶?s??弛ak痓侘侖瀀仹仩incr牷?儤焵伹伹column佭佭丳否堭璸t糝mport?€蒼?唫㏄don笜僠cc嶱гs緫mann亙woul?乻pix悎╁s冭eT??呄睬呯粰rray安傠b€€dd??俻ver宲?(竌?€醜oriz俋€駡?簆佢??[?][丆]凮t??仐仐乵佉仐t>)??s鈋ca甴崍s嫎硏喅€衞rgan倄补糐?窇俬s.臿皜ha?€?5銉?refore?d??a哆嫍呥嫍嫍嫅堛仧仧噏?][嫿嚳?coord?e?Instead勻?偪偪嬁嬁倂sy僠x揅夛ays倇o餺werful彶ele妧t錰f?.??3??I堖剰濈濈剰濇,錸几???伩?,斶噧€?曌€鵲bj??b嘝澑ed妶f€鄴砤靽pl韔v忴凣凣哋哋哋?捀???t>nextR哶湜?乢="?顎?">nextCol鬿鈋 <€i骾ze="乴row+€ Inc亣亐and亀亀col+€ 亀乺,騟spectively:

??fun俋on聽checkBounds(?,€▌€Hobj儬){
聽聽聽€??Row聽=€瀲G;亣亣墥亣t.嘩亙伅爄f聽(佔佊>=0€@amp;€*傳?<15??偡刼呾倧???倞???dx唺???.dy?堢噂乛噿侰==1儣俫?ta嵱倫90儳丒}else倗倐-倧丱倧倧27倵倵倵?倵丱倵倵倫倗倗倗倖?丟??18倧倧姛€瘚€eturn(true)嫹??儳儳?桏桇冏??栵栰?剹剴fa冟劅劄€弣熺€9?>animatePlayer()?刋?宨called顟P.蓆s阰b€羻鄭倗?俋p偮偡偘?伾i?new靜c?鱤ile騯nning倶rough???frames.萫婐?內code€萶m????剣?疮?昰?疮?噂r.獦+欯€tdx*€T峘ed櫕€攃urrentT嚚++;€讇?=€as.length浉仧仢ハ淨€1€衐er圌Field(濎儫吀僊.destin媟X诧查?y乢乢Y劘劏switchG峏Sюe(GAME_STATE_EVALU€IPLAYER_MOVE剟】】】宊宊孻First尫尫??鈥檚亸亸???焀??旲敥ncreas檖by劮?劮悾 *饝m偪9佺わ冿?.詢 t櫻?槨伅伄32伅♂so鳙Xust鮯e狍刏valu瀒at侫evenly鋓vid€鑙n潹傜傜傜傕剝侸s 1, 2, 4, 8, 16,妟32??idミミ?ペ刞宠o?熧??劮?櫤?帒rray飊錫ch鐣?op?er??儓wi?櫵?tank魊acks??imul仺?mooth驂`on屇?╆噊噊噊">N?,粪?tak岄clos?匑k醫鑟w嶑勶???焤圇岃??9?︾俶5€xb€數por="#8e001?R?囬Logic蟰erview?瀏嚡嚡儣E孻ti孹唅將嗠s漧矹€醩氞en,峱??€岌鴌捜?棍俲弬It鋙昿t徚僅ensu侶??嶓on徎劄?傆焌惾??匰榮劅劅劅劅?廞s靑忦劑寸ě◤妛?僿價偼聽癬癨聽聽f棸B哫g姼n盢€鉪raw佅€還吆騹莯肊nemy€縺緓p柊┍€瀵??噖噖?榿偙?椮in鈒寵屃唊?n丱屒塛櫩櫩﹤ドaf?惓?弔悿.偀偀壡壜傁彁€釗涩`ap飂梫扥さ?€`pila剱乲€輘璈 <?協ont鉶lor="blue">Chapter聽4,鈛t鱥th髈me醖ditions鎜r飖r鏰me.蘣t鈥檚騟view鑟w閠閟飏ganized:

func冑聽drawPlayField(){
聽聽聽劙聽(rowCtr=0;€K<15€l++亴伔佉佸堌併€K佷€k佮聽?佂va伻s坔ceX聽=聽Math.floor((p匨[?][俢]俋%聽8€8*聽32;偪偪偨Y偪偪偪偪偤/偑倽偳偰if????聽!僗roadTile婏?€Dc?ext.宷Image(t亪Sheet,聽0€!,32€,傆剤,僣€Q€?嚡偟}€梼G僄僄僁嫾€VY€P傷聽俖俹刜刜刜亀刼€u}鏃旍oops鬶rough€@e騩ws閚€b偡偠庼倗個array,醤d伭侀倠each牂umn偁side€泝(.蒮?嫛閐顄mber醫兛兛挴挴挭??牥a傕a?偍,simply餫int嘔傴儕€A冭correct園ca垔€囎??囎儥???パ颾j傃(not劮椑労first劦€鱾?勮sp伖妳咡偩乷乴.?慱9慱э喗5€xb€敪?8e001噣S壉e痊萭媹n罥蟰er??昗冃兎3兎?enemy鬭nks鉮as墣???er?幐嚋b伆d?a骵t飂庪晿ules.庄癮v帯d丂tho?€趬@to儑儑儊峚StateE?Move檊檊愗,鱤i曕迟n孈徝longe嶺峐mo€Hco劆i抪?佪殞佇book锭?step?偄gic鯂q吚cre俬€蕜_愔you鉧n鍃ami劯羔n 愂嫃毴t韚堷deter嗏a頴w椨潎n尲塒m嶈?偑.詏鋙髈洓oll︶s枿懽慁???rd奝傡呯呯t>t徯Bounds懅懅匇will魬 ??me?di1愌:?ol??潳li鯽峱="1"?€賮??眞俫??F搲坮劇囆堭ee?e匄r???cl?€蹫 ?t栬l獦or鑟riz噲€亼`?圚li呑墘呑劘呑呑呑???冪?厀醔忨匳?€餭?嵶嵵up崌摍殅乢篏?乷?乷乵幬ToT?佅栁塆塆塅3塆塆塆塆塆?塆塆塆塂be?塆塆塆唶囷塛塛乷姱乢塆乢偳塆塆塆塆塃€g囨1?塼align="c?er穡兞1穡穠ㄘ">NOTE稛儚冿冿嬒哼僶?贰俥€讐W噺?????屒???,滖€還邅鱽鱽???????凒?巔擑ush秔悧伩伩愊愃惪乷乷??產if€`傂AI?Θ笜圾絢?鈥渦p鈥濇rom榳,鈛璠檨忈呧稅?obj匄,??r凅op粯i???秔佮ur鏰me侐劺佉be頾埲估nc琑€袃N凅?偀n冿鬭nk鱝n甗?in?嚒焌caus稊n瓲儛egal俫?呰紹?of塳b妒€x€rscree傌?w?d?粿兒our餷ay?唨協ield鬶at 鈥渂lock鈥潃坋錸emy,€Xis€`tire骵t飂罥鉶d€xuddenly鈋comes鰁ry鮯eful醤d頴cessary.譭鑑ve閚clude儭偳冐h?grown鉮ase?凙in飖r鏰m佈銆裮o亹??€ptil€(yp凁a€繿剱d.<佅???It?n靜oks鬿堷e鱤e?€h凱?<刌骾z儬2傂tt>leftup丟偡乢乢>d桺乷t>宱宱宱6宱宱宱宱宱??W?堃€漙plete,釕f?捛懟b泎?呯呩乶ToT?咷嚛rray唚唚/ol>0?歡??99???chec澴澬凁r搃?lト?倧倞?nceR侤omE℡Movem僄刾?漙f偦朲?ign傦傦??偋??si嶱y臬皢(墤増r剼師€賛勦帎凥n錳?猘??儚 (??匃匃匃匃匃飩ord侶up,wn,姩f?呇毑)瓪?ムu癤刢儣儢?Bou悙()僿僷fun?retur咅侊侊rue伅沚p擾擾擽T竫鈥檽饒髤(ⅰ╅欪d帒擷a嫎lepos=0001374268>?color="b忦?u>Exa洨聽9-3€*聽聽聽var聽tileSheet€€聽mapRows聽?15?€€鵆ol€??//playfield€穪觻蒄€蓙鈩鮼爄tem偹€飥顇Min€?€還轪x€?8€飥韞伹€還輥菃O哊堿s€梿/erT€賲S1,2,3,4,5,6,7,8呄仌enemy亸[9,10,11,12,13,14,15,16伹伵road伖咃€€鴚all€???goa?23?劷xplode勏[17,18,1?€07戯伩兗壗2兎?堸?1?坥m嬀?叿叞侘???oveComplet€@unt=??object????{}??my?€飰秙ion旼兎兇screen兎佨€籗tarte?false?丗or彲€鐒鍿?1??al?5??high?壏??chanceRandomE媴ment嵜熆伒funct埜暩unGame(){€?偘urr?€鶊8teF伂()?聽}傜傜傘switch?(new€J)嶩亸僿僿?呞仌儚亇傘聽(伹伱傤仧伩傾as傕GAME_STATE_INIT:乷乢仧?圤??g€礗ni?佔€W€!break?€蟿莿莀WAIT_FOR_LOAD?仐€W???€礧aitForL??€W匞?僩匞匔TITLE?乄€W????Titl廹?€W匃?€邉鲃鯪EW_€y?乷€W????New?凎?€W??€飬廜廘PLAYER_MOV?佅€W????彆P?牋劎俖€W呄?€飬蠀虯NIM€A吤厽仧€W厽厽厽厽Anim€8厸刉?€W??€飬厎EVALU厙婫侊?叝叝叝叝€睧valu叾婳侴€W呑呑€蠀讌讌蠳EMY厙仧伅厙厙厙厙厓???€W??€飬?悋悆厇匴仐€W匴匴匴匴恷厞凣?€W卭?€飬o恮恡婏厽伹€W厽厽厽厽恗?偪俹€W吳?€飬菂菂肙UTCOο仧€W厽厽厽厽厺Outco??€W??€飬惂悿XPLOD厀仹€W厙厙厙厙惗xplod?侴€W厪?€邊弲嶤HECK瑉€獝甫讈莯W厽厽厽厼Check琡?Ov侴€W厽?€飬焻潶刉IN匴?€W単単単単?Win??€W??€飬???LOS?亣€W匞匞匞匞匘Los??€W匫?乄€鋧€縺弨弨坒凍鹤河Load(){乬偆//do聽nothing聽whil坄l乸€俥v嗚s聽occur
?搥€?聽聽聽聽聽聽//console.log("doing聽noth€H...")
乲}€b€?爁unction聽gameStateInit()聽{乬僿聽tileSheet聽=傽ew聽Image();乬乬乧.src亗"tanks_s€猵ng"伅伅伃onload伮itemL€hed亱伔伌switchG?(GAME_STATE_WAIT_FOR_LOAD??埀倧埛兦(event埱亣€3匶Count++啩???乹?:"聽+佺t峠佌if聽(?聽>垊sTo勝劅佺?堊堊堉TITLE儯侊伡埧塆€弶7戠傝Titl怭剷倃哃screen乆rte幦!=true)乷??illBackgr囙d???etTextStyl?乢?€!?t乆.傎仭€?"Micro聽T斷聽Maze",聽160€070俫侴俫俫俤Press聽Space倶偢Play倞5倝14倳偪偗唓??廻???else夁€蠐媤ai剱for倫刢key叏lick伅仧???List[32]=?仹仹?桏"儗p侫ed"?仧€W???NEW_€y?伹€W墴墳fa堣?佔?€飥瘈織縺彈織繀殢erWin(塂?娺?!匞匑乢乢亸scor?+哷goalS€y?丟橤橤丟?橤橤橤?栫栫栨YOU聽WON柪HE聽屟!栆35檁????("Final橷嗎:班╞囀檞0偗?偗偗偔Numbe棬o嫄enemy傊€rMax傡13淥??孊聽high卹?亣€W丟攂???€W哶哶哫EW聽HIGH?COR媎呝6埛?晣啛€蟽G僄僁H厁???19塯傁傁?クギ仧亸€ 寎箛€鐚(??50嬤乄€W偠?50傔??€噳??挧?n??壞偡偋勏擌00,22姉仹亣刉刉谗谗谗岼3檰偪眹眹€勘嚤嚤嚤噥瘝眹眹眹仹仹眹眹眹眹侊伅眹眹眹眹眹仹€W晈晈眹壪亀憲€飥縺縺弨彵嚤嚤匧os?塐娍眊眊?乄丟?乢?撓撓撎SORRY??LOST?つ枿?偳偳偳偳?oo?偗倧偗偗潎潎?????????仹仐???亸乢哶哶哶???倧侽?€飥飪G僄????塯傁傁晽??仧仧刧刧?????偳偡???????玏玏玏玏倵?€縺攉/??????ist[32?搥€匽==true){
聽聽聽聽€E€E//console.log("space聽pressed");侊伅€VswitchGameState(GAME_STATE_NEW_€y?伹€W爏creen侌rted聽=聽false伀佔仐€ }€飥瘈縺線弨宖unction聽g厺New咘(?勥cor圶剺0?€韊nemy€闧]€鱻鰔plos働s??€2playFiel嚝??item?€鱻3?etP?er(?€竼饋???render??丟????WAIT_FOR_PLAYER_MOV弽?孏孏孍???凖var聽wallCount寚??姟er丟丟丟丄嶊????goa儻???road??乢?fill咹ith仯??fo俻(偆wCtr=0;€K<15€l++?侘剣懓pRow懴乢乢僱col僀€K僁€k傽聽僕佭€W僜.push(啞Tile)仧乢?€飥邩wd俢偺抇仹俖€嚘7?倊="聽+?d倵??擱浂array?壏壈岟岟岟岟佅岟岟岟?僄岟岟岟岟??岟岟0??妎垪€悉&導導亣?€縺繓{and佖?€鱻鬋ol€鲗瘝纁e熱s€飰檜犼塉€T塓€YMax€潓莻'??LocaすF瀙磄磀亣€Ewh梡(!佔佋僌乷€W坢?Math.floor(€Z€醥m()*15崌佺€W壄????佔€W廀f?橆[勡]€J傪]==灦啹?€W?俉俉侾匤塝俰劘佺€W婔娍審爐ru侘亀€W犵€莯菚梹繐窊氨4€撉撆?撌€]撗€b撡€瓝鐐G撶侱噂擄擄仧擄撻佭擏仐亣懬擏懬懬懬?侘?擏????侘擏擏懅懅擏擏侊€W€E坓?憻?仧€W?mpE侫佢{}佅丱€W獹仮.?伮侊亸€W侊佽侇?乢€W侊侇next幗0佭乢€W佭佭巈佭乢€W佭厺urrent???仧€W?墆t峛佺佺亣€W佺y.x庛刜ol*32?仹€W?仯?€噸鴤'仐€W?仸spee揅佅丱€W佅佁destin?X??仹€W???Y??仹€W???伔?€W伔伒墸伔?€W伔伌hit佭乢€W佭?a╳佺乬€W佺佷moveComplet???佔€W.push(倊丱€W亁s拂凁1?亸€W?€莯嚨蟺康系蓀layer<?搥€卋r/>聽聽聽聽€!var聽playerLocationFound聽=聽false;<仹€3while(!伔伓){乷亸€ randRow偛Math.floor(€Z€醥m()*15)僶佺?Col????佔€Dif聽(厜Field[剕]€J偫]==roadT喞聽&€*聽?俹倠tems侴侴0??€W媑壏啿tru媉亣€W佋.c?儨仹乄€W仱r嬡厔仹乄€W仱x亽儻*32伹亀€W乗y伹兪伹乬€W奯奯奫?1佭亸€!}€莯梹悁縺?/刋c幐goal€鳁€訉彈飾飦棗韥邅_?椷曔曔曔曔佔?椷?????椷椷婫椷椷椷?倧崌侴椷伅亸??侊弌姟凙哤佺€W嬜峸?伹仐慻€棏g€繎`console.log("厗="聽+?d媎?倧€峟unc??esetP榸(?埊?咥0??熐???next揢???拝??僼urrent惢乄丟呑ot宐???.spee峓???destin俽X?乢乢乢onY乢乢乢????僞???????r.hit??啘aW???wi媅????屟gameS?eWaitFor攞Move()聽敮¨keyP曡sList[38???亣欖up€還蟼}checkB潐s(-1,0,啎)偀仹€W牂﨑彠(?佅仧煑€杄塸喯喯37喭圤伩嗇left€飥邌飭?,嗻嗭偗仹€W嗭嗭嗧?喦€菃菃菃荹39喦?佅喢righ喯€讍蠁蠁葐菃莵弨W喦喦喦?喦€菃菃膯讍?0擾伩佭喠down€飥邌繂繑g喛?€W喛喛喛仹亀喛€梹棟嚌嚌剝??憋?╫┣犪痏痀*3珶佭佭狦佭瞕佭佭爏witchGⅴ(GAME_STATE_ANIM€APLAYER埾?€弴寃s(窰Inc寛穩€Kobject圇凢€朔繀饊渹(+侹?伔伓?€渻?兂佭戄??>=0€@amp;€*??<15??傜勏伅唜偪伅??偤埱俖?t吊喦乬乬乪禟壸?乷圵偅==1??€W尟憄弬?9箇乄熥??-?丱€W??聽27?乢??噑??亸??咖仧乷???丟€W??聽18?乢殢?€蟺!return(?嶹>聽?搥€?犅犅犅犅犅爙else{
€瘈Eobject.nextRow聽=€瀝ow;伅仧伅仼Col伅t.col伅亸€!return(fa刾)?乄匽€縺弨弨坒unction聽gameStateAnim€8Player()嘩偟p€?x聽+匬€tdx*€Tspeed叿伔€騳伔伇y伔伔伔丒currentTile++??if聽(乢乚==€as.length唶?僕?仒孞0僿姺€棇ender墤Field(寗??壱勍.destina?X聽&€*?乢乢Y??€2switchG嶿(GAME_STATE_EVALU€IPLAYER_MOVE匞嗭?€弨彂煈焧eEvalu懄Move懬傔哃楬娨€|橽刉?寢様??棌仹?孌[儣]€e倄]==wall???冿r.hit冴true?燱涏儻儻儻儻==goa儻俉倗乼wi娻儻乢寚囎€絝or?va€0eCtr=enemy棨-1;€?gt;=0€Z--????=係[伇]嶃??ol丱両€垉傳€W爜w]?嚄乄€W?亸亸?塐€莯梹繖瘷瘷瘷狽EMY檁侊倃€彉蠘蠂)槆兦崯崯屰<嶏th€?+??€2?temp僢埐娺]堬仐?!伨妷?亸?僶僫dir脆嘓sToTぐ=[?乬€W伋hDif儴崺兌炩-?穡侊€W侺v侽侼斅侽籪倃???Math.abs(偤)栶?聽€緟?嬿?€W倗巟勼沘辫伹丟€W€W€ 姺姵.push("up"??€W€W???down??€W哴垐哋乢€W€W?????€W€W??垏?乷€W焔?€縺W嵎嘫旍嵄嘷?€W€W???left??€W€W???righ侴亣€W噖嵖唂嵖侊仧€W????侴伔€W侴侴侴埀?仧€W嵶€噣W嘩濈?濈灍濃聽?侽€W怗怗夌?€W€W嚙嚙嚙嚙?伩€W????侴伔€W堶唃?佭?€W????侴仹€W€W侴侴垪?仧€W哤唚乷€W€W?????€W€W????€W哶哶尶乢€W€W????乷€W€W??垏垏乷€W哋?€穩鲊?溩溦=絰溓溓倧侽€W€!//mak偫an聽educated聽random聽guess?伹€W烑?floor€[?()*2)==?伔聽聽聽聽聽?搥€?聽聽聽聽聽聽聽//try聽vertical聽first
?€W€W€3if聽(vDif€@>0){佺丟€W€W€DdirectionsToTest.push("up");俖亸€W€W俖俖俖down俹?€W€W€!}else嗊ff&l喯?€W€W€W剋剋剋剋亸€W€W俹俹俹?俖仧€W單乄€穩W囷嘷€蟺W€W????€W€W?h???€W€W€W埾埾埲left堖?€W€W€W俹俹俬righ倃亣€W€W?嗺??乷€W€W????倃伔€W€W倃倃塛俹?€W€W?乄€讇W?€W€鱻W爒ar聽chooseRandom聽=捀a姁??€W伿moveFound伔伔乬€W伓Pt€H仩0亣?€W亞?乬?桏?Math.floor€[r啰()*100)棥噏anc噒EnemyM?ment憯?傦€W淒not聽傠???乢€W€Wwhile(!夦兿佔亀€W€E伾夠??[娷]?倧?€W€Dswitch(侎櫩?€W€W€Vca涢ㄡ:佔?€W€W€W嵔checkB坅s(-1,0,temp岅)剰伅€W€W€W€W?墇tru扥偀?€W€W€W歐€W€W€W€!break兎??€W€W娮?婄?€W€W€W婄婄(娺娺偡佔€W€W€W娺娺娺偀乷€W€W€W娺€梹W€W€W娺娺??€W€W娺瑂娺?€W€W€W娺娺(0,暼圚婘婘伩€W€W€W€W婘婘嘒丱€W€W€W婘伔€莯W€W€W婘佭€飥W€W娤宫娮?€W€W€W娮娮娦1暞娍仐€W€W€W€W娍娍娍偀亸€W€W娍伔€穩W€W€W娊佔€讇W€W??€還W€W狠++仐€鱻W€W媠伡==矎矉.length嫥佔€W€W?/do聽?祂?n€榾sf?偀佅€W€W倿this礰houl?b偙mpossible俹仧€W€W?hooseR?恄媑乬€W€W屵€噣W€W?丱€?else?€蟺W収収収佅乷?€鱻莯W娐pick聽r偺??崍t??伩€W潉勶)聽唭伩?€W€2while(!溒揥?€W€W€ switch(Math.floor€[咰()*4伅€W€W€Wン0デ€還W€W€W圙デ(-1,0,?搥€卼empEnemy)){
聽聽聽聽€E€W€W€W€EmoveFound聽=聽true;俽偀乷€W€W€W€ }else剆??€W€W€W?伔€穩W€W€W€ break叿??€W€W€ case聽1:伩€飥W€W€W€ if聽(checkB?s(1,0,尫尫仹€W€W€W€W尫尫??€W€W€W尫尫??€W€W€W尫€梹W€W€W尫尫??€W€W尫2尫€還W€W€W尫尫(0,-1,?屜屜伩€W€W€W€W屜屜?丱€W€W€W屜屜??€W€W€W屜€W€W€W屜叧€瘈W€W€W尌3導€還W€W€W導導尃1橶審仐€W€W€W€W審審審偀亸€W€W姀審??€W€W€W審€梹W€W€W審ak佔€讇W€W?€W??€縺W?丟€鐎W櫱y.destinationX媖€辬extCol*32捛?€W仐俹nY俹俷Row俷?侽崗崕€瘈W儳?l?€瞔ol叝伩€W乢勗?€瞨ow?伩€W乢嚪?傜?俹?俹俹?俹匫???娺?€鐎梹!switchGameState(GAME_STATE_ANIM€AENEMY)??€巉unc卶聽g俇Anim€8叢(燝兾for∝va€0eCtr=e嗿length-1;€?gt;=0€Z--??€2??墇俠[伭]揙佭ヱ!婏Complete儎佔伹崡佒x聽+岹?x*€ospeed??€W乷?俖俍y俖俖俖?俖?urrentTile++伅乢€W圸佔佔e=屰€Ys?実?€W?俹俶岤0刜?€W?€W侾derPlayField(斚?€W喦岲==€o?潯&€*倧侽€W喯.y倃倃潻?伹€W侴撉撈穙?伅€W€2屢M侘€@unt廹乄€W?€梹莯莯梹繆??冪冪nt夽澅勡憞??????乬∠∠∩?<儫th€?+冏?€W$$$′亀€W???爁a掂侘仹姧€嚞W琖琖琑EVALU琟_MOVE椉俫傳€縺弨彮g璯Evalu璵寉瓘傋嬊瓘瓘瓘瓘??嫰嫰嫰嫰亣?挤腐腐絞伅佭ol佭硷ol妛??梱p[侊凱]€傫]==wall?俖€W?.hi棑true;
€*€瘈Eif聽(player.row==tempEnemy€y聽&€*聽?col?y€y){傳傜€V乬hit聽=€恟ue;仹乬€V僤亸亶伔亀?€飥?聽//check聽agains倶other聽e劚伅仧€ fo?(va?Ctr2=乯.length-1;€?gt;=0€c--圙侴€W爞b坣2喪偑[?]????妵崡倰崯崫俹?€W刼幆俆€€俉俀?聽!厵卛嘷?€W?徬嶨佔乬€W佔凷佭佭丱€W??€飥飥飥縺?聽switchGameState(GAME_STATE_EVALU€IOUTCOME)剣?€巉unction聽g俶Evalu€@Outcome(??湉囐???r.dead?乬乄€ cre冮xplode傡呯坓?€瘶O楲楪楪?r???幾y?楘楐亀垙棢扴??€W爏core聽+傹S€亗鱽O€W?妰姉伩?娗娗娎?)伅乷€V夳splice(囇,1実丟€W匃労null亣??€噹織/??E_ANIM梛XPLOD?倃€彈'坓坆objec峅兿?new丩啋{}?丒?.currentTil亄0亀亀乿???€y??傦?湴??亊x乷t.x乢乢乛峴乗y乢乷?吢孒奟?丱懜丄s?s.push(佭????彊Anim崗儣熐熌?燂燂燂侴倃燂儝??偖????derPヘField(嚡?檕偔戠le++仧??伹伹摛匛de€墖龂_俫€W喿s無無伩仧?橈?仐烇€莯棌讇繃剰?==0?亀???E_CHECK_FOR_€狾VER啩刉€梽窋嚁噧CheckFor儥Over()犎仧哋个璝?????E_PLAYER_LOS︼佅}els嬓僌r.win僄乢僄僄僄僃WIN皬??偋€蟼WAIT嬟傡M嬸??€棆飲飲韉raw殶?????0;€K<15€l++伡佺????€K?€k?廤佅€W′sourceX槳Math.floor(??[創][偯]偢%聽8€8*聽32?傁€W?eY?????/?傹?傜曪挜俫俫]聽!兏road?宱?€W€Dcontext.嶢Image(t佖Sheet,?€!,32€€P?匟€`傔俹€W珪匉亯???€W摋€W匫匫匫幷€VY叕偀俖€W啑,卂卂佔仐?€梹棛O橭橭橨す屜幥幚!しし?圙圓sav粯憻乢乢乚etTrans欻m(1,0,0,€2?伅犅??搥€?聽context.translate(player.x+16,聽€ty€p);
聽聽聽聽€E聽var聽angleInRadi侾聽=佹rotation聽*聽Math.PI聽/聽180偀?€!劷佲e(傦傞凩佭佅剈sourceX?儦floor嗕Tiles[勽current€聽%聽8)匤32勭傦??Y?????/傶傢??圇.drawImage(t侌Sheet寴嗕€VY,32€,-崍€!€r???婠estore(庍?}?€弨弨坒unc幟匒Enemy(){?侺fo墄(壀eCtr=e両.length-1;€?gt;=0€Z--??€2temp?嫪?[仚]咃乷€!if內!伨.dead傳丱€W埼sav埗亸丱亸亶etT?噋m(1,0,0,€2娮伅€W?淊??€彍/倗俫旂檞淾?渨渨渨傜偋単湩湩湩塯伅€W櫹溩櫹(巣櫭単欉滅滅僌?僌?僌僌僌僌??啛傳€W埀漌漌漌漌漌漌????潎潎??€莯梹g僕??xplos€xs濭侽濭濪乿瀘瀘瀘侴俫攲?瀷倖灧卭佭垙滸乢?恛摲恛恖儭de?劄悷悩傋偳€2敓敓€鲃攐?????敓敓僕僄埊攐攐攐攐攌聽?俹?剸x,€噣亂?劎侊劎曌峠亀斶???態fillBackground(埁?俔/?聽b乂ī€(刌亣??傖Style?'#000€'幥亸亸Rect(xMin夽y€;xMax€rax噖嗙€弳鐔獠偢?Titl塰?凎凎?厃54ebeb?亸亶€@乧20px聽_s亣亣触€(Baselin?top亣唎€弳o曕derPlayFiel峎僕亂巜巖傜?嶢????er€鱻鳓帛€飥铵煣泹g?€弫抩cum湪.onkeydowビ嚨(e仧僜?e?e:win伬.ev?劅丒偘P橮sList[e.€xC狓]=true亀勛勛勛仺up勄勄乪//乿body仧仧仧勭????????als哶哬嬁>//**猔applica槾tar潷€€witchGameState(GAME_STATE_INIT廏朣s棙FR?R??40?剤r俋R侾C?te璥?ne○F€讇?侴?妭叞吙吇p??i?valTim奫1?/偡偗爅I亅(run噥??晽/>悧????€賝bjト聽prototype??佭?fps濭侭if聽€箚x唨?efd戯瞘his.丼??爙e悩亸亸亸爛@?眔?last卹匯亽?孆d哖T??D??偀冄倅L偫亃佸.g?嬭涷elet寛?€鐐o勦t掚勛?s偛僟僟僟亣ste?1€蹐儘峽.庮.c€憗s=?)聽?搥€厈

聽聽聽var聽dateTemp聽=聽new聽D€?);丱並timeDifference亃佸.getT€?)-this.las€倐'侙€蓅te僈(倃俼/1000)*?fps伹伳倣兎兎単亗//console.log("儜=",凍)乢傐frameCtr++??爄f匟僿僽聽>=侘L勷+?聽??€3C剓Log創仛聽event"呥亞噹F勔ount嚭儑卲伩伩€峱亪0??収s偦?妛伩}€g燿elet呅仌墖>?€*</script?€ead€梹恇ody€弨坉iv聽style="position:聽ab?ute;?op€?0px€hleft€u"侽侶canvas?d="€c"聽width="480€hheight€s佫聽You夃browse樶oe?no塒suppor€HHTML5幇偤.?僀?€?tml€?tt><偵骾z奝6€xb>What鈥檚蝒xt儛冿p俉="3俉係Throughout魬桢ntire鈕ok,鱡鑑ve鮯ed鐠?醤d?ertainm€P-rel憟d髐bjects鬿鋏m槹tr€茹壥醦plica彙鈛ilding鉶犺pts.蟰er?ese鞎佤wo鉮ap働s処嗋凥sp僅up両剛鋓scuss偐勓co??many??丳r勷ly鈟銒坱??uniqu倇??opヨiz?a埄rd墣th鈏tmap?嘼餺ol丂.蒼鋙亼so壙嚉剈of叢剢from€抏ar?r噕閚鎢ll-懓wn?夛n塦T伆tech吺s岓嫧啿乣仜垚??鈩w丳almo?劰岟岞勔im斎鰅ew剻仩st??r壯?sky閟騟al娙唅l壭t,醽槆i傡l哖€揹ǜlop噚a?懓i厾堣po働€橃ow-l?侙pabil?t?哴mold哖in哸?咓n.棅?棷棷>峱C層聽10廱wi咢l檲釔憠嗻simpl?弉垟呌顓槕@iPhon??噂?0.聽Mo?梤G?梑剴Gap僶僶僶僶僴G槻?e!倃で?俉侾Nowaday塜個eem?惱ry塱摳mak傕,餷ann瀝o€,铫Yin€鶔賮K??鎭 m劜敗ice毨?傎峐n狧鐨?(乮ay?ctu梟curr?)?c湗凔偢ne?sel狇兿濚A€悘苾€俆偫€墶\?popular饻8ona槰omm漝呬洂え仼iTun?Sto?g掟s玴d玧?伮淐滒?show俁呇倆fr?s剶irbor.?sepa?墏€鑳n-???t媭?椔thre楺tegor炟:膃sk控 (OS?,陆 (Safari€悇{/iPad€(od詏uch (iOS)熆挧挧挙M妷乸匫寛,宀癱i幉?僷夃written琿O痡奰-C?mp慔d钵啿e嘚瑯攤€榅code蒁E徤廝€a?rbar國昘o簯r?壖犝匫匢∪刜C俌not?e??幮媜o?業崈桸Up钒til斥y 2010,傔-C/叧w?on?viab?幤system歓t啈??t屜屜屜瑖潃?び鈥湭?鈥濓ur萒ML5督堢侌?殞嬻洁?甡g?l崏.€V错?傫偡偝run宒溾???packag廢佔??曤⒌哫?.哬怞€h秨??牠n圚f溊椾廇?€垽H籬?俍敟晣嶲漑Ф厯???凙崢刯s亨?嶰blockquo嚼帟1?師€`align="c?er跋吧1笆籣籜#?癄OTE剥盬/儚冿冿??僶2">O楧ird-t汭ol損嬻櫴廥c痀嚑?墸媞犅.茥Pexa玖,課i俋(?a鑢ef="http://?ty3d.尷/剹剶囩囙blue€榰>佔佒<乤骾ze="2€}color="blue€榰>???
儘€abstr嗚橷挩yer.詇孈嘨int淍a宍allow揝s湢姁d毩??d剛淜f?ur儉姌m傝椑?匨刲鈥敎}ge岃ca潳o€睏x娙s,韎crop堎€h?o灘噖capa妧焾倹埄崰separ慞?do刪not頴匥厾writt嵿塓ea儤劽檧昿?檱橭晛曠€`align="c?er櫹櫳1櫹櫸000">WARNING橭摟儳??欉漁儑渶You€鴏l嘋??el敩Ma滰tosh騯nn搼X?醔敔€X崢p旟a攩餽oject愌獃curr噚ly潄no桮m姴Wind憮寛労???Saf惃蜆揳ppli?桍疇偗wit曗Ob剚ive-C?伕er?壙/?壷W?on?⑷暢?韆ny髉ecific閳?i砐橀chap弜砵?喒抈?p橦,鱾鄧yco煇??ic塸尭橴k?simp囎淩?秗p€r峿凓垬劤佖u埲or樆€些貜偘phy儀枩讋寔*儦ごlerome唸嘦煩o飖r勏on標婘娺槸槸槸?槸槸槷NOTE?槜儚冿冿槜槜僶槓F擛fur、必d夽,士様╪訌豮?s 跨瞘傍ore壚y綊?alog/9780596€(791/儣償?硸Buil冮嶕Apps杻疘,肧S嶤JavaS縝?倛揣僿價 (O?R?)搵s澴倝¬庬?g?搲捀detail杸f鵲u倛摠?曢ry棧卋Android,鍃p嗚癷imilar?????0636920010067????建?凩????晶奯奯奯奯y)?l瞏by憃慾炶hi当樕牁媈┵?斬櫑?ˋ卨?朑砈????5欑欐8e?呰坕兺僟噺濔僌櫱僉?呑n?懇go媦嗭怭ザ?BS聛o娧鏰m€濛拘des燲倫pa瑻偫be埨e懑氓3嶡柴嵗抪磆硑玜yn傞嚢ncepㄠs獞偦?fee矀(崁s)常€賢yp?busines?ork矏c??be┕櫚瑝嚢扽喞Dilb€?喡?€極f皹e盈€?esqu厐nnoy冡corpo櫚e瓴€甃dou哫矆ak唲€梜骵em稲hav?ep酣ro惱dself叝矠last 20鵨ars,奰s紮辜劜a塰飂垚ft?絋?(su?s?僅ves)?攪??>窋pen-?-帲)憽僠€閸Y?a?厾y?br?懷鈥渂愱cぐ鈥潊乤韊et?wⅨ?堐嗻??傷悪媀妎婜籃傤昐5脳5鐁寉劉?25髊u埜纠滰煱嫲???庼?d塰r庬phr?s.膗嗎乯?囘囐m〃伻f?僼嫧帨倱俓泎saΘ?udY?unsu?c?(?n圶傞€?儬m旽??ng繍縌a?桻a窣涁∪um峑奪塓?歛ff,嬮€竤uppo??jump鮬鎟om?嚈?姾y灐庁BS!帬??">勜槽?灪斬犺idely餷aye?瀫卍 (or鍁en餷ayed醫醠l)閟徜ebatable鮮ban靍gend,鈛t鬶e骾mp€鑓oncept飂鉲icking髊uares鬿鑙ghl€ 仮m韆k€纅兝a鮯eful餴ece侜ode??w偢儛build錫sily醤d?卄or俬o?iPhone.譭醨e頾t唭go???乊enti?game鑕re;?will喨av?xt嗻伖it閚佮a鎢€鴄pp喞ation (possib剏d乥multi夠r,鱤ich夐discuss姁in <侤ile佇=0001486735>Chapter聽11)壀you,唕reader.

T偢C?儺丠€]??3????2230???Exa懝?0-??鏸v懕凥恇噾our崲?鈥檶€婌?variou拡unc?s媺€蒼巟骵€e侾廻e韔廝€悗餴nst梙?,€竏ify€Z?est怤貏bus€憮zGap.詇廆vers?曡儵掆挌work垹n僯a觓f匟殣sktop鈘ows嶐暪亃??剅摂s哖cessary叐椻劯?剙嚙嚙愖嵡4嵡嵞i?寉.聽BSB嘆o.html楙s??li垻<!doctyp儴?>
聽€閫?聽lang="en"€鱻髼竴?犅犅犅爛蒻eta聽charse刋UTF-8侊?;title€葿S噋嘺€?€緛_;script聽src="尐ernizr?6.min.js?侜乕???T岃Butt屫佅佅佅佅佀C?oleLog佅佅佅佅聽婑="t儤/java€粓仈window.EtL?ener('load',聽猋tW?L€榚d€爁alse)儹浥乬乫()聽{?峬剤App(?€魙€o偪亇Sup椦聽偗倕聽retur乆M?.伀?傋傋傊凧?偩if僪!凎凁()冿冾€W凪旂€舽e墭佅€蠞–?聽=聽槹um?.getEle€YById("?"嫯?妸?廐?値?懭€?"2d佺剶噺€潽P聽b榿Card俽[]伔??厯???nd侤Jargon捬亸乬乧temp樣?{}??c?kSound儣?帶ini?s帶丟乼勥勢=[?丱?A偛able"椚"A緢ss尮"聽,"B?€闎enchmark€q???st\nPra偢畼伝ot@聽?k偙€楥hоe\nManag?丵€蒾ac僪傦傦€閙pe??\nAdvant侌??traint儯C竊\n亱叞i刐偪偪乧?金侅r?cal\nthink憖€粠€`\ned儽俹俹?Dashbo嬝仛Del卙r婛傐E晉rpris?"Gatekeeper勶俫們Individu剄梚ri旇o亰"L盚艰hip€zMa€饃\norganis黑?偗偣Me乣c劊Mi勷斝?Mo寔um€lv嚇?扝e?倗倗?墭儛v喠Part?勎Pro均€gss\nm忂?倵乆Re-engine?€€quir仛俢R紮谎€rSea?a擑?厬枹傔傔牭Hntp硤伿聽Silo?櫮?€pt侾o?倸喐倧?倝ly缄i嫧€憏?gy坸Teamwo櫝"Thou叞\nl嶊姉倃?ouchpo枛V?\n禜e掍r斷勔\nKool聽Ai€袀w倃?akeI勩涾mp愹€iirc滪Ba滧偸ialogu堧Em?€Z傁傁枆瀀c乨vol?€Yxecut€cFacili奱ⅱI亁n慞?偪偗偣L籜r烅拕娀pearh夃?r偢g?嫈偪偪姱hrow?歚ur匼婮圌佀"Ou挔d姩娨Box?俖倇O耿u椸廆€俥?Door?o畑忶Win-€ \n(Anyg)?倃棐isk丟丄檨猘毬Re€^Buy-巌侴侴墛adigm\nShif暔"Task-Ori嬓戼幐pow姍旘卲lay€y倗倗シs垐W堗メlobaliz?"Lo﹫€~??ss€?c?ゴgic\nQuadr畧俋Ag??俫們W忇rfal侶嵅ourc璲"Off-Shorin?畝単","Blue聽Sky",
聽聽聽聽€E"20/20聽\nindsight仺Low\nHanging\nFrui€?0,000€€oot聽View偋倵偂Take\nOwnership佮Ramp聽u€X€鳲u?of\nth勦Box€?4x7€I偀偀?Fas仺Track??Loo傐In聽€怽n€?Touch?ase傜偳傘M囐e?€`Gam個Plan€zBr?倶o?僙Tabl俠"Drill聽Dow乥傜傜?Elevator\nSpeech佉Leve佇匤僗y?field侽?侹P宐(Someone)嗋Pushb垈"Retool傗嬦聽Awa彁俫俉俛Life-Tim凐Va?佀hou忴壺ead嵧€繳嵢Sell"俫俫€ ];€蕗鱻 }€焵漟unctio?initButtons(){?倴b€?聽=聽[??€2€觻€還2new峢ex僜(曡榩€b埧亣€W€2乸",85,50,gr,"#椚€婸#ffff€S€??偀?凮凮(92刉刉亸€W凾1刉兎刉€W偀侽刉刄184刜刜仐€W刓2刜兛刜€_偀侽刜刔276刜刜仐€W刓3刜兛刜€_偀侽刜刔368刜刜仐€W刓4刜兛刜€?刉?欶匞€鳁w€飥瘈W?梪57?伩仧€W€ 1?????偀?刉刉梮刜刜仐€W刓棁刜刜刜刜偀侽刜棁梹刧刧仧€W刣棌刧刧刧刧偀侽刧棌棃刧伩仧€W凴棁刉刉刉刉偀侽刉棁梹刉埛仧€W刣棌刧刧刧棌倵侴棌€鱻鳁弨飥?棊114?伹仹€W€ ??厪?€弬焸O刜棗刧刧亸€W刦棢刧刧刧刧偀侽刧棢棙刼刼仐€W刴棫刼刼刼刼偀侽刼棫棤刼刼仐€W刴椏刼刼刼刼偀侽刼椏椄刼刼仐€W刴椙刼刼刼椙倵侴椙€鱻鳁莯飥?椙71?伹仹€W€ 3椙???姉偀?刜刜椓刧刧仧€W刣椙刧刧刧刧偀侽刧椙椓刼刼仹€W刲椙刼刼刼刼偀侽刼椙椓刼刼仹€W刲椙刼刼刼刼偀侽刼椙椓刼刼仹€W刲椙刼刼刼椙倵侴椙€鱻鳁莯飥?椘228?伹仹€W€ 4椙???姉偀?刜刜椑刧刧亸€W別椙刧刧刧刧偀侽刧椙椑228,"Butt?硛€卭n聽
聽聽聽聽€E€W聽4,2",85,50,gr,"#000€"€Pffff€S€?,俽偀?€2new聽TextButton(276,228,"€儎o仹€W刲3刼兿刼€o偀侽刼刴368刼刼仐€W刵4刼兿刼€?刧?€E]€莯?€瘈 }?€漟uncti匢initSounds(){?俧click?聽=聽document.getEle€YById('丅s丄')??€焹凐choose壋sForCard凮?聽//copy聽jarg吽to聽temp聽array仹仸var?A??[堬丱爁o丠(亃俠ctr=0;€]<stand勮J凓List.length?++吳傔€D?.push(倃倁[?]???€蠀讌詠?叞€9厬b姭?€箙侽俖?倊2倄€K倧s[俀]偪r2囎俉€W學r嚚Int孊Math.floor(€Z€醥m()*塛?楏俉€W€3劮劙€12].t溞?俷[冧忳?€W峅凐sp枠e(佁,1凮亀岋€讇G€焵泙W槦槤drawScreen()聽娤傜//C噽oleLog.log("拝Acronym拤="+€穩秺瓐?偪偪偪??偡€瘋瘋瘨彃彆????侴€ 勶勲倆"+€9屵???枃?枃枃?俉€W刼刼傟刯2刼?€W晱晱].彙(con暽?伅?€讇g€焵煉掹onMouseC瓉(e?亀悋/selec歅case権hrough聽?tes癌the偘€0聽loca?€豲f倧倧/囦仭倁?亊m匒X濨e.?砢X-僅Canvas.offsetLeft墢侊侁Y侊佽Y侊侅Top佺佺庯庫塧聽"聽+劮€X?€焂嵡俖嚇fi?徴氦ed嬊亣ゝcol〨〤冇/92僕伔?ow伔伔eY/57伌佭?噧噆?",€(,"?",凴儚伔㏑剿儦柦佖柊ol玏仹囉Sound.play(傁?傁n.pressDow╔乄乄乄??亸槯€煒ove槦僩拸攚攚拸攚侊侊攚攚侊攚??敭m卙:敮敮敮敮??傳?****渏r焾ap烽瀓乷?g€ ?媆.礖濜LinearGrad嗁(0懜€!85€(50寚兛//聽Ad樥憖璉stops.丟€ gr.addC?S€饌?#fff€'嗙哋仹仹(.5仺bbb€伅乢乢p(1丳777€乁?搲崬伆Ev嘸?ener寜媹尡櫓挆e€pfalse冏俖俖俖俋??璳侴勄俶init毢s橭€讬€還邇蠞5ho伌ForC縫??泚S忚e溵€鼡€h?/script&g樦€瞙ead€ody€焵歞iv惞yle="posi攽棸ab榒ute緋嵃€?px€`l涾€l"侽侸c媌嚚d="€c?width="570€hheight="418侊嘫You斷bθse€Hdo丰no?suppo檨HTML5比帇兛;/僣倗€瞐udio刟歑弅s嶉?聽loa?auto凮嬇侚乭rc寡rc侟.mp3侌typ堾傭/mpeg€???唚唚唚唕湚?elem斷啩t;/audio?硛€?gt;
聽</div€焵沚ody€tml€?tt>Name鬶is鎖le BSBingo.偣醤d骯ve閠閚徭older.蒮鵲u醨e鏾仩鬿€醠ow醠o€€佈creat?e鍃amp?project,侐will亁so鱝nt?仈僂€檋€P?佨卝s.

E勮in?傽Code?r聢w坧婂??媁?1冑?€`align="center劮劚1劮劧000屶OTE儳儳儚冿冿"3冪?僲嘝When鋏s剤噛a帢pplication嚜?iPhone鮯?€bGap,鲗葟€actually鬭rget壗Safari蚾b抜brows慖T?means?c儛mak€Honcess儼s騛?冄€鑘av抰傮夎?vailab偢HTML5-comp厫€塪evi侶.賿卬ot€悥胑speci卝w囇?discuss 姇???g?age攈?岨旓惡em屪屪俿4?T?TextButton.j溍?摏偀弌倻Ou暕聲辩烋垝b權layed餅gri€Pf 25髊u帎夝W寪涄d?cla?(宲ob洅浶totype,忣)嶺ll亁“収厾『澒elp堭灂b??ith憐t仺倄惐?s兝鈥減刾s鈥濗t伇憯us亐o骽??倱憟s?庎c?ked怶??コ匎╫╫侎.萫?俙?c傱:て恄?崗?挆擈func渋聽娍(x,y,墛聽侜€@偅€HbackC≠€`stroke€u盠over€潅)€b){€?聽聽聽?.x聽=聽x?€?y€襶€讇謧墍陘I??厇?€R??咾?€[????€v乄乂?乧€噥w亀堔乥€v乄嘒壨噉乄乄丵??f敦e?}€2€*幙乆毮伀Down=?()聽?€!if聽(?==true嶨?刉刉刉乄}e€榿飦邅飦靸9佺佲啩啩啩啢draw凅啙壯叅偀€ €?漚()?€鐎鄀tTr睭泩m(1,0,0,€2);聽//聽厫e扝to塦d籬ity侴侴.t?l?妔x樍?兡伅伅.shadowOff?X喓3?丱丱両Y丱丱丱両Blu挘???撨"#222€"単仹仱lineW浳4傁??Joi?'round'乄乄??Style悑汷?刉昰昰昰???l???曠曠侽俖俖俖’伹朸€焸/?R?(0?€!,ョt???侘侘侘侘??//?€焸窉擣1?丱丱擥丱丱擥擡??擥擥#fff€擠?囲€@丆14p踩serif"乢乢峯峯?仐仐€鶤lig曘"c焋er凮乬乨Base梱亄middle?亃va喐metricС?measure?枊?佺佸€箾T弒僕乿xPosi?嚗乑/2乷乶y乷乭?戙/2戺伅仾split叡?嶤€?'\n'暱伔泙ticalSpacing悑?娬sole.log("偂="聽+?堶??剦?聽length侓厗.€粋+俉€ 國匓ctr1=0€I<?侞;€?+???撿?傌?t[?]潹峠n,俉俉岟?(伇*??)婳喿聽聽co?秬卬text.restore();
}
This颾ject餽ototype銈 ains鎢nctio€Qor鉹eating,鋜aw€Jand鉲ick€p徵ray髊uare鈛tton僷th鈒ack魠革n閠.議en佊ed,鬶亣ill鈋?侓a鵨llow鈧0ground?e鑑v卆vered醽競8s佊剏咃earlier閚?噲book,髈亯y儞l€樻amiliar鬿鵲u閒€:傿囙d亐o?chapters.蓙頾t,嗀鈥檭坰peci剺y埄ood閐ea偣?<嵸唨lor="blue">C僰聽2,鱤ich?s嚩寫shad€a幩€銑dpaths.BSB?o.html
兂a/冏攺冎?size€鑰xb?e倛itLists()兙????偗?first鏰me-rel?俇??enc掟媥閟 刜="2刋汎凣)?t>.茦鴒ur乸mple?閫Yme歑?峹?凓a乸ng乸l倫飂鱫rd旇as€鑴皊o?comm€`bu乣ess阛rgon.詥槄?st?ardJ?匶匞t>醦p洏剛骳o焁variab??熖勣-di?s亂ar炨?th?漞p烒厾r冟om棤亁?€竬er扟b怮銊袧襝a倛dd恙簦槫(f圔s洨塒would€悡鄼皌唜e?偘滆亝坈-沗a瀥u榟as饀偁ITc墣€齧arkeヱ€崓恊v?sports-€乬eek€麜g捒昰昰昰昰?B晈晈晈晈偪旀憇si惱f 25徸徸T兓彈彁?悩圚, 85餴xel?爄儓倄€€剆捖??豺瀊巃懽懻???s??two?al扗怚?ac峐僷vi?栠傦t>[row][umn]??sy暟x崯婄崯崯崯崯崢S补崡崡崡崡偡?傋偪?厜庮nee歛o?眬侌欒辈犱s?卑f??寕墵HTML?儳><audio>儻孖ag.觟???毘盜嫏iOS潙t縋m勯勧欻v跌勏勈?.mp3-仚atΑ厇?do笐?乤ogg乤?€ywav€zbecau搻劀仚効an煝b忚s粴H圚厵??????:慛blockquot憲庣憲傳傳io聽id="c樔k囀"聽聽p缠oa€繿uto"?br/>€賭!侀乭rce聽src侟奩侌伾傕/mpeg€??燳伬聽坉聽does聽墭侾up??h偫勳e雏.侓冄/埛埛€8圵?垙垙垙?楘choose竝C疿歰歰歰歰????〓€Pl捔刜屽tempA??妨?f礹ж当戼穛?瞓/?簢簢簢柯N,偐锋圞厛n鍖鎟om??厙厙?撮a秬勗?彣/щ吚m簚琤呧??.羾:s凐c嗚a綊?s?勦€X劎劎劎劎劎瓨伬瓐?瓲??again,靍av凙婥no鋟臂es??????drawS恏en挿挿挿挿偡挿挼loop?roug恈兎秝秝?秝秝掹?こ甦崺?摐慲峹獝?nva垪呯垪垪勭垪onMo┬C※埀埀埀埀偳偭Whe戨?r悝:€俶偵捳gam廻嬟,€垔8ev柋l榟en伻姸determin?whi曶圚squ€繿s僈e旲I抷湬?ap矦pri慇宱宱T夎Ⅲ寚寑in?ce鈥檚伩伩琱ssDow懓伹?篴?圓i橷??幑佺佺佮,餫s竡肌x珋帶帶嬬帶帶帶嬞Move師師t>

<?線卲鑕ight="3pt"鱥dth="0€`>When鬶e韔use閟€Hved,€爛`event靑stener鎢nction?ll骵t佉俲X
<嘩9嘩嘢冿="5€xb€攃olor="#8e001劙T偢Applica僐Code勡?枑?s.蝸円嫲睪毕?溔湢??幈.苅n冐?侌ru畞rough飖砏?牂up瘎rО?碄○漣y鱝?熡喴€Ho儠囸X嚊狿?丠it??啓way?ann惱?傾play働hw?Ex噚ding?n伇哷ll-fledg?oul?70o喒le獧?task?笅?d儴if鵲u€筪esi唨?d墣o笡懅?勅ile簣=0啡443982笩笝b粿丠u?gur10-1揌ow猭瓺?琡ish嚐嚈絆栕柨???ign="c扻er凥img囸cindex?叞6?笛梚"倊284倊460"儴殗殌€g仦6?????i墖墎#剺渋塷.聽BS聬悡 n觓fari膃skㄨ興i癰妘倄熛匫???涼wi枑紶梡t鑟w怉淎PhoneGa戨ur?赶gam??n?扨iOS崌崊div剺€2mbp:pageb?k姂€瞼*幈卂9卂?夊6€xb>C檏兯A兿佖th咑垁堖柨柨?Y槧坖ne撠炠€€ w坔ool熩g€牗€囅??亼だn?€悰p洶?devi??ulator:豤od澬殣??仺乣elopm╭IDE?om嘊亂??.蘣ほ卲rt圎偤櫉嚪婏婏婎5婈斚斏8e檋晲I坘啈傟搰???僕伜醕tu?mes餫ck惃d?巎?ab?oper?sy皃m腣D?Sn?Leop畾?斻╜s??ot??up-to-d蛾丮avai僜凅婜嬚㏄websit奜??篧篟?wa供o鰅?昇D傛C犚: 猵href="http://凍.恞e.堾€、K/ios/?.奌??俹俹俹俹俹??.系7p喫岿璛奪晸箓acc而hich?歁download懹?靷@st樛埣SDK.賯al稜?冎pai班儷秛笓lik禞偸慞deploy廀伆hys氳l??/?l?涽灗攟Tun?S漙e劵?捹劉刉凴兝bui???偪偪偣??includ俻??s撨撨撨撥D?偂サ?梿of?敄媻T?€a仒rg?ownload ?鰛?3.5荁醫鬶e鬷me飂€`is鱮iting).觘e Figure聽10-2.

I哠?PhoneGap?壇岺僶?僱槮?鎟om?href="https://github.?/p丵gap€N厺?{佺佺佺€Kたず,鉮oo屍ZIP?op尮,醩骽厴宎╓═77╓刜╓燬3儫╓導??">?測?y愸sav抶in烾Mac焪?.課?疀喥?a?fe撧牥uch嘔斔sktop????恅i晉墹,凙匸f??eries矙剓劰r鯽rious焬ices.爪[哫erest啿﹙哅嬊嬇993嬊嬊嬊嬃4嬊嬄閘lustrat勅埐殀€爑ct伕屪欦????053??倈737??澂€g皸???濷???斪?渿?夛刧?勭勭勭勭??堹9???媠?"?堶堶????堶堶堶堶堶?堭?慱慫??劎欉効欉?偞€x?煌?箯w歺糹糶糱勢Lib檂pk?Ope??粰烤偺餽o?s??単卄Af壺佔ll焀匶g硺唖l毐t?n?烒I€恠閙porta媂刞re揱亹m稾瘓ulcy倆鐏侷m?includ?僜tipgett€釃2?墯堳.苼example畑唲劚匸?偵叒?剱屶lows:?庍?塯???To勯勎c喲棍挵?jects,啫un?Xcod?刾n鯔P嬨Fmenu璥el亪 鈥淣ew袀鈥︹€潕h攐攐檕咓廤咓咓咊Navig媊嵄?s働塦冡U詄姞宎冟勎嗇?畉r儵餫n嗋?乪-燍d羛pli矗唚唚唚唚唚唚唚唚唒S兓剄冐C咯e壝鈛tt??簥屇淴嵃乑撚箿鳚姌R柡戦寈伣増b瞚???????抦ha廐檿萾!蚾dify兪c丠?籦嗶www喠di珋tor丂o醖d嗐HTML,肧S嗱JavaScript厙厙厙厙厙厙厙厙iPad欒偋偋偋偋偋偋偋偆G擯o?媋?哸??[?幈]-剄垺?來.佴mne?佈3.2閿蚁S覦K埱?????叏a瑙8="http://屫.p傫gむcom??纯锤blue€皍>??????
)婞meaЮ嗿壨no?慩?buil?欛omp冐夻鮪til伭c歴瀽呚潷璤璆???ign="c暪r眎mg昉c愗ex?0134?灘line"?30倊497"儴??€g仦6???璚调婏璓嫲"娮︵.聽???嬬劅????????09???倆27?????????????擖?T檌??┩塤塤勏?勭稛筜櫱櫬柸ssag濜〃緪塜癐?瀆default灊椆瀭u瀫哫瀯佇stぺ炛[?]濿儀nu€堡鑕m︴Ed?Set縔s.么膭8汭??哖ilar湣??2520????7????漌????漅5??嵉58倊879???廜???????圏?Sel嬞t戅??劮?勏?M監採??傞€粠鸾 飊?r?ch? (4.2穄l?佇s邓渡ri慖)粡粡凣凘Cl?仯尷ow掤儤傫橭橪?,乯咾o?泛imu劺贯pt槺ra€笖`纠?Devi粁€?栘e??3889????8??綊?exa濸?埇槼?埧9埧埢慜="5€xb?慗8e??T嬂垯唹甶Blank羛p?a嚭??坸慜厽??刧W瀽婙n屶ready?悂fir徺儣將?±冹燖冸.讬hav俼仺dd?any?俛す绰yet (though?俤nex埲?僗),髈?怈?坿c嗋暼敜庤i>熓.html櫃廱偨鈥檾Hww?lde厐壚琲攱両鈥淏囮?Run鈥潏ptt嚿撚top儱IDE?f瀣貀?勜怉嗮up儥perly,?晜唈come?with獔b幝?棸?h塱呰暓暏419暓暓暓暍9暓悷掘2倉51倊786????ont?巰咉ize="2">Figure聽10-8.聽Setting鮬醤醦p鬿騯n閚鬶e俻mulator<€囪eight="6pt"鱥dth="0€aalign="center?mg騟cindex?0049?baseline"倊715倊367"儴??€g?????壏壏壏壏0-9壈A鈇sic墏塰n?墢墢墢墢匽p???>For醾Pngl倛econd鵲u?ll€€e僇PhoneGap刋nner骽ow?o凞creen.譭伝custom?€餴s伃f働ou€ wn鏰m伕hortly.<呫聽typ€萾ext/j垚€?聽charse倛utf-8€坰rc="?s">俀/仯€y
鬭g傴?汥e熻?仐仐傤傦乢乢Ju巰烾ga睵崉si€8?佔??乷乷?s.賝u淳哛xist狂伔伔???儣佺佺償;閒鶅╠o,carefu?奾緤絙峳侽侽?i>BSB?o?丱丱奨捪捪?"1em拠拋Mak比ur坅a抜橓r宲few靑nes靜ok€X丂揨beca夅璈哖揱mov夰?heck癦縖傂pport?効煰??啩?Н?)??Ωe兠聽=cum?.getEle€YById("?"?佭c儤?伿?佈?€?"2d仐亼va狧b尅Car伻[]???utt????独nd侶JargonL敔??亊?B偤?{}??喐?kSound旼??宊宊饥ot?愩張hav彅奸Je琂漼?傦傋傋???if聽(!岓S懰())秝啽return噊>}else怶秵恎恎恎恎恎?悷悷悷悷悷刐???圤圤?娂d閶X撮jī湂ollow?sin宲孒no湼nger頴孻涄whe亹r伜dev嶀€b湵(?m珰ss埜儜can):

<?瀫卆/>theCanvas聽=聽document.getEle€YById("c?");
c?ext仛?仭C€?"2d乤/?鎢nction,醩閠閟頾t頴eded.譭儼ll€€xt鉶py?rest飂€bcode,閚cluding飖r萒ML倛nd丳place鍁eryth?in匔i>index.htmlFigure聽10-11鎜r醤鍃ample.

NOTE??€^儙冿冿"3冪冣僶僪2">The镻ad錸tries醨e飊ly頴cessary閒鵲u€襱argeting鬶at餷at圥m.詇e€鴌?骵para?PhoneGap餽ojec唸re€纃鈟侙俬e夃両奿?-傷?仈s娙嘒嘑婳噂婭em噂婫婫img騟cindex?0156?baseline"倊730倊997"儴?媤?="6媤??嬶嬰Figure聽10-15.

<咺骾ze="2剦€攃olor="#剺"??.聽Setting鬶e鈛ild鬭rget鬿€imulator塅偢€]?厪厪"12厳厳厳厳厫1€xb厳厳NOTE儣冿儚冿冿"3冪冣僶堺T嗚PhoneGap鬳mp?侌as鉹e€Xd狍econd餽oject鎖le,鉧ll€饎E偡嫭chap嗮10_bs_b娻o-iPad.xcode俌?侘侒,嫴??伮噺噺chooseB净ForC坸():跨㎡跨壪?倵倰嘰聽埱埱(){
聽聽聽聽€!//copy聽j毎伭into聽temp聽array仐仈瀤?A€?聽=聽[];??桺聽(乯侭ctr=0;€]<妬d劯J冓L晿.length?++厳傔€2?.push(俫俥[?])勶侕}€拃繀?厐€9卆悢?€箘顐?俖俹俵2俬€K?s[侫]偗r2嚄俉€W嬽randInt聽?線??聽Math.floor(€Zrandom()*tempArray.length)
聽聽聽聽€E€Ebuttons[ctr1]€12].text聽?俕[傫Int];俹?€V
<€裝>??press儌false;N奨,鱡頴ed鬿醖d徭unction鬶at亪ll靑sten鎜r€╡镺S 鈥渟hake鈥濆ve?醤?h丂ref壐h乥card.,??y??叀??z?t>銝Hdinate髉ac?of佇圔dev? (侷PhoneGap哤堁咥ier),鈛t釆鄋g飭i哬喨ma媯€xa媂tt坄tricky匉?requir€绹纔se?俬ual?岤塦?嫇怗嬣1媮嬬€`align="c?er囸坥"1€x梮€抍olor="#000懶OTE搘撓儚冿冿徢徟僶嬕At?tim??wri唹峆?Adobe罥R閫mulat?wa?vailab??go宍beyo旣?mit棃曻鐗坲昿伔掿SDK傁.蒮鵲u鋙頾t鑑ve剺嬙?with殥recomme儜ry弫哹e俹妶??fou???a铓="http:/姍gs.nitobi.偍/yo妜/2009/04/01/p?gap-air-厧-in-勷elop凘t/媜?幙="blue€榰>兎兎兎兎兎兎兎兌if聽(廏廎兎???兎兎凎佺佺佺b>扥扥扞clear圎勭勭庽傳傳勛勛劮勛佺佺椷兛nWa?苺卼chIdD聽=聽null;<€裝r/>聽聽聽聽€E仹仹仹仩>}傔??傔偀乬乬乬偀???倶偳偡??偛function聽onSuccess(a€8lera€?聽{兿俉俉兿兿塯?佅佅?if聽(Math.ab冿冮.x凐>聽2聽||聽??n.y)??匴儚儚匴??伔伔伔b>??凔z凔塤俖俖俖???伔伔?a儓t('A冞嵃X:聽'聽+聽劅壣€?\n€釀瘋?劘刼€W勶侘侘勶効労Y効€菎H効効傁傁効効?効侘侘侘効劶Z効€菐効効傁傁効効?効侘侘侘劯Timestamp剫佺勥勠t丮?)タ??????????stop夨onWa()冿侊侊冿僟€W冿???b>chooseButtonsForCard(囎侊侊冿冿儫€W???冮drawScreen儫仧仧仧儫僌€W儫??媗art媤媣?????儫仹仹仹矅??傔偳亸亸偳偳??偳偳偳亸亸偰//?Error櫒Failed聽to聽get€Hhe欉??偡偡??乬乬乬?偋丟丟偋偋乬乬乬?嗘(?佺佺佺僄彿仹仹仹?'僱!伹伹伹僩?乬乬??€9blockquote>The頴w鉶de鈋gins?th魛葍o僴var釓矷d =顄ll嗀?鯽riable骵tting.譭鑑ve鉹eated醿?溩?–傜鎺4,鱤ich厾ll鉧€(呄偡伻onSu偁ss侽侽侶鍁ery佔佔100仐亹m僗iseconds.,??y??and??z?唄?儊device.詇ese呁ar惡劇侴侳0,0,嫰俛when俽applic圔晞????O庤a埲僌庣庣?-庣d閚ter厁,兞呑呇checked.蒮圶y閟傦傦2傔?units鐥襯 (i劏汙€X啽posit弨飏渪g嗻€`di?嘔)廏?塷??垻n沺厔惏e鎮P寈卛??????儀n殯our斨?r垁嵿剙car?First僐??炏op炃炃兿?杕ac墾a€儰f?債︷???崰餳ys?l髉a摴Nex勥勥勥勝chooseButt?ForC喐勛垶佔佒drawSen亣哤墘堸n冟y??up凚w?醙a叞?墽╫壇壇僙?a?榲1??€`align="ce??儻"1€x睭€抍olor="#000">NOTE策?儚冿冿"3?藔€卲t"鱥dth="0€`>For鬶e韔st鋏tailed醤d鮬-to-date閚formation飊€xtegr€xng衕oneGap?th镺S佲o倶r倄vice鎒atures,鰅sit儂伨document傠web?e.蛣yof乥凎n鎱zis鍃ampl€鑣鈇s厴of乻explan乻刌丩s佖u€xat SuccessUs喩Xcode?Target儬T剄D儌娋???冿>嗻will頴ed偙chang?嗚build餽ofil儝t儞囀tt塰仒嘋騛€皉€豠n?屶ulator.詏鋪鄅is,鱻襭?僄鋜op-down閬雞pp俙left鎟om觽m?嘖,嵸sh伂Figure聽10-18?blockquote夀4夁壼醠ign="center傕img?cindex?0081?baseline"倊729倊995"儴/兎??"6???扥扝憖┣├W埳Is傆??審審審僄>伮奞a蕢pScript柮??啝g饺珢丂cc屓揧喩囸h妜摀嘽?r?m?Cur皗?僡on??暩b燩?ebug?汃?壺O洜a,苅r朒x?Chr??厵傌?ag偅K爤o徛殬ganiz玻嗿乻s傞n屓蒼鎍c?mu?崓?im扨r嚵坲??佸嘎€bo樌goobad偢布€゜eca牘砛a敓偳偭Ц刋¢匑偢recog咇杚?呚瞃塲?僷?伜殸?珃?€増H洔?斪憲斪斪斪斪斪斣櫲膐稍櫓????僿僺弨s寑獞?睭娻潫潣?拰榙窅h?ry笔o騯嚾帉?li酚扨?甠壐烢仜m?榿亪?s懭篜k紥s?n悜寃b?kquote塏4塐塉紷ign="c櫪er傌img憽塦ex??5?basel溫"倊186倊451"儴/兎??"6???慓慇恱c€恊xt聽=聽theCanvas.getC€?"2d");銊3,靑k?is:

亸亸亰.詬缊8岻a儴n艫Q,徕log€@nd髈m?lpful靜w-leve€Pessons飊鑹 ?crea侤apps鮯兏唊.賝u銈豠lso鎖偁a亐n飂鐏[??L??d兩o?.mozilla.org???仹仹rg??暺嵖嵖嵓One鲓{,梡ough:餽ogramm噉嵮not鎜r毢u亐iti埨d.羖伱乢based?OpenGL,閠€箂t匬?very嫙罰I,韊a?鶌╳?ne??丳ry減?by帹n兩t刯e嬓嫚漎骵ction,鲉競9guide偛to嘆徟坧er彎ibraries?岠s唄ld韆燑坬c惏戱咢easi嫺婄渙婄渙渙渙渙渒W児Do?a?Applica哬蘯ok踏h湳湳湳庽?>N?圥a烉go夅妶?w垔僲栃僴demo?rot嬂剻3D鉼be巵? (sea棬lepos=0咢493415?暦暟Figure聽11-2??).觟瓂匘?áts閚冮擷phics幆?go飖r屶a張侌?describ?憆幦栬€萩o?俙慾xample;€€stead偗悺l夾€豻?昿侾拰爤侱?”?understw墶慼h妏e朡???┊仒嫝櫡彁? 4鎟om菋(somas鈥檚瓫溸?(⑶???я/?p=370?峎?佺佺佺??Wh?檚€only€(e揧rt??氃giv湏燭good閐ea?struct憼璪bui伬孃?曄曃媤筼嬀1媋嬊€`a廐n="cer漁滻1漁漀?歚OTE??儚冿冿彠牱僶熻Much?祽bee踩dap??曢work乤悷乆with曡s櫛暟?枲rit池餰rmiss?厙厗墢収墘em収墖墖img騟c窢ex?0096??浹"倊5夬倉€a儴?壏?="6壏????<场pt聽src="m宂-孹.min.js">丵/乕€y珃€纆lUtils.a€磱two傜?帎嫛紜燩剭摌?僷乀use?兎兎>电靛?jcoglan?弹弹弹伅伅仺祑祍?a員?勸緣攛h咗嵭g懭ct硄嗀matrix€9h鉧lcul?穚n嬤t嗏壸喴僫n琾朢堘??,髉獉f屶l浝?劑?嶁円減樛奲????????typ€萾匬/j啇€?柲?枃枃杸br/倃t聽?畝?爐ype="text/javascript"聽src="glUtils.js"></?€y<仚骾z冃4€xb>Shaders?倧p?="3??i伅i>醨e餴eces飂鉶de鬶at騯n鋓rectly飊徵raphics鉧rd.詇ey鋏啽be鑟w?傕scene傃鈥攢﹜ou騟fer鬿?3D侙n墄鱤en鱫rking?th譭bGL伕should鈋伻n匟e僷Man?f勦ese靑ttl吚ro劏ms餰rform韆?€(ical魊ans€箑€ons喕w傏o?rwi侾?very髄ow嘝in蕩pS峛.蒼鎍ct,鱡塖oint厜凜out?cau€`€恲??not婈俖;?wr咅囙僗a鱝y勊囮堘鯂tan?傌s???will?ad侫lik?擷鎖l嶱佮餫ssed嫳冃嶏h嶈w?.苪?discuss傰top?倐s?參far噅?scop€坥巿hi乊孼??鈕ok,鈦悏葏rte€(恑a鈏t醔倅each掕奌伜m卶help倄t侭t€閮aw?com嗚n嘆.?檞梂梂>夎垁奨哱墣?閱槏)fragme殎€驆墢@?h卝憠壡棯??us恆flo?ng-愹顄mb壜?bl?d呅lors巶塝o€貏p傾剙??剋>擑晧rk檋?丄?i漣(defin傌儶s?氞spac劰徦c?te€羙bj?s)劒咓?婇e??嗻draw尭戃C潈澭€爧?嬵ミェ?ェゥ2€xж▂╯聽id="嚊-fsx-€?x-?狫
聽聽#if?聽GL_ES€秔i杋聽h剎p聽屸伩#寈if€z€ary嶐€Hec4€0C峚仜?oid聽main(€Y)聽{€鎬!gl_F匑佢聽=??}€R癎癈?垪垪垚v垪垪-岾垏?att珸ute?3€圴?Posi溕乄乄噷乀厪嚳uni?囇t丳uMVMa侌x倃??P?侴??僩????l_唌?僝聽*勛€s?(?仮,聽1.0)呑儮崗?嵖嵖嵖???榑榑榑烬Tes瞶??suppor熇煈M痟rniz爔??Х?Рstructu瑒辈?瓪examp瓲€Xmu斌?负醦pl?硴爌hav弹??.萶w♂,閠?€癳?mo?i?ヱワsp滧fic?ed硟€阿匣偍r塐ˉ感?App()?t>鎢n骋?偭窉姼€Ase呅he喓春rows€`卆?媥啺堥asil紿c砲園sh倫by疶勭勭刞?.webgl??綡瓐?緳t?亊 1.6猳扥?庯?冿冴i?(聽!冓S唟()?桱al栶("Una磹o?n樌al俋聽坆"橈亹re?〖?婾聽僟僘僕伹聽埀乺侻堖欉欉囅囅囅欉欃I?昍娏??檱檱檱傋侤師姺俫?巠?潗?get釙?鈛搱?tim毿廆灸傔傒exper?ntal-憦?榝Also,陁朮??our?s棜剆ca€(僩僨綫Scr湼咷?墣a墿terval檃r肛?囯斪岹???冿冴揦heC倆?docu囇.夬Ele€YById("儧One?埲GLC坈佢侼佱€?"妎妋?€*setI?(坓癭33?垙攐攋?嘒嘍??add???坥拸拸兦孒requirセ卲鮬??◥岃o??cube愯僠u??mo?im湋?橈?step匟厐廂ll旔o??伾Sha怭s匫匤and亸亸亯Buff亸亴?娮娍娍?傋刜刔帲僶€殐w??僌僌耕僶僶僶???tself鉧lls??線呮unction頰med getShader()鬿靜ad閚鬶e鬳xt飂€b??s???programs鱡鑑ve醠ready鋏fined.賝u鉧n骵?偫code鎜r€is€P呬s??listing徕it靉ter?匰color="blue卲u>Example聽11-1.

NOTE儢?€^儙冿冿"3冪冣僶?妘learn醔out壊屰s鮯?奟is岉€?鈥淟ess?2鈥擜dd婑厜ur鈥濓嬨L偙€蠾ebGL帢bsite: 呿a鑢ef="http://?乸丂gl.com嗛g/?p=134呑???>俖俖俖俒嶏?a?傷帢??p幏em娤娚Once暥?壢椙吙椙椙椙,?ne佱o銞貛`?buff寑. B€c騟€X乤spa?棨vide侙ard鈥檚韊mory€衋t債set醩?伭hol匔geomet?describ帀巔 3D颾ject冭In€歝ase匫匫?€憘,?u€H亁will騩t乤?撪va傂We鋙?溋墽墺init囂'壻涚岋椃岇T孫偗偗偗寘?c€xaia帹,嘸奱婙啒discuss啝ly丂cou鰁奾i?eks?ぱ.詣xfirst閴p€hVerー衞?儽奡?hich妌乧偫tic€j巰make鮬潾帬?珒嫨:で犨?4?犨???GLC€府H.悩d塻(€莯繟RRAY_BUFFER,聽兩唭唥伀);
聽聽聽聽€!哴聽=聽[€??/聽Fr働聽f????1.0內€
webGLC俴.bindBuffer(€莯繣LEMENT_ARRAY_BUFFER,聽cubeVer?Index佊);
聽聽聽聽€!var乷乯ices聽=聽[乷亸?傝1€ 2€ €穩眬?€?/聽Fr?聽face俫伔?乸5€ 6俫€磤?俫俙Back俖俖€D8乭9勝凲€瘈?厬侰Top??€D1?1?1?€焵q1卆刡ottom????1?1?€焺拝A?R怸??€D2姴媕媢€泙q23啎Lef??€!]€?/抙檘n鳈Hescribed儴re,鈛?tar歒th僎s氋ree骵ctions鱤en鵲u鱝儓?play亞剝and韆ke丄r餃ibj?s.?嘒嘒浨哵4€xb>Animating?樴墾?倶?3?倇Now狖叐kn€pa鈏t醔o噚cre傆垚?妐W瀬,靍t鈥檚€@arn亴a刧刣€canvas.觟milar堘wず婬id偣?2,€製?e???S?en?嶛fun宩嬺osi€a,Р,嬟?劺嫬冋℅.詟€firs?h哸?o?捬set鮬仾viewpor卛hich憳fines噺s??飂?scene.螄-c?仧s?€xn僕e饡@p?v佖?€彮(仺f抜paramet€禺o忥抔忟Field勓?亰沷憻伔伋凂裁嶚嚶?产嘡?ne (嵾嵽25崗崍deg?s)楕?吳吳?W€a-to-?驌榦???侘?radio囇€蕬Y俓?curre吥€髥梿?00脳€(喦t>唶唶唶剹剱Mmum酩爏咷咷咷伔咮smalle旽佡卻awfrom飷悤?いdisず哤哤0.1??????ax????伔?fur猧????哤???t>100.宱咷咶樕€噯瘎玾傜傗?聽?()聽{点稛w?Cⅳ?(笁€!€鱻鱰柺€鑲7皋亣亣tH吢);亣丟丄②(€焵楥OLOR_BUFFE€8IT聽|儑儑侴仼DEPTH伅T償伩牑e(25?兎厪?聽/?€唶,傁剹€W€W€2晿儉彋劺彲€8?曔??琞mo猵捓焭?e?,?ll癌愡愞loadId伬ity捶?s穢?髏a朠戓?.篽痗偣偋偋mvTransl禈偀倷,痯ss籡嘓?ns粎x,媧醲础熑儴嘉?o騩t竌€ゴ儎Qa篏n矘d勥勥mvPushMatrix勭勩兩叀r佅佅伻op伹伹篍?imil噶ow勁凮倗t>酵sa擆倧嬃凙仐仐仈r8or伅伀w寜堏婛obj柸娢2D癟糃塺???vR婜傳傭弞mak尅嬆孍擄,鬷lt嚑up咼斣r?????匃昽昻瀼摋呅[.€1-1€@])丟???嚍唻C挕聽?.牨.5]????????壣by鈏nd?buff盞hol墵€皏ertic媭?color閚form櫄捕se?p錫rli暼?僃鈥檾檇e彴潟凧ea晉€?帢de?w峆riang艰??噰噊噊??峼﹪暩嚈B嘮?€罙RRAY_BUFFER,聽?謤卌ubeVertexPositionBuffer);
webGLCon?t.v丅AttribPoi€╮(shaderProgram?俇丼ute,聽俽聽聽聽聽儻儻儵.itemSiz亯冏冃FLOAT€╢als€?€!?匞乽bind倠(€莯繟RRAY_BUFFER??Color嚽倗嚽嚽嚽嚽??嚡嚡嚡丟嚄嚄儳嚄嚄嚄?嚄嚄€?ELEMENT_囎囎刏Index囎偫setMa?xUniforms();偋偁drawElements僿€裈RIANGLES??噐numI噲s堢堛??UNSIGNED_SHOR?嚽€(mvPop?勑
Finally,鱡閚crease鬶e <侫髮x="2"><傕rotateC唒僟t>鯽riable髈佇at侜n咅鬷m侽侽>壒S僠en()俖俋is銊xed,?壣卲ll鈋鮬d凁d€€th醿w醤gle.詠Yode?lo€癲ds兎兎2僟僗deg?s魠〆騿釠鑲each?侽??偋咡:

Exampl噣11-1鏸v崄峢f劚彃l劤鎜r CH11EX1.html.蝟tic枒斃many飂捽侎styl倶and€€nstructs楺hav搱s損o亰past 10鉮apЖ伆r?旈in餷a?€Hth?applic拏.耬sid吿obvious決lus搚剎刏rel栻directly斄W燪楺偀?oper乭s錽sPi?傶sa晥way醿|€(r佡啰discu亹d匜book.昢???i屵屬.聽勱鬳st婭??俉俉撓梘梑<!doctyp傴嵸>梒€賭?聽l溊="en"€鐎醗ad€弨坢eta珗har="UTF-8仧?title€憫d:哱聽T哷聽?/?伨scrip€鴖rc="m崘rnizr圥6.min.js?侁乕侘侘爣="/java€?偞syl?掄倃倃倃倃倃倃倂glU旇s俫俫俥倧倢id?緅-fs侶?x-€?x-frag穒姛#ifdef聽GL_ES€?爌杊i桝幚悎p?loa佭佡endif剣€巢爕灷€Hec4€0C叿?oid聽main(€Y)聽{€鱽gl_F厾侜聽?俉???僕???v??-寈堶?at?but栶唜3€圴丅Posi瀴乬乬乧囏乨吙?聽unim?t乣uMVMa?x倵??P?俫嫙嫙儣?嫙嫙€鲖潌蛬拑?聽*?€s僎(坥仮,?.0)?兡?垪嶰嶰嶰嶰嶰欁欁欀亞window.addEv梡焚ener("曡d"?e€筗?L€榚d€爁alse吥€*func??亅聽(壸呹can凘App(?唖侽侸?Suppor???retur?M?.亱倵倵倲webgl倢???倅乺倃侽??侴??drawScreen?儑廡?GLC?岎.view勞0?€!€鱻鲓爻€鑲g倗偋伔伋H?揥亀亀t.clear(€焵楥OLOR_BUFFE€8IT聽|伅?DEPTH?T惪僕?ersp縺ive(25?僌匴?聽/?€哋??€E0.1毶00氝€?爾笽d?ity???mvTranslate([寊.€1-1€@])仹仐仭Push煋偼€鱽Rot倝r€:Cube倶傭.坹.5]?佭?圱b氞Buff?€莯繟RRAY孌倄c?敗伀);
?迉?聽聽聽聽聽聽webGLContext.ver€@AttribPoi€╮(shaderProgram?Position丼ute,聽
偳€WcubeV伩伕Buffer.itemSiz侀??FLOAT€╢als€?€!);???佔bind傠(€莯繟RRAY_BUFFER俬剹Color亾?傋傜堢堢堢堢偀埾埾傁埾??埛?埛埛埛埛傔佔埛埛€腅LEMENT_堶堶労Index堶?€2setMa?xUniforms(?凮儚t.drawElements刜€裈RIANGLES??埡numI埿s姀?僶偀.UNSIGNED_SHOR壣塷?€2mvPop哰?€rotateC劙聽+=聽2?丟€ }€縺?聽if聽(!canvasSupport()聽€{乬亣€Dal?("Unabl兝to侶n欒al愗聽C倆"厀佭吳eturn?€讌g€邊g聽!奌gl卬卂乢匫匫匫匫W寵匞伹??€穮7?€緑ar廹廰侘??嵪聽嵗0嵡乬乪the姡乑docu?.get晫ById("?One啛侽劅xt?倿?€?"experi倯al-婤俖俖俖Qiew孮Width傁側w€憗鱽鱽鱽鯤eigh劻噊s.h€獔蟼?恞嶡S?炟€鱻鱰溿熚?凮凮clear(0.ヲ€3€21.滮侘??Depth(亀乬亀乺e攰?€EPTH_TEST侘侘乄?Func?€筁EQUAL噖?▽I肮val(Screen嗚33仧仢f傝竌聽愷?僡glc僣伕id涀?晝秤?ip帲暉暉暀?噂烥ぁ?pt僕???null侽?喛€繀t€(勑""伹??円Child丣剣pt.firs€銇鲘^€笧??塛?嘷丱ld.nodeTyp牎儬3佅伅巺?瘧?d.屷恴n?仹垶€噦d?嘽€?n倶Sibling偀??€繍/er仹嚙嚒妛t.t噹"x-€?x-frag慖"??吇乑厭極渁re暱€譌RAGMENT桓ADER擄啑聽els剎????v?ex?俖??刜??€覸ERTEX?偡??儚€飿鐛梹浚?嚧ource?焾搱刼佅佅啝omp楄啲佊佅??侙Parame凎丱丠COMPILE_STATUS)嬬??婏?偁InfoLog?嗊?妎妎?妎€縼瘉?伅€瘷棁阹og國伩?贩堵嚳侽侸欇丼撯瓽?瓸"兂-fs縚?倆?俹俹俹俹俰v俷倵槆?樋樋樄€輥鱽w乺attach搰傋刪吙??侽侽侽侽侷?俖俖俖俒㏄k?俉€p垪侘榃??伂榑俫劤亸酷INK?惽?榽"Cou疉no监拋ializ??佔暓€繃莿us嵕卂嚳侊怬?.vertexPosi?銆€卼ionAttribute聽=聽webGLContext.get€驦oca乤
聽聽聽聽€E€!(shaderProgram,聽"aVer?Posi佈");侊伂僩僠enable伀儷Array傁偵.v偗呥te傡??侊侊Color嚡嚡嚡嚡嚡偡嚡?嚡?嚄仐僌嚄嚄嚄偡叝叝???佒pMa亐xUniform嘜嘜t€鋰U聽偀偪噂噂嘸uP?嘒亀乷処mv刉刉刉刉刉刉偡刉傦凴MV刜伩€!}塐€痸ar聽劖仐€飥頢tack厒[]嫥乼func卌mvPush仜(m€:)聽{乬備if咗???冞冑.p偫仈.dup()?仹伔x卋亣(?垷聽els椚?€飩W?(€潉伹?€棆穳_塤Po斕(?俫???length嗀嗋0伅伅€2throw恜Invalid聽p僊!"厽?€o夨夠冪?o?仐爎etur唞?????loadIdentity?佭偗剒嬡I(4?????ult攪搰?僌嚽僛仦儑儑儑儑圔Translate(vector儚儚氺儳償佸俋($V([?[0]烉€d1€g[2]]))sure4x4?僌?唎?唎€瘑o唄Rot哘angle兤啑僌啌radi?啔仮聽*嗞h.PI聽/聽180.0?侘垏垏.凓坕偺?埧埢俖?倹墖墖墖墖侘墖墖?墖墖???亸妵妰persp刋ive(fovy勑a€妧Hznear€Afa??傱μkeP俹俹俹俹剣????se囲?s溓?掸耽u乕伱4fv纯伙値劆fa嵪偡€EneヰF狆t32Array(?.f権ten啹劘劘劘劘劘糘劮劮偪傔劮劮y皐効効媑媑憃慼cubeVer卲Posi孂Buffer?乷乷xColor乄乄乄乀Index乄弌弇init??卂偟倧匞仭擝嫥嫚cre€髿邆W乷乭bind乗€莯繟RRAY_BUFFER寈凎凎仼???icek[€???Fr働弫ce???1.0內€<€@丱丱€軄W乄?乄?乢乢凎?乄屜丱啅B拣唶?倵?€;丟丟冏丱丱??乄乄?乄冪唃亀乬哸Top哶??兿倗丱丱丱?乄乄?乢乢?乢???乷屭ottom啑?匫?倵丟冪?丱丱丱??乄丟俖丱唚丟唚Righ欁??偀?丱丱奧乄乄丟乄仐乢?乢啅乄?乷唺Left聽face<?銆€卋r/>聽聽聽聽€E-1.0,€<€<<丟丟?€9聽丱?丱?乄乄乄?冪丱€3];€焵渨ebGLContext.bufferData(€莯繟RRAY_BUFFER傝new聽Float32Array(vertices)€饍?僟倽STATIC_DRAW)劮乚cubeV偁exPositionB勞.itemSize聽=聽3佅佅佅佅伻numI佮s伿24佊??侟Color併仛咃呰create€??嘩乷姩ind乗€菉瘖瓋邇遰傜傛va剤c?哻[??燵?€3€f]??//?r刞聽face??燵0.9仒0?€3??Back???6侜€3€1??Top???侒凮?凮ottom???3聽,???燫igh埛??.3?€3€1??Lef???擏庍庁unp妧ed??]乢乗fo乆(亰i€n悵)聽{乷亸懣杮乻[i牀乬?仭j=0;€0聽<€H4€i++僄伔€D??€焵?concat(???€ }€穩梹棝7ミミ€菦7ミミペ勭??僌儚傁??乢瀢瀢ン?仹伔伔ミミ戯佔佺exIndexミ吙ミミ??姱ミ€莯繣LEMENT_婏????攇乷乭贬乷€D滼€ 2?€磤憸 浨Η浵仹嫺乸5€ €穩眬?俫ψ俖亸€!8乭?1挥€瘈?厬︼?乬€31?1??€焵q1卆︼????1?€焺拝A︼??€32姴媕媢€泙q2??︸€棐鐫O挧挧挧挙?倧€D瀊Uint16瀃挓挏瀜?澂澂傁??澂澀1伔伔伔伔澂伆36澂佺€*€_>獳/script>佀€ead€梹恇ody€弨坉iv聽style="position:聽absolutetop€?0px€hl?€u"侽侶canva呧id="€cOne"奾idth="500€hhe抋€s侖聽You烒brows?do炠no憍suppor€HHTML5聽C?砳W?t.嚙冸勭€0€弨増G塣tml€?tt><仚髲竾€xb€數?"#8e0012">Further舩p€萢媺s侶th讍墐邉7p兿="3兿兯Obviously,鱡鉧n壭鬳ach鵲u醠l醔out?閚鬶is鉮apt摳€革€Pd鬿€鑓lude?demo醤d骽?鋓scuss厐丼troduce?€垈髞|w€瞱hat閠靜oks靑ke.蒼騟alit厁a鎢勷傁飂侰,鍁e匢e鈇sic?ncepts,€Pul卄ake鮬儉錸tire鰰坢e.塺峗墬墬>If堄伆?eres圌埲冧?s嗮ngly卙comme喐仚?sult 亣亣亖鎜r韔?examples娨垇l糷s姼n?m扂廃崲exc?ng鵨攈ti婙experi?tal?檨?殺脵倝菈菞?????怺JavaSお蘨braries桏噖桏峠儳A喩寔a?慀?sec嚿峈promis曽撝som塒兊仺擧樞鈶▉a泧伖m抜旲e揦溞€恉擑lo掵pplic?.葢X懖傶刯e??嬔兛崣匄jects.
Google?D伅伅伄)鱝s飊ce徕rowser餷ug-in鈛t鑰鴑ow鈋en騟leased醩亁standalone蔭vaScript?for譭bGL.詇e鍃ample僠f鮯ing噿with侊t鈥攊nclud?a鎍irly髉ectacular 仩pool鏰m壚攁re鰁僷impressive.偸all哷鵲u鬿靜ad肙LLADA?m堌ls鉹eat唒??SketchUp (?well嘺oth埜冡ackages).広???>嚵requir?寉凥ok壺bo娦偫尭垹x€Ystra?墸乺,髈鱤i劙this閟嘽powerful,嗿m伈wa怘嘡ok釘豲me媃吶咊屆i?€pe鎖rst閒??ju€€帢rt嬮???極極極楰LGE?????鈥渿搼亝qlazy鈥潎q€ytagli?€麁☉w檱檱椲www.glge.org???乬乥橑橌曘auth凐妡兇,衋ul聄unt峆ay厑?庪?:?blockquote奧圤奧奤2€xi扂aim兞倅垝o韆sk凚involv捫natu??奣rom?web鋏veloper,扻o鉧n€賜毄nd鑙s/愰ti憍榸忛ric€ヽ剤e劆屨傪悹i?喛?喿?曥??-l剳罰I偍昉€萻ti汙卨m儼.蕯塴ik,椁c処ability炞炘灮.羛plic哷on?rit??夾梣熯€癮淚bi夽亹夾XML釄鴵g.蓜h濖??i????庣??C3DL????榃r脕鴹織縲.c3dl椏椏椏乬乫椏艾尐溛maトy!湽冄,飏?Canv寴ɡJS虡紳鋝imi瓑?嫨,瞛?seem朆hav场he?:恲n?€郺?rg??孖mo崰suppor孹拪燀al?appear佲b丠l╬庤toward眀s,担徃l-梤珘teg○RTS)?樴arc噛仚態f?氳窉its凨応n樫demo搱岡剠?s敺敳??曬癑叿叞拻?庿叢哫定le榡??????SpiderG揙揙揙?瑋巟Graphics揵Next-Gene墍?WWW?how觾$攚攗s€襣攚攚攚乬乬攚攖焫絧孁el?o︺orld恄怺??姵?熴??exce??倝嶼噲cu?嘪l??,吤?垁悩憟???O惏?悧悧幆幆寚幆幆帾c孹JS帶帶帶??仈??€蒵s???乢乚?g嬋洍r侧er瞃抙佢s?il垐?JSON圽.賝u?壱def?anipul潣偋.摊鴥9?儻巠偼煩氝氎?ces湡佖sul?煈qui?涁€╯ive??????o攈rL篜t峗峓俫?俫箋磮mercial桍??.a道溔.亐/c儦?ht???佭佭佭?廃ad歑tis??糄fa?盋筼?Eng嵷.A捐??檻-oriωed??檶彣y坃l偭?mat汅h凘bo??l紁渀detec?偐phys?撱in璖凣咈澥€iun?play⑶⑶⑵撠te皻rou佮l?鮯€Q?ern厓asset揦杙iヨ傂w€Ay梄兩look伖嗀,?€鴐愘僡?r€@?choic攍div屫€2mbp:pageb度k捓€硛*??9?暉暆6暁M?i圌簧卲i?El娙roSer恜 5柉?枏僕枈e垰滧d萒ML5髉ecif?屓clud?繏潮?圶know巋s 揁Sock妧.觻j?un卾all蠢a鉲?僅?remac丳tantl?nn嗀ヲ狍er?顎卾er-aide醦plication.詇is魕pe飂鉶mmun€溷an鈋錽pecially鮯eful鎜r鉮at,韚ltiplayer鏰mes,?learning僌on€萢nd亙?r鱤iteboard€賡鱡ll€Amany飔hers.羣魠poin僷WebSockets閟陁st狃romise鱥th鰁ry靑ttle髐pport?yo冐te亂€Hdevelopmen€鄒ilds囐web鈘ow勦內In鎍c儤security堌ncerns鑑ve€(lted髈me閙ple俼嘖?slow?咵H€p勜,唖does頾t韊?you婹€俛ke?剚s嘕-剎伻奧?嘡HTML5胊nvas.

Beca傖Flash?s囮t-in塚幝??via凾?i嬂凮坃娻h挵bi嬋y鬿飌e偍伜倗呯姩啯-s攐€魟 ?y?壛?,飊?妀儀nd,咜n姍??reliab晉冪e€羻]?刡out餰r內m晳帄sl??僺usu楘involv丄恜sta?poll€塨冃??r唈new伆傫妰f昲丯?嶋嵪嵪嵦ElectroS叓?€渼k鲌Xon憿偵fir桜?哷??媖忷埩???cli枿?O佡傖pa傌cou梹?,刄勳挷e忚upd俻d倇API庅iOS,?€ ++爟now蔭vaScript?狓r壂喸僟僘伔?毀?,?俋峢e慇漋s???叧挭vail捳??丂鈥檚髠fi嘸偀剳,炌髏iω憍?媝we┫尫尦us抷烑烑>NOTEWhi慞?r巊e瘪p匄?豺fic堘?孊癱亾墢r/?pちr椆?techn嘪gi??妶???娐em嗊嗊嗃5奊奆8e001嚑I犐牐唚唒儳?熐妎儣To绁i懮歖?r禛?懛懙汑櫩櫧???泏ne?壐downlofree, 25-媕亹s?俋ftw嬃.贄軅o歩p絏pri?俔牨?r睓焣?y漢m (Win侙?Mac,蘨nux)醫 俖俖俖俖俖l?挧抩???掞?匞?????冿捛冪僶?T?岃€ 逢゛?pr€鄎uis孭such?坷峇嶸1.6.茙xdet┄抙俉€鴢iruc?玅y习坴債 唥庽専専寶docs/es5/?既/慔ex尓??_?€眹棁攰鐞'?儚儚儚儚儚儚儖愡?a???崸????姕糎ckag€乧ludπ渹?溁,?机,淴cu寊浑sa竵?屫縣獔牶?儙犢??丄should亄a庁ld?nam仩拤慩like 鈥湣4侹_5_x_鈥濓n?媊pu槇.?綢d熱?貞毑J擧t擯o€s億w敤cre⑿摵id潮e侐A嗺亇?注龘鄔?b窗?侜尷曤??y鮬杢栞熥嶏4洤洤忢4?S堎娤灧扮?倗個?嫻璟洜s崌屻?皐皐皐€pby?nd劖?噽dir伻o潣懷execu咑冑 . (N?:亽t?e顄mb○€〆側糙幜倷尯chan桺???upgrad嘠bu?co埌p巪rema嶥桜e.)?娍娍娀When??啯?梍墄桻s憄乸simila旇o囱吜pos=瓐1531821Figure聽11-3瞋瞋畐捵厽瞁睺img囙c??0122"醠ign?瀫?"baseline"鑕ight="365"鱥dth="505"/><€g仦6pt仦0€aalign="center">Figure聽11-3.聽ElectroServer髏artedThe髠kwill騯n飊鵲ur靜cal韆ch圥鎜r鬳sting饀rposes.萶we佽,€鷄ny騟al-world醦plication,倯?need鬿閚咅€€a餽oduc?鰁rs€Aof魟裲ftware剻a鱡b卍.

瀈乸匑煓忷k泴?exercise檽忳忂檞檞檞?檞檞檞檞檞?檞冿檞冪僶檚帹or岺?嬰conso埜揁display抭perly樣礵ォs?嵷?榃?榃榃剸潑?launch??禇?ask潡?aer嶉?ass岎dЯ?嚪?tt>?皑ra悩,鮪les湯chang匇hem??并?圙屪圖Once圕og佇,硥ck坺?Managem?报t?湥top韊nu椲€悁籊?way瀳p斗嶒ide亰.贊se?骳re?looks乸mila慀o Fig聽11-4谗?埼4埾??>
A鏾od鍃ample飂?is閟徙hat醦plication.蚾傕€縺籹騟qui刪a兟凲ent€Ha room (a靜g仺l髉ace閚?ich餰o冮唩鈥渻ting,鈥濋.e.,匄€╪g€essages),佽e亹t剏兟can骵€慹?啈o壜?儴?same鰅rtu剗.蓘賯h厬,?cli哖坬劻媇劻媟os墣尟.萶wever,閬猽s傪ly頾増鋲c夬?壢 (e.g嗮peer-to-€A喐bu佽nstead??through€╬ort?a髈cket嚫r兝彈彈彈彅T囻伔?ct弜s噿traffic兏p鎜巂?埄妽?t靑匄徣劏刲(娎ou?se, 8989)?孎com嶚?from婘t倫T奟乛ne杮b杙orm恜€€伻a鱝y??咉彵und?tand嗀嬮€﹑roc倶乤m?e蔭vaScript罰I鱡埲ll嶉?r僡乹嵢兗厜?喪怺椙ns媨媉媉媆Whe搕媷厫?eiv嘓a嚗埀??廻t?€眝ariou€`ex學倄剤by錫??back厐愹佈旣婽楉?昽墔al夃do韚倄mo氊傕us?吽-sid塒娀?髞Y懶hol崘傂惿洐curr剏卐乆o?犫偙刔?€罁^?ongo?灊w€羑働be姌said凘ev埄ly傝丄?堥嵙swear鱫rd?awar伆偢圚堭狢?ir堗pu嬋€€any?凁el愋you?dream鮬彿彿彿彿?fin?壧帨徴暍end岃嶓W?€X朜伿?乆洏???岹invol撋display?別?倝nva桇嘺9噂嘽棤?i>-b?d?妜冞n夐婋嬤堼?侭?€`?茶佇€鸁ndl樫瀦?攂腐r籶匞媯啈?儺も?攈???﹜ur栮??亙朼 8989噚齿B歌ryHTTP¬ (咇ea呴ourPamples)??瀘瀘瀘瀓Z毴夝戓?挕s烑烑徢偋经a?fir勦媝?姎,?e頴e緺€鄇o炆摾r玴欚惞z剙惐夀i?梣?俼惐尭厷硱牜凓tri慽o倵倅彨al€燿y璠嘪凲湤dd嶉惭丳仮暳嘲係寵a吚w?婳埊埊榤ft剙?er侂偐稈匰??a唈撼?喪姶a?mp妰喼剄伈嗺嗺嗺嗺嗶僒?ad哰bl兵quo偢唴1?啅€`align="c啔扥扞1扟€搷or="#000">NOTE?拠/儚冿冿妎暦僶2">Beyo旲?s醤d騩o?線卪s,舕ectroServer醠so飂fers崆ameManag€蠥PI鬶at?lows鵲u鬿鎢rth€鴖egment鮯佡in€豷pecific€pstances傂偘g偘俒is鈋ing餷ayed.譭鋙頾t鏴t??granular鎜r€恊鍃ampl俬in?chapter.<仚骾ze="4€xb>Extensions侶俬偆p?="3佖??伅醨e坔奿-side鉶€(modu厵嚥can餽o垁s鋋ta亁?by鉲i€P垺嘸????ack嫨o嫐亅.艃鱾釒"?and鉹eat倎eir飛n鍁佀F姌many寶恅婝俵呅nta嵿韚ch嵸€鶏阬ogic,騟ly嶑乣€賲龒Idis帯€駝ga厬€q?嵭put崁姩?娤娤>A?e鰁ry韎nimum,倫??w挃kn?a?plug-in.翐H€z丄a屵le鱮it倶挬Act側Script 1 (basic棸y蔭va€?飏€z師be桳ti媝d嚶scop€X崢a騩om嫑?,閒?we弍mak塺俙r墘m?€阰uld鱾竴鐚哅嬩摀僆h兝唨樞ngs靑k€鑘uffl傫乊de?勯償su揵昋rr燻渒r?杚倐.蓻dway?儗hold柟?ru€皌揑慱e.誷?崯弍lp岪eep爑f慹橜梙偒鈥欋bility?ch杙奒凧i奱牱牱牪,婐哫ll⒉?u剟y??勵槹How?佇岦delv?┋?凱湏s@et-堜appl懭抜氞俀sh巎嬋吚嫼o噚ar晍?€@possib啒abou楘m檁檁9檁5€揷olor="#8e0012">C爍揫C曖A?個th嗭?╣╣潫凣A)?孁go?嶘О€垏0岪栃??庂凮妝涳碼捝砆広submi?俰s禈?roug姞n萒MLち£渶??滒仾侭?乯5胊nva恜礃???俙侱忇朄冘?rom????se洆檡u覆?nn亪???忳嫹4嫹忳禣禞傪blis營傳??庯庯庯?>First?痩嵪偢狔?嘸?€nclud封帡帡帡:??噰凮噰噮枿<s倆聽src="僿烝5-C參-兛.js">佈/佦€y,乄乄8989??槱丱丯BinaryHTTP?亂re厬tively桽???渉ne簨柏挋€0valu?o媑?淏氷屰毾毶為d€憟pby鏂闉愕ぞ媍稙喦喥巁歊嗊颾j€兀杗熦l?it痯ethod??r脆y冞冞冓€x?€;嘜詈8嬊?>乕勏t>儮剫onfig碔a娎w奝ri?倃倃俼欂il?C冝傔嚑?塓previo﹁?perti?癤燞?bed??add?尶喒?俽巰壚?壝勥勥俋A匃匁()?囓椔?€X庘?cod?si€8檡??皑箰偪嚭fun價?》杦???囏ヨ?聽=聽尠聽忕暕€;("?1");
Now,掗犨蝴?榳榳嶅搘e陁?樀俲e?⑾??爋??撐桺t烱浨??偋>es侽?瞲?ふclass??劅劅font>.??蝷卐鬶en鉧ll閠s initial€?)韊thod醤€ dd侷骵rver鱡陁st鉶nfigure€餺???es偡偘object鈟劒ing伹伹伭儬S儂効効d飂佅佅伾El?ro侂佭佖咟engine餽operty:

儚儙var聽es聽=聽new聽?咜;
,仧仧Lo冃亀亀亀亀>Jo乭oomE?亀亀亀乼Z?亀亀亀咃呿Attempt劮佔,?侘侖PublicM奾ag儚伣汫杇朞朞汫?檕d傶L?櫊儰Type.?呿,聽on€縺綔'偪偪偪偦?倳€梻o俹俹俹俷??俲€梹悅o俹俹俹俹?俷€杺o俹俹俹夨??嚈侭聽聽聽聽姉乢坓儣儣儣儣儛懛懙?€縺建煥煥煉W扺扲Finy,飊cehavryth瀒?И笲部擏兏╀?磄磄伅╣╣佭窫歔wait?sQb?獳d筜傫оfun嬟啍細esta壚shed泧塐??泧咃泧?囦当???傜傜川??????API?跌ie埡?壢皐皉姑姁??昰昰ο??wi??fir孂ack?磻li?from€們洷殟s矒?祱嚪?儓欙剰剬()劅劄护紷?our醦p橉敢曇窣鈥檛€@埲柲?穚?,鍃cept緷a髏atus???擧?倶?display.谷哋哋>??s呑呅vari擿e粂峢array橸億巰僉keep€鴒u榅婬儨嬎a?ebug閚匄m噴匤?c?圵n孞吔cu緺囼b戰fly?寊nex?嬨?朹朑朑????▏師師?)聽{?壏圛.push("栦俲a?聽r?!!"}???呥呥呚A幜坄p靶怭杘js姎櫹?櫹稸?旫s€Y嵅????爡??n琱ceiv愷剋剋剋剋剋則,?檵s€Y淕倗淕倵?偋??O?呪佄?d婘堁嘫巘?log碒垥To韆k湣?€鴣敒趎e?a鮼`name?濬r勮媹?,鈛t囇could€0m炧寫?c€▌纼!傝b┓??洐坥坔fie倫慲cooki働Faceb€`脠{?扝n烪嗻r唒幖€皟Qi夎you頃9祷avail.渂?3??ft倶穧垪桔坢??Lo?Requ?庽?叞se峛侘侘?N?伹伬property??ca尃???end冏?metho奰f仹仹?圾伩厧瑏摪€how璶?醼Hmessages ?踿€卼o舕ectroServer鎟om鬶is餺int鎜rward:

function聽onConn儬€pResponse(event)聽{
聽聽聽statusMessages.push("佷聽Succ€豧ul?:聽"+?.s€?;俖爒ar聽€=聽new聽Logi冭quest(乄丳r.userName乺"CanvasU€燺"聽+聽Math.floor(€Zrandom(呧*聽1000?倄吚en僠e.send(r€題,閠閟鬷me鬿陱犪??zone佔t>醤d乄乄t>room乄t>.襡call勦at伕y鯅p銕Ked兞啛啓nee唨€竍elong€Q僕僕僕唙劑怘ry????傷僐?亸嚙哣There槝e,鱡匓侀make?喓厽佽飂錫ch乸hich仭accomplis€pith兿兿t>CreateR厐?凣凙We骵t弚?吪?仹噃property勝仹仸T?Z伬C?伹姤僌伅姅僌僌僌仹僌st喲僌啳I塰垬?壐€@se鋙頾懆l垐dy鍃ist,€醳夝挊be銐bd鈨垍0??俲??伔?佌add?€衜姠€Hn?噷mS??╣澐潫潫╣?╣╠溤?????伜????匟倂?n︴亄乬┓聽cr┣爺烯飦弫a.擁捒at"乢乕扆乢愅乗亣狾狵侙冊狾狾狾尫尫狫慞t怉?wa≒炐湀couplese??壱⌒瀳e鈇ck€xrough戲API鰅a?rt 8989?know?hav珡??o淥斃佢nd匄??€y捙??onJ僗孻E仼傘bu侤泚n鈥檛埗欚瓐thi?it楓媉婫婫楓刉楓楐劎劇楓徢楓楓"壉ed聽a聽?"恄啩恄恄??>疇韔s窣m峚a厐娔?re愐?坸嬡箞喦喥哸?哹刉瓃⒘倄recei徤h??睟惇抁愓?鈕?僶愾??乄?乄畯嗚p碄ca憭剙??run.茦X?c姜乄狝乭mean楖獪ca├ta桺typ塱?滻€a狣s偍ir琎?调厪厡_厳嗕iab嬋al瓟佭佭孂佔佇obj澃箕a?tur娾眱廩?倧値煰煥傋?睯?垱??our渪r秗?mun?s欳僩僩僩僩僣?怷俙淺敢⌒兪熅€`娏宍HTML??<div>?堾?id婚佔佒input惃?抌娝悏adesi?娻懤瓂g劙tyle?傔傔傒 ??匇?in傢w歩卆p奸load捫宲垚坺s慃縖劲朲攎鈋岪?conn嬥?掄?屵屵屵務蹈徃ished.螢U捓r┨氱o鏾楘displa?儑垪垪垪兦兝?唝な涱н兦?€W璷璷璷璳炑璵伔€W€!燏聽=繗man侾rHelper.ЗM€搥bById俫?€W€D咞仮Id).?佱€紑y€竸縼蟺W烉聽憪m恅m伆?docu€i.get€膫??噖俖€W倵?澿Attri糮e("櫌",聽"憀:tru穅?€E凤凤缝悜?怬="0?迉卲t">Creating鬶e鉮at鎢nctionalityNOTE烇烥儚冿冿"3冪?>F?漻幚discuss?綁??崗崗凢??嬯€還邆?er?乬?瑲se??忹怘⒈nst悁ed犮?亄幟r靜ⅰmachi曈冿冿匥[仮偞懆介]//匃勷/html/index.€Y *?侘侘抙庣?拠em師帣??s?╄c浟exa€i贱朹湶?炞架楺櫊?submitted猵o婡傶俒?乸?呄彼tStr焢笨method飂 EsObject.詇is韊thod鬭kes魒o餫ra€╡rs:鬶e鬳xt鵲u鱝nt鬿骵nd,醤d€ 閐entifier?c€榰s仺o醕ces倶?.譭醠s?t佇o€萺錶em?顑榙 <勆呑呇type叿t>,鱤ich鱥ll偫€(us€榓t雐剱of唸ssage鲀xre卹ing凓do剎嚑beca?in犴o?complicat?ap€[ion,啰may?咗l髈rts僄墾圦ne伾?y囐埇y勊嘓y刐o?pro堳m.

Onc唞hav匭nfigur儉our墴墴Pub?M匊Ev刋?t>傂th尣佭佫roomId?媮乢乢?zone乢乕圦???刜巆唨姪亸亷es.engine.嬞(pmr)佺?擫閿眗est屔€b咹:娐a/>聽聽聽var聽formE杻聽=聽docu€i.get€腂yId("榶Box");???佢new聽嶨兏Requ?(仹仩亁.?伜""€鱻髱媭阓€a.id??嶬?€寔?勪esob勶唸ctroServer.庻?伖亼嶐tStr?("匼",塯堸value佅佅佄?","c歱?亣?e????€亽o抣€庿tatus婽s.push卾応t")亃}?€9捛?掃掁Noti?t爄棎diot?i獕昿r鈥檚銇?柤va?e玴?€`submit.蒼stea瑎側áwa?婙淥柉狑狑狑毥return鎟om??徸徯佺?匑h€Pl?t靑k璥剎?s臭keep?坄erfa堾clea疈?p灠働?cre?鍏??€j獏?model仇ro臭琣n珬珬崡崘Af刪侁s?祤?€悆<筈屟峸e,噄操roadcauひ囧?s硲.羳還豰u仺??喢?r帄a寃寃??専硻锄场recei???e?;??甠儫儦on儻儻儻叝?埁purpose彜墆姩亨i昏€餓?heck劵冏冎燗挪W儫?iab恱?∪绑€phe摎屻?偋>e倵t>刾f夝幒爜緼螭倿Kinclud怲?僪儴溦娮濸(兦?壒.伾Nam冞冐)篎?itself??????倵倯氿??唜у伔姩array崿€w??b?splay嘓嶩?户ㄧㄏ?户刼户虎??伙瑉???婈皾痏痏痏痏聽?d瘄仜if聽(婫礋"凥=还?€飩€3婫兺??聽+俙:"€B儑幥傶堤傳傯}€康7??宱宱?w?廆remain徛懶弔敮?秵。ol傲礄W愷搃佖(?else???彈drawSen(暞?F?b睜曄佔佈巊曔曒?仐梍?亣梌s?ne濕嚙冮鈥渃urr峱鈥潅蟼?2?倄?(if?伩伩伩??喐r?hem醼B佔佔y佅儉i獨of乷乷15亀乹ix寪岼only嘩僗l蒂?匴匴????競ュ岆丱∈?ea皑〩?€坲p乲?醽€o憖侷t繗坽侽??gener????喦喡÷嫆y∫15?€耺ax憉€?2;?氝氝兦兦兝瞂??殤larg眻?槜劎>兛?儀旘峞嵤崑te崯ize="2"><?銆€卼t>22
.詏鎖nd鬶ose韊ssages,鱡骵t犷ew鯽riable頰med <佱骾ze="2"><個starti傔t>鬿偍e靍ngth飂€r佭佭tatusM冊??array,髐btract冐by?value閚倗倗max俹俹嘪his鏸ves鮯?嚾ex€0匼儂匲first垗坹wa働丳display.譭鋪薳x勷髨鑰xing鎜r??匇chat??凅:

?傼//妰聽box
聽聽聽c丳ext.strokeStyle聽=聽'#000€';乷亸亷Rect(345,€?0€81€j285)佔侘€!懓聽愃僙0並亀乬€ if聽(恎堸.戙聽>聽幭s)聽{侴?€W兿偪偪偣?-偗€绖偪倊}€莯穩 廝?嘮僰兠;i&l叀冏冏h;i++?俹€W?.fillT€H€O倆[i]?35寉兒y聽寃俫€W?+=12丆//攣憃乄凣怗懴懴懴伅佅??懯?33?嬊?厪???€ las殱丣?嫗-1侊佅撈仐摲摲摲崸?€W?摬偗摟摟摟倗侴?€?15侊?敡敡敡敘勄敆敆倧倧帍敆敂俹攨庲?偀俖??丟?圤€梹惄穩8〨>.bat
檟le?剹????墇"C:\Program聽F倫s?x86)\埬埑\姺n\c奵恅"墂墂墂墂墂€g匜1勯匫€`align="c?er吳吜1??防">NOTE儣冿儚冿冿漮?僶?Obviously?€no?work嚬髈lu疈€缻榙uc€姤On.羢煗tank (廀o?Θ?an溠who韆k偁惣俵s)?nよu浶o閙€罋X?un僯墣?焵€╥氊PIs潑ad?uppo??HTML5珢bS圥ets,喕l儓tshoul?幇ppear?奧棷嶗em?e猝ywa墾кa?play嚇堊爐ownm?machins?twoИbr殌er呰啇€瘈獎X泎,岖媠a?ti晥議?look?歺CH11EX2.html毢?ヴus?塂se?€蓙3偘傫姍嶩Figur?11-5稧???欦欦>.Example聽11-2.聽ES5鉮at鋏mo

<!doctyp?html>
聽聽聽聽€E聽es.engine.addEventListener(MessageType.Lo?Re俴,聽on€梻偪????傸Jo俙oom?傶€梹悅傔????傹Zone?€梻偪????傸ConnectionAttempt塐爞讉莯W凱侊侊姧佺仹劮劮劮劧Public€攪讇縺絻L僿僩僿僷c匰(亣亣亣status?s.push("?ng..."???setInterval(drawScreen呧33佅佅€!fun?妵妵妴(e噅聽{?????囓?a偦聽r偺!!啎?€E}厪€瘏彈W桾?仹伹???j侶ed?勜個劘伹€W聽_?聽=?man侾rHelper.z樞M€搥bById俫?€W€D咞仮Id).?佱€紑y€竸縼蟺Wvar?ormElem伆?docu€i.get€膫?inputF乸噖俖€W倵??愢ribute("style"?"display:true倗?師師?師Ⅶ師師仹€W師師師帤姟欁侽?勛€飫讟鳀K樋?佅???灴俽聽Succ€豧ul?:奌+弮s€秺o偀€W彛€廝new聽蹭ques亀€W€!r.userName?"CanvasU€燺"聽+聽Math.floo€Yrandom(噽*聽1000?偪€W?懤nd(r??????汞嬜嬜仹€W嬜嬜嬓侸嬊嬊嬊嬊劎偡€W夰n夶?姇侘侘佔嵾cr嶏燙reate??佭€V侌?T伆?Chat"侊仧€W侀⒘侊侀凂侊?伹€W??倛厙??倃???峊庽亣仹?????textBoxわ侽€W偓pm尟牽穭貙莻7侘€V?.m亾娪宊?€W亗?亃?.id伅乢€W仼眥伅€寔蟻€W?esob?塜ctroServ等EsObj€垏?侊€W?皺S皭ng("嚋皯屒t.value俖?€W俖俓typ侤"c擯偟?伹€W坺e吿间ob仧丱€W?????€W嚩?t")桹伹?€飥繕7?偁??侘?幆幀坿啹亣???唝received啘伩€Eif聽(嵤沨嵪嵢卙=椆?€倃倗か亹剰剦蠢":?冪?僙僕??€飥縺)€_></script&g奣€ead€梹恇ody€弨坉iv?yle="posi?砢absolute;聽top€?0px€hleft€u"侽侶c际媹d="€cOne?width="500€hheight="320侘聽You惾brow??e侶no?suppor€HHTML5仇傄.?僛刉啙?inputF?冃?display:n??伿爜€弨垈 俢?laceholder="y呉€閫?侊侊揳="button?i↖"瀁?槨H="S€??嗏剣€晢貈?br/>&?雬€卨t;/div>
&€塨ody€梹慼tml€?tt><仚骾ze="5€xb€攃olor="#8e0012">Further舩p€萢tions侶th舕ectroServer?剋p?="3??Displaying鬳xt飊萒ML5胊nvas閫nterest?,鈛t醿豦鑑ve骽own鵲u?鬶乸book,€抍an鋙韚ch韔re.蘣t鈥檚醖d髈me鐁aphics鬿侌e餽evious鋏mo.變4亐ed狍econ€Hpplic?鎜r僯?peruse,頰m乸CH11EX3.?.詤?n傃冭冃bounc?ball凓丄鎟om Chap墄聽5?cha??奩jus侾reated.蓙llows乥俬堹鈥渟end鈥潊g卆€阤a?o?by銈鄈?傪儦嶼.怹攪??>T亁hear怘f佲?墵simply醤?婡??="旽<楬EsObj敯樂t>奡??,鲪h??€坋呌傽r唟s唎唈嶽冿冿冿冿?in慼m從????姪侊佽t厜on剈?撋剚垔傞€rroom:婲燨嫋4嫍???f庿?聽eventM槇eUp(€j)聽{?聽聽聽va揦m?Xせ€縺籝€?聽if聽?.煚erX聽||€蓘?=聽0僆聽//聽Firefox侴俠兘亁??儫乢刌乢乕勭?}€豯se??offset?€焵殔/?O燄a?兦??塯乄?乄et??€g爲1c淍滧++?嬢axS帎倆8€鱻鮥n€?€鱽鏢peed€鷤L+??tempRadius丣Math.floor(€Zrandom()*?)+兇侽侽p?扜??堄挆??厽?-?仐仐pAngl?呯呯呪360)佺佺偤an囉俫?俤PI悙180佺佺pve湴ityx冪cos(偪s挵侾喍???y?sin?????pm€(佮new聽Pub?MessageRequ粈(囩仩亁.m?伜""€鱻螅酙?_€a.i儻?z???€媮?勪esob勶El獉roServer.???亹.檲Float("挭",掍乄乄乄掟丼?乄乄乄拝亄楑仹仹仹孅仜?仐仐仐抾亾捲仐仐仌拵亾?伔伔伔?伔拕伔伔tStr緪("?color",€^仧仧仧"nam唸亼€Q+r佭佭佫typ伕揾怈仭"亀挃e恡┯侙?€?engine偁nd(亐?€鴖tatus棳s.push("丵僲仐?枷€8?>宀Y僎a乣milar韆?r鬿鑟w偡d偤chat鬳xt,鈟厛???儁on¨?E僎()凎凁function.讏侷€濗e嘓an?with?弶僿僿嗭傼,閠銆╯亸亸createNetB?勄伾.詥焷g呂?s鈦 飺鈲恛鈻xce醨€@妉anvas,韚ch靑k嵱s嫻侰???="blue?u>Chap櫚饺:

聽聽聽聽€!createNetBall(esob.getFloat("tempX"),€縺綴€競%function??尯,?€2姠€R?€R埶€Z坒圵?€W€W€W€!?埲?囇€Figure聽11-6骽ows鱤at鬶is鋏mo靜oks靑ke€衑n鯂€s鉲ick?e韔€愨utton鬿骵nd鈬Q€qo?r仯.詠x剛s飂侁丆are醩signed騛ndomly.聽聽聽聽€E聽context.strokeStyle聽=聽'#000€';佅伩佅佁Rect(10,€褉:335€0285)???€ starti儝0僕?€!lastMessag勠啓€剆.length-1侊佅€!if聽(仐仏聽>聽max€?聽{??€W?偗偗th?-偀€绖穫'€!}€莯穬y?15侊?€!for凐va€0刐劤;i&l啈勄勂;i++嗺俖€W帍.fillT€H€/俬[i]帢庲匛庫?€W?+=12丟€鲌O€飥邉梽梽?Use囆Name:"聽+聽u€坣€x勴295勚傋偳€ update(?€鐎2testWalls?€飥3render??喯€縺繋&unction刔B僪(b€(?亀€W€ ?.radians忩€奱ng澤*聽Math.PI/坔8殶?€W佊velocityx俲侐cos刡?劆側€抯peed偡俫€W偡偘朿偛sin偡偡偡墬俹?€飥縺D榋揱tus昬兒new聽Array?伔佺櫉佔佔勄??冓erv敗佂El╬roS€?€;("?1"倧倧倧??push(佊伹伹伹凧availableConn??劮劮r.A乢乚傋偳€W浶帢alhost"?8989€8偡偙Tr幦portType.BinaryHTTP呯?傋?.add劮劧(啹€??圸嶰?孠恄仹€2媥initializ犳乬乄?M倧???color???_room?€鱽橧cou◥揝炰仧亸哻ine姳囂?伹仐伹伷EventListen侙敜幰宊Re弨nson€縺綃o?僌僌僌僌僆Lo???€梻偪????傸Jo俙嬓?傶€梹悅傔????傹Zone?€梻偪?????媩Attempt塐爞讉莯W峠侊姧佺仐劮劮劮劮e.Public€攪讇縺綌W僿僿僿c匰湕伅?"嘦ng...???泧泜?皁伹仐€DtheCanvas??"mo燞up",e€罬€qUp埲fal嫗偪偗剗fri畤熺亣亣setI?val(drawScreen僠33僌佅佅fun??Up(€j絧{伩伅???X?€€W丱Y丱€€Wif敞刣.layerX聽||愱€?垯?聽//聽Firefox傜偋€W€2厈姎倵倯勏乷€W侊eY侊侂啩乢€W爙乭張嗢伱off崢嗕€焵殕邌贠pera?傁€W勭喯値勶乬€W佺喦佹喯乬€W爙€鱻穩V碉r++侽?€W慃axS??8亣?€W亙in亞5亣?€W?peed亰僱+佅?€W佀㏎Radiu犤Math.floo?€Yrandom()*偆)+勗傔倧€W傓崨?仧乷仧仛峉殗仧聽?髝€?聽聽聽聽聽聽聽var聽tempSpeed聽=聽max€j-€筊adius;
伔€W?乭Angle?Math.floor(€Zrandom()*360)倃?€W倂冑ans倐傳?傯PI/聽180倃?€W倂velocityx?cos(僌s)傗坒偳倃€W偳偰y偳sin偳偳偳偳倵偳聽pm€(俻new聽PublicMessageRequest(?佺€W?.m亾侸""亣?€W亖roomI?_€a.i卂乢€W伡zone伩伕€媮邅€W?esob?ElectroServer.EsObj€垏O侊€W?.setFloat("?X",€:聽佺仐€W佺佺Y併Y佺亣€W佺佺橴?€c?佔€W????湐?佔€W??橨?櫎?佔€W??橿?欁侴佺€W侴侴樭侴橳侴侘€W侳String("usercolor",€^?佅€W??ballnam埲?€Q+€檆ounter俹?€W俹俵typ侶毴曕?"?伔€W橰e枻棦倝仧丱€Wes.engine兝nd(???€W爏tatuss.push("佱聽?/>?佺€ }€飥瘈Efunction聽createNetB倶?X櫅暉撓榞s?扱壭僕僄€W€W€W€W€V偗捀偍幯€聽?髝€?聽聽聽聽聽聽聽聽€W聽var聽formElement聽=聽docu€i.get€腂yId("textBox");
?€W€W傡pm€(偍new聽PublicMessageRequest(倃佺€W€D?.m伱倆""伔?€W伔roomId仾_€a.id佭乢€W侊r.zone侊佽€媯?€W圇爀sob?奾ctroServer.EsObj€垐侊€W€E俀.setString("坙",?崣value倧?€W倧倧倛typ俻"chat傚侴伹€W?.e哱嘮偵佅丱€W?.engine?nd(侤儑?€W€Dstatus?s.push坴€饒(")?俫侘€ }€飥瘈Efunction聽on昽傂Ev側(e€1)聽{?侊????received?伩€W?扆兪???伩€Vif聽(????咗=?廜€泜g€W€2伭嗙嗎勲userNam?+傪:"€B?暦儕廫儑?峎?ls倛唎俖唎唅汎ball哋?€W€W??"creat僷侹?伹€W圫亰NetB亹?Float゛mpX"),€縺綴€?聽?偀€W€W漖??Spe??€逜ngl埿,?俖€W€W??mpRadius?€鍁elocity??俉€W€W?侴侳y???儢廢€蒫olor儫偪€W€W儫侽侷幯n??亸€W??€飥飦€鳍Wupd?(斶?€W亼o煇(熉i柛0;€B<吜s.l﹑th€?+俹?€W€V伾??[i]嚡?€W€3//Fri呪乷€€W?.惁僨€?聽-啺€穩?f??偗€W?佺y?€焹/€穣?僕?€W?next哰(€個`+儫?呄?€W?倇叓倇€`?卐??€W摋?€飥飥飹窋FtestW怉擾?€W愁?劮€飥W?偣??亣乬??聽?????€W???凮乄€W?寷彃+€Zr劆gt?theCanvas.width劅?€W€W忥楪暦?-1?伹€W€W抇斣勏勈??s?傦俹€W?坥?-俹坕?峱┌??€W€W?????伹€W€W???噊侽伩€W噊噊滊徸徸?height囩?傔€W厀嘜€焽鐏穩W€W倃勭勫忳垙傳俉€W垙垕?y忕忕0圇?€W€W厙圇圇圅鈭拡佔€W€W???嘰乄€W€W?丱€??€蟺飥飥攉?render?€W乬?囏﹪﹪﹪兺倵犅犅??髝€?聽聽聽聽聽聽聽聽€!ball聽=€Ks[i];
?€W€W乤.x伨.nextx佅丱€W佅.y佅伾y佅丱€W€3cont乣.fillStyle?usercolor侴伹€W侴侫beginPath()伩?€W伩伖arc(囯,哰€;radius,0,M倫.PI*2,true傔俖€W傔傏close剹伩乢€W伩垑仐?€W聽}€騺€還飥)€_€?lt;/script>?€ead€梹恇ody€弨坉iv聽s岻="position:聽absolute;聽top€?0px€hleft€u"侽侶canvas聽id="€cOne"聽width="500€hheight="320侘聽Your?row?聽doe侶not勑uppor€HHTML5聽C傄.?僛刉啙?inputForm冃?display:none?伿f乆€弨垈 俢?Box侾侌ceholder="y呉€閫?侊侊typ儼button?id槇"sendCha仼valu?S€??嗏剣€晢貈巰穩穩審7怤tml€?tt><傂n€9blockquote><仚骾z卄5€xb€敒?"#8e0012">This蓅蕌st鬶e詉p飂€ZIceberg?刉p冿愷冿冸There閟韚ch韔€h嬋鉧n鋙丳th舕ectroServer僷€豾?鱡骽owed亽in€貍@chapter.計竔ng醤d騟ceiv€q噊="啝<墵PublicMessage?t>鍁ent倶儛only鏴t僢so鎍r?e?esign傎mult?er/€R擸厐app傪a涢栬坬?垪垪>To髏art傋傆倗倖骵riously,劼w頴垚to侙lv娦n€X?朄ens伆垔plug-墭猦hit?u嬋巂媑媊,醩?偁€@exp恱e佒堛,?i嵢a€袊貎蔯ommun?e€y冮匑嶀焷?僅姌哤n.讈(ugge捸?heck飖t 佭佭佭佢鎜r攕in漚?醔剳唺氿恏喢.贂渁l愗r Ac仼S倐M?莂mes孼Virtual護rlds鈟蕂be蚢k?(New襥えs).艐绖ough閲X?€葧苐as孭倶凱earli傽匄彧庣庡??r?嘷嘳?峢s?a囩帰洏?w庎h嶀?ime梍梍梍梊A妉坄仾,?傗姍?捠燴匵hn庤gi夎o佮爠便 (?,镺S,錿c.),漚€魳騻xabl斒旼e傮倠?夅鰅a蔭va嶥婛WebS?s暵chos倞ba€A?examp?奌啑啈beca唜嵮allリus刯懓凘a鎢泚樳嫪槞歒橓?媓k働r?.蠀耹ibrar埳?tool€P?嶩€倐皭憏?傂壺?獃倅?唬;儶?慡SmFox咲Ajax罰I?t姽爤beta乤國€葝﹩葋蠫oog圶墾詣╧囏嬯nn埲?傹嬿痩?枆儝伌埞儛尶.詢翀y?quir?呑倸B牗縫醖d-?module.蓤yeor狿?mea?佺攦ould敄?剙jun剫?揬r棄頾w??€2mbp:p矦b弨k橉€硛*檕?檕?敌6?Conclu烓粡粡洤??O娒瓾a抙11箥甔?ha报be?imm€皣C亖?囪HTML5嘥?仮giど?doz砅丵?敁枾€鑿笓猣rom晝廡漻?彁?buil綛②ow嫧橸簔苼鵶i沚t?鋓s??h?-perΚnc?祼厰sh?儁?y鱽腷r儁soえ?囐magic€iprev粔襂A (R费I?n晿A?)渷?逛-拌埌痙row梡?緃e匑┻???嫺offer?呹str?儂濁儤eg€悊Q???埍縚€薸qu俤?dl侷?,?€墐p盔侌scrol?bitmap€槏;辟ni搏佮e砳€﹎竎嵏yp產f僵li杋佮embed彶愥?ipul俿v窰o,奨?m?c,?se堌ct?g潙埑rfac噥op硱iz€醕od?僎?p?穱r?bi?儉t扞棑e梐俻r○c??fu篽懸3D咉嘠user醦pl?鰛卛cations鋓rectly閚鬶e鱡b鈘owser.

T亐true鎢ture,?ough,閟鮬鬿鵲u.萒ML5醤d胊nvas醨e鋣namic?pics佇at€聅till刬a騛pid€坅te飂鉮ange侭adop咘.議il?h儛book冄a鏾o伮rting餺int,刌呰傕need勧keep醔reast?new?剎o坖technology.謎si丂ur?€X噚亸亸亰
,鎜r勓喐嚴upd坔s飊姮妺峅峅峅岺O鈥橰e囪y醠so鑼(several壓??m?鎖僸seful巔nclud奨:傿ul僌僌僈 (friendsofED)?a/埾埾◤儤垹?⒏l餫radigm骽if劯ccurr?r?n?瀀?Web.茻`厞壌fir€hdeca?€?1€槅yury,強,?Sil灅l傎,桼?plug-娯RIAi嬌omin獉奱皳儀??岠ig玃A崹im疛嘔伕張?寪n€1t悁徹lu俲ヱ伇偗嗞rich儻?瘖崇伇?偭ol仒€X琟w惛no??v嶛傾底◤峅峅?eme櫒nc娹鈥渃onn竫垱s鈥濄ul夺帺瓣嶑?.艐hy婐at?m鈥攆rom餳on?TVs,?怘d暲?ablet€皐花less饜p増€驄Hk竝蠧內攦€?ge刟?堗-en??壱媊廝r綡st?u亯thr糏?乤竂?.蒼欿way?噽s?純re哖c嗰慉?n乆傪嫄?嚉??fe朾amp漃€i?垵忰i勮?挮卪?氉崗崗崑W搳??嵲p剤墵like槦槞僡樋?cou墍娵卲ar涪l撶宷伖??€鴥衕av徱娎??囥tru€xo沊孉?姲彣勧?婤(espec儬枠塃嗱僴獕?徻挕r祿,靽 iOS).冤I€佦?胊nv樃?y?ma亪a媥峣梐.譱th叧cross-峷exec寠壐?s凂喤?r (庤徤i攽w偑屪s匸P榠Gapm?il朡澋廐噽醬d珋渶p劺i?.觨?昐劎w筽倎en湢c?3D绶紟崹姴醔ilit⌒o厵mun侷兞仺?乭vi巿???El嶡roSer抈洜ck戻?€p.蟼?envisЧ嫄ay壄?鎢?廘?f堏溹暢媩-?濹wor?simp庤€hk?regard摌篳een潤景塺慻橺拡i妜乆應槝敺扜扏嬹,?珚繎妿toolオbe◥?do?啒uild?炾div>IndexA蜲TE螻訦E腎GITAL蒒DEX?刜/凣劎劎???2僸獉k嘎淁嘓掵t嶡?y悺帿s?摿tit毎仩w?湀尡伋絒帬Becau?som伷s幩m稾ip?儁mark╤,閠儵籭unusual梻傎廥侜s?r€鑵练{勓a?.脼k┝?碢?瀊t戱d肛ct擷?幢啔摵ex刞??嘅嬿嬿挧"1em嫰嫰嫬4徥Symb栢巁挸?8嵪?- (mi埲?gn), -€坉e?穛)飌埌?, Draw硦?b溫Introduction鬿萒ML5胊nvas, 俰c侺s侷勥勥勥勥勥勥勥勥勥勣勄????r姸勶寃寃勶寃寃匞寃剹剹p凮凮凨3D€xth譭bGL刧刢1488709刧刧刞佭佖?恮俉俀6735俉俉侾CopperLich咷侴侴侭977堶侴侫How膐稍est劽?倧倧倧倛91850倧倧倧I蘣arn蚾re羈ou傦傦傦傦492744傦傦傝What傪es醾{羛plica?Look蘨ke????4187???JavaScript靑bra戰爣倧倧倞593彿倧倝Shader????767劘??岠?for囋support拫Mo?nizr????83檁?〝itializ妰in悒r?()傋傋傋01504768傋傋傂Anim偍?cub爣??倆911怗?倅Full?de弜埪倃倃倃俻2304?倃俿r劙r舩p€葒鈙滸滸傜傜傘7匴傜晸峛挓厛挓偪璯℅??x俫?鮯ed厽し?????????卭卭卭sourc?暽l牂?a爮卂ⅦⅦ卂ⅦⅦⅦⅦ厪厪厪厪厪厪厜o礹??幄鲄G匞厙掔??怶崡倧倧倧倧???????傋傋⒆傋???倃倃?倃傜楋楋楋楋楋add囇捛捛匫斪斪匫斪?斪匃匃匃匃匃匃>a屵屲劘庍庍劘庍?庍劅劅劅劅劅劄comple?c?剋愖愖剋愖愖愖愖倃愖愖倃愖愖愖愖傜嘜嘜嘜嘜嘜i洀洀泴 )単濓濓単濓俫俫濓匴匴匴匴匴匴s?劅劅冿儚冿冿冿冺tээч?????????厙厙厙厙厙厙厗糤??8977??糤糚卛击剣剣剝p???? (qu刌恱mark拡?:魢(ary飌e枑or??0423805???Keyboard閚?媭€卲ut<丵骾ze€鑰xb>AAdding閚醤閭 鈥淕esture鈥潌梿拏鱾?8506傳傳傳the莻撈unctions鬿兏dex.html????2450?????????blockquote峅媉媆?g傯偁BS聙榦鏰me (exampl嬿呄嬿呄呄嬿嬿嬿嬿埧傳嬿傳傳埧埧埧埧埧埧/埀?埧埧ddC儵Stop( )韊thod,胊nvasGradie勅objects咓咉0286733咓咓咅Linear莻,s?d詄x?????dEv?Listener匞,丂ndow???039402???HTML5嘥崺Hello護rld!嵶嵶傜傘75534傜傜傕T崢initG掄()嵍偋囎囎囎囌lignm囏,魤绖?54337???drawScreen??喯偡帺13061偡偡偘C刾er敳剱鮯€Y參偪偪偪偣529卭偪偣What醔out梤垞飂€r僎????傴5101叿?債F€〣asel敔擝A娸偳偳偳偫6277?偳??Arrang?Vers? 2.0偡偡偡卹61偡偙侤tical釁/???25482婄?桞oriz€葌弬弬弬弬?77?倧倞?奌?b娍d????娍??娍娍娍偡歄歄">c暦傎withMetric±乯餽op嬥y厀槦槦厀槦傦槦槦吳吳吳吥h婾?埊埄祰単嵾嵾単嵾嵾嵾嵾嵾嵾?嵾??嵾嵾嵾偡坓坓坓坓坓坄?剹??剹???刼刼刼刼刼刼>sett?v漘傑掚婛捒吳?吳吳???咃咃咃咃咃咃呴叚剣しし剣し嘷?凮凮凮凮凮凮倻ly銡/?憼c际????????収収叇糭卂糬pha鯽働劎劌131192劎劎狔om丂i憐喐凲C嗂刜汫偡偘6751嘩偡偙S??ic苅ll脕偡偡偡?73209偡偡偘Glob?A噅牘瀥倵倵倵0044045倵倵涹w蒻ageData.d€(閟飏ganized傜傜傜01042808傜傜傕U玆妷c€鴧P.g?咟tbute?悲彿彑彑彑刾ad?playship (game瀣収収収収収収収収収??咃咃咃呾偡a?匴暻暻匴暻暻暻勭崸偡?偡偡???噖噖噖噖噖噒互劅劅劅劅劅al羖p?媭€卙a醤d詄xt<€g鑕ight="4pt"鱥dth="0€`>manipulating鰅a餴xel鉶lor鯽lues, <児丼="b丳">How蒻ageData.d€(閟飏g僅zed厪厪厪厪厪厪厞rgba儷勏勍167517勏勏勅Set?Basic苅ll脗:劅劅劄p刉刉凷angle飂閚cidence剰塙95605剰剰剤Bou伻剱Off譨ll刉刄p????reflection??252??????????孏孎1712嚳儻儵c€〞?arc()儑儌俉俇40186俉俉侾Rot暲on榮rans朅€€€bform€z啹???86961???Mov??謰(or??憻塷塷塳defined憍騛di?鏇(draw?垁奧奧奧勥奧奧劮?毾???匊ir?拺moveme儬嚶v嚶勶壡壡勶壡壡壡?????easur劽?効懅懅効懅懅懅懅懅卭卭牤??槕i?勄勀36嶺?勄をimp瀐Cell-??Spri坧A倣剹??債0418??傴Ch漍寔the詠棒o膇splay傁傁傁偵693傁傁偵Advad呑d厽傋傋傋傄34睴傋?厞矀羉ross€奀anva???債8902怬?吺?浬忕呰僢傋傋傋傂9123傋傋傋傋傋傋傋傆7966?傋傋傋傋傋傋傋漵0710収傋傃怽媿map澭€Yc媉傦傦傢6546媉傦嶳ath,衕y蝗樃浹?傁傁傁?5614傁傁?????倅7156???耬twee爯wo衞ints:詧P?t梐?a坍`僿僿僿咃僿僿咃咃???綻49??緂緂緂??????????倅57821礯??urve徱Circular统偳偳偳?7680偳偳?槈S€8B卄偀偀偀匵晙6偀屄ulti琣俀s聢O圤傳傳傳傳傳傳傳傳傳傳傳傳傫1838嵎傳傳傳傰with?Dynamic€鄖襡siz?兎兎兎兎兎兎兎兎兎兎兎兎兎兎兂2挊奧兎兎兎怴?ollid€p?????????????56既畯???壸壭Fric?????????????炦??炦炦炦偳偳偳偳偳偳偳偳偳偳偳偳6211垪偳偮Sim垇Gravity,舕astic€b僸埊???呰799???Uni坚呥Mo偋偋偋偆852?偋睆g閚?媭€呩觟mple觩iral, Moving閚偡偡偡偡偠90292偡偡偘Cubic耬zier胾rve蚾vement偳偳偳偳偳偳偳偳偳偳偳偳60533?偳?醤蒻age俫俫俫俫俫俫俫俫俫俫俧13447俫俫噥reat俽噋囘囓Loop????????????傹2110??債拕Gravity,舕astic€band苧iction??????????????9045????鱥th墵Bounc?傁傁傁傁傁傁傁傁傁傁傁側35603傁傁側倵倫們坺Applied焑墂僿僿僿僿僿僿僿僿僿僿僿僿僿僿僷42794僿僿壇彏傳徸冭€紣儫儫儫儫儫儫儫儫儫儫儫儫儫儫儨880愡儫儥Eas溫??????????48????蒼 (Tak€YOff)偀偀偀倷951潡偀偀蟯t (L壈€ith忱hip傋傋傋傃58671傋傋傋卭卭偀偀偀偀偀偀偀偀偀偀偀姛偀偀偀偀偀偀偀倶82403盖偀倷Anim甈on襡visited:秆傞Videos???債348????????傼100997箺??anvas胦mparto茪萮偗偗偗偍25319偗偗収?吀掶?偋偋偋偂484嵶偋偂T?Play?昳觮at側hange傋傋傋傄?漌傋?ame詉m傂豢俫俫俥739?俫????傋傋傆45938傋傋?Object衕ysics??傳傳傳傪6454?傳崚聵衏莾1Fr€0work偀偀偀厜659濛偀倷Howr?坸Will曢?傋傋傃5295洍傋暍€╮ollロ?p?€㎏eyboard僕僕僕僕僕僕僕僕僕僕僕僕僕?056墂僕なvalu櫍key餽ess憲偀偀倻85?偀憭i?吳吤a蚢ximum謊lo?????7449??棔Upd?/Rend?(Repeat)脃cl廤傦傦傟803?傦傦傦傦傦傦傦傢23836熐傦棦d氟in垬Step?偀偀偀倶4583?偀棩媮s倅t欰嶨偗偗偍31261?偗?r噲匭a膟nam?T佮巔eet醫襲n僡????14呑?????????611秅??Simp偁偸?me?Log僪Overview????7??????????50476??>An?媭€卛mating鬶e鉼be, Fur侤r舩p€葌萶ns鱥th譭bGL傜傗

add?step鬷m?to苧ameRateCount€爋bject餽ototype呥呠238365呥呥呚A?in嵊僆T僆厳坵偀倶45837偀偀倶How姾吳鱫rks偗??垏垏垏垏vanced鉫ll-bas€Xan嶳on??0366938??嚭俓C俌B俍A俔匫圇傋傄3恎傋傄Mov捙Image羉ross€奀anva圙圙圙€g圙圙圕b徯c?off鱝lls??494914???B?O?W?劅嚄?0057821??倅Curve孒奾ircular蚾vement偳偳偳?7680偳偳?g斞€8le聟`偀偀偀匵0466徔偀岅ultip俆s聢O圤傳傳傳傳傳傳傳傳傳傳傳傳傫1838嵎傳傳傳傰a膟namic€鄖襡siz栭搰兎兎兎兎兎兎兎兎兎兎兎兎兎兎兂2挊奧兎兎兎怴?olliォ?????????????56360????壸壭Fric????????????炦??炦炦炦偳??????m咍b?勄沇勄勄囎囎沇沇嚪傳棫棫傳傳傳娗棫棫棫兎埀埀€g埀埀埀埀鈨變衒帞唎??唎唎唎唎???????????垙垙€g垙垙垙垙冑溣?無無????無無??????????坵坵€g坵坵坵坵傠d攚驍tc攔?棷棷????棷棷棷棷壡兎屪屪兎兎兎屪屪屪壡壡€g壡壡壝s?壌?匋497680??匄剣觽#匒剣嚄偀ミ偀偀嚄嚄ミミ噖噖噖噖噖噕尰內mpar?to苐ash匞匔1009囪匞匞灡?C????????匉劺bin嚈rotaanim€^d怼鼌棅?91232厳厳厫A?峳Transform呅Image吙崸傋傂7966烑傋傋傋傋傋傋傋?0710収傋傃Display傎the韆p飊€Z?傦媤媤媤媤媤媟d?t劏??単単単単単単単単単単単単単愖愔*慅魦潃z叿嶆8902朑叿嶇嶇sformed?媭€吷mage
<€g鑕ight="4pt"鱥dth="0€`>curve醤d鉯rcular韔vement, <儁鉶lor="blue">C侼C侻M侺??偳偰621107偳偳偫Simple莚avity,舕astic€b僸Friction???呹799???Uniform呥Mo偋偋偋偆85266偋偋偁囸ing閚嵊?Spiral偡偡偡偡偡偡偡偡偡偡偡偠90292偡偡嶊bic耬zier脦R嶏偳偳偳偳偳偳偳偳偳偳偳惍0533?偳???俫俫俫俫俫俫俫俫俫俫俠1344昽俫噦reat俽噋囘囓Loop????????????沖沖?沖沖沖沖沖?/////>c咵c?r€h?l?吙埛埛吙埛埛倗埛厪埛?埛??埛埛埛埛埛埛埛€g埛埛埑炡?飊堬堫呄栂栂呄栂栂栂?俫?俫俫??????????圑n螃妳ㄇㄇ?噊ㄇㄇㄇ嚳偡?偡偡?噂?偳噰噰噰噰噰噰廜廜廜????????偳??偳姧??嚄嚄€g嚄嚄嚀u?c?m?劘絖絖劘絖絖絖勶嘜偋戯偋偋戯戯戯偡嚐嚐嚐嚐嚐eas傂剋嫿48805剋剋刾E仮冞啅??潏???蒼 (Tak€YOff)偀偀偀倷951?偀偀蟯t (LЮ€ith塇hip傋傋傋傃58671傋傋傋卭卭偀偀偀偀偀偀偀偀偀偀偀姛偀偀偀偀偀??€g???撢剋??剋剋剋剋剋?偀?偀偀偀偀偀??€g????ut?搰搰??搰搰搰劮傋夌夌傋傋嘜嘜偀嘜嘜嘜嘜嘜嘓game (exa?)劅剾102531Ο劅剻An堪?皒?Canvas劎?偋偂484巼偋偂T?Play盃墶觮a咗Change傋傋傋傄603?傋傃G嘠Tim傂孔俫俫俥739俫????導孏導導導尌p傆s傃s傄c傆??????????????t奟l奝劮??劮e"><?媭€卽>Game詉mer蘯op<€g鑕ight="4pt"鱥dth="0€`>g倎object,餳ysics醤d, <僡鉶lor="blue"><劥O?袀/羘imation匞匓傳傰64543傳傳傪A耡倶莾1Fr€0work偀偀偀厜6591偀偀倶How蟯r衛ay奨Ship譱ll蚾ve傋傋傋傂52952傋傋傂C€╮olling鬶e??with€狵eyboard僕僕僕僕僕僕僕僕僕僕僕僕僕?056墂僕僎Evalu嶡僅key餽esses偀偀偀倸859偀偀憫iv吳吳a蚢ximum謊曫ity???????c?饍[s?唜堹咃嬜嬜咃嬜嬜?嬜嬜嬜?僕嬜僕僕嬜嬜嬜埀埀埀埀埀煼嬻?p韹膙嬆匞匞?匞?坥???呥呥呥呥呥呥">h澬吳媮澃m澃厪??厪?????傋愶愶傋愶愶垏愶愶愶??€g??嶵rav姼傆bounceapplied錶asti帍?063560?帄偳h聜茿偰Simple艂W墽僿僷42794僿僿僷倀儸,傳咃冮€糉ric帛夛夛夛夛夛夘懜?in髏ra?靑n扺呭扝466呯呯呧Math,返匔房?埊傁048熦埊傁偸勼on?V盒or???倄7156???耬tween詗o衞ints:詳怐ista?of儉L?僿??????g鈨攖儛p儝呄呄呄呄呄呄呄呄呄呄呄呄呄呄呄呄吿嬕v嬕厳嵶嵶厳厳嵶嵶嵶?倈949??倆淂倝Off譨ll???€g???s歋cell-bas瀳spri亹a曒??36125???脗丅倐S們榑厽??傴0418??hang獚T伆鬿徤癐傁坓坓坓坓坓坓e纾韯膝?1107勏勏嚽ノ燬?圇?629045???瑹瑯a傁傁傁傁傁傁傁傁傁傁傁傁摈傁傁倵摈摈摈摈僿??????????卂????劮傁??傁??????僿?????朞攌跨攌f攍釀?墯?⒗?蒋蒋?壸壸蒋兎蒋蒋?姧儫儥880峯儫儥Eas卄?塐塐塐塐塐塉t儉Ъgam憟€夗oveme儼logic勏勊1?18弌勏坓ほ侰L侫蟰erview叿囅??7???le ?媭€匱ile蚾vement蘯gic蟰erview
<€g鑕ight="4pt"鱥dth="0€`>update/render (repeat)銀cle, <儊鉶lor="blue">The諅sR倀R倀C俼卂匷傦傤8039傦傦傦傦傦傦傦圙圙圙圙圙using鋣nam婙t嫏shee凱r?ed醫騯ntim埧呎31261埧呑呇C?傖a膫魩奡傭偘R偝????147????????堖????video勭勩082403?勭勧Anim勮on襡visi奾:杫厃V倅s劮囘?債3483???????嚡嚡嚡嚡嚡">WebGL 3D騩t?cub??504768???佮t朮?効嚪?倄2304槆?倅Fur侤r舩p€葓s厾th讌i傜嚐嚍p嘩嘩嘢app氿Child( )韊thod,鋙cui.body腛M颾ject収峌68360収収厾斣ally脮巒羥dio舕?in蔭vaScript咷咲p??咡Appシ奛41593欁劘劑Go?Mob亪!?専俉侾44801俉俉??iOS羷p噚斺屭PhoneGap????86???Step 3:莈ne徣e煒Certif僘煇ign?Reques??棢棢奧怬呮develop岒platforms叝??叝??劎旓渿勶勶勶勯Keycha慔凱銍飫瘖W奧劘奧奧奧奧奧奧叿匴叿叿叿叺Xcode蒁E?捒捒?捒捒捒捒捒??煰勏勏廹倠func,埜o耹ast?game (exam?)?捷8610?忊佱??旓匞匞匞?s琀弴?06345盬凮処T?2D脌鄀x赴nd姠Curr栙S倷劅溸?009394稺?拰懥machin俉俉俉俀4282斶俉俀Initializ復?:頾鏻obal鯽riable????865屵??Pr炄ad珺ll醩set?out僟僟僟僟僟524?僟僙Re傕朏唝???倄62€(??呇lay俹俹俹俹?2739媤俹愅倝桯Ship怱胔ang嚪傋傋傆4844傋傋傋傋傋傋傋傋傄6498揼傋傉氁倹M摨偀偀漁284?偀漁??偋偋偋01洂5?偋?urn-Based卻Flow浿呥呥???60炦?呠AME_STATE_PLAYER_LOSE偀?ěCanvasRender?∝objec∫?W??峯WWWW叿叿叿叴瓏r耡sic厽恛厽厽恛恛恛??????p榮s榪倸銟s,埜im僣収収濭濭収泈泈泈泈?傋濭?傋傋傋傋傋埀埀埀埀埀垿圕蹦鎜粌s, The莂me觮ate蚢chine<€g鑕ight="4pt"鱥dth="0€`>s俽m俿鎜r觩ace襛iders鐑? push勥勥??勥勥勥勥勥勥勥勥勥勥勥>toStr??嶹嶹??嶹勛勛勛勛榞剰狏榒??36887???Crea?an羘im€h磒毑??偳0048031偳嗞rac偣movem?:琉ath飂餺i煑??傶78805刊?債Swapp?two錶?s閚醼?di€坰哖?埐僶僶僶?0154峅僶籆娏呇Logic偁Displ@OC傳涍崸崗崗崑徣嬰to鑟ld魟榮鎜r寈宒卂??卂??????厀厀厀卽?l?d? (Geo耹aster鏰me)吙??吙????咃咃咃咃咃咃摙恔?t?戲厪??厪?侘??厳厳厳lockquo?媭€卼e鑕ight="4pt"鱥dth="0€`>swapping錶ements閚魒o-di€xsional醨ray, S偱俙傜傕a傳傳ayn憰畴翅JavaScripた儑儑儊○5哶儑儊Fin?幈Sup?ed僼潧???債659?孏傸孮倃倃倃嬊倃倃嬊嬊嬊嬊傔傔傌93503匫傔傏as?tudy婇偤:觩ace襛iders郝???咜8坥??咘Custom?er脕Prol氝氝僄僄僃774僄僄牤嫬Butt傂Asse偡偡偛9219殶偡偙Set呹Up?嬙謅????傶55??傶Mou?侽侽侽7395侽侽匒li囼勝蓶餭ato愶偀偀愰0286城偀?/Pa?Push姮:萯t詄st衞i伕Revisi?僶僶僶僫951僶僶嶓op/€A詏ggl?偪偪偪偢12232偪偪撻lick-盄-Dr?Volum棎塰欁傁傁偸偢11傁傁側俆s俁婕lality偳偳偳湕偳偳湕湕湕湕?????????????0100751櫱??What鈥檚蝒x猳俉俉卻75?俉係y?s卹pp?re膇ffer櫪:欫?僟僟僟僘842?僟????ructur坵傁傁偵6760?傁皬ゃg娺俹俹俵?俹俰Iter獝?#1:煀傎?Us盨S€8?Objec???儂932⒆??儂2:槛Unlim煿慕雱償孏儫儫儥7ǚ儫儫儩3儫啽?Pool????81247????4:?u壀Prel?啇抇???9118??????????2943><?媭€協ont鉶lor="blue">The鎖nal€衐€Xor觩ace襛iders, <傦傦>What鈥檚蝒xt俉俉俉01218686俉俉侾Adding觨und侽侽侽侶3068劅侽侷Play俀s俀嗺俖俖俌2087俖俖劎係閚stances醼pmanageme伆variabl€萾o魦pgame兦兦兦兞2558兦兦兝Loa兪in?儦t侙骽eet醩set嗙???141????俖a€ p>a??o莈o耹aster舩tended垈勶恛恛勶嬒恛勥?侽恛侽???俖俖恛俖俖劎恛恛恛恛恛恛兦兦恛恛兦恛恛恛恛恛??恛恛???俖恓怶惙惙惙惙塤塤塤塤塟単孏孏単孏傦傦傦傦孏孏喯喯喯喯喯喯l実実実宔啅??啅?偗偗偗?咃咃咃咃咃咃p???????佺刜刜刜刜刜刜刏basic <audio>鬭g劎劊08354壡劎段B侽侼Tag???????cas嬸tudy,箇筿匞00935030匞匞匑C俛S俛?A匒:偗偑G旓??糋槸?糋糋俉俉厀35752俉俉俁ys卹pps羠e膇ffer毿:舦??僟僟僟僘8429僟僟僗???ructur坵傁傁偵6760?傁晈g熐俹俹俹俬887?俹俰I禶ation #1:袀軌Us€ia觻8潃Objec???儂9325???儁2:胷e€h?Unlimit簆Dynam棬?償孏儫儫儥755?儫儫儧3儫啽?Pool????81247????4:襡u壀Pre獃啇抇???9118??????????294??final€衐€Xor??傦傦傦?傦傦????p??悧悧??悧悧悧悧??€g???偛u栟d栜?厽櫱厽厽厽櫱櫱櫱櫱櫱??????>悧?抴抴?抴佺抴抴勏抴抴抴傦抴抴抴???????竊刉??刉?????傁??傁??俹??€g???p倢撱酡 €)o慾?笨笨?攪笨笨笨笨笨??????>r?媭€卐using餽eloaded髈unds, Iteration #4:覀偊S偄??9118????????<€g鑕ight="4pt"鱥dth="0€`>圀閚鏰me??35752???Why凞?Apps羠e膇fferent:舦€8単単単単単単単">cre垚?canvas醬dio餷ayer呄吿883086呄呄吶C俇a脗cA俠P俠匫嵡傔垻030傔傔傎ase觮udy垻偣:觩ace襛iders菋P???咜89???咗Custom誷er脕Prols飊鬶e喬僄僄僄傾774僄僄傾L揦?倅Butt傂Asset偡偡偡偙92193偡偡偘Set呹Up偸嬜?Va????傶55??傶Mou?撌侽侽侽侸7395侽侽匒li囼勝蒼dicato愶偀偀愰02869偀偀倶俌/Pa?Push姮:萯t詄st衞i伕Revisited僶僶僶僫951僶僶嶓op/No虁@詏ggl?偪偪偪偢1223煰偪撽lick-and-Drag謔lum棎塰欁傁傁偸偢11傁傁側俆s俁鎢ncality偳偳偳湕偳偳湕湕湕湕??????埼d埳v??厳?厳??????????>comple?code勄??勄?????偳??偳?????囘?囘囘囘囖﹞涾r?﹞匴匴厀厀厀厀厀厀卶h?l囜fo厃mm傴m﹃e﹃呑呑勥勥勥勥勥勥勜l疤b矮a蔼剣茬茬剣茬茬茬勶勶勶€g勶勶勴t?勛┣┣勛┣┣┣┣勥勥勥勥勥勡p?p?p???????????叝叝叝叝叝叝叒焬峇呴?窪叝篻篻叝篻篻篻勥勥勥勥勥勥勜va??勷cem栶飂烇??2193???et炩U戻敯厭?V僐厪厪厪厪厪厪厞dis??a傶el叓attri恱唒楶c?咓咍57084咓咓咅D傔A俹???6587堶?撆吢觨und喐th蝟?Tag傳堬堬堬堬堬堦?ma効3725効劰凔F佦??俉侾406恩俉俇ac禵???335???Exa葫:靶孯ll詇ree?傦?????晋nver旴筩參?嘩嘩?嘩嘩刼刼刼刼刼刵u?.mp3, .㏄,釔?wav湣噥 (e垞)?奊奊?奊奊奊奊呥呥呥呥呥鱥dt?媭€卙="0pt">functions, Audio詀g衦opertie?F俹and舦ents<€g鑕ight="4劯鱥dt?importa?e倞匴匲51808匴匴匬I侖叄劘劘劘劘劘劘劘劘饒勏?7626勏勏勏勎奜勶勶勶勶勶勶勱loading?play€`勭壆3417勭勭勦L?袀 鬶e匰??????匉劀髈u?with頾釄2ta卂區65873卂卂匵匌a觽No姮??厇傳傰83?傳傳傪Creat傷Canvas峬儼er傔傔傔吷7204傔傔傌Dynamically脙>n?lem旽閚蔭vaScript儑儑儑儉7255哶儑儊Fin帰嶢Sup撻ed僼Forma???傶6590??孏傷孮倃??????c埉?e垟d壡?嫃嫃?嫃嫃嫃嫃嫃嫃??????嫭s嫀唊f媻??????????????溩?滘???????剰?>B佮俖?侘8侘侒奾?DK,蟓衏玧О衕oneGap炠???145252??紘?BS聙`嘸偉嚚偂?Xcode囘栠収嚄叅b厾line寬align忈,吚n抔宆251011匫匫璱€﹫!倖A倕劘?偳偫6277?偳偭Tex櫒rranger謊rs斎 2.0偡偡偡卹615偡偡旈慟感嚡???倅482梘?擝oriz€葌弬弬弬弬?77?倧倞?奌徃圌?????娍??娍娍娍偡?抇抇扽h厱擷傦傞(exa⒐)?????????????????偡?瑹坓坓坓坅?毌勭拸拸勭拸?噊効効効効効効v棷劘劘櫙劘劘櫙?劅劅劅G刉EeginPath( )鎢n﹑on刼刲10696?刼刬Sta刾慀悏End€Z袀爠瘱p ?媭€卙eight="4pt"鱥dth="0€`>Bezier鉼rves, 俉俆590292俉俉侾Cubic聜噀蚾vement偳偳偳00600208偳偳偳偳偳偳偳偳偫13447偳偳偭reating醾皟?Loop?傶

gravity€爐h鈕unce醤d醦plied錶astic?, G偳h聜茿偰Simple艂?/u>僿僽42794僿僿僷倀儸,傳咃冮€糉riction儫儦Bouncing嵊€8le耡ll, Multip俆s聝Off讇檪鱾?/blockquote>b侾d俀box儽lision鋏tect€P??958752???劻倃倃倁??p勶勶勶?x鬶eory剣剟161254剣剣剙Combin?Sca夝and襬ta刟詒ansform€z?勭勭勭勫BS聜萶鏰me (exam?)??142066墖??The羛plic???俫俛2305俫俫俤Code????3508???TextButton.js佢偀偀偀倶?21偀偀倻onMouseMove()鏁鑷偪偪偩61槜偪夁夀囘倧倧値480匞倧慴re侾慩揌镺S傳傪with衕oneGap????447???Us?Xc厁鬿詀rgetTest膃vic????5130???Inst爤?俹俹俹俰7296俹俹俹俰囷倗倗倗45063渿倗???傒衦oj閚呯僩僩僩3889僩僩?妶僝New耹ank幆帹?€镾imulator???儁496嬊?塠tegr嗴喼in??喸????6寑3???Set啂Orien偋偋偋偂3±偋偋寜hang寧anner?Ic傁傁傁偹641歸傁嬿g熜??偗偗偓72?偗偗偍Ad皉倝G?ure脾ds歩index.htm籵???96埊?呯呫a湡倗办????a??de凮??凮?晱?刉縊縅€g劅劅剾co礗?source効効砏効効砏刜刜刜刜刜刜刌por枔嵷?酲驙崉开桩効????呄愾???????憌??????俹俹俹?俹俹俹姱囷倗倗?倗倗?????僩僩僩?僩僩??????????????????????獹偋偋?偋偋???傁傁傁?傁傁嬿??偗偗?偗???????????呯?倗甊呟g吋f吙吙ml匞??匞???偳???????慐b?i?厪搘搘厪搘搘俉搘??????㈠p??????????傦?吙卂吙吙吙吔i?Phone?媭€匞ap, Installing衕one?<€g鑕ight="4pt"鱥dth="0€`>i偋Xcode剹剸5130剹剹剹侖??????剕tegrat倯BS聙@o閚to餽oject??5496?????倅the袀泤瘏瘏瘏瘏瘏瘏猻et?orient僷on??6奝3???S?劑O?勏勏勏勏勏勏勈tes偮blank醦plic傄?骾mulator単姙3889単単卄T偆卆New聜釧傜傖€镾?????????n徜evic?叇79622収収収?D?劘劘劘劘劘劘劘偅i渞姀勶忣6411勶勶勶侷壙壙?劮????TextButton.js剛勏勍35085勏勏勆刾??効労偀202噂偀倽onMouseMove()鎢nc梘噖噖噋p???buffers,鉹e烠for譭bGL棌渿?50033??』itializ枎canvas?()匴匱p???夠???008615塆??Expor唕C兪鬿醤蒻ag??傁偭0126?傁偵C?video鈩雮焸焸焸?97偀偀倷Preload牓偀偀偀偀074撟偀倹lac倗倗倗倗倕11204倗倗個Listen愴偡波esse傦傦傦傞8774?傦傟囷聜籄偍t偡慜澢澢憲憯朧and醖傠o呝m勛??勛????勶泧Ⅶ???扺扱c侾rol峿匫敺敺匫敺俫彑???????l徔徃廳瀜厽厴単抔抔単抔偗抔抔叿叿叿叿叿叿叡p楈?娗単娗欸単欸欸姱??????>?焳?audio餷aye非櫱櫱勶櫱櫱櫱櫱???????r奜弚?︼??︼???劮癵勏勎?size€鑰xb>C佮俖瞁侌8侘侒C3DL靑brary?秴2591媉??佇収僶卂烗an帺through鍁ent夌夊7?57兎兎夌夅V?浶JavaScript剣傔傎9598傔傔傌A衦oblem厾th艅颟侲mbedded儫HTML5僿僿僿?5231哋僿僸Im狝a€蠥梤儃偀偀偀倷424偀楋??y??傋傋傋傂7煩傋傋傂Dynamically貌W呡墵呰宊宊愡礝汫??熲匃奯奯匃奯奯奯?噺偀奯偀奯奯奯奯傋傋傋奯傋奯奯奯奯奯奯儑犠ョ姧heig?媭€卙t="4pt"鱥dth="0€`>event靑stener鎜r, Dynamically胷eating醤羥dio舕em?in蔭vaScript<€g鑕ig収収>us?to卶ce醿Zload€竻鲄?4241咓咓咅L伀厛d衛ay偮he咉匞匞匞匞匞匞匓video剰剬703357剰剰剤Pre哃謥駢讐讋杺邆?59峎傔傎A衦ob寛?th艔蓅囈Embedded儫HTML5僿??????p儑h単単単単単佺単単単単単単卆p???can徚Type( )韊thod単卐1?6単単卄凨must髏ill鈋鍏5??嵪??46873??坕?Functions俫俫俫俙60145俫俫漼isp桪Attributes飊棽Canva???爖255坥??Fin曣倅Support??orma?峌p抩抩峎峌?objects劘??劘???慻慻€g刜刜刐帒偄劤劘學學劘學學學學匫學?學??學學學學?圙圙圙圙圙>f?s傼瑘側匫匫匫匫匫匫匫匫匫匫匫匫匫匫琌戠匃烑匃匃烑烑烑烑??o効効劵?剣剟032822剣剣剙T?Docu撀O啋蚾del (DOM)?戺劮戺?470???厂倵倵倵倵倯416呄倵倰Encapsulat廼Your断t脝戱僕僕僕僕4861?僕?e峆拤o觘e議er?Brows€`揇s???儅100997??儁??mpar惃兏Flash偗偗偗偍1樍偗偗偍What廆爯傸Offer?偋偋偋0159696帶偋匤onclus???暓晱晱晪benefi壐of鮯??啹啹?啹啹啹剋??効効効?嬟is╅嬱勏??勏???勛勛勛勛勛勛勔漌漌漌d?熯熯?熯倧倧倧漁吳吳吳吳吳吳吚e漮欻滸劆滳呑熺熺呑熺?熺熺熺咃咃咃€g咃咃呺傔醩餽ogramm冄language咓╣╣咓╣╣???????">res園c榟囐fur?in???烇烇?烇烇勛勛勛勛勛勛>t?劻web猢<熻勥瑖瑖勥瑖瑖瑖瑖瑖婏??簭呑呑"><c?>錶e檃?厏2896爋?厃??刜珬俖囇4061俖俖俋Add嚿Ⅻ?嚒HTML袛0傔傔傔傂58267傔傔弬py?rom蟦e?羘o??>
, ?媭€?a鎖lepos=0000457974>Copying鎟om蟦e胊nvas鬿羘otheradd偵侶HTML餫ge, 勥勞044061勥勥勜A?剰刾俢P俙効劶劎????c囋im俻鋋t勜?o?僪a圀厽妚8267厽厽妛妛咃妛吙a>?峯峯??????埛埗p坥坥坘侺objects劮岶7163劮劮劙Us劇docume€鴦hreferenc奌崢c傘ele?in蔭vaScript厙?兿兩861兿兿兩Test?See議e?儮Brows€`Supports塗???儀6345??儂偫2D脌鄀xt?d僙Cur嘸t觮at敺???6962????5幣O寊偋偋偋偁8588叝偋偂Ex?欸栛蓷﹤蟼蟼?025718梍傁偵Horiz€萢l醠ign庒倧倧倧00305855倧倧倛Dynamically襡siz広?嵾傜傜傚168?傜娭toD?URL()蛻Pod飂?媤僄?????dir醫tribut奯奯匃奯奯奯?濷?剣剣剣">get昑( )韲妱繗?効??????叝?楓???????埛圵埛埛埛埖prope榾es?埢匫?匫匫?懴勭勭勭勭勭勭勨?崗勏焔焔勏焔焔焔焔屵傁?傁傁?????僄?????">€b岅?饙瀰嚔噮嚔嚔嚂g匫匫筗???秙App?function勛岴3912?勛焸戯s 鈥淗ello護rld!鈥潉讔_傜潻2968傜傜?ncapsula怋Your粀t氳de鎜r?僕僕僕71僗僕僕ゲw妟Gam犺ork????4016??倅Cre叄偂necessary鯽riabl潃in€趯?兿兿兿兪81兿兩Set兟ev?h撔ler儂僟)????184弴?擱efin??咑僩僩僩僩僩8?僩尨傞僡€鲿鴼怞SC€i傦傦傦礘77殶傦傦??base€pe漥迪???027964曶???glob竫shad砅偋偋偋偁9771叝偋偋偁Gradi?P絟er嬰T唝Arrange?僶僶001553424僶僶??chat??ty傜,pǒǒ/-draw?een7on靜?????????嬤??€g呥呥呟婙El叭roServ椄埐appl╃咃?咃咃??????€g??厈GuH詡鐻犂厁g(example)卭??卭?????????昣昘勄勄os=?媭€?000240166>Creating鬶e頴cessary鯽riables閚€赾anvasApp()鎢nction, <€g鑕ight="4pt"?dth="0€`>???f孹?siz壂fac枅丳ges啹挓挓啹挓挓僶挓挓挓啩咷啩啩啩啩?樿哶哶哶哶??哶?哤????叝????卾,匷,鱽R,呹style??ハ?ハハハハハハハ喛喛喛喛喛喛>g枻?p枩??????????収収収収収叇灚????????劮劮劮劮劮劮劚??????倵倵?厀厀厀厀厀厀tFill?奭匫盻盻匫匫盻盻盻???p勭勭勩C桱抲颾ject?勬05424勭勭勦Basic撁Display剋??倄8673嘷?倅L?ar?宺傫偡?p????add?Stop( )韊thod劘劘劘劘劘劘劘劘嬒嬒嬒劘嬒嬋澨嬊劎嬊嬊劎嬊嬊嬊嬊?106榞?倅Image?偋嫹嫹???c玕?????????????sPixely?側搏効労430639効効劯T盃俢袀i蚢nipul?on罰I??勄勄勄俙Render?C伬?2D怬匃勻怭08壇匃壀ntrodu?鬿萒ML5厔勏悷傁側5164椃傁偵Retriev箥?匱偡偡偡偘63偡妎俖?傫Curr?State?妵彠娤娤娝(selso儼傷姅)懅俫俫俫c剬s剦??????????柷?????r?勶幾幾勶幾幾匞幾剹剹枟凮塵aptu朼鍁??剗3912??耳晽s 鈥淗ello護rld!鈥潉瘣w刧刧汌sc瑻刞Style觝ee剹剹29761剹剹劻譭捉se?詇is耾ok劮劜 撯CSS揦???ca侾挷m塤勏0瘶27勏勆Keyboard刋pu?淥俖俌0937嫹俖俖俖u>

cell-based醤imation, Simple脗IB侸Sprite羵?/u凘侀剼?傼0418??傴Changing鬶e詠棒o膇splay傁傁傁偵693傁傁偵Advanc厁呑厽傋傋傋傄349傋傋傂Mov厤Imag圥cross€奀anvas??blockquo壭峸峸峳a叅剣剣嘩剣嘩嘩嘩嘩刜傋傋嘩傋嘩嘩嘩嘩?嘥?嚐嚐嚐嚌s掻s挘?匞??匞????匞????????傁??溝嚽溛nter餺int剋則14490噊剋剄Lesson 2:譭韚st 鈥渢ranslate鈥潊:偸飂飏i呧厬€箖紑羥r骽ap唈rot佮閠醨ound€Ps飛n亜?夨厙厐56413厙厙岄ca墣T?for寋懬倵倵倯弝4倵倵寔ombin寜傘a厛R?傂僌僌僌淿斍??">find?侾?y塠???????????欸厙厙厙厒?僡匤s嶥厪捵捵厪捵捵捵捵捵捵捵捵捵捵捵捵捵嚽嚽€g嚽嚽?娯岯rom噖斍斍噖斍斍孏剣剣???瀪?ex瀼凪21306嬁凮態佺佮鮯€Y傟剋曪???rtific媺sig撢reques剹剶1481266剹剹堎tep 3:莈ner俼a傜S備R傘?????harac慳enco?s匃墑02645捶匃勸<meta銈Pse?UTF-8">刧刧刧刧刧斎ppl喩?刉塂5365?刉凴T椑硛ic羠ch硤cture?a討纄t-Serv嘪A??н儣儛420囩儣慶re?寪呩偳n喨th舕?ro兓僟僟僟橓243僟僟僟反塉func僎洂t废傜傜傘905傜傜壣懜傒?n閚莖og綼h瀳e????73592???Fur?r舩p€葟???????????????159488???is蓅尸憠慣ip?€YIceberg?椏プ????厽厺 5?斪斪??斪斪斪傳垙垙僟斪僟僟僟斪斪斪傜傜帍帍傜帍帍帍????帍帍?帍帍帍帍?碐盖幾幾幾幰ad饣燾€Jall?圵圵?圵圵圵圵圵匴?圵圵?圵圵圵圵圵圵圵€g圵圵圫t叿栺_#?攇????宊宊?宊宊rations ?媭€厀ith舕ectroServer<€g鑕ight="4pt"鱥dth="0€`>use飂髞Pet髠猻, <僆鉶lor="blue">The耡sic羠chit匄ur偛a觽?卥羛plication呄呄呂p厙厙厓chooseButtonsForCard( )鎢nc偭,耂耰ngo鏰me (example)啩啢440958啩啩啢僟僟(僕??p呄呄呂Chrome??0709061???A衦oblem侾徰vents醤d舖bedded謎deo閚萒ML5劎劉僿嶦62905僿僿嚒est壢魢鄭Wn傞Google脝"????73592???Fur?r舩p€葍 s嗶柷柷婏????p墖h鍓噀墔v墎厽??厽?偡????咃栫湳???t孴垷欛chat釋蟽€哋??哋??侴???????????????堖堖?irc匟arc?cre?ng?巹117763???c€╡xt.?()凣揙???凒倶lis夅deJ??627???C侴侴⒖剰剰剰剰剭坄radial鐎A?慘斬t梬場87梮勛勛勑R侴侫s剣剣剣剣剣cular韔vem?凎埮7821?凎埪u愯氣?侸M侺凮敺偳偫8526喎偳偭?椦桺礌i皦觩iral偡???嘄learR峆场method?拫颾j€泄鲖?0424勛勛棍桂偣an?Shap?勛勛勛勛峼鎜涏沇淧n勭咀89寃勭宻偄凮凮凮凮凮pp媔reg儫儫0064180儫儫坾2D脢湊Q惱r柋Stat堊怶?啯怈3???Canvas脜UR匯偪嘒嘒嘒嘑osePath怸fun?刧忈696?刧刟唒r瑨瞛nd€Z袀爠g刧刧刧別ode鍃a柹??壈is鈕ok犡unn?勭00363勭勭燘伀嬺E傉?€丅偢?????e瓩??66823???簀轰Suppor攇兎兎兎兊COLLADA 3Ddel??2426滅??复O3D兦兦兦兦噕儚?28儚儚?ultiらBalls婡捀?C偂?刧???6360幙?????Fri????909???偵慔tera俲懖phy?瞣傁傁恭傁傁恭恭恭偪偪偪537251偪偪偪偪偪偪偪偪偣99偪炩epar??圚drawScreen()????4394??吅?嶃b巵倵倵倵倯521梬倵嵨曌卹ep偗偗搰偗偗搰搰搰搰???0078365圤?圝re?hit鬳st餺擑-sty幙幙僿僿僿僸95875幙僿??瑽box傦傦傦傦傦0111475塷傦傞A絇y傞庮膫蟯>?媭€?/font>, The頴w鈕undingBoxCollide()醠gorithmapply偘児lision鋏tect€Qin莈o耹aster鏰me (example)??14757???A僂呪傿D僂呯呬呄????ball?s吜depth??0545214???B????嶗偗偍6360嚽偗偐Multi墄聜餾聨(c?w崹苧i????????s呫???37251???Circ???勄勄勄勄勄勄劼c傔傔傏??662???侴侴???????梬梬梤Extended棗収澢澢収澢澢澢澢澢???????n觩ace襛?rs潅収婦958752収収?卍叏x媤媤厀厀厀厀厀厀卹e婇ic劮忰290奧劮溝in尐a?溭physics剹剹剹剹剹剹剴hit鬳st餺?-sty揙囘晱厼78365厽厽晩reat奍????咷咷咷咷咷咷咮?儔if鉅rar僉牀咓≒394咓咓咈?倞???????update-劊e-r汃r銀炐?99??匇Separ婝t?code璲rawScreen()卭卭卬p??僘髏ops劎劋168316劎劎劆Linea?radient墂紘兦兦兦倄儫儫3170儫儫?t?Ba楬苅?嵢?冪祻偡偘9984玙偡曌偢Shadows飊胊nvas€憄e傳傳傳傪2掄2?傳瀃卆Text膇splay???倄1860??倅丠l俲and嵃roke€y偋偋偋偁4437楋偋偂F€J????8114岟??H剺l夾glo?髪{偋偋偋偁98999偋偋偋g菗=囀Patㄠɑ坮Arrange?僶僶僪3010?僶僶僶僶僶僶僶僶僶筳502311僶僶僪Initializ撪禰c摙App瀘歡毌毌睜xt.愃帤餽operty?揋揋?揋揋揋勏?????form妧?€X剚lS???€z卭嵪嵪卭嵪嵪嵪嵪嵪嵪??????sb炾?劊吳???????兘勛牊牊勛牊牊刜刜刜刜刜刜刜?旈凮??凮???剰剰剰剰剰剰ぢ,餴ck勆繆js噐勶勶撉?????????勛锭勛勛锭锭锭锭?勄????嶻款?楋pos=00?媭€?0298999>Handling莚adients醤d衋tterns閚詄xt羠ranger<€g鑕ight="4pt"鱥dth="0€`>Vertex脛A鈛ffer,譭bGL醦plication, r戺懶?叿?叿叿???勶勶勶勶勶勶勶傃3勶勶摽勶勶摽摽摽摽??盙勄勄凾颾j┬s剹墌2118剹剹??drawScreen()譬剋?偡偙4786偡偡偡偡偡偡偡偡05669?偡偡偡偡偡偡偡偘7607偡偡偡偡偡偡偡偡06345廤偡偟撶醤d攝Curre亁State????86??????????98741???Basic覓竌ngle觝ap偡偡偡?02389偡偡偞?俹俹俹?ゞ俹ゞ?觓ve?Rエore坈僄e?僌僌僇782巜僌叺Actual膽X????倄1617??倅Arcゞ???214暓??煖.arcTo∽俫俫俢253廏俫俛Bezi甔懭ve劮俉俉俉俉俉俉俉俉俉俈663幭俉?嶒ClippReg湳偪偪偦3119偪偪偣Com丂?倄?偡偡偡偛69嚳偡偡偡偡偡偡偡盽??偡偙Less俻1:詒ansform豹s釚鴄pplie煒o鬁皸鑠athsn醘t絣set?or锞K偳磇fЪ閟窗lled????25??????????et?媭€匱ransform()飏飔her魛璦tion鎢nc€Jis鉧lled, Less俬2:譭韚st 鈥渻歭ate鈥濘he餺i佮of劙igin鬿€篶ent?€羥r骽ape€賠ot佮閠醨ound€Ps飛n亜厙厙厙厐55073厙厙厐S嚑e詧Xs倵倵倵倫68639倵倵?inear鑶貁?al鐁adi匵偳偳偳偭84172偳偳偫R?俹俹俹俹俲76957俹俹俬Applying釁O傜嫨a仩mplex孋僿僿僿呥僿僿呥呥俹俹俹62115俹俹俹俹俹俹俹0191950俹俹俬Fill?S?s鱥th衋t挵?傁傁偹850傁傁偵Cre抈傆dow晙n胊nvas僤傳傳傳00204598傳傳傪Basic詄xt膇splay???倅542澂??????倈68掞??????倆1238匃?倅Us夾measure偙倃倃倃俼689?倃俼丠l勞astrok偋偋偋偋偋偋偋偋偋偋偋偋偁86狾偋偋偋偋偋偋偋偋偋偋偋偋偋偋偋偄3100?偋?et桞?傗F?倵倵倵倰44妛倵湤€㏒ize,芶ce睭ight,叒Sty瓁?????52???Verti醠ignm???倅482棢?倅H?倧倧倧倧02608湡倧倠噋ひt姟base€pe???????????????732愊??Glob坸Alpha偤揰倵倵倳75燨倵倵l獤偋偋偋偋283偋偋偁暁G矋偸?傦傦傦285436傦傦傝L姁ar傋厽偡偡偡偘983厽偡?偡偡偡偡偡029106槒偡偙Image嚲偋偋偋偋034724?偋偂?an蓛窣竏嬕draw€?)???儀枅7??虎偅Transform?僷傁傁偼43063朹傁?厪Pixel蚢nipul?API傳傳傳傫56傳傭Pu?i?data???01?15??卪st勜c饗鑕r骽ip (frame 1?傠

arc( )粿thod劅?11617晽劅剻Ar?兙儳????cTo???2140???c€p.??刼刼€g刼刼刱bezierCurve劘劘劘22531劘劘劏B?脗1?劅劅€g劅劅剾?Render抶C嚀2D劎劋桯45峗劎戸2D脕鬆:漽urr?ate卂卂卂卂卂卂匷clip壇?壆6632??済渁C?p櫻Reg淗効効効効効効劵re嗮D?????匫匫匫匫匫匫匫搀?厀, Linear鑟riz?al鐁adients, <€g鑕ight="4pt"鱥dth="0€`>createPattern( )韊thod?噀91950??匄Filling觝apes?th袀泧菄莻蠂?1065傁傁側Image俕嚪偋嚪嚪嚪嚪嚪嚪?姯囷?廜廜?廜廜廜噺俹攕211噺俹俹俹俹俹俹懕9833俹俹俹懛?偡??????draw屸壇勥勡05669嘒勥勝The鋫(S孭en()苪nction勥噺偡0034724擥偡偙Display擸an蓱阰n魞hCanva斳咓)?圵圵圵圵圵圴儊basic騟ctangle髽Y咓垾98741咓咓垽B?R?殥????????st棸s劮敃0238?劮劦夓S侚刼刼刼刼刼刼刼刪孼path剤?s鎜r匃勼勮檟ㄏ匃匁啽墾徰er嬋ip (frame 1?厀厀€g厀厀卻凱l?勶壿7?7勶勶勮Appl攌?炵鬿€萩omplex憙厀厀厀厀厀厀卾C?餽operty厳竝溈厳厭??stroke勄勄勄勄勄勄偫Sty枅勄勄劽05424勄勄劺樆勔?劅劅劅劅劅劅劄倝庯劅?478撟劅???勛?偡嘔68憻偡嘜嘜嘜??巼??巼巼巼偋夛夛夛夛夛>僯巁劅?4598劅劅?????倅31┤??倄Sett??偑F?倵倵倵倰44墽倵倯?觟zFace讏*,???歼??€g???globalAlpha奼卂?31192卂卂匵C¤osi?稧璛勭?偡?732姛偡偛G劼羷蕠睉焽w噖噖噖噖噖偛厱eO噚叞囘?囕69筼?囘囘囘匫匫匫匫匫匫匢measur橞犵勶浘範?勶勯Us劰侽夨寚倃俼608э倃俽H?l??base€pe屢alignm瞙???????????娍娍娍娍娍姼oveTo姂偭?€s寇厳忰07823厳厳Actu?D?呧????????ie刜癋63860刜刜刓2D脌喃M攋urr?Stat厩勶勶€g勶勶勳utImageData壇匫匧4356η匫匤Pu㏒i侷鋫P効効効効効効労qua?tic噋庻勥勥巠2253瀘勥阿ezier墶ve?劮劮€g劮劮劤rotate( ) ?媭€卪ethod, Lesson 1:詒ansformations醨e醦plied鬿骽ape€皀d餫ths鋜awn醘ter鬶e骵t?()飏飥竴鄠莻梨unc€Jis鉧lled<€g鑕ight="4pt"鱥dth="0€`>saving勞restor€qstate坓坋05522坓坓坄How膐譭觓v囪個R倐e?Canvas觽?叝叒僌僉382476僌僌僅俆嫍垔Basics傁坵坵坵坵坵坰姲e( )韾勛?5507?勛勓S侀勏怺劅劅劅劅劅劅剾愡m勛勛昇116墽勛昈昈昈昈昈昈昈昈剋昈昈昈昈昈圙圙圙圙圙圙勜d?properties??98500??懝re勜栢S侭s飊敭嚜?敮傳00277584傳傳傪Global傛?Text偋偋偋偁8424?偋偂??th莚adient偹Pat宲捵姉姉姉姉姉姇trokeC児娊y??1860嚳??丠l?劻倇嚳勛勛勛勛勛勛俍Rect棗勛勗057607勛勛夐昤曖Screen昉F敂勭勭勭勭勭勭勭?勭勭壏壏勭壏壏壏勛勛勛勛勛勛勓t?Align巜勄勀5482墽勄?riz€葨Ha?m摌劘劘劘劘劘劘劗eline勄勄勁2勄勄劺V焷?劮劮劮劮劮劮劮劤l碻?劎獤60?劎獥n 2:窇must 鈥渹?鈥潻rpoi佮of〡igin?€筩?€羥r€賠o格閻萺ou愢i煇o亙嚡嚡嚠p噂噂嘽c亹rol﹪?6870w?嫬ideo{C?Loop,暫Autoplay劘??00729739??搲TML5謨RP偀偀偀008€熐偀??偝呡痲嬔瘬???傴24032???Ani?Revisited:蚾v儺????埁絖?債Prelo痻俻厜butt紷偀偀偀垔48?偀倸lac倗倗倗倗倕112楃倗椼isten倯繄偡9槹?傦傦傠717?傦傦傦傦傦傦傦嶇嶇傦嶇嶇嶇嶇???債35458??超ic <audio>詀g偳偳偳偫43傂偳偳偫Example:誷匭All詇独苚r唨叝傦傦傟90傦傦傟Importa€蠥厜淥偪偪偪偣83890偪偪淥g猫鑟m呚???僄僄僀774僄僄憘檕聭SA慇埊偡偡偛9219偡偙Set呹Up偸堅?Va????傶553叝?債Mouse舦侽侽侽侸?炦侽匓li囼勝蒼d?to盬偀偀倶90286偀y/Pa?Push姮:却繲e稨P丢?僶僶僶僫951僶僶嶓op/No彩詏ggl?偪偪偪偢122烥偪撾lick-礍-Dra炟olume訅h?傁a鎖l?媭€卐pos=0000923211>Volume髄ider鎢nctionality, c亹rols餽operty,醿!颾jects卭卨835458卭卭卙The耡sic <侸>詀g??偳偫43傂偳偳偫Example:誷ing羖l詇ree苚rmats傦傦傦傞90傦傦傟Importa€袏蛐圫ie偪姯姉婘婘婘婖sett厛剣噊噊剣噊噊噊噊劮劮劮劮劮劮彠彠,鰭Po弌匛729739匞匞匑HTML5謥褖鲃鲃鱻g匃匃勽rea墿鉼stom鮯殌厼for?player厽娸8389歰厽歫傚C傘U傖C傚on魱Canva咷挓僄傿774僄僄傾Load?倅Butt傂As恏偡偡偡偙92193偡偡偘S抯誴偸晅?謅????傶55?傶Mo媂舦en匞侽侽侹惱5侽侽匒?匒勝蒼dicator偀偀偀?0286揼偀倷俌/Pa?Push姮:萯t詄st衞i伕Revisited僶僶僶僫951僶僶嶓op/No虁@詏ggl?偪偪偪偢12?偪偪撻lick-and-Drag直媺ie堬傁傁尺傁傁尺尺尺偳偳偳偳偳偳偳偳偳偳偳偳稛偳稛稛稛稛稛?">hit/p憿p憽b?卂撉撉卂撉撉撉撉撉撉収収収収収叇l≡卥帷矃В铮飬В铮铮餅瘎飫飥g勶勶勴槇t構妛勛毾勛勛毾毾毾勥勥勥勥勥勥勜mリeラ铔 l?勶??勶????????肯霈旱驳€cem?of勛勛厙厙厙厙厙厙厓瓬憨湪瓬??勥勥勥勥勥勥勝our犘code夿c桔?????偳偳偳?坃坃坃坃坃圷v?囘?筹?筹筹筹筹勄囩姧姧傁姧劎姧姧噰噰噰噰噰噯crea?傝o冐ntrols飊胊nva??€07卂卂?倉V倆C?毬倹叝坥?傴240???Anim?倛皷:蚾v儺????2976??磓re?厜?偀偀偀倸748澂偀?c倗倗倗倗倕11204倗倗?isten倯漚偡餽e?傦傦傦傟717?傦傦傦傦ress?媭€卐s
, Animation襡visited:蚾ving謎deo?傷<€g鑕ight="4pt"鱥dth="0€`>listen倝for鈛tt僷presses卭卪11204卭卭卙L俉侾the倃俽卂卂卂卂卂卂匷plac債傔??07485???P??劘劘劘劘劘劘劔reload偣劎劎劊2976劎劎劇?効効効効€g効効劵source僷de剣?717摕剣????勛枃枃枃傦枃枃枃枃?囅囅€g囅囅囁v?劮劥687043劮劮劙円?th脕rol?Loop,醤d羥to撠y勥勥勣p剹剹創converters姎?€Q圥慻匩75868匫匫匟勷俀塿苽3勛勗p剰剰剮CopperLicht靑brary凣凜152墭凣凣凜?冞冞冞冞坒py咘?ge鋋t儼rom飊昤anvas鬿嫲o撊r劘堨458267劘劘劔傏倐O個C倖A們単曔?債797??????坃坃坃坃倛part飂垳倄偹匃勽35591ψ匃匃g袀lan蓚厼!偅?????sin??88649凮凮凥瀕?a謊cto埧儻儻儻儻un檃兛?6192?兛?re⒗內嚾?Fram囙倱凣忳??950掞????Arr牽偳偳歈0786嵡偳偮T屶?Rate匧蟗j壭衦ototype????82281???吷It羖l詏ge昽尫尡??岦圤?f?嵞勶嵖嵖勶娍娍嵖嵖匫€g厳厳厯?婞o婝p婟厽崡崡厽崡偀崡崡崡崡?崡崡?崡崡崡偋圤圤圤圤圤">track偵curre內index嬢a枒?樳樳???樳樳厽??匴?raftyM?.com?剕82348緊?剏?Revisited:亭彻7椷刼刼棗?eElem墵( )韺xod,鋙cu€尌梾E71543扜匞匒?must髏i廆be錷bedded屝萒ML匴??圚68360???Dynamically脥'羥dio艈儍QJavaScrip緊堊堊堊堊堁矪D綪堘func嬮卂杯3085虹卂殽簗Pixel蛿恜ul抃PI勏勏勏勏勏勅L佃arGradi嵶嵰c侶ex嵪卭卥16863?卭卛偦鑟riz?al鐑捵崌偳偭84172偳偳偫R?俹俹俹俹俰2妧3俹?莻m徣d試爞穵W奧奧奧奝Pat?n???匃嘮91匃匃勷F梹攓Shapes儓th袃#嚳嚳傁嚬9106毌傁偵攂俕嚡偋偋偋偁滰弴偋偋偋偋偋??ight=?媭€?4pt"鱥dth="0€`>video錶ement醩髈urce, Image衋tterns醤d詄xt, Simple莚avity,舕astic€band苧ictioncreating鉼bic耬zier€hrve靜op厀卽1344厀厀卶C倁a脗噐€h倎L個匞坥?坥??坥坥坥坥坥坢圵埛埛埛埖mov?n閙age飊??path??05336???M偲I偭匞坥俫媑俫俫媑媑媑媑???????in髬觭piral匞匘58526嚙匞嚙?a觽;S??圇偡偘90292偡偡囻嚐嚌僅ement偳嚳嚳嚳嚳嚳嚳g彲彲ve????????圇偳扜姧偳姧扜俫嚄嚄嚄嚄嚄噾uniform鉯rcular韔欰劘噈78799劘劘劏U?C?M?勶嘜偋戯偋偋戯戯戯偡嚐嚉p嘩嘩?s,尋刼刲122531刼刼刪嶨??珡????(see醠so?チ嬁愳)唶唶??匱size€鑰xb>D佮勛劙侘8侘侒Daleks鏰m栂圽1182068坃坃柹ombin屬Bitmaps咮Sound埾弴偳0132576?偳偭A?T亹-Based莿饌瘚w喦埛喣data餽oper搬?D€bject?劘徛43玃徢劘劑?attribut?剰剰剰剰ebugg墍,鮯粃onsole.lo€槃o刯714刼刼刪D俇?th脗G劅劅劅劅劄苦搃飰8ator (--)剋堓776槦剋剆raw刟the鈇l溈????gre測坸v峘俍o騛dians鎰燼ngl?劮滽4018》劮劚Rot肛?敥Tr俋l€儉b?€z?厀厀厀厀ltaX (dx)傄€俌€€y)鉮匟exis餺si?吳0376563吳吳奿摙羉ross€奀anva厳厳厳厳厳scenders (仼庽剠251615剣剣剙V寵calign捣????昲vel掶衦嗋s垚?Assistant?犾480230??剎Step 1:蘟unch埐偪偪??????榖c嚈f嚚?匃匂1礯匃匃 3:莈n歽脗og?Reques?????iagon孭line盚g?厐?樜8??漽??凣凣凣凣凢湊?,敩刜掓7187刜刜刋Horiz€葤鲘莿o刼刼刼ir兏灹of罐 (v€╫rs梘859掞剣涚g餅謧剋剋剋剋剉splay?video俌HTML5??剕71???峉倂剙倗倗?籊?傴2877?嬺侸偯?笰i动偀偀厰732偀偀俲must髏ill鈋錷bedd?ɡ儥???叀388??et俋terv懜盚up縋e燫孅???埐059???????惪blockquo丳??0pt">emb?媭€卐dding鰅deo閚萒ML, V佢must髏ill鈋錷b側ed倳<€g鑕ight="4pt"鱥dth="0€`>sett匒interval鬿鮬da仩display叝叚23885叝叝叏Set醤??th倿叿叢??8059???????埱埰p??坽侙tance飂犰ine勶勳471564勶勶勮Mov妐Between詗o衞匵s:詣餌?傴L傴匫坃僿僷8561僿僿僿飊俬Vector???呴294娮??咃咃咃咃咃?p摨摨??俆equation匞匞匞匞匞匞匞匞匞匞匞恮恮匞匞><div>鬭gs??03022???侘;?塐兦兦?octyp枅儳儳024560儳儳儰!価html凎凎凎凎凎凂ume傝obj挩?嚪364?????O?蚾del (DOM)澵d胊nvas効昰??6967???Us?區?refere徚燗c?錶e?﹛JavaScript兿兿兿內86741兿兿內Expor?冑Imag揋傁傁嵮092η傁偸Communic槇栵?苚rms壱嗁夨僩僩策543?僩策策策策????83擥??Dynam哷lly胷e啠?Audio艑穼穬嚂7滸??晎c債e倻( )韊thod厙垙垙厙垙垙垙垙垙垙?垙??垙垙垙垙垙垙垙シ剧堊堊堉get偺ById堖呑棌棌呑棌棌棌棌垷傁棌棌傁棌棌棌棌棌棌?????坾u??孆唎唎?僕僕廜喿喿?啅啅">獉玤玤),峬?哋?2822哋哋?偋??審吙部厀厀哺ra棏d鋜op,鉲ick-€€-€蕍ol儤髄淗r劏ntrol呑呍91223呑呑拏倴D倯V倱S倰単昈傁側偢1?傁犼勭勦functionality偳????w櫴渙圥侌ex?勭峾5669ハ勭峿偙扨欚()苿鼊讎梻窅 443?偡偛?耡sic?侽侽侸724Э侽Шisplay偦on灧s堷th?埫)???儀52524??儀Resiz僶僪Pai婐o儻啛???591嫍?セp唫Par崰f僟?????9幚??????????8503???Step 4:膵袀畤偀偀倹411933偀偀廰俋?俻厈Window偗偗偗既2258媤偗枷is鋻S嶺like垯厳傦傦傢7798炏傦厳厯s??瀲瑆炏炏炈c崝part飂閙?媭€卆ge鬿胊nvas, Copying衋rt飂醤蒻倓the偆<€g鑕ight="4pt"鱥dth="0€`>displa僐i傶on??厇47240??厁D侴匳俋匴儼th鋜aw€?)呥呥呥呥呥呥呟俙儌鰅deo厙厔72258?厙厑V仚閟鋮薳d靑ke呴圔匃匃匃匃匃匃匃姸for騩tati埄rans€恗€z吳婨85036吳吳吚Step 4:膫鴬騾w厀厀厀厀厀厀厀卶€Xdow勏勌411933勏勏??劇忹W?勥勥勥勥勥勥勥側puzzle餴eces妸徍€膮o忰77981卭卭卭卝screen???????Hello護rld餽ogram (example)匃勽05669旂匃勸T劙嚤S勔()苪nc慪???????resiz廏湴it?僷擮?2524???R俔焴Paint欯??厽?厽厽厽厺us?ll餫姞eterみ匴9姁匴匴猈猈猈匫匫匫匫p???抅API効?9522檹効?g???/p冿冿樼?????????倵倲201719倵倵倫What鈥檚蝒xt俉俉俉勧874?俉?Basic襡ctang熰Shap偡偡偍10238?偡偟磩S琾俹俹俹俲632捪俹俰U斱Paths?re倫蘨ne?偳偳偮586偳偳偭E〕s昳More羋vanc氊傖內????1591婘??倴咇蚭thod叝倵倵倯簣3倵倵倯Bezier胾rv?俉俉係6娎俉俉??Clipp?Reg?偪偪偦3073忂偪?m丂it棌棌偡偡偡3030?偡偡偡偡偡偡偡偘86?偡?i??Trans穲ma?傋傋傋傃6276傋傃Fill卆Obj毟s?C?sㄈd莚adient????950恛?瓣o氳卄倸咜l€儐_哶???5437???Less倶2:譭韚st 鈥渢僱e鈥潓rpo窗歈origi?c?晉€羥r螈蓘賠吷e副arou呰i?own亜厙厙厙厑5?厙厙帺ca帬??倵倵倴800?倵撿bin巠傘媞嬣僌僌僌僌懚3170僌僌呝et?瑡?懁偡偡偡偙7988偡偡攇擻?傋傋傋??傋傋??al鐐o俹俹俹1914嵡俹???└恱姺傁傁偺12姺傁傁傁傁傁傁傁偹850傁傁惵碤傇dow?n范僢傳傭

arcs刜砄砄刜砄砄砄?凒冪凣凣凣凟砽c砵剰礕礕剰礕礕凮凮凮凮凮凮処姶s”凣os=000010?媭€?389>The胊nvas觮ate<€g鑕ight="4pt"鱥dth="0€`>clipping騟gion, , T偫static餷ayer骽ip (fr僪 1)傦傦傦傝2316傦傦傤倅with?rust錸gaged?2??

(see醠so鋲ing飯癮nvas偁?倃倃倃倁cre??lines嘒嘋嘓6326嘒嘒嘆Us伾Path崐C俌e虃I嗭?偳偭586偳偳偭Examples飂蚾re羋vanc夎傖愂內???囘囘囘囕夶g?m?c?収拸139収収坓坋曪曪曪曪?僩曪僩僩曪曪曪曪傦傦曪曪傦傦曪曪曪曪嬶嬶嬶嬶嬶嬵呄僕僕d収収収収収俉俉収収収収収収収叇嫥呡?嵡嵡???嵡嵡???????graphics鎜r羢揁oids-like??厏7521??厁Need?Asset瀼勭勭p劅劅?S?en( )鎢nction凮爠0429?凮爟ncapsulYour蔭va偢ipt胦de噴?匫楋僕働噲1僕僕?厳()茀寕穫穫穫?2587偡偡偡偡偡偡偡偡2抈4単偡偙Set垈???€a僕働媿僕僕僕僎8795僕僕働Hand傍g?€驔SJSC€i傦傦傦傝802痮傦傦?lobal槝adow?偋偋偁77374嫃偋偂?坺s圸???01441232???姺姺偡偡偡5047柗偡偛Anim枔?cube??p熆熆??噞嘯榖video饀zzl熯勭?勭勭??勭?ょ????旔Guess詡燣曕勆 (e縶)?毌毌?尟尟毌匴匴匴€g匴匴匰Hello護rld餽om??ププ?プププププ棢呄呄€g呄呄吽Text羠rang婅厽厽⒖⒖厽⒖⒖⒖媑?厽?僕⒖僕僕熥€鳍竣總飩铫竣總飩铫竣總'????">竊堹?剹娤娤剹娤娤娤娤娤娤匞匞€g匞匞匘噦髢玸醤d鉮愌s吙奜奜吙奜奜奜???????t昳?l徳勶勶?勶勶勶?????????殭Button颾jec嵅BS聝╫?汫呥帛勶呥?忂忂収収収収収収>us垜匑3D儼n婭勥醋醋勥醋醋醋劎劎劆p刜刜丛ur侶夎狜perty凮廃680693凮or="b?媭€卨ue">Basic萒ML5謎deo蒻plementation, a侭objects刼刼刼刼刼刼刼刼刵刉劮劮劮劦v壀劮劮劚680693劮劮師嬬師師勭傦師師傦師師?偀?噟p????size€鑰xb>E佮俖?侘8侘侒e嘓ng?堩48805???E仮厙???134???蒼 (Tak€YOff)偀偀偀倷951扥偀偀蟯t (Land€ithe觝ip傋傋傋傃58671傋傋傋卭卭偀偀偀偀偀偀偀偀偀偀偀姛偀偀偀偀偀偀偀偀偀偀偀偀偀昈??昈揰揫閚?塤塤?????喦偀喦偀偀偀偀偀??€g???俙out?曌曌??曌曌曌劮傋夌夌傋傋嘜嘜偀嘜嘜嘜嘜嘜嘓Rob衑nner鈥檚鍍Kequs醤d椹焵爮汝Query?峯峯??????﹚呥呥?last?lis匶剋則5290跋剋疤ll哖terac嘢喐phy眡?樝刜刜刜刏it垙垘3560???Grav仺俙th耾unce媧Applied計屡傼勄?僿孂279?僿僸倀儸,傳咃冮€糉ri埡儫儫儫?儫儫???旓娍娍姼a?堹g塪?f勪鬿鈮箳ab巰匃垙垙匃垙垙垙垙垙垙唚垙儫垙儫儫垙?棢澘堊堊堊">坢堃?懰墪s厸斍?斍斍?斍斍?斍塐斍啅啅?咷咷>ElectroServer 5??152828玱??Multiplay佖勔c吅傔傏?嵎僕僎7嵗僕僕働This蓅蕌st畟Tip飂€ZIce?師???30210???Inst曫?吙吀偗偗偗偐165睏偗栻tart?s倗倗倗倖280?倗?彂匃r醖mtool傁傁傁偵547槯傁偼JavaScript罰I???倅60嚽?倊B?c羠chit厫ure峺a訑癳t-?懐灟儣儣儝灎?儣儣儣儣an墴儫儫儫儫優42059儫儫儤Cre?庤a胔a墾偳?扜僟僟僟156243僟僟僟扗c僫f爤僎al熯傜傜??傜傜▂椑b金h哰conn吀?????5260疧????ality, Creating鬶e鉮at鎢nctionalityadm懜tool劅劃32800劅劅剼e??醾V刧刣凮劘劘劘劖basic醨chit?ure噏an釛w?厏805櫉?厎B偛A偡偟咷咥殫n哋哋哋哋哋哋哋哋儨s伻et-s壞儑啩啨605栕啩啩啩?a觾啛啛啛啛啛啛啛啛啒cνΚ咃n毆??4205???俙a俻匞俿屪??僟瑖瑖僟僟瑖瑖瑖傜傜?2瑘傜傜傕Establish哰conn吀?to???????????傜傜傜傜傜傜傜傜傜傜傜傜嬤傜傜傜傜傜傜傜傜?傜傜嬊?????????????????????澴澴澴澴澴疿d?bo嬸€Jall?寵厀嫹嫹厀垪垪垪垪垪厳厳厳厳厳厳懛懘厪??厪??俹?匫嵾傜?傜傜傜傜傜傜??????eⅦ圚㈢㈢媠叿ェェ叿ェェ偳偳??堬?嬒?堬堬堬堬傜堬堬堬堬堬堦fu?code鎜r枔demo????????圤卭?????????坥坥€g坥坥坘in帹ll媥勭勫3021恎勭勧I伷噺噺剰剰剰剰剰剮JavaScrip矩PI劘劗5475劘劘墛e蕚???????剒o?uses嬓剋??剋???????€g??匊?r檉s灖?墮165朑??S??劘劘劘劘劘劘劒tx?applic?閚莖ogle胔rome卂┋90庽卂妭偧匭A偡偡偞?洤?0157?媭€?592>Further舩p€萢tions鱥th舕ectroServer?tank, 梥?c?l?a?叿挴挴叿弿挴挴挴挴咃咃?収収>e?of鏰me,莾PBlast(塻(exa??︴110326叝叝叏Level錸徬擾剋剋剋?佽グ?udio兿塼853014兿兿內帎or琾t埲佽艂Z??????摐??125?????刜燂嗺怷嗺傦嗺嗺P樁偪偪偪009墭7瘡偪偣Sli璻濜y蒼d碼o笩壇??夨夢嵅颾j????凮?????偪??偪???偀櫁?嘜嘜嘜焲嘜剹?剹剹????勭勭瀢劅劅曅emy劀 (Micro詀nk蚢ze?濷濵34151w匫匢The艂﹦棎w凮凮凩EsO??兎儽555668兎兎儼Cre?崘t凐chat鎢nc埳alit刧恛傜傖7395啑傜傖Fur偘r舩p€葖rsEl匬roServe愾噰惎惎囅囂use?bo厛?ball禒ppl摫僪厀厀厀厀厀厀厀厀厀厀憞憞厀厀>eval( )婠勶?22269?勶勯丠lText碕s刪ke€y刼夁???棸鑲 ler慜?039€(????Canvas 鈥淗ello護rld!鈥潉W慜傜偢755傜椶initG櫚()茐偋偋偋偂664偋偉噦KeyPressed傔傔傔傔╆6741傔傔傌?┼摍坾to尷⒗age傁傁傁偵偫?傁傁傁傁傁傁傁扂4081?傁et偤??欛c僇App()???2869???瘔/Pa湣Push聈tton:萯t詄st衞i伕Revisited僶僶僶僫951僶僶僫Loop/No虁@詏ggle儗偪偪偪偢1885╣偪偣Volume蠖 燖℅℅偳偳偯55偳偳偯Mo埞c€豶ol俉潫?濈濈濄(see醠so?s峹伩????ad尖for雃yup恷?Gu?詸楲慞囪? (exa筧禣po?媭€卻=0000075534>The閚itGame()苪nction<€g鑕ight="4pt"鱥dth="0€`>createImageDataPressed( )鎯 (example), A衦oblem鱥th舦ents醤d舖bedded謎deo閚萒ML5<€g鑕ight="4pt"傕dth="0€`>h傝ler鎜r雃yup鍍╋f鬳xtBox??209259???Communicating耬twee卌苚rm唊the胊nvas???????僘?v堘Size€qm勦ntrol??69609???Dynam?lly髝8傖a傆卭卭卭卭卭卭卭倝媁t嶻Guess詧癓ett宲game吙吋075534吙吙吀侀initG佇()苪nction厽厽厽厽厽厽厽厵mouse厸s叀T勑觮amp厐appl彚on吙吋442800吙吙棄dd傦傡to?c??????????帤饀zz咹嫃呑078129桹呑態ete?偽in嵢a嫪?????????rang偘柮s銆葊€啟咓咊51959?咓咇Multip嚾B桯s耾憖?:a臉/襡s殣d潖唃唃唃唃唃唃">importa劆audio寣咓咊851808咓咓咅I?A?〤勥勥勥勥勥勥勠?vity?憻憳堐儌play棸孍咃呿94916咃咃呰S?媃Up??P倱Va?哋哋哋€g哋哋咾Ⅷboard?戔?呎ship叿叧1052952叿叿俉吂厡S侶堄€㎏兡??僕僓605?僕僐Ev?丙咢餽ㄠ埀埀埀埀埀埀埀垼input璺菈6?pan濌zoom吙22783吙吙吀囧???????厇listen锻擪button惬Xk????1120??厃L??嶉傯媷??????">s???r??ョ呥呩674?呥?x燅傖眽嵏Image吙吙吙吙吙吙吅姠,鉹e?us€1curr匑Ti?ro窐ty叝眪3891稯叝叐U侭阿俫袀d?C儥e謳梿w欸儢4833?儣潚堧們T毙s嬭m?s:襬t€Z?墢墡p塆塆塁嵚WindowLoaded( )娌0偐匫巺3912欁匫匢HTML5巈鈥淗ello護rld!鈥潊?p勏勏勏xplos?(Micr囙ank蚢z?)勶344935勶勶勮T崘搱倻刧刧刧刧刧別ⅸpa暩cle勑濔G尭Bla?r勏勏勅〡989勏勏?傜傜?懅偗偐87847偗偗偍劎r詠ǒee偀偀倶2102絞偀倸Render楉?偋偋偋憄194ワ偋偂Object餺o磦妎吺Exπ攼?峯桏嵎嵎嵆??叕敇bitmap?奧奧?奧奧奧劅泈?勭勭勭勧勏猀?嚪?岟岟?岟岟岟匞匞匞匞匞匞匒┗o岹€x勛??勛?佺?噖?匫匫???溞?瑋瞘瞐i瞐厙炊588?厙捶捶鬿醤 ?媭€匢mageextensions,舕ectroServer醦plicat€?a鎖lepos=0001540738><傾鉶lor="blue">E偊刼刼刼刼刲倇size€鑰xb>F<€g鑕ight="4pt"鱥dth="0€`>linear鑟rizontal鐁adients, L侽侽侹偳偱77485偳偳偫Applying醾鐐玺o€萩omplex骽ape僿價Flash兿堳66184兿兿堲2D?凒t€楥urr槓觮ate?喿?禭0997???Canvas?mpare傪o茀9偗嗊曪?pt"?媭€咓idth="0pt">comparison鬿胊nvas, 仯脗Jed?Flash<€g鑕ight="4剎勥勜retain倫mode鋜awing髐rface??0066184???The 2D?ntext醤?€楥urre亁State厙厙厗p???flip-book偢imation勶勳361251勶勶勮Simpl刪ell-Bas噲Spri埿A倕勥勡p剹剹剹?property,儉嚦object庽壷5414勶勶壵嬞Screen()苪nc劎劍偡寙3860偡偡寚寚寚寚???0082587??吙吙吙偡奭廜姧姧姡sett擓for葝Po護rld (exa嶚)?娍娍???????€g匫匫匫匢in莡ess詢XL€╡r鏰me厳厳姉姉厳厳厳厳厳厳厳?匫?攐?204598???橉ic詰橠isplay冿??倄16895??倄丠l俲?stroke€y偋偋偋偁3▔偋偋瀒孅杫傗F?倵倵倵倫7271?倵嬍??玬櫴偳偳偳匯44圇偳偭勆觟z猉F獔讔J,僙Sty媧s????286崡??H俻l垇僾?儕?嗏Arranger僌僌僌僅44373僌僌唘C€﹤??????????????????5101???皺?壦Alignm?偳偳偳偫6277?偳挒嫿謊rs濦 2.0偡偡偡卹61拸偡偙侤tical釁/???25482?戁oriz€葌弬弬弬弬?77?倧攇溼圌b娍d????娍??娍娍娍偡偡偡偡偡偡偡偡偡偡偡⒎偡偡⒎⒎⒎偳?畯畯畫姉姉n効棗棗効棗侽棗効?偳?偳偳???偡偡偡棗偡棗棗????棗?棗棗倧倧倧倧棗倧棗棗棗????娍娍?娍娍娍偡??抩抩抩抦h呥呥呚捒匞圤圤匞圤倃圤倵厽圤?圤??圤圤圤偡圤圤圤圤圤>h惎囷勭捒捒勭捒?噊効効効効効効v椷劘劘欉劘劘欉?劅劅劅€g劅劅剾??紾紾??紾凎忳?????????????.傿prop堾y剋剈1689娺剋剄丠lstroke€y<€g鑕ight="4pt"鱥dth="0€`>context.f€@髏yle,骵tting, <乥color="blue">Basic詡`膇splayc橆勥夛夛勥夛夛???????s??塛塛?塛塛塛塛匫匫匫匫匫匫?﹣3,?,醤dav厰盻?懽厽懽懽懽懽厪厪厪厪厪厪厜籎劎??劎????倗??倗???偀偀偀?偀????????硍硍硍倧倧倧?倧倧倧倧倧倧倧?倧倧?????????夅?曄剰?剰???刜刜刜刜刜刜惐刜刜?刜刜?媷???????崺刉徔扜刉徔?徔凣凣凣凣凣凣g, Converting謎deo苚rmats<€g鑕ight="4pt"鱥dth="0€`>web鈘owsers鈥欝upport飂, f伡??2354???B?c萒ML衋ge兿嬜倗個4道倗倗搄ncaps嫄t埍Your珿t脡桄or胊nva??擾擾噂嘾e??倗潾c€笀G吳吳吳吳偀吳吳吳吳吳?歡????c攔飊嬎p嬋厳嵶嵶厳嵶嵶嵶勄勄栫???size€鑰xb>G佮俖撟侌8侘侒綉Man?r罰I (El榅roSe?r)喎奎540322喎喎啺Zone嵷room€8?g傴嫍慦劅啅劃仮兿渘姁く兿兩Anoth?Exa:莡湊詪0Letter?樋傳傪94236傳傳傪What鈥檚蝒x?俉俉侶3941畐俉re?a?id飂詠鄩偗偗嫲00827?偗偑欫嶲扭@ntial偀t><?媭€?a>, What鈥檚蝒xtWhat鈥檚蝒xt, anim吀垬on鉧nvas勭勪025319勭勭勦A?n剨C?剣噰偋偂4844偋偋噦e袏薙h嘪Sta?Change傋傋傋傄6035傋傋忨am夞m傂Loop俫俫俫俛7396俫俫????寙宱屜屜屜屚g匭t匯l匬勥??勥???刼刼€g刼刼刱?s?s?c? (exa●)?夌夌?夌夌夌夌??????a減y敊transfor?溠to鐁aphic?厗3092敆厙?倳T倵倳媕G偧呯挆??39烥?埖欫垑ck俹圤圤圤圤圤圝basic鐓 fr€0work劅劃64543劅劅嚿聜"?F?勏?偀倶82281偀偀倶PutIt羖l詏ge±r偋偋偋?98砏偋壵?扠Machine偀偀偀倶7320ο偀偀偀偀偀偀偀4笀偀偀倻Upd倄/Rend楄(Repeat)脃cl傦傦傦傟8戰傦傦傦傦傦傦傦傦傦61傦傢忩R?Count?Obj?衦ototyp???惙??惙惙惙偋?????叿叴o叧p叺?圤圤?圤偀圤圤圤圤?圤圤?圤圤圤偋圤圤圤圤圤">m?劅汍汍劅嚡榑榑剹?偀汍偀偀偀偀偀??€g???u?r?r?c??漡漡?????卂圇傦漡傦傦傦傦傦傦圙圙€g圙圙c萒ML5劜鎜r??1230???Oure俓F侌勭勭勭勭勭勭勨cr嘓?dynam?t?sheet醫驓爄m峸卽31261厀厀卶C偉a膫碩偙S偟R偝咃嵎??147????????埛????僉嵃韔b?devices丂th衕oneGap??41593???Go偂M倐!???????倝simp??-摾ed鐟悇邐?576槒勥勝A觽3妷-摾?摿?崌偗噥?惎偗偐What鈥檚蝒xt俉俉俉匄7俙0俉俉侾勳Homegrown罥蟰erview傁傁傁?傁傁??専専専ote ?媭€卙eight="4pt"鱥dth="0€`>Micro詀nk蚢ze鉶mplet€Ide, Si佡萶megrown罥蟰erview傁偺偢922傁傁側What鈥檚蝒xt俉俁<€g鑷棁棁慸esign,羢teroids-like鏰m噰劷015609効効劯Our莵皠贒偛勶勶勶勶勶勶勳velopme儉using萒ML5胊nvas??09551??壓y?s閚?????????Geo耹a壻耡sic (exa徚)勶勴8263勶勶勯侽?觮ructure?慱偪偢9482導偪偤俌application鎢nc€Is偪偪偪偣507偪偪厀卼lobal叓Variable傳傳傳傪峇26傳傳傳坓Algorithm偳偳偳偮8084偳偳偫L抜薾ob侴侴侴侭9703侴侴侳and勼End???倄13167??倄Award栙the衛ay嚫Extra觝ip卂傜傜傗475傜傜傗徹y傖Collis?D?傁傁傁側2264?傁偵T卄岹楉Full觨urc暱傳傳傫7663?傳傫R浶蟗j匟衦ototyp倵倵倵倵倵倵倵倵倵倵倵倱804?倵??俉?岼?峀d峂勄彑彑勄彑彑彑彑??????rrays飂靜gl鋓sp暊飱猬煔W焀単焀焀焀焀卂卂卂卂卂卂毥匇??殬s殭????????匫匫匫匫匫匫">f櫓s櫔冟d环淥淥匃淥淥淥淥??傳櫩傳傳櫩櫩櫩嚄嚄嚄嚄嚄嚁g廦s?剹筄筄剹憻憻筄筄嘜偪筄偪偪筄筄筄偪噖噖噖噖噖噐?嚜v?匃粐粐匃嚡粐粐粐???????l鼎匓end?抚抚?抚抚抚劅劅劅劅劅劅倸k統刧縂縂刧刧縂??????"?︺饦 ???????勏昽倵尺倵尺尺尺??€g???o﹂mob凐凣凞41593ㄗ凣敽佉M佉!凣凚 (see耂聛 o挷;衕oneGap)?????graphπnsform?愖欶3618欸厪?G俆T俉烥寳傁偺42€(傁傁?lpha芶盙盋?傁?囘囘囘囘禨傟f傠秚禔 (example)卭卭卭卭卭卭卭卭卭卭卭卭卭卬?妧匫匤from鉫n?叝叝嵾嵾叝嵾嵾嵾嵾叝匫叝叝"4p?媭€卼"鱥dth="0pt">graphics,鋜awing€餿h餫th€?a鎖lepos=0001017265>Game莻|:膫h袀y傳傰25319傳傳傪Animat倝on鬶e胊nva偋偋偋厭913偋偋偂Us倎勨鬿厭傏哘鈥檚蚢in胔aracter僩僢<€g鑕ight="4?媑媊?g?m?c?咃咃咃咃咃咃咃咃咃咃咃厪咃咃咃呿Guess詢Let倛 (example)吳吤0070027吳吳嶫o?r艁?莻蟼蕝W師傳傪94236傳傳傪What囼Next俉嚙嚙嚙嚙嚙嚔multiplay厐applic?ons柅ElectroServ?5匫嶞52828?匫匢M傔羵邆邆?5哋垷僕僎7488僕僕働This蓅蕌st?Tip飂€ZIceberg?塐塐塐塐塐塉obj厛餳ys熻醤d€ 潑on厀柦4593厀厀?O倇P?羵}単坓傳傪64543傳傳撻耡倶?苧€0work偀偀偀厜6591偀偀倶How蟯r袔cSh婐Will蚾ve傋傋傋傂52952傋傋傂C€╮oll烝峣?p?€㎏eyboard僕僕僕僕僕僕僕僕僕僕僕僕僕?056墂僕僎Evalu瓹key餽熰e?偀偀倹85∣偀憭iv吳吳a?ximum謊?ity???????c?饍[s?唜堹咃嬜嬜咃嬜嬜?嬜嬜嬜?僕嬜僕僕嬜嬜嬜埀埀埀埀埀垿h楕坓叐椮m椮?匞殗殗匞殗殗殗殗?傋媑媑傋媑媑媑媑媑媑埾埾€g埾埾变擊v擊鎜r塛ip呯嶗?呯?吙???吳吳吳吳吳吳">?畵??99???砇e??刼刼刼刼刼刼刯t冐-based錸vironme內奩background?le婸鐁aph睜呄吽0394愷呄呄愌re樣a莚id格T佮橑??p吙吙吇Geo耹ast圥硧榦勏姅8263榦勏徍侽担Structur榃榃偪偦8?偪?applic孩髏at?偋偋偅6?偋偋偋偋func€I偪偪偪挗507偪偪??lobal圞Variab?傳傳晽徬傳晽晽晽倃倃俻100926倃倃単峸Algor⑿m?偳偳偮?偳偰R摠????42???Saucer????5688???Miss槸???698???xplos惐潽partic偗偗偗偓8084偗偗偍L熩Knob侴侴侴侭970?侴侴劻嶒En???倅13167??倄Aw睝?Extra卂傜傜傗475傜傜傗汬y傖C秹妷膃t?€P傁傁filepos=00?媭€?1122643>The莈o耹aster耡sic苪ll觨urce, applying傫lision鋏t?€P?剗14757??剎A俇C俈D俇匃勽勥????rrays飂靜gical鋓splay飱歴単卐00926単単卄懴r莂me羖gorithms卂専偳偭28敮偳?????42???Saucer????5688???Miss乣????6989???Explo?s醤d餫rtic偗巁?巁巁巁嶿e傁傁側?????????????匉m夓?嫙嫙?嫙嫙?????凗r?冪摨摨冪摨兿兿兿€g兿兿兯s撍冞晈晈冞晈晈冿儚冿冿冿烚ward♂灆湢ra骽ip剰?316?剰?侻t傍P俴E俲S俰匫匫匫匫匫匫匤?v嚑?f硑s硓刋de卭卪?卭??????傳硰傳傳硰硰硰?嚡????g﹒structur噰剷082631剹剹S侲効嘜偪偤?偪偧俌禔袄砳匄at淿偋偋偅610?偋偋偋廝n禦偪??€g??粭偡偞匃匃匃匃匃匃侴匃匃匃匃匃匃匃奊夿勥宱宱勥勥勥宱勄勄勄勄勄勄撀lob堪variab?劮09507墢劮撟撛係匤V倉???????level碯?end?猇970壡??L?勈End劅劅劅劅劅劅劅雗ob墂刧8084刧刧刦K伾???????畬o?嵁9295??侟?刼刼刼刼刼刼刯刐皎潉藩穭藩藩穭希_倵8?倵倵倯What鈥檚畏皞W??p喿喿営?穫擑ed (example)剰剮2068剰剰剤Combin?Bitmaps敽磹敡嘜偳偯421?偳??T仺紭ee嚄偀偀倷998?偀宻嘔r繀O€(苍??傦傦傝218686傦傦傝Add傃囅侽侽侻3妧炵侽侷P?俀s俀劎俖俖俍145憃俖俍ool俌?Innc?偗偗偒836?偗嘜閚峒榚p岎mer偀偀偀偀偀偀偀偀偀偀偀倹45837>How鬶e髏ep鬷mer鱫rks, add傫sound勛噠18686勛勛勑A佊S佈凎?侽侶30683侽侽侶Play?墂哅?啑啑啑啑啌?剋剉8365剋剋喛in嫄S?T?劮?偀愊偀偀愊愊愊偗嘷嘷嘷嘷嘷comple?壺rce內de勥勥勥勥勥勥勥勥噰偗暓偗偗暓暓暓暓暓??€g???pool傾object崰stances?彇145????O?I???偗?偗偗???嚄?嚄嚄嚄嚂render嚔嵏r鏰me圏嚪?19989???R俈?O俽G俼?圇卂卂€g卂卂匸t彊s彊勏勍84219勏勏勅Geo耹a攼r懣t??剘p???gesture (iPhone),釋觮?S聙Xo (exa歈€饏W匯46930?匴??n閮 鈥淕儧鈥潊瘨傳傪7滆0傳傳傳岏倲苪nctions咇i?x.html????850?????????怬??瑤孶f傳傳ml叿堬堬叿叿叿叿偳叿叿堬?堬??????????堬?tC仺ext( )韊tho粿Canvas炋厽厸004861簑厽厵T匑?See議倶歅?Brows€`Supports?呥??儀6345??儂偫2D脝#楬d僙Curtжat疓???656??HTML5埈?偋攐???Elem剺ById媉,鋙cu€联7匃媡7761匃匃勷Us媋?嫧refe囏紁圓c叄e冦JavaScrip?埧兿兩8674兿兿兩Ex?冮埣冐?Imag媷傁傁偫20925?傁疥ommunic?Between?苚rms?戯僩孏孏孏孊?Data?爉??43374??t勻i俌鋫`?嚐?013133硹?嚊re噑a膟namic诚枠t襲nt进?噂噂噂噂Sha?嘜嘔WebGL醦pl?囩99447卭卭卙Initializ佲拺?App()?????GLGE靑brary??52481湻??佇僶僶僶僶坿lobal鯽riable汷彎94282琖儚嚳嚫瑓game:頾鐐莻聞繍_??816恄??Preloaall醩se〡wiut僟僟僟僟?09507僟僟?o耹ast瑦G偹G啝謧鱾骰嚮噵O婳幉傁? (example)?????????阀伐€g匴匴匰i幆g觩a┄Rai檺s吽嬇u?咃憞憞咃憞ializing??媭€卙e鏰me:頾鏻obal鯽riables<€g鑕ight="4pt"鱥dth="0€`>preloading醩sets€餿hout,觩ace襛iders?, P傔all?傶哤哤哤哤哠p???侰Alpha餽operty,刞ntext颾jects呄吿063860呄呄吶T嫄2D脗$and魛楥urre亁State?厇??131192???Com丂it堎on傠anva?偡偡偘27320媷偡偙G姄圼叐T咅倵倵倵01042808倵倵倫Us?匇妱.媤?ttribu坓嵽p撶撶嵾嵼a?f?player骽ip (搃鍃ample)収収収収収収収収収収?櫹咃咃咃愝匃??匃???刧刧椷??椶抦eO椸ati拡楪楪楪卭楪卭卭楪楪楪楪呯?楪3?1??楪楪楪偡挄圤圤圠Google鈥檚?D靑brar囸刧懧524264刧刧屟??冿冿冿冿?r?垁婏囨6798旼儑儊Fill嚵Shapeɑ莻]?姺傋傃2115傋傋傂R??勂俹俹俹俰8?俹俹俬Linear俹俹俹俹俬8417俹勛俹俹俹俹勔63歘俹勛鑟riz?偳偳偳偳偮7748?偳偭Apply氮傜傜鬿€萩暼lex嶈僿僿僿僸823?僿僸V滰ic?咃???俻挿?倅Diagon????崗??崗俹俹俹俹斍俹俹俹俹俹俹狽84243俹俹め櫙倎?P?ern傦傦傦傟543棷傦掃傋璚偡偡偡偘89?偡?l偡偡偡偡偡029627単偡偙H?偳圙ns閚?羠ranger僶僶僶003054爓僶僯WЯ,权b,訒萫,八oDataURL()襡vi磯d僩猈剁獰獰獩唨?勥?勥崸掲嘒俹椙俹俹峗俹俹俹俹俹俹偳偳偳偳偳傜僿僿僿僿咃??????text€坱h, T伣莚adients醤d衋tterns傦傤5436傦傦傝Linear傋傄儜偡偡偡偙8964偡偡偘R俻al偡偡偡偡偡029627単偡偙H?ling偳圙園閚?羠ranger僶僶僶0030541僶僶僫W嵣,萫ight,觕ale,儌toDataURL()襡visited僩僢<€g鑲?"4悎愶愯h嗧?? (example)?墂墂?墂墂墂墂僄墂墂僶墂墂僶墂墂墂墂墂墂墂墂墂墂墂塼喨暪g嗇厀棷棷厀棷棷??勄勄€g勄勄劽倯椚勄勄櫩櫩勄櫩櫩勄勄勄勂p??剓凘vity,骾mulat恱剹剶621107剹剹剱Si撗剳侰Elastic€b勯Friction?戯??9045????a耾unce傁傁傁傁傁傁傁傁傁傁傁傁063560瑹傁偵倵倫們坺Applied觾藟w僿僿僿僿僿僿僿僿僿僿僿僿僿僿僷4279?僿壇彑傳徸冭€紣儫?p檹檹??啟b啩a啢晥債e兎?墴墴?墴墴墴墴啹墴墴僿墴墴僿墴墴傳咃墴墴儫灟夌夌夌夅??厽炏炏厽厽厽単炏?埱????????圇嚄圇圇圇圇圇傦抂?????????傁??傁????慓?埊埊疓坓坓Guess詇e蘣均鏰me (exa?)叿叴07碢愡叿叡Anoth?E侒:莻鱾騾7埀傳傪942荤傳傭What鈥檚味莻W俉匘1679俉俉侾剦鈥渼鲃?鈥澢圌Variables????501愶??init倷()茙(樓偋偋偉66搹偋偊ev?KeyPr咗ed傔傔傔傔傎8258嶏傔傒drawScreen偡偡偡偡偛588朞偡偙Exporting胊nvas鬿朒蒻ag?傁傁偸8348傁傁厊Final崨Cod倗倗倗掲倗倗掲掲俉揣⒆歸歸>?( )鎶 凮孏孏凮喯侴孏孏??€g匃匃勼懴懰????????匞匞匞匞匞匞匞匑懄c懅n閼O擏擏匫擏擏擏擏??????f擈c撊劘曌曌劘夨曌曌刧, <?媭€卆鎖lepos=0000094236>What鈥檚蝒xt<€g鑕ight="4pt"鱥dth="0€`>initGame( )鎢nction, <剣剛75015剣剣剙The閭5)苽,勛勛勛勛勛勛勔variables?剘1679??剕鈥淕uess詟hLetter鈥澢?謧絽??p勄勄劽兓size€鑰xb>H佮俖p侘="8侘侒H.264鰅deo髏andard??670802????+ $$$ = .mp4哤員???<head>鬭g?placeme僷of蔭vaScript幚勭嬳3621勭勭斻ere膐es?t莖醤d議y?卂卂卂卂匼€酸ttribute, 呴canvas咜el吅??4540晽??Adding脗:鬿魬8HTML衋ge??????壚t渶凮凩215297凮凮瀄醔out?俖€q倅墖刼刼刼刼?property,?object歐?67654匃匃歍埍5?O?劅劅劅劅劀渀Hello護rld!淎匄gram (example)勄?810?勄?劎s焂?傶??傜嚘171嚙傜傖Debugg愸with胦nsole.log偪嚳嚳嚳孷x顄mber?r倛,鮯偭搙set剳l凅??16678???S?Basic苽1C??????i摖es慲oi??783653???Crea???-style乹lis?鋏t憖癵専僿價90286嚄僿僸Play/Pause衭sh聈tton:葍鑄冮P冮襡v儼ted僶圤垪垪垞吳吰?璡puzz嗋g?咓塯塯咓塯塯塯塯儳塯?纯骨咷咷咷俆儤for醬di咗?擯€9/p奪猵?唃學學唃學學學學學學哶哶???horiz伆al醠ign赐?厳025482?厳俉俈劮?刼刼刼?linear鐁adi侶?澴863夨刧刟L侒倗侽劅?偳偫7748秝偳秗pply弝a傜傜a仩獳x骽ap?僿僿價259?僿?僕僕?偳偳偮42偳??傜?狪ok????5680?????塷塷塷憌??懣懡a僊倶倧倛厙厙厙厙厙厙厙厙厙厙厙洤?呄呄呄呄礖媻桮厽嶹厽厽厽厽厽嶹単単単単単単卆├multi國颾jЦ単単杦単杦杦匞杦勶勶ワ劎劎HTML??02221???The緗佱衋g堊?倗倐9761倗倗個俫譭譱ll窄樁`This耾ok????440???dd廀Canvas巵t?呥傔檹巊壡壡撁偡偝a饌x勥勥勥勥勥?勥勥勥師搰???>b娨効効?効効?刧刧?媭€?/blockquote><€g鑕ight="4pt"鱥dth="0€`>basic鬭gs鮯ed閚鬶is鈕ok, B俁HTML譭譱ll誷e倝T倝B倛<?媭€?font><€g鑕ight="4pt"鱥dth="0€`>creating鋣namically, <傾鉶lor="blue">D佅脗uan羥dio舕eme伆in蔭vaScriptSpace襛iders鏰me収婟445?収婝nitializ濆?:毩global鯽riable?卂卂€g卂卂匸嵱國?pool単卐76003単単恄怸3?沗ǔP倛???p勭勭勩HTMLMedia?僪f娻??67876???Bas?俼5謱爋蒻p倹呉?Ⅶ傦00721傦傦傝偪?i屒嚍p??嚐?????????嬒嬒??嬐俠嬐o躲劎嬁嬁劎嬁嬁嬁嬁匃嬁傦68023灴傦傦傦傦傦傦傦傦230孔傦傦傦傦傦傦傦峖1870呑傦傞倠mustill鈋錷bed┥淗児???恎??恎恎恎偀偀倹3796収偀収??Exa埄傁梍梍梍??can否Typ奯奯効効奯奯奯奯?勭匞匞匞匛勊楃??勛????劮劮劮劮劮劮勏湳勏勏勏勏勏勏?傦櫱傦傦傦傦傦傦傦傦柨柨傦柨柨柨偀偀偀柨偀?柨柨柨傁?╃屜屜屓僑size€鑰xb>I佮俖橉侘8侘侒id醫tribut?<?劯>鍔[??044902???Add紒嗶to嘼奱衋ge?濓?嗭匌f:侙n沺at刡擏嫀85099刼刼刪Cre怘剎hit鬳澙po鲸-style乹lis慇鋏t硛憲????Im啝祑勥塁55塒勥勥勜T埜drawScreen()苪nction?媭€?/font>, Image耡sicssrc餽operty凎凈055449凎凎凁The鋜awScreen()苪nction刜刓凣>啽,啣孋?劆觮amジ (ex€Hle)?夨夨?夨夨夨夨呑呑?厪厪?壸猈猈刜撉猈猈猈?偡偛6656镑偡偟HTML5枼O槩偋偋偋偁85883偋偋偁Export焿偆to潹奀傁傁傁0019147傁傁偵FilゲShapes牻傁傁傁偵37?傁傁傁傁傁傁傁偺5490傁傁傁傁傁傁傁傁?1686坃傁嵟to敱URL恏Method飂籁巊僄僄僃4141僄僄潌棎n偳呄倧倧殤63607倧倧倛What鈥檚萎俉俉勡嵂俉翱Basic劅侽侽侸5421侽侽侶Prelo窣岪噞倃倃倃俼724彑倃俼Display俼棴?尯?瀁€?)???儀5252革?儁Resiz僶笿inted洷儻????5915???Cop唫Part?僞?????6125???Si胑ll-帢咗SpriAn﹉???傹0418???hang?厃笆呚峊傁傁傁偵693傁傁偵Advanc厁呑厽傋傋傋傄3瘒傋傄Mov厤媖Acros猦嫃???傴844淕??amin垷筧hee湡偗偗偒87?偗?re嚾攌?羠r?偳偳偮7051偳偳嶜oos単??傁傁偺21漮傁偸Loop偭Through?婄偡偡偝97ぷ偡?炧厀l矾俹俹俲537峅俹怗怗怗怗????????????傷8030???ppl♀Rot恠Transfor愲僅o僕僕僕堿966塆僕僐搩撻?減傋傋傋?205?傋擈呄咮诚傁傁傁849堬傁Иtep 4:膽€媻?単偀a鎖?媭€卨epos=0000385769>Step 4:膔aw鬶e閙age, advanc榟cell-bas€X撹紒on厀瓭6693燝厀揵俔C俌B俍拒?圙傋傇34?傋崯爓羉ros悙????傴8??傷Exa皒??hee濷偗偗偒87涀偗嶇揔?羠ray偳偳偳偫705灄偳偯hoos単卄樌箃傁傁傁偵214粭傁偵晀偭Through?婄偡偡偝97偡綛raw厀l?俹俹俲5俹俹怗怗怗怗???????????????泒c嶖嵲d嵱匫??匫??????????曄暤a暠?????????劮????d挧夿勛敆敆勛敆夌敆?????剕l櫶t櫷櫓劎劎涚劎涚涚涚搹勶勶€g勶勶勲m枺?杸a杻朿?涍涍?樼樼樼樼卂涍?涍?????anvas?媭€?/u><€g鑕ight="4pt"鱥dth="0€`>tile骽eet, <傫鉶lor="blue">Examining鬶e詡1S?剰剰剰剰剰剰剨apply偭rotation魊ansform€zs鬿卂匽80303卂卂匵A倳R倳T倵倲醤蒻age??僕僓7966埊僕僐ni倷僗a?ed傋傋傋?2058傋傋傂Canvas偗咰Basics傁傁傁偵849堬傁偵Step 4:膔aw嶼?単偀偀倹5769偀偀偀偀偀偀偀??偀偀偀偀偀偀偀389026偀偀峠峠峠傋傋傋傄90641傋傋傋傋傋傋傋傋傆1232傋傋傋傋傋傋傋傋曌傋傋傋傋傋傋灖灖灖灖灖灔傱瀎傕??嵂嵂???俖??傋嵂嵂傋傋傋傋傋傋?????comb﹕Φ,儝€[d韔vemen?吙悧吙吙吙吙吙吙垙悧悧傋傋傋傋傋傋垙垙垙垙垙>€ycod悷悷匞犨犨犨?囘偀偀偀偀偀偀嚙嚙嚙嚙嚙籡嘷嘫b勛??勛????嚐傁嚐嚐傁嚐嚐嚐偀嚐嚐嚐嚐嚐熑udioc?rols.p抙偮鎜r醼狃layer卭卨88545?卭?re斢Custom誷er脙4飹▎塠????????飂倢罰I厀娸4432?厀卶檴???????py囇fr嚴one銊硉o?o嚴奯勴4582?勶奫倗m蟼€?個A們厽捒?債7974???????垪垪垪垪垪垪part???僛厙峞55915厙厙厙袀lan倎挴収収収収収収叄?grid傾t?卂410卂卂?G?T?勶崌偗偐3270偗偗偍Dis湁絉噚map殅揅傦傦傦厭70揼傦傟ef?矆仩蚢p倗倗倗倎655掞倗?倗個?th€rd傔傔傔暲0177?傔圙團傃⒖圙傦傦??傦傦?傦?傦??????捁?埧卂??卂????匫匫匫匫匫匫>d悤匨匃拸拸匃拸拸拸劅劅劅劅劅劅d岋夦岎層????廏廏??単?傦?傦傦isplay?媭€卛ng鬶e韆p飊€Zcanvas<€g鑕ight="4pt"鱥dth="0€`>display?image飂傑僊screen, <冡鉶lor="blue">T伬drawS佲()苪nction厙厙厙厙厙厙厙厓?C匰with儌I?( )厀卼347240厀厀卲D偋an蓤;囯??e()???????export儜媗to冡?咃媇85883咃咃呰E俈卍係匤???????傟?toDataURL?韊thod憗兯吙嫢1686吙吙??)蛡v嬁蟗ject???????劑鎜rmat?婎66562???HTML5剹剹剹剹剹剹剹剸mov?cubic耬zier€hrve餫th??605336???M倇徔?匄俫俥13447俫俫俙Crea彃a脛鐁€h勧Loop?圇圇圇圇圇囼pixelnipul僪oⅦ?43?尫??P?M?⒖嚄?倆7711??倄Applic侭詰YStamper偗嘒嘒嘒嘒嘒嘊俹?a? (ex€╨e匫匫匫匫匫傜匫匫匫€g匫匫寣reload彴剰┪542剰剰孞伷撍?刉刉€g刉刉凷resizh?珯封o〥??52524???R倁Painted倝叿叿叿叿叿叿叢si巕鉫ll-bas?spri亹?(?吳36125娗吳吜S們C倎B倐S們A倕厽棌?債0418???hang姾?扟坸?傁坓坓坓坓坓坆us媻s剏l崌勍19147隘勏勆F仒侎Shape淮Pattern?嚄傁偸37瓽傁傁傁傁傁傁傁偺5490傁傁傁傁傁傁奯奯€g奯奯奯g頾-rep,騹B-x,捜d€uy髏r丠媑呑呑呑呑呑呑呑呑呑呑呑呑呑呌?匋匃崗崗匃匃匃匃匃匃匃匃匃匃匂zoom牫d籬nn匃匃40988匃匃勸Z?劙?伙匃?傁偵3?傁偸Keyboard閚put俖俖俖俋10709俖俖綠続Window鎜r煉?傜傜傛626?傜嚖倃倃倃倃倃倃倃倃倃倃倃倃18倃倃屼屚偀偀偀偀倶2161奯偀磺:脕roll?僎儥???徔??徔徔俖?????c?桒?棛釂G??????傳?????????俖??????楁勮draw€a€(??ge????????厽圇傜?傜??倃倃<€g鑕ight="4pt"鱥dth="0€`>panning鬶e閙age, P?蓙?/u>J厫?侘侌8侘侒剧厳筎02198槸厳trodu夲夞泈as?掞傁側34708傁傁側剰曕d倵倵倵倵3537榦倵倵倰Fr毃work爯nd蘨bra?媭€卹ies, Where膐es蔭vaScript莖醤d議y?傳傳傳傫8483傳傳傪HTML5胊nvas 鈥淗ello護rld!鈥潅鐐鐐鐐?1622傜傜傕Encapsulating賝ur?t胦de鎜r冹僕僕僕僎6967僕僕働Us?docume€鴗o騟f壐nce鬶e銍ele?in凮t兿兿兿007€3岋兿兩Preload凂Video傔傔傔傔傒9061傔傔傌A衦ob厫鱥th舦呅s彧Embedded儫?僿僿僿00867204僿僿僷Dynamically胷e崨an羥dio艍蠁鲀噧噧?149418崡儑儊?靑bra?倧倧倠52371?倧?ebGL匃t虃總總總?3547?偪偣T戰偗罰I?倆

d?銒婜斈勛崡崡勛崡崡崡崡崡崡呥呝吳????偘ctroServer坕厽妎妎厽妎剋妎剹剹剹剹剹剸??儓ⅶ焾匃??匃?俖??傔挴呄呄€g呄呄吿瀭?璷璷?璷璷璷璷劎劎劎劎劎劎">framework溛?祻3??炦壂F倧倝湡匴匴匴匴匴匴匭勣寶熲??????劮劮??倧???偪噊?噊噊噊噈m撠rnizr.js卼y勶対219懴勶勱In澃duction格扥朩?????匋plac傃糔懴懴569懴??h綐膐幇奊莖戔Why?卂卂卂卂卂卂匸?v贯?縪縪?縪縪縪勶戺傔縪傔縪縪縪縪縪縪僿坃坃坃坃坃圶og滒m唓appl矆?s凚?嶠4708??殶崱吷掲匞匞匞匞匞匞>us?挄颾j??ref憍nce銋4?吳696燺吳吜U?侚傔傌t祼?簵彲??嘃p喎喎喅jQTouc?ウ8504?匫匢Beyo娙劇婏凎€ p儻儻儻Query蚾b儛???????????JSC倯儻?2455?儻匪拡l?€鳈K倀??????size€鑰xb>K嵭?侘侌8侘侒keyboard??7553???T増initG嫲()苪n瑀呑》偋0105295実偋偂C€╮ol堃寜Player觝ip堺€㎏厊僕僕僕働605?僕僐Evalu犘僅國餽ess蹲偀偀呺344偀偀垗array洃hold飖r傳傳傳傳傮409窏傳傰俛e猂俖俖俖俍976俖俖囩囩匃偀偀倿5905><?媭€協ont鉶lor="blue">Evaluating雃y餽esses, <偀偀偀偀偀偀偀倹74492偀偀倶The誴date/Render (Repeat)脃cle傦傟

checks鎜r鏰me-specific呄es匴匴匴匴匴匴匴匴匴匯?厽厽厽厼佖roll婛play?ship (?鍃ample)叝叚5295叝叝叐C偋魡P偯S偭with€狵eyboard?嶰僕愮僕僕愮愮愮偀偀呾344偀偀嫊array鬿鑟ld飖r傳傳傳傳傮4093傳傳傯俛event俖俖俖俒976俖俖囩囩匃偀偀倿5905偀偀偀偀偀偀偀??偀偀偀偀偀暱暱暱暱暱暩?岡傋?匃弌匃匃弌弌弌匫匫匫匫匫匫匩e?偪??廤???勥勥勥勥勥勥勥勝擥????壇佺???????s嫎ce?de凣晈晈凣埧埧埧剣晈偀晈偀偀偀偀偀??€g???塒靑sten℉and鑰(l€`盿僗up妠?厈0075???孴initG璥()苪nction厙厙厗p??悗瑲偁pu刋吇匴r?ed餫n咼zoom叿叴42278?叿叡?卭籫???倹size€鑰xb>L??侘侌8侘侒languag揌价y廞in <html>鬭g啅?2490?啅唹侕靷?"en"侫喯喯勥喯勣w飂?serv?on€乵om?u?剷54852朑剹剳Ball€槀@s?depth劎劎劎劎劍嚼X?€ZY槓operti?慃objec??7818墬??Det仺嬮mous?tera曣s儂t栃canva涳厽厽厽厺Learn偵WebGL鱡bsit⑾?493110匃匃勷What膐e刋?Applic尗Look蘨ke?勥勥勥勥妘増l雗obs (Geo耹a爯r鐫???10808熥??L俠K俛?????el峹check楛刼r耡sic (exampl効効0970炦効効?舗d匃匃匃匃匁ibrar掹JavaScripǒ渧3537翱??伹苧?work挮L傢劘劘劘劘劗n挵鐁adi?剣0167988剣剣剙Fi?婡Shap挊with莻]刉祑傋傂84172傋傋傂R?al勄俹俹俹?8639俹俹嵸?horiz?偳偳偳偳偮77偳偳偫欃?a傜傜鬿€萩o揳x髩僿僿僿僸259?僿?僕僕?偳偳偮421泧偳??傜?s肛k????568W?????塷塷僿僿僼823僿僿僸V甉c????攞2308>Diagonal鐁adients, d???182308??喎喎喎?冿凮凮凮凪horiz侙刜刜68639刜刜垪?劎劎媁偳偫77485偳偳偫Applying醾鐐玺o€萩omplex骽ape僿僿僿僸259?僿?僕僕?偳偳偮4214偳偳??傜?strok????5680?????塷塷塷?????憒a儠?e収堖堖収収収収収堖卭卭卭卭卭卭卭卝??厳??厳厳厳厳厳??呄呄呄呄呄呄on韚lti倶颾jects厽柷柷厽柷柷?柷勶剰勶勶勶勴tЦ€坱h劅??劅劅???剰剰€g剰剰剫vertic??7猧剣剣剙V伌堊凮凮凬p???l喰Cap餽op偍y,僠n?嶇勏勆06386勏勏勆The 2D脗$?t€楥urr搚Stat?》?囇0922愶??Actu囙Draw栃???倄12251??倄Exa椺s飂蚾r傕dvanced虉葍?筄庯婏婏笿efin涥ttribute?噖噖?噖噖刜刜廏搹劎劎劎us剦i?噛a噠怉鋬#????????吳吳吳???劻Jo厁???厀卶?厀厀卲侅.椖効戯俫囎俫俫囎囎囎囎?戯峅囎囎戯戯戯?嘷??嘷嘷凣?懽剰剰剰懽懽懽懽????????吳吳懽??懼墬?632?剰剦U?Paths秆Cre刯?慜偳偮586偳偳嘜嘜嘜嘜嘜??奼???????????????????00465857???Mov?a盽ra庂傭偡偡偡偘85614偡偡偡o偙Vor???倄7156???耬tween詗o啸ts:原€Dist埞?a咃僿?洀??>c?僘浻p斄卂枏枏卂枏枏枏枏?偳恄偳偳恄恄恄恄恄??枏??????????????????┣?????傎e儸, Examples飂蚾re羋vanced蘨ne膔awing, <€g鑕ight="4pt"鱥dth="0€`>find侤靍ngth僪??471564???Mov侎Between詗o衞ints:詇?ist叐?a吺厪厪厪厪厪厪厞m儞in髏ra?靷绤繀?5857吙吙吙?a觽=?崯偡偞8561坥偡偡飩盫ector?噖噕p???啈To( )韊thod,僠ntext颾j傂s勏抐7823勏勏勅孻Actual懬勏勈p剣剣剣剙W€侌roperty剹剹剹剳063860剹剹剶2D脗$and魛楥urre亁Stat実実??1442???厲?嘩?嚐嚐嚊sett塇兎兎兎兎兎兎兎徬徬兎兎?steners鎜r鍁坔娮娭39€(???HTML5胊nvas 鈥淗ello護rld!鈥潉蠄勭勏勏勊(see醠so劔鑽榣匑;?)??俉俉>load伀,€纍dow?嘜嘗870?嘜嘜嘜嘜嘜嘜?劮劮劤泚function,醬dio勥勥勞84640燨勥勝A佢F俓s刜刜刜刜刜瑲?兿兺5341埀兿兩L佪殌Play€a毩剨?????Log楌E`??101599???Our莂me鈥檚膃sign兦兦兦兦圑gg吢犐messag?to蔭vaScrip儽nsol'17?勥勞Debu傐wi`?.儉?????ic猔disp??array綉勏墹墿4?勏憐伣虃怨纻襉傆?????ok?feeliPhone-lik?ppl????484826???Beyo璄洸効効効効効p?冞嵺6795殢冞冔asic葻扸ideo蒻plem?咼刉盻傦傝87傦傦傝倠惀trol嶺L卙巿噣Auto宨???爲841樋??厁orta€袪鉖?ie??瑥瑥妛妕??刼刼刼刼刼刼刼刼€g劮劮劤v奲劮劮?劮劮????勭傦??傦???????锭嚳嚳栛tトle鈛tt氝寳85209??匄Cre?ばCustom誷er匩飊洴??僄傾9219僄傾Set?U卲敖盝儀Va????傴90951??雏op/No娛詧{B坺偪?婄娤娤娝i?叡c績楏崣er????????忥忥卭卭卭楉??勑c吢皁????????匞勭??匎儍size€鑰xb>M佮俖侌8侘侒magnitude (speed)祦mov???485930???Mov?柛a帧Hor啛?刧哤刣Maka徃Jobe冏冊52忴婏冏?ll閚teracⅰs€h餳yPs

math-based韔vement, M?,衕ysics,醤d羘i偢ion?媭€卲layer, The衼?/u><€g鑕ight="4pt"鱥dth="0€`>凒field??2967???佦???????rendering靜gic飗erview劎劌67484劎劎劆R?L?O???????匉simple罥勏勏勌70071勏勏勅S?Homegrown俀勶勶勶勶勶勶勶勮t?韯萴e冐????118挿??詡塎倣奯厀卾??045???????坵坵坵坵坵坲sheet勭勫29匄勭勭杽勈S佱鎜r蟯r莂me劎劎劍p刜刜刐MIME魕pes刜刐慞897?刜刌Video韚st髥xl鈋錷bedded閚萒ML劎孏?00872556???Find?t嚑Support傂Audio苚rmat?嚋p嬿嬿嚐嚌a?刼刼刼刼刼刼刼刼刼?惂劮劮劮劜canT孹( )韊thod餫r庤t岟岟厙岟岟岟岟岟厳厳憲匫匫miss凘s (侶G?Blas?鐓P)匞枌105688匞匞匑M俤刧慦??8784樂???r橑審偀偀倶206939偀偀?彅嚂偀搹壇墬墬掉re辩as鈏tmap洀??劅???劅?摽勭勭勭动勆?r舩t€峄焿讐讌?壸壸壸??揼匃匃揹凱Li€8餽operty,儤ntext颾ject?樥063860???2D脗$and匤Cur圥t觮at猤廏???ob寔devic?creat?槈s娏??41593廤?廟o侀M偛!刧刡 (see衕oneGap)勥勥勥勝宧nizr.js靑brar?刼墐219?刼刯Introduction鬿∫5胊nva幏?傁偵5062熯傁孞eば?o訂榃h摪宨Brows€`玊s????76ò????????崸9767崸?唚?WebGL髢+寈th巋孌?掃榞嶰嶰嶬incl卄?靶ge?嫍嫍??嫍嫍嫍嫍嫍厀澘Ⅶ吙吙吙>t埧釈b埣呑嶏嶏呑嶏嶏嶏嶏匴匴匴匴匴匴匴??匴怗怗匴???怗怗厙厙◤??瀴m?um?崘v溔of?妼52909灧??Ball扨a炓s捁physic彲楪傁偵4852峎傁偽€╨is偨depth偗椙???use鍁嘸??44280???Ad慠?杊棃懷c枾刉傳傯78129恩傳傫Det硺??嘸瞖僄僄僄棊1篐4僄僄傽Li?n扢偐butt廐press簢傦傦傟94916傦傦傝Set?Up傄?Play?Va??t>, <?媭€卆鎖lepos=0000902869>Play/Pause衭sh聈tton:萯t詄st衞i伕Revisited, <僶僰951僶僶僫Loop/No虁@詏ggle儗偪偪偪偢18858偪偪偢Volume髄ider鎢nctionality偳偳偳偫55偳偳偯Mo埞c€豶ol俉俁

handling鎜r鉲ick-€?drag鰠蟚r勭嚙勭勭嚙嚙嚙嚙匴?厽厽厽厽厽鞃at峜b峛匫彠彠匫彠彠彠彠匞匞匞匞匞匞匔in觩ace襛坹s鏰me?廹妵?廹廹勛勛勛勛勛勛勛動T?觮amp岺app?a峚??442800???Add倎m?events尠鬶叏anvas収収収収収収収叅v?o饀zz呧妎卭078129彠卭卛Dete攢厗?era?s醤d吙吙吙吙€g吙吙吋tp暀pΑpΒpΑ暱?ㄇ??ㄇㄇㄇㄇㄇ咷咷咷咷咷咷咮?v?€衪h?醬di宧剤??s唚唗894916唚唚唒Set寊U瀀嬝A倰?倫Va?孏??€g???listen〉嫑拸咃咃呺11204咃咃?傋傂?傯press呥呥呥d?t幑?傮単単単単単単単単単単単単単単好熖stra?歆X?瘲瘲?瘲瘲瘲瘲峗傁┋?傁た┋┋??瘲???瘲瘲瘲瘲瘲?姛???恄倻b儰t儬p儮, Moving耬tween詗o衞ints:詇e膇stance飂崽ine<€g鑕ight="4pt"鱥dth="0€`>m儞object飊偫v€Por, ?媭€?font鉶lor="blue">Creating鬶e鉮at鎢nctionality<€g鑕ight="4pt"鱥dth="0€`>install?ElectroServer, ??u>I?????????匉resources鎜r囏r?r閚€pm埨on匞匛95629匞匞匑This蓅蕌st姃Tip飂€ZIceberg厽厽厽厽厽厽厷tes崐峧applic匯叞胔rome収叆厫05収収叀倓?A?倅Google偞呄吺??73592???F娫Exp€葍 s啺th巼巼堬堬堣p埀埀垼muted餽operty勥勠0681526勥勥勜Basic萒ML5謎deo蒻plement匓劎嚽傦0072973悘傦傞偪o袆鹖es偀偀偀0084峹4偀偀榓mporta€蠥udi偪偪夦p挆挆夨夣a侭obj孭s刼刼刼刼刼刼刼刼巁巁劮劮劮劥v壀劮劮師劮劮師嬬師師勭傦師師傦師師?偀?曌??曇vPopMatrix( )劅汋0678?劅剻Ani?ub漮恄???Push?????????????vRo?e?????????????Transl?????????????偦size€鑰xb>N拹?侘侌8侘侒Nitobi,衕oneGap咃呾41836灍咃籧瑇duc咘???????咜O?侘?侘侌O3D靑brar甒嬀242呑呑呉祙?厙厙儣厙償?餺ols仿炟Blast祾tend拆(exa?)劘劕23145纷劘劑P偍奩O?Ins﹛c?偗偒??偗?dd偂匵a觮ep詉m棍嚪嚪嚪婫剴ive-C,镺S峥鲌9劅懢634劅嬰剳M撊le!刉刉刉刉?ffsetX醤d飥bY緈,鍁癬効璼8180効効劰Det?勜mouse喐帹a灑s儌?anva寳叝叝叝叚.ogg凚剹搭69133剹剹剱Theora +謔rbis = 俀冿?偀?029椣偀倷Sup??ForP哶哶哶哶?nM堥C忦kХПTextButton孅摗BS聤恛槦?慮41700???飪焝(儣呄呄呄呄呄?Mov瓀吳吳吳吳吳吳吚2021吳吳吳儢儚吙吙吙吙吔pen厑method,€鄋dow?劘忊08741?劘劑Ex徺?C?鬿柪蒻ag撤効効効爭劯GL?垾8937?凒WhaΘs譭bGL?儚儚儚儚圗ri炄,骵t?for劅劃6峆垪劅榬侺炑O?勭勭勭勭???P?侘?侘侌Pac-Ma呄呁325769呄呄觟敼畃le-Bas瀳Gam?呑冪呑冨pann??i?, Panning鬶e蒻age(see醠so鷒om倷and饌黫傎s), Filling傁傁傁傁傁偸3762傁傁傁傁傁傁傁傁偸549厳傁傁傁傁傁傁傁偵290784傁傁側Image俕醤d詄xt偋偋偋偂4359偋偋偋偋偋偋偋偋6276偋偋偁H??Gradient偯?in?羠ranger僶僶僶0030541僶僶僫Width,萫ight,觕ale,儌toDataURL()襡visited僩僢

剙啔s幆匞朑473匞匞惙惙惙惙?傁?傁傁傁傁傁傁傁傁?傁傁傁傁傁傁傁傁?傁傁傁傁傁傁?岋峅峅峅峂i枈刟鮯?repeat髏r€p匫??匫匫匫匫匫匫匫匫匫匫匩勼no-?,匧-x曮€ty吿s呑??呑呑呑呑呑呑呑呑呑呑??p¨沗瀫??OOO勶捪偋O偋偋OOOOO僶僶僶O僶OOOOOO僩嫹嫹嫹嫹嫹>h嗧?? (example)?墂墂?墂墂墂墂僄墂墂僶墂墂僶墂墂墂墂墂墂墂墂墂墂墂塼video醩髈urc僗卭腐腐卭旂旂旂劘劘劔p刧刧刢pause鈛tton,鰟襝?rol灴勍808505勏勏勅Plac崙th倕瀢稄刧刧刧刞( )韊thod?凕680407??凐Basic萒ML5謫:I摿m戉ation刧?傦嗋468?傦傟Audio苪nc俌喦喦徬徬??勸俍E勊颾ject婳刼刼刼刼刼刼徸徸劮劮劮劮L墥劮劮劮?劮劮?????勥惎匃惎惄d餽operty劘劗178砡劘劘劘劘劘劘惎孎5010淲傦淪porta€袑揚?ie専偪偪偢90645収偪欴y/P満Push職b:萯t烶st衞i伕?僶攐徔娤娤娛a叒廹?囎??囎囎囎刼囎偪囎偪偪囎囎囎囎囎僶挓椬???琈囩挓挓?挓挓挓挓劘劘桮刧刧刡Penner,襬b奨劎劌48134劎劎劆E劆In (Tak€YOff)刉愊??汳ersp恅iv磹sett侫up鎜r 3D骳en礯劶1504768効効nim垹挨cube劅劅劅劅垿??Kei?冪垰55256垷冪?ll€﹍isions閚 ?媭€卍epth
PhoneGap, <俀鉶lor="blue">Going蚾b亪!儣儝俉俇44801俉俉侾Creat俰the镺S羛plic€爋n匟th袇????447???Us?Xcode鬿詀rget嵩est膃vice????5765???Install?俹俹俹俰7296俹俹俹俰囷倗倗倗450634倗倗??BS聙`o傓衦oject閚呯僩僩僩3889僩僩僠妷僝New耹ank幆帹?€镾imulator???儁4960??塟tegr嗴喼in??喸????6寑梍??Set啂Orient?偋偋偋偂3422偋偋寜hang寧anner醤d蒫傁傁傁偹641歸傁嬿g飲'?偗偗偖930栫偗偐Add偂嵗a嶐懞 鈥淕僠ure鈥潅鱾鱾鱾?2?傳傳傳厃倲苪nc?s漎index.html????96嫙?堊堄a煆倗㏕blockquotec殅a栕劮た劮溩?卭囷??坥???俹俹俹俹俹俹囷倗倗倗倗?僩僩僩僩僩溩??????????偋偋偋偋傁傁傁傁傁嬿?偗偗偗偗?傳傳傳傳傳??嫙?堊煆н????a呟g吋f吙吙ml匞??匞???偳????????帞?厀愡愡厀厀愡愡愡??????砕橾game鈾gi檂卭浄浄卭浄浄俉浄匞匞匞匞匞匞??p卭卭傦?収????i厂?厪弹弹厪弹?弹劘劘劘劘劘劘劘?剹姬剹剹剹姬??????剒硂硂砳廳?电电?电??电电叝匫叝叝叝叚s?o电???????勏勏勏勏勏勏勆t瑪applic偄d?????ing?媭€咃n崮evice<€g鑕ight="4pt"鱥dth="0€`>testing頴w醦p閚骾mulator, <儊鉶lor="blue">T俆the蝹pBlank羛plicati叏傕€镾?咃咃咃咃咃咃咃儤傖Phone呯呯呭66411呯呯呯侷???劮>h廐吳??m? (exa歲)呥懽懽呥懽懽懽懽?傋懽懽傋懽懽堊懽懽懽埾埾€g埾埾埶law┥c縳erv?€乵omentum呥呅09?呥狟┴?teraなs€h馉K匴匴匴匴匴匴匯vors剹?30剹剹剱宲夾盇抙?凣凣凢p??凔Pilgri垐Mark???32埧??Te巕o觘e議e?r嶣Brow嬋觰pporCanva塷?勭勭勫pixe杧pul??3嶀???P?M?璒??倇63灴?噦喨咰袀讉粤PI傳傳傳傫771涀傳?pplic俢T仺觮?e幭偗偗偐29756偗偗厹h婐l?偙()鎢n?傁宩懐尫尫尦????姉姉????姉?柗汍卭卭卭卛奧攑a??厳??厳??傜匫?偗?偗偗???傁?炃囅囅欍鈛tt櫓video╥?勴81312勶勯Listen烝fo炿偝餽esse灖?勄勄h="0?媭€卲t">play( )韊thod, Basic萒ML5謎deo蒻plementation傦傡846719傦傦傝Audio苪nc俌s俫俫俫俙76590俫俫俙P?ing鬶e觨und倃俽

,?媭€?Volume髄ider鎢nctionality,偳偰35030偳偳偫Case觮udy閚羥dio:觩ace襛僡s莂me??<€g鑕ight="4pt"鱥dth="0€`>click-and-drag鰡er厳厱12坄厳厳厬俈D俀執S俁???????omple?code勄??勄?????偳??偳?????囘?囘囘囘囖reating鉼stom鮯?c個rols厽厹88389厽厽厷俔C俒U俌C俓飊鬶e胊nvas吙吙吙吙吙吙吅h怭l?fo厃mmonmo呧鍁ent呄呂955媑呄吺M佉E佉勛勛勛勛勛勛勔load?butt嚑asse剣剣8774剣剣剚L?墎B?A?勶勶勶勶勶勶勳op鬿ggle?勛數09519勛勛勔op/No虃AT侰?勥勥勥勥勥勥勞play/pa孮push??匊286??匇P?P?P?勠:萯t詄st衞i伕Revisited叝叝叝叝叝叝叒尐棐up饍鄺€va刪弴?2193吙吙吀S?U屶彉焜袀僔倐匫匫匫匫匫匫匥???dicato??76斂???勓蓚%勥勥勣p剹剹弴field (Micro詀nk蚢ze绂?勭勩1332967勭勭勦T壚劻倰劅劀p刉刉刉伬喠≥a??堓52515??凐Importa€袓擘g凣凣凣凣凣髈undsGeo耹ast怘Extended堯匃堨23014?匃樈傁劮劮劮劮劮侁崇??0962€(????侎?????ug-in瘚Elec舶Serv埿appl攁焕浵埻54€劎劎劇姠s伭剋剋剋剋則P刾inMessageReq?t颾j劯??55668??恭埢chat鎢nc哬ality効効効効劶.p侾im劆?,鍃斄钧rr敔慵锤匞嶔066562匞匞?HTML5?蠂j?????冃path,飂,醐X桯trac?movem?勶勳47958?勶勱侘侐:羶?饍殔G匞匞匞匜ol倝variabl畞ad紱o湳湳?examplタ溩3218タ呑呇A偝儑儎傾our橭呯呯呯呯呩rt?nd餽oto儛咅檹檲??3443?徴?泜dm崣厾勥勥勥勥勣话泀屔檚勦upd?偍multi?鈇lls猊垘襴i巔勑l嚼??54?曠??U????????徚娯perty,雳€o剰剭67988繃剰剦Basic殀V?蓱釙佴2劎劎劎劎劌reloa弬劕??勭禩0636勭勭禬禫P偒ie塛劮劮劮劮劜嬂??7€3篲?盉伷堜惛JavaScrip?傔傓906傔況唓汎m拑?橺Embed濧優岒僿僿僿奝0297奧僿哋〕?buttons<?媭€?u>, Loading鬶e聈tton羢sets<偡偡偡0948169偡偡偘Prel偺all醾掲ithout鏻obal鯽riable僟僛

b厓傯for醬dio餷ayer厳圙圙厳圙圙圙勶勴勛????俼?video冟ntrols??02976??姧?偧??????匉Space襛勑rs鏰me妼,崌崌崅吳恎恎吳吳恎恎傜傜恎唶唶唶唶唶唲?in蔭vaScript厙厔7€35厙厙厙厑V俫俥?樋傔傎9061傔傔傌A衦o?m圍舦en圶and舖bedded儫HTML5僿坵坴p???PrivateMessageRequest颾jec坵厹1555668厽厽厴Creat摜chat鎢nctionality?澾勄勄勀programm倝langu勷樣web鋏v嬝pm埌?娔005873???W劻You蝒?to薾ow勥勥勥勥勥gr墍鈇∝sli???4582??塯g胾stom誷er脽l飊?Canva??僄傾9219?僄傾Set?Up倰AИPИ謅????傶76╛?傷囥倰蒼dicator偀?攚娗娗娒draw俼姅?偞埌峹c垻????????檹????※?敋匬ce攊飂勭??勭????匞匞炏????橷∴効 ̄272効効ψψψψ懅傔χ59?傔ψψψψψψ僿僿?52067僿僿僷Importa€袏蹆{偀?娍姧姧姡a?????????幆擄刉刉刉靛刉帶帶刉帶帶帶帶剹?傔帶傔帶帶帶帶帶帶僿?????栺儐単単単単単佺単単単単単単????pertie涚?64969???T燖2D皉ext勔皉urr?St絰劎峸??7876怬??Basic嗐嘰?垐傪川on傦傦傦梹47626傦傦棁梿媓?偪偪偪偤85?偪偪偪偪偪偪偪滖7傌偪偪偢Dis?槨Attribut畼?????6587媉?洟傡a觨u嶩摎No?Tag傳?掞掞?d?叏革????????????????????€g坃坃圼?Render働櫮?(c€[)厳??厳?????叝叝叝叝叝叕i枂嶳稹o卭??卭樓樓樓嵎嵎??媭€卛lepos=0000847857>Importa€蠥udio衦operties<€g鑕ight="4pt"鱥dth="0€`>i傓video饌? Q墵?侘侌8侘侒qua?tic嚴zier鉼rv?唂12253壸唃哸佨C佢?埛俉006損?俉??a俻b劮傏蘯op?堶?堶堶堶堯R堶侘堶侘di淗g€A疧唎0167988唎唎唄Fi庎哷Shapes鱥th莚ad?媭€卛ents
, Filling觝apes鱥th莚ad傋傋傋傉84172傋傋傂R?al鐐o俹俹俹162115俹俹俹俹俹俹俹勑5411俹俹俹俹俹俹俹俬6606俹俹俹俹俹俹俹俬79俹俹俹俹俹俹俹俲9563俹俹俹俹俹俹俹0288964俹俹俹愞醤d詄xt偡偛

applied鬿徙ircle剹塯塯剹剹??凬?剹剹剹剸rc髏roke偖剹嫃嫃剹剹剹剹剹剹剹剹剹剶complex?攺攺??????????si??????????????t揦を凣暱暱凣凣暱暱暱剰剰p凣凣凜侷ans?坲1712??c€▋??()冏?俉侾4?俉俉唩otation咰r凱l€儉bform€z媷???487207???Mov皺?謊ctor??墢墂墂?nvert俼angl?to刧噺噺刧噺噺噺噺噺?噺噺噺?噺噺噺??晣囎囎囎defin嚽閚劅憻憻劅憻憻剋剋昽???Rai昚Ly?凊101599界凎凂Our莂me鈥檚膃sign??冞冞橣nge偫n獔l?澁3791彠凎凂F€﹕ize彧HTML5騻噊l刧弌傳005比5嗙傳廽ulti耡lls耾unc岻㈤?Dynamic€鄖覈衵?Canva?兎兎儾959兎兎兎兎兎兎兎兎兎兎儼69413噂兎儽偪y髝8攰鰅deo偳巼捒幭幭?dd?礁d傦傟e偹弌????????椏?単単協ev癄钂0lers鎜r銆p扝€覅O??匫????????呥????pecify僫勔傞呯殫殫呯殫殫殫殫???勥勥?﹑( )韊thod,倆絈obj€袗_Е266恄??The墱胠ipp噳Reg?昽劮劮劮t??098741???Basic兏?觝ape??偡喐59290偡偡偘Comb癱S??毒??僌湻?嚄嚄>draw?b咇?嚡嚡?嚡嚡嚡嚡惂惂€g劘劘暷瀩噲r噴ng勭夁夁勭夁夁夁夁夁?????憁nder勥?0744?勥壘Update/R? (Repeat)脃cl夨憻傦傟8039傦傦傦傦傦傦/fo?媭€卬t>, Rendering蘯gic蟰erviewMicro詀nk蚢ze鏰me (example),靸2o?単単単単単単単単卍匫叝叝叝叚splitt偵r?銀cle鎟om鮬dates匴匱074492匴匴匬The諄?叓 (Repeat)脗賲棈焸飩?039傦傦傦傦傦傦傦?坹p???r?嘝imag囸ill嚳勗0191950勛勛勑F仒?Shapes傝th衋tterns劮嚐傁偵376妵傁傁傁傁傁傁傁偹549厳傁傁傁傁傁傁傁偵291065傁傁側I?俔醤d詄xt偋毧?岀岀屻t佮勼p倹岤劅劅劅劅劅劅劅劅?欦勭勭勭勧us?no-?,?€A-x,?€ty髏濁挓??叝????呑呑呑呑呑呑呌?匋匃斍斍匃匃匃匃匃匃匃?劘劘reseSpace襛i?s猂匃勽952468匃匃﹤俇t?劎?刜刜刜iz埊兛305416兛兛兏W?,葌?觕al吶怸toDataURL()襡visited劎?僩僠1269枾僩僡Dynami?ly僇噈Canva?傔傔傎52?傔傔夡囮呅蓹躨n厛??????5183稐??Multi溉聠s耾unc儥扟a膯鲏€剎冭兎兎兎兌2821惽兎兎兎兊?Co枑d€p?慱?懅懅懀d収毿?c叒??????????垪僩??僩???媜傔傔??傔媜媜????兎兎兎?兎兎兎兎?????廹廹廹廱m?b?b?imation叝塤塤叝叝叝叝塤塤塤塤塤兎塤塤兎兎兎?塤塤塤塤€g塤塤塠垐?as閠鈥檚鋜aw?匫坥卂卂城??痡tore( )韊thod,?傴xt颾ject?厏8320毀?厃Step 1:觓ve匉curre丣偝叴stack叝単単協t囏囆mod腐劷綘67綗効劰Introduc旟?HTML5夁?扜傁656粀傁偸T哷2D憳嗴尒嚧Stat?????gb?,缶t剺l凔??166297??寫?Basic苽1?or嚽効効効効ba勄勄勄勄勂72栂勄勄勄勄勄勄勄勄勀RIA (Rich蓪 rnet羛pl廼)鬳chn側gy厾hif?way鎟om厪厠159877厪厪厜?clus偍????壵淧s (in莈o耹as匑鏰me)??102843??燼侷冿>?媭€? Rock蟗ject衦ototype倵倳8042倵倵倯What鈥檚蝒xt俉俉俉俀5960俉俉侾Geo耹aster詠ㄓhee偀偀偀倶202101偀偀噛endering鬶e驀鑣倗倐

prer倂as鈏tmaps剣??剣???劅剼剣勭勭勭勫勏for莾/舩t€醖?壙壙?壙壙壙??????撘o撚p撜効曪曪効曪曪曪勏?倵曪倵曪曪???p喿喿嬼ooms閚舕勑roServ嬝zone?剗539696??剎Z仜倞,醤d鏰me嬬暉剣剣剣tate( )鎢nction??0142553???Lesson 1:詒ans挊ma?s醨e醦plied鬿骽ape€皡@paths鋜awn醘撗懷set?()飏飥竴鄠莻绤>閟鉧lled嚄嚄嚄嚄嚄俁嘒嘐5024?嘒嘒 2:譭韚st 鈥渼趌?鈥潌"poi佮of咅ig?嚴€筩en?€羥r圫€賸汩t塦ou埲its飯▉儐菚o厙0104832愾厙厑Thr?湵?準僫d鋓r撊????傴51217??煪嶚煭play?ship廧tar啝€ngジ0僕??峎峎峉埓??匴嵪嵪匴嵪嵪嵪嵪嵪嵪嵪嵪嵪嵪嵪嵪嵪犵犵€g囅囅?婖娮p (example)??埊??埊????傔???€g??唟t攇n擥擡 (チ鍐靻O??哋????咓咓璒叝叝?匉?β?擋395革???Я摪€仼w偛?渙??4375??????????????厙厙厙睜88抱厙厙抱抱抱抱抱抱抱抱抱抱抱抱抱???49幆??媷媷媷媷媷媷媷媷媷媷媷厙厙厙?1?厙厙厙厙厙厙厙厙厙厙厙厙厙厙厙厙厙15800灟厙厑Combin灘S峱悙傴歂憻櫹僌僌僉38030擮僌僆A揦y傾傳傳攰嘝an蒻age僕僕僕働7966珡僕僐ni倷僗a??傋傋傋?2058傋傋塱anvas偗咰Basic堬傁傁偸849堬傁偵Step 4:臎爯R?単偀偀倹90瓀偀???傋傋傋傇906?傋傋傋傋傋傋傋傉12欙傋傋傋傋傋傋傋惂惂傋傋傋傋傋傋傋傆40710収傋傃Dis尽?map飊鬶e?媭€呫anvas
, C?謎deo詒ansformations:襬t€Z????60475????Puzzle倗倗倗01031366倗倗個The脗tack俹俹俹俰039?俹俹俹俹俹俹俰6189俹俹俬Game莚aphic妎妅傁傁傁側42€(傁傁側Alpha芶ding魠楶layer觝ip傁傁傁0118440岀傁厭寴Blast俬T仺倫eet偀偀偀01312612偀偀弝re噽匑a膟nam圷傊醫襲ntim????147????????

ani嵙?r?ed閙age?椞38902昈?嵅?a恮俋I俌勛?傋傂90641傋傋傋傋傋傋嚘噺囷囷囷図槃s嚿醤d勭勪142883勭勭勦Lesson 1:勛?醨倄ppli匬to骽ape€皀d餫ths鋜awn醘攊?set?()飏飥竴鄠莻梨unc€Jis◥lled???????s僌僈basics坵?205?坵э坃係B俁??傁偵849?傁偵Step 4:膲▔r?偀囎囎囎囎囎囈combin捬with岃揓厴?movement匴昻123爮匴昽昽昽厪?傋傆7966?傋傋傋傋傋傋傋傄40710収傋傃Disp?珆map飊€Z户傦婫婫婫婫婫>d?tド???????????????怶怳s氊e槜灈厽犝5800▏厽榖倴S俲挋R?????????multip??squ?s (exam€?咃咁18?咃n 2:讒pust 鈥湀zl傴鈥潒鈖oi佮ofigi寑o寷櫒ト€羥r€賱坶祼rou坧its铷 亙???????prerender?s鈏t慇s妾X孔r舩t?疧?184405垪垪垚?r伙t叝叝叝叝叝叝叒埅厜game鐁aph攫嵎??03136摕??T嬭?Stack匃牤俹俰甮俹俹俹俹嘷嘷嘷嘷嘷嘷嘵瀥奨ship鎟om???6189??尒俀G壃毀毀厙傁偼42€(傁傁玜lpha芶dP厈S厁傁圤圤圤圤圤圝欵營勥溳44901勥勥溸溸溸溸溸溸溸溸溸溸溸溸嚄嚄嚄嚄嚄嚄噽us夾dynam岺?s欩s鉹eat騯ntime坵峀31261坵??福D傸滣偙R偝?恮??14蛔??????塆塆塆塆塆塅video勭恷74833?勭勨?V佈??:硯勛???6047н???Puzzl嘩嘩嘩p????size€鑰xb>S佮俖p侘="8侘"0p?媭€卼">Safari蚾bile醦plications,醬tom€hc骳aling鬿镺S鋏vice鱥ndow, Sett俁he蟫ient價c?with騻龏飱飬蠀蠀蠀蠀蠀蠀蠀蠀蠀蠘癁7???per俼浐傎l?be€氨w吳?吳?????澐勄勄?滱func俀刧??刧刧刧刧刧橤???埨兿滶126?兿兪Dynami佇ly嶛??枏傔傌紁2紈傔?siz癑n蒻age衋iムd鬿?????690839???Al?叆W坕擔H?飂€耉ideo????4008?????狯偳?淿朞峸峸a呎€獏瞾c叡傄?圵圵?圵圵圵圵圵厳??呥呥呥呚d坵坴巼吙??吙娮?俫愮卂卂卂卂卂卂卂卂婏????????????????i?龚it鈥檚鋜aw?洘洘匞洘洘洘洘娍収収?卂卂"?eneJS靑brary勭勩1526802勭勭?侁冪檱儫儫Ξ伆挧僓4959榑僕僑hader?僕僕僕嗩DK (iOS)僶僲46拂僶僰Inst惱嫨Xcode兎俹俬5篽?俹篫re?BS聙`o衕oneGap衦oject閚僩僩g摕嘷嘷槹ownload眞?噊?噊噊??扥楋刉刉刉set噦法?p?勥夁夁勥夁夁夁夁夁呑呑厀?厪?ECURITY_ERR:腛M舩cep絹 18厽漸0467旼厽厵T匬toDataURL()蚭thod璭漑蟗吜?廤??="0pt">&?媭€卨t;select>錶ements, 丠lText醤d髏roke€ysendMessage( )鎢nction刜刐15545刜刜刏Creating鬶e鉮at侳ality劅劅劅劅劄tAttribut劉method剹堨314784剹剹剱Dynamically觻8勴Canvas剰剨傔傑869656傔傔傔傏囄an羥dio艓c閚蔭vaScrip導?, Testing飩瘋瘋?/p>t倓blank衕oneGap醦plication??53889???勱New聜翧??呑呑呇吙????儧i咈?????????????p勭勭勩sine??0488848???Mov?a謊c冪冪庁儫儫儩勅et-server嶰ons凮圽528287凮凮処ultiplay??ns僪th舕勦roS?5?枾僕働3605嫰僕嫪婸Basic羠chit傂ure飂?S唖僁凣n儣埛尟??堺b僇a僌僆厙厙厙厙厙厙?厙厙厙厙??厙厙巪und餺ol,鉹e俙ng?挃975530??厁Iter涆#3:脗$卋傎P傌勶妎劎劎劋<劺rce>鬭g掄惞炧€醰ideo€輩o卨68329婄卭卛Plain-Vanill?侷舖bed?????Space襛?rs鏰m?audio鉧se髏udy勛?350?勛勔C伭S伭?A俛:觾??G?匞榃?01007513???What鈥檚┴xt俉俉俉卹752俉俉俁y?s卹pps昲e膇fferent:舦€8?僟僟僟僘842療僟僘???ru槳傁傁傁側67606傁傁恈y瞖?俹俹俹?943垙俹?ta牳ma潏n俉俉俉俀4ㄐ効俉殏nitializ勭me:頾鏻obal鯽riable娍???816娍?囼reload漐ll醩setout僟僟僟僟僟5246厂僟僘Re傕骄媉??倉585???u橷c€豶⑦俉俉係8?俉係B旕劻box€閘isde傦傦掽2€(傦傦?嚙俹俹俹俬887俹俹??1:袀軠Us珜€8le蟗j咗???儁9325???儁2課lim磮d膟nam??儞?儫儫?儫儫儫??????81247????4:襡u壀?啇???9118??????????54???O抪r铲ff鵲u?uld鋙鬿閙prove搹僌僌僌僅2僌僌僅T?fin?cod€Xor磑琁傦傦傦碐傦傦碐碐蛔谎blockquo獦???c?s?p??摋摋??摋摋摋摋勫勏????偞u欈d欆吅s厽溓溓厽厽溓溓溓溓溓???????怬?????佺??勏???傦?????????檳毨ructur?跨842刉库啩rs莻QS俇勏?傁弝7606傁傁?灄俹, State韆chine, <€g鑕ight="4pt"寑dth="0€`>b厀厀厀n?囩囩?囩倃倃囩??????厁i朑g?????????旂匴匴匴匴匴匴匬m拸ol?攇攇?攇攇凮凮凮凮凮凮処p憻墬刧搹刧刧搹搹??????剎?狖剣??剣??????厀厀厀厀厀卼r?????????劅劅€g劅劅剾s隘n剋矅矅剋矅佭凮凮凮凮凮凮凧o啒r餺ssi媊閙provemen帶効91541効効劯O侸stuff鵲u?uld鋙鬿偟?叿叿叿叿叿叿?g螗Ys鮯€j€(?obj咃?887攺咃tera︶ #1:袀鬝傮U傭a觾O???????敩叧歕ed唋呄呁81247呄呄呄吷4:覀偁?卭祑?幨18???????垏垏垏垏垏槙媖and?圙槸5掸??Why峿in羛ps羠e膇ffer杊:舦€8卭卭卭卥p???peed勏勌485930勏勏?v墆夝a謶纎r冿宱?00510┳?倈ultip?B┤s聠xc?O洶W€檪鲉躳??嗊稸ag焊ud?f頎勭嘷嘷勭嘷嘷嘷刼婫惎劮劮劮噠皥噚b噟勄墽墽勄墽墽墽墽???匃匃勻SpiderGL靑brary効劵15263'効瓹侓凎崡儻儻?iral,??in兎坢8兝6兎兎??m埞凥倫?斂偡偘9029?偡偙Cubic耬zi?Cur痐僅?偳???嘅ri悙shee??3564喿??opPart?an蓶俺按 橙Canva廹????剏Lib刧刦1218刧刧刞Dis??樌??th鋜aw€?)勄勄勄勄?qrt( )鏂`,蚢倛风単澒7492较単悧嶈tween詗o衞ints:詤€哫tanc犅a蘨n谨卂卂卂區rc?opert?務05544?勛勓凒?Scr勑()茋t?昰偡屶偁3昰偡秱宺Basic恮侽侽侶67892搹侽><?媭€卽>Basic萒ML5謎deo蒻plementation, Dynamically胷e倛ng醤羥dio艃;閚蔭vaScript儑儌

Image颾jects??055449???The鋜aw?een()苪nc囩囩偡偝3偁32偡偡偘剫婜s侽啲啑嗺嗺嗺嗸set夆for釅阤夒劎寚寚劎寚寚寚寚寚寚呥呥呥呥呥呥">v挬寳匛67892匞匞匒敮敮敮屜劘劘夰??櫹勭?勭???刼?刼刼刼刴ro??傇?勄抩勄勄抩抩抩抩抩抩抩抩抩抩偳抩抩抩坃坃坃坃坃⒌?r洅€p?懽濈?濈濈濈濈濈????хe圑?6641??扆Gam朶蚢chin??偀倷8346徸偀倷倆?c層??傦傦傦01234051傦傦傝Add寵pool€Avariabl?扨our鐑鑳??0134241碠?垗Enemy????7007???Si粂萶megro杧AI蟰erview傁?廮廏廏廋ani梄e勱( )嘮婄娾?嘷嘷?嘷嘷剹撟橭勥勥勥刌?倆Move?劮劮夁夁劮夁夁夁夁匫匫匫匫匫匧勑侸劅劅劅劅劅劅劅劅劅劅劅劅劅夌夊Init壙壙樝樝?樝樝樝樝樝単単単単単協Geo耹asBasic?(exa?)厽厽??◤??◤m劅瓌93943瓏劅廟佭??俉俁4282氾俉俀巕ializ宷痑塓:頾鏻obal?????816???Preloa徻窢醩筽s坧thout僟僟僟僟僟52468僟僟僗等ett?拠??倆62€(??呇lay俹俹俹俹?498嵡俹???偀偀倿732?偀偀偀偀偀a>,?媭€?Turn-Based莂me苐ow醤d鬶e觮ate蚢chine,??60453???GAME_STATE_PLAYER_LOSE偀倸

application髤!s,觩ace襛iders鐔`??0939432???嘽m噂勏噂俈42826俉俉侾Initializing?刬:頾鏻obal鯽riables????8169???Preload?all醩sets?thout僟僟僟僟僟52468僟僟僗Re傕t?m???倅62€(??呇lay俹俹??悋悋悋悈捤INIT凮峎峎凮峎峎峎峎????????LOADING?廜廜?廜廜廜廜匴匴匴匴匴匴匴匴?匴匴幭匴匴幭幭刧刧刧刧刧刧刢RESE幾晽晽刉晽晽刧刧刧刧刧刧刧for侸刉б06498⑶刉??猳??偀倹732?偀偀偀偀偀?????">Micro俻ze詀nk?t?b?€夋?厽??厽??????堊???????堊堊p垙垙垕step鬷mer,醖?to莈o耹a€鑢舩tend堒卂匼238365卂卂匵A倠in釄僅T僆卂圇偀倶45837偀偀倶H姞妬吳鱫rk牊?嚳嚳嚳op鈛tton,龊€o働ntrol椷?814?剣剣剙Li凱n?欋勓偝餽e?勄勄勄勄爊tr俛object,鎟omCharCode( )韊▓斂?07712歐?歎eventKey?劏d()苪nction????壠rok??17421樓??ppla鑟riz?甴gr痻劙搚a巟偭刼愖??8072愖??Vertic傋t嬬??倆956幭??俹俹塐墬墪arc嗶騻焸檮噭噭噭噭噥飫嚐彑弰蟿蟿蟿虒g?勏勏??勏?????厽厽厽厽厽厽>v?傯攪厪慜厪厪慜奼勏勏╋剣剣榳keC?焵op側y,ext?勴218?勶勶勮丠lT侎鄙?€y?擏勏勏勏伻R凐》勏勏勏?5760壏勏?drawScreen???偡緽?6偡偡偞箻ic覄榓ngl筙hap慻偡偡敓偡偡敓敓敓敓敓娗灧擶??偪欙欙匴匴匴匴匴匴匴匴匴匴??匴匴侒Sty娦?恄恄叝叞63?叝叝崿2D脗$昋飞Curr叐Stat???埍1178埛??収侴侴鎖l?媭€卐pos=0000174214>Applying徼oriz?al鐁adie亁to€萻troke, defin婻ttributes飂単島1178峸単卆孲Styl???剣剣剣剠form刋剳with僣,忁,飏饒+?姀姀?姀姀姀姀姀姀哤哤哤哤哤哣曄咓厳??厳??俫??単単単単単単">姉?椏??椏椏椏刼刼刼刼刼刼>se?儻€Xr魝鄥?????劎劎劉p刜刜刓婜啽( )韊thod,傽n刬颾jects劘劖1860幏劘劑丠l揓墎???勏勏勎沨.€拏L€亖{餽operti瀂鉧nva?檔12695???Dynamically觻8寉the脗b単単姀叝叝偡髠穮??????????娍?娍?凱佈剣幗33€ 剣剣漣vailable暬侹?塐凎凎凊ub淗h圵?06967冏冏冃Sta廯?怈End湼h????凕Supported蓷rface蟫atio?溙?匊1462396??匇瀟岄倃n勭勭勭勭堓癶ch姼atem?岝24502??洴洴洴??偉424279偋偋偁Keyboard毙pu俖俖俖俌09俖俖俖俖堖????ch/case塐凮啩啩凮凮凮凮啩俖啩俖俖俖俖俖湉湉啩啩>sylves攑.js靑brary凣?94891凣凣凘JavaScript?ǜ剋????偹size€鑰xb>T??侘侌8侘侒格叞铿燼t禜(?:)?尵380?奼奼咓咓咓??骨儈05383墴?儁T漍draw壐een()苪nc澂悘偡偞8258偡偡偡偡偡棁棁喯喯瞷俬⒁o瞤偂堷莡ess詢`LHer鏰me (example嬊厽厽厽厽厽厽厽??呯呯呯呬?ú鈥淗ello護rld!鈥濓n゜啗厙嵪嵪厙厙厙厙厙厙厙戠??API?玼02568???HTML5紅詡, Setting鬶e詡h苼0倵倵倵倫72716倵倵倫?and倸Canvas脕H匴偳偳偯51011偳偳偫勆耡seline?Alignme厙偳偳偮62774偳偳厖Arranger謊rsion 2.0偡偡偡偡偡偡偡偡偡偡偡婄婄偡偡婄婄婄偳偳偳偳偳偳偳偳偳偳偳偮84243偳偳偱with莚adi峏s?Patterns傦傦傦叐758?傦傞Global觝adow偯?偋偋厪厪偋厪厪厪厪傦傦傦傦傦傦傦傦傦傦傦傦傝907坵傦傟Image俕坵偋偋偋偁?惪偋偂H?沺g厙厙?in。桬僶僶僶003054?僶僯Width,萫ight,觕ale,敨oDataURL()襡visited僩僩僩僠12695僩僩僠Dynami?ly僇?椲傔傔傔傔傔傔傔傔傔傔傔傔傏686?傔??坓)蚭thod飂?s蟗jec徔僄僄傾21362僄僄玅in毨ゥ傴??傔傔傐4硱?傔?hat鈥檚螖鐐U

basic魟ヾisplay?柦04瞂???伀屟瞼俋橭刼/刉劮劮劮劦commun徯簜between萒ML鎜rm欅??厏925??厃C傁厬傁L絟偼?哋哋哋哋哋哋咼d?騟siz?c咃咃灧咃咃灧灧灧灧灧咃掞僩涍僩幥呄涍埱傔埱埱埱埱埱埱傷s?埧卂卂卂卂卂卂卂卂卂?卂卂卂匽凘l柀( )媌stroke€昺÷厳?h厳厳厭倽倗倐卂卂卂卂卂卂匼v (example)厀??厀??偡?叝???傔??俉?????圍glob匬shadow瀄偫劅屽775跨劅剼G?S?勶偋偉8424硂偋砵墘with匡匡胯傦囎囎囎囎囎囈h俻椔?閚峅岻厽㎞688彲厽厵H倳倵忂吙吙吙吙吙吙吙鐖紙瞤埓儑???9627﹚??傝嫥嫥傳唚唚唚唚唚唚唚唓set膊?爮協3100纯単卆S佨ス劒F?剰摕倵?27眊倵摕秓≦脕H朹偳偳偯5縳繃偳爅€爀娯e?Alignm?偳偳偳偫峢7浛偳厗2.0偡偡偡偡偡偡偡偡偡偡>,?媭€?Text醤d鬶e胊nvas脕H€?/u><€g鑕ight="4pt"鱥dth="0€`>baseline?alignment,??51011???F€〣侽d羵M??偳偱62774偳偳嚺Arranger謊rsion 2.0偡嚪嚪嚪嚪嚪嚥傋傃倫 (example)?????侽??囅偡弿偡偡弿弿弿偳囘囘囘囘囘囐?傗偰c偯????????囅偳偯84243偳偳偱with莚adi?s?Patterns傦圇圇圇圇圇圇?g?????????????????image饌虆??9078斍??I佲劖?呇匃匃匃匃匃匃勼oDataURL( )韊thod飂?objec抇匲31686姀匴妸?偡)蛡畳缦偸咓咓咓咓咓咓咈using吀asure垇?叝婟123?叝叒U侽侹勥勥勣p剹剹??剋則06882剋剋刾H庿g?ic廕閚€C傚?溈??26435???丠l煘strok嚡偋偋偉31009偋偋偁Sett叀?傗?倵倵倵倯2868倵倵?g俁觟z碿Face??僌僌僌4437暉僌穯C€﹤??????????或777岋?嚳奞?緡緡娗????????偡偡偡偡偡偡偡偡偡偡偡聪聪偡偡聪聪晈偳偳獌厁偳偳?????僶僶054?僶僯W?,取?觕ale,喅㎡襡visited僩僩僩僡87?僩僢Dynami?ly騟siz?唚唚???2136??inal?傔傔傔傔傐4煥?傔塉hat鈥檚螐?p隘隘??co珯?cod?v匧1.0刼??刼???効?偋?偋偋??倵砱砱€g嚄嚄嚀d彠彠?勶戇戇勶戇?戇??卭?卭卭卭卪f扂尩3尫?擏?擏擏擏匃匃岋傔擏傔擏擏?嘒嘒嘒嘒嘒嘍h?????020688嘩???B?嘊寃噰?????????矾矾?矾矾刧刧刧刧刧刧刧僇?帆f縺劎?2868劎劎壸g汄觽MF侶??叿憲僌囷僌囷nt胦lor?媭€?/u><€g鑕ight="4pt"鱥dth="0€`>handling鐁adient醤d餫tterns, <儜鉶lor="blue">H俥G俤s俲P俵閚詄xt羠ranger咃呹僶僱30541僶僶僫W?,葐?觕ale,儌toDataURL()襡visited僩塐塐塐塐塐塐嗛t?base€pe儕alignm噣?墋57775???倵倵倴吙???寈74???媜媓謊rsion 2.0偡坥坥坥坥坥坖v俫劅劅劅劅劅劅劅劅嘜偡偙727恎偡偡徻he胊nvas脕H€競菄_嘵p???佱A?餽operty,兏倸颾ject橈?063860???勜2D劷厀urr洷State卭??抷4827??抷oriz€萢l?倧圁p嚡嚡嚡勑B擡嚽嚽嚽効劺5433効効嚺drawScreen湗Funct彴勭噊偡妛偡偡妛妛妛妛???8258吙?吙吙吙偡偡偡?201煙偡偙棃ti????峗峗峓sett♂獱Guess詤圠€竒ame (example)?嚽嚽?嚽嚽嚽嚽歄歄€g厳厳厳厰Hello護rld匞匞捒捒匞匞匞匞匞匞匞楃?匋?Button.js凚,耂聟榦姉匴匴0143508彠匴匲傦傢??偀倶42021偀偀倻onMouseMove囸f圇偪偪偪3908毌偪偨initLists偗偗偗偗偒5棢偗偗偍圎偪偪偪偪??8偪偪偪tSound偡偡偡偡偞95偡偡偟choose厊ForCard?????1232??暦暦偡偡偡偡偘70嵡偡?恴Click偳偳偳偳?偳偳偳?偪偪シ????婄婄( 偳?峸峸??倵倵匫匫爓爓€g厳厳厯峸匞匞匞彿匞匞彿彿匃匃剹匃匃匃匁毾s???????????????匃匃匃く匃匃く勭勭勭勭€g勭勭勭◆勶勶幾?勶勶?匃匃匃匃匃匃匃勽瀲瀫???犠??犠犠???????犠???????????綠効効籝Metrics颾jects劅剾剎2384劅劅剺Us繕韊asure俼刉?倃俻6082倃倃俼Handl倝t侾鈇se€pe醤d醠ignmen?獁??嘷="0pt">wid?媭€卼h餽operty, Handling鬳xt鈇se€pe醤d醠ignmentTheora剣剟669133剣剣剙仯 +謔rbis = .ogg??p兿兿兿homas,莾皜8??1493110???What膐es嶙ebGL羛plication蘯ok蘨ke?剹剹剹剹剶three-way體ap峚gramm嬌construct匫塋78805嵪匫匢S侤p嵤wo錶e岻s閚吚€?di€坰厾al醨ray厪厪厪厪厪ust?倶rotated鋓rec圝(game颾j€€)呄?048326呄呄?傋鬶e傳傰卂卂卂卂匽冃韆p廤?394707凣凣凘Defin?a詡Map兿兪倗倖65審倗倐Cre?倗個?溔€qd傔傔傔0040177槸傔匷isplay弐増傃?€YCanvas傦傦傦吜327棗傦傦傤奌傢c傦傦傦呏2802傦傦傝匶嵥嵑倧倧倧倝3471倧倧椆tor卂p鋋ta倧倧倧倝個?倧????傦攌?敺敺敵c恾?勏拠拠勏拠拠拠拠効€g???d嚽噣扖?敺敺?壸壸敺敺?尶傦敺傦傦傦尶尶傦傦傦敺傦傦敺敺敺倧倧敺倧倧敺敺敺倧倧敺?倧????傦??????g傢???????????????倯峎€蹍廹廹?廹?廹効効効効効効>s弰廵劅憌憌劅憌墴憌劅劅剼凤刉凤e骽eet嵾?5646??Ⅹop嵚Part飂堣蒻age鬿?????6141??嘊imp勷Cell-Bas?Spri娎Anim︵縒??傷0418???hang奅?呚敂傁傁傁偵422?傁傁傁傁傁傁傁偹693厳傁偵Advanc園垷坓傋傋傋傄349傋傋?ov厤?Across嶹嶹??債7051垪?垞oos垪垪垪傁傁偺214?傁偵Loop偭Through??偡偡偝97煣偡ずraw厀le俹俹俹0118421娺俹俰Geo耹aster囒S泀偀偀偀倷934怗偀倷Refre潹r:岃lcul縆厃瀮ource靜c愖僩僩僤22255僩僩?ad傞in偣nds?】醩s¤???013126??慃re?a膟namic塛?t襲ntim孏???14?????????2936???T?偝for蟯r莂偳?p眊眊??c?庽庽n?戇戇?戇戇culating ?媭€卼he鬷le髈urce靜cation<€g鑕ight="4pt"鱥dth="0€`>cre侶ng鋣namic?heet醫騯ntime, <冄鉶lor="blue">C偉a膫碩偙S偟R偝咃呹??147????????埛????Geo耹aster舩tended (example)叝叕184219叝叝叏俫r厀t?圙偀01222558偀偀倶Load?in愥nds醤d?圶ssets???????l僀勶勶勶勶勶勶勶勶勶勶勶勶勶勶勶Micro詀nk蚢ze鏰m檯?叝捳2936捵叝叐T沗岋鎜r蟯r莻爡O匫匫匫匫匫匤us坾advanc扨cell-bas€Xanim灢厙厓036693?厙厑A俔C俌B俍A俔厳掔傋傄34?傋傃Mov厃iImage翄8ss€奀anva嵶??債70511???hoo垈倎嫆to膇splay傁傁傁偵犩0傁傁摵op偭Through??偡偡偝97偡偙Draw厀l恛恛恛€g恛恛?囦d囥効??効??????????d嚗偭on錫ch楗鴷G匫?匫匫??勶勶勶勶勶勶?t??劎劎慦劎慦慦慦慦勶勶€g勶勶焀i盜烥烥?渨141で単卆S侹?觩r宍無叝??債041??扖ang?扜扜傁傁偺422?傁傁傁傁傁??????傢????????????p勛勛動?tamp縣applic? (ex€╨e)??4377烥???袋傘?岀偗偍湗56偗偗穌h?l?偙()鎢nc抴傁傁卽973边傁偵How保Data.d€(閟飏g楄zed傜傜傜傕4280澂傜穻d峚mouse鍁ent礃o嶁c捶傳傳傱998傳傳垷垷垷垷傁傁偸5媑傁傁傁傁傁?p????a坃坃o??姺姺?姺俖姺姺?極漡卭卭卭漛o椆?code勶夌夌勶夌夌夌夌勄勄勄勄勄勂傁偵 傋?懴懴??俖????????櫾燐of氱氣匫滅滅匫滅?滅滅単単?????gam糤劖132576劘劘擔臃壯?G?剋洘偗偐7193偗偗偍Micro詀nk蚢ze膃scrip寳偳偳偱936糭偳廬?heet鎜r蟯r厙偳偳偱側偳偳偲P碃fiel孏t><?媭€?a>, The衛ayerMicro詀nk昿ze鐤Y(exa叐)剰嘦2719捛剰剦俫俢Descript沊?嘜偳偭9彉偳偳潿抝Sheet鎜r蟯r洸偳偳偳29偳偳?field俉俉俉㎡俉俉㎡㎡??㎡??㎡㎡??㎡??㎡???㎡??㎡㎡俖俖㎡㎡俖㎡㎡㎡㎡㎡???㎡?㎡㎡㎡㎡偀偀㎡偀偀????㎡????????㎡嬜?㎡㎡偗偗偗偗㎡偗叝傁傁傁傁㎡傁傁傁傁傁傁傁㎡㎡傁㎡㎡俉㎜?co??code凮??凮?????傁??傁??俉??????d飂皻?癘癘?癘癘癘癘勶剰勶勶勶勴e???冿冿冿冿冿冿e?獁獁??獁???????g魞鑴7?跋??跋??????p穁冿??冿冿???????凓舰?????????????rl濨劎??劎?????????匉s?勏勏??勏勶勶勶勶勶勶勳曎矸崐???????奯厀厀?????????坵坵€g坵坵坵骽eet勭?9匄勭勭杽勈S佱鎜r蟯r黔x劎劎ck?媭€卶uote>turn-based鏰me鎙ow醤d髏a伬machine, T偂B偄G偂F偉the觽翸偯??60453???GAME_STATE_PLAYER_LOSE偀倸暴/剸咃p勶漌漌勶漌効効効効剋t珸s奰en?(逗棁劮劤69201劮劮禝斎勔弹弹棁偀倹73209偀偀偀偀偀偀瓏??"><嘮>鈥?€庺ag畂愬孁8?劮劜倧倧倧匃匃匃匃?oDataURL( )韊tho豪Canvas颾ject匃匂6656曌匃墺HTML5?O?効孏偋偁85883偋偋偁Expor榸偆an蒻ag寃傁傁?1686傁傁卪?)蛨 飂???娗娗娗娗toStr厫娍,羠ray姺匫?282匫匫匨drawS檙匬Func?効効効効劷rans?€8rix刜?4018刜刜刓2D脌鄀xt孈d塳urre亁橺劮劮劮劮劮劮n堖剠13?6剣剣剙Si峬T俖俌凮愾傋傂62764傋傋傂Fill摡?s厴th嚴?s嚭Gradi嚑????95デ??Ro墣宨倷咜l€儐_哶???5437¨??Less倶2:譭韚st 鈥湅簝he鈥潕"poi佮楌origi?o€篶?痐€羥r骽ap櫛騾蒭閻 rou呰i?own亜厙厙厙厑5厙厙帺ca帬??倵倵倴8曍倵倵簯ombin巠傘媞嬣僌僌僌僌ⅴ8030呥僌僆Apply傾傳傳傫僕僕僐79667僕僕僎維僗a?ed傋傋傋?205?傋塲歰呄耡sic堬傁傁偸849堬傁幝tep 4:摩`掆?単偀偀倹9笎偀偀???傋傋傋?傋傋傋傋傋傋傋傋傄9123?傋傋ing??媭€匱ransformed蒻age, Displaying鬶e韆p飊€Zcanvas傦傦傦00748338傦傦傝C?謎deo詤臿tions:襬t€Z????60475????Puzzl垏倗倗001030924倗倗個Appl坮?厇鬿莂me莚aphic埾???39埾??T?呍Stack俹俹俹俰6189俹俹俬効ic吙吇傁傁傁側42€(傁傁坅lpha芶d愼P慞er觝ip傁傁傁傁傁傁傁傁傁傁傁傁118421坃傁圸?Blast俬T仺倫eet偀倸

a?f??偘s? (g嫏example)?囩囩?囩囩囩囩匫/?厳厳厳厲ni徤傃?椤1?毤389026???侼a挓??傋379667傋傋傋傋傋傋??????濤漻?g潀?????????厪坃??????圇圇圇圇圇圅俵忔叒鈇s??38205勥勥?係B俁?嚙傁偵8493傁傁側Step 4:膔aw楘旉偀囎囎囎囎囎囈combin崙r泊,釗S€[d韔vement厙厖9123?厙???吙圵傋蛔傋傋蛔蛔蛔蛔傦埀埀埀埀埀埀骳a╜?堳?査呥呠15800狑呥愹傊S傊緐????????>prerender?s鈏t塦s鎜r钳嚺xt?d哶睏睏哶睏睏睏叝叝叝叝叝叝叏婥厛?辩p鎟om銛@€??収繌収収繌繌??敓傁寸傁傁寸寸寸寸垷垷€g垷垷垷?憅擔l滛?撣39501?????団?圙圙?圙?4375???Less倶2:诇萿st 鈥渽漞鈥潏阷oi佮of飏igi殬o濗庛€羥彙ape€賴xt醨ou呰its飛n亜厙?????婜???507琯?琤濌壪壪凮凮凮凮凮凮video,弚?074833???謧檯O匥:厽廹??604廹???Puzzl??p囎囎囉?( )鎢nc噺剋0146靶剋剋撟撟撟撟撟撟撟撟撟撟撟撟噖噐p???洤狈嗙49澾嗙嗙嗙嗙嗙嗙嗙嗙嗙嗙嗙嗙嗙嗙愖厙橓641?厙?摲?倵塺?壙壙?er?be€Pe棘橏妎勶勶勶u?媭€卐">Scale詒ansformations<€g鑕ight="4pt"鱥dth="0€`>in騩t俲魝鐐? <儁鉶lor="blu匊Less?2:譭韚st 鈥渹抣ate鈥濘he餺i佮of飏ig冟to€篶enter€聈r骽ape€賱襡閠醨ound€Ps飛n亜囷囷囶p嚙嚙嚕劜parency??30739???Com丂iting飬饏谻anva孏刐偡偞27320偡偡偙Global羖pha釃8Text倵嗢p帍帍嗭嗧c亹roll?with鐐騻雙ropert嚪嚪嚪?嚪嚪嚪嚪??卭卭卭卨勭勭?t???????????勄勄?urn-based鏰me鎙ow,髷rmachine???1345544???T偐B偑G偐F偍噆妶S傗M傘吙抴??60453??圛AME_STATE_PLAYER_LOSE偀????傐size€鑰xb>U夎?侘侌8侘侒Unique蒁,吀nd懥⒏餳ysi?韔b唒鋏vice嗺嗶48068?嗺?tep?F偫壥?鈥檚諆絿o噊?噊厊upd嬭-僗lide-犂dcycl勶?537992勶勶勯e╄噣Σodヨn鋜awScreen()勥勥勥勥勥勜/劀(repeat)勭勭壢07?勭勭擈剤U俿R倀R倀C俼勏摟傦傞80?傦傦傦傦傦傦嚪嚪嚪嚥seCap?e飌碼剋?刋12?剋剄HTML5??Hello護rld!碒刼刼刼刼杕TF-8鉮幮c?卑o枡劎劌2645?劎劇<meta侸se僅偮">剰剰剰剰滅滅溾V滅侘滅侘侌variable??4245???Encapsu綻栺Y?Java柛ipt脳Q?扒啅抔僔7167塛僕抏崹Guess詟hLet嬂嵢┗V??壙?????哶叿s醦pl?搲堶堶堶収堶偀堶堶堶堶疮疮????堖堐?(example)呥??呥?????吙吙篻厀厀搲ector姀劦48561?劮劚Mov奞on嶂??挧?倄949??倆Bounc倝Off譨ll唚??倄62墵??疊i婭莚avity俖擥堢埾埾埶m?bj?嘪???????啛???????喛啩????喬??s壝g壝乭th?嬒嬒?嬒嬒??敆勏勏敃丂?(maximum櫂gi?to餷ay殸ship毀?竲608痮??G俵歱P俿S俼a蛢儘垊?戇呄呄吿Vertex儀鈛ffer,譭bGLョ扜協50231ミ単卆Initializ佲閚悭2App()??????Ind€0?????328緊?????????v?shade凢496320凣凣撡伀儣儣儣儣儣t嚫l醠ignme側of鬳xt凎椞251615凎or="blue">?媭€?u>Vertical醠ignment
v?linear鐁adi?s, <傎鉶lor="blue">凣l?凣凣凣凣凟ideo儳儰294359儳儳儬Image衋tterns醤d詄x?兯偋偆666984偋偋偁Mixing萒ML5謩翪anva啛傋傋傂83341?傋傃What鈥檚螀 ?俖俖俖?7336俖俖俋匃o觰ppor嚡倗倗倎75868倗倗個Con?嚾偒Forma?偗偗偒798噰偗偐Basic奜偘Imple?ation傦傦傦007€35傦傦傝Prelo揌厲in蔭vaScrip坥傔傔吜8284吳傔傏lain-Vanilla傯Embed偡偡偡偙7043偡偡?侭with脕rol?Loop,?Autoplay????9?槆??Al楬垯the讱醾釮洑飂€聞J???嬬??嬬嬬嬬嬬傔傔傔傔傔傔傔傔傔傔傔傑3炏傔堧衦ob??Ev??庩ded儫暘僿僿僿僸9061僿僿僿僿僿僿僿僿僿僿價1206暉僿僸Dis戦壒晻o偰プ???2877唎??偯喐pe偀偀偀偀偀偀偀偀偀偀偀倻3796ǒ偀?嚴?嚦舩a!傁傁傁偸89傁偸Us殽curr嶩Tim掣叧y鬿胷eat氒廳儣儣儣儛4県瑖儣瑐咉們Transf瑠┌s:襬??????????????6047瀘???uzzle倗倗倗倗倗倗倗倗倗倗倗紙€07倗倗倎嵄?櫹?????????????24032??ni崼襡visited:蚾v儺?????????????3????????a€ p>金傆剰噰噰剰剰剰剰剰剰噰?噰???????<€g鑕ight="4pt"鱥dth="0€`>video€恡h銈0rols,靜op,醤d醬toplay, <冑佇lor="blue">V偗C偖L偖A偓咃咃咃咃咃咃呹厫verting鎜rmat?匞匔75868匞匞匑勮?厸F?勏勏勏勏勏勏勈dis?偵on萒ML5胊nva??712060???D侴a?倗倐卂匷?傹28771??傴侹偯Prop坅e偀圇圇€g圇圇圀偦p値劘劘劘劘劘劘劘劘嘒偀737966偀偀攩壭the壞舩ampl傁噖噖噖噖噖噖厐欳?髐pport?攎6733??嚽匸S?勭勭勭勭勭勭勨preload?in蔭vaScrip勛夻?5勛勛勑P?匊俫俙?屪傔傏384傔傔傌A?blemEvents?Eded儫?僿僿僿僸906掃僿僿僿僿僿僿僿?嫰????儑鍍倕焻焻焻焻焸厽厽厽厽厽厽厽厽厽厽uss髈urce枴餫ttern呯呭294359呯呯呧Image衼鋮猅ex憦??€g???g颤e瀟?犉891???U侸牘curr娦Tim厛+y鬿胷ea刋?嬰??儣儛4833硹儣硳k們Transions:襬t€Z?????????????076047爮???uzzle倗倗倗倗倗倗倗倗倗倗倗008€07倗倗倎嵄??trols?棺?????????????24032??熒ni崼襡visited:蚾v儺?欸欸€g欸欸欳c?惦c?毱厳埀埀厳埀埀?埀叝埀?埀??埀埀埀埀?埀埀埀埀埀>r?垽t?€▍w淥淥厀柗淥侽淥淥垙?櫹櫹??櫹櫹?????í◤e皎忋▼報稄厽厽厽啹儣孏孏儣?孏孏孏孏壡壡壡壡壡壠垱p?鏰me?巁巁??巁巁劅倗渨渨倗渨渨渨渨渨嚡嘜>Basic萒ML5謎deo蒻plementation傦傡729739傦傦傝偪o袆鹖es偀偀偀00849771偀偀倶勷orta€蠥udi偪偪偧

a侭objects刼刼刼刼刼刼刼刼刵刉劮劮劮劦v壀劮劮師劮劮師嬬師師勭傦師師傦師師?偀?噟p???olu曍sl個r,閚teractive劮孧孭0孫劮劚Cre嗀ng胾stom誷er脕Prols飊鬶e胊nva卂圇僄傾92193僄僄傽Set?Up倰彺lay儀Va????傴912232???lick-and-Drag謭骃堯傁傁傁偵442吳傁偵俆婥鯽riabl卭偋偋偅8858偋偋偋偆fun嵗onality偳淿悧??恵c?d?愾愹勶奧奧勶奧奧奧奧嚪傁奧傁傁嚪奧奧偋偋偋奧偋偋偋奧奧奧毾姛姛?傜傜傘?????侽侽??勏????傜姱Э?屪????勶勶勶勶勶勶勲灺鎜r餷ac狟飂勶∠∠勶∠∠∠∠匞匞???夌mechange鍁勮壚盯??5277櫁?秅秅E俍劮濿刼刼刲Vorbi嵡祣6913堖兿兩Theora +?侀 = .ogg兿兿兿兿兺P8側dec冪筤1425冪冪憽伕兿 .webm冏冏冏冏冊偹size€鑰xb>W嵿?侘侌8侘侒W3C鱡bsit窅cov辐?of祃 2D膔aw戀API嗭嗢09582帡嗭嗛佂??嗺?嗺?wall巰b書昉?倶with綉鈦鈕爯僸€羷Ylis?恎厺54??厽厵B僄僄個?刏????咟.wav凃凣榥40294凣凣漼up榪ed苚rma楪兦兦兦壙eb醦p?a?d溔lop≠,餫radigm骽ift噃勭勩159877勭勭囤onclu婇劘劘劘劘劘鈘owser?扸03789儫儫儤Runn庒?Examp妶徺€丅ook凮拂傦傕ㄐ8?傦Jntrodu弒to萒ML5晈傁傁傁27226傁傁側A觟匶倲P毿倗倗倗個4861匫倗es??See議e?r?娀討胹???儈196781??儀Fi?儀Shap媥楤Pa?n傁傁傁埞0323犌傁珜??TexPI偡偡偡猌54偡偡猒猒猒倧倧?37250倧倧嶚??俉俉櫀497677俉俉嵪?WebGL髰C姭M崩rnizr?殗?毾毾毸妎妎I?卂岀岀卂岀??岀勫勏>looking醫骾mple萒ML5餫ge, A觽5袀<€g匃匃勼pattern?ls?剕196781??剎F仒喩Shapes偘th劆倆s勄勄勄勄勄勄劼runn傞exa嚈s閚鬶is鈯x匞壗03789匞匞匑R俓the艂€侭俻単単単単単単卋support鎜r屲Canva?庽1983???Introductio勦o俉侾???????rted醬dio匶mat??837250???佢F佦劅劅劅劅劅劅剼test尮壉c?髤3劮壟4861壡劮劚T侱墭See議e幦r庴rows€`S偯s妛呥呥呥呥呥呥呥呝WebGL呑呑呇1497677呑呑呑??歝Mod歑izr厙厙厙厙厙厙厒vide彟?恅by厪媆671542厪厪厛VP8 +謔rb淗= .webm勶勶勵p劎劎劊佮?囼炞剣徿1228攺剣剚We鈥檇蘨ke檼ear鎟om賝u勄勀p???剎securit埁disab﹃勸Ch偁璯庡562905勥勥庣?Applica炇@Goog?偝??????刉?8732?刉?ur槉Exp€葎2?兂倧値673嗊倧倝CopperLicht侴侴侴侫937侴侴嶒h笜Is椲?俖俖俖俍77?俖俌How膐稍嫺倧倧倧倧918倧倧倝L挔n淴r?bou傦傦傦傦492744傦傦囃Do?a熌?n虡8枤????418徔??JavaScript靑brarie徔倧倧倞593?倧倝??????樂???834恛?篕itializ洊阐?()傋傋傋灗04768傋傋?ni?灲cub???倆911怗?溣ll脟爮x埪倃倃倃俻2304?倃烥烥烝娀婻傜傜傜傗7匴傜獿峚挓厛挓偪??a棗, 3D騩t娪姳勶??勶?????卂??????囩倧倧倧?倧?????????????????????傋傋??傋???????????倃倃??倃????傜a屵屲劘庍庍劘庍?庍劅劅劅劅劅劄comple?c?剋愖愖剋愖愖愖愖倃愖愖倃愖r舩plo?媭€卹ations鱥th譭bGL
<€g鑕ight="4pt"侙dth="0€`>initializ傏閚鉧nvasApp( ), <儜鉶lor="blue">I俫俫俤)匴匴匴匴匴匴匯shaders劅劄5939劅劅剺S伀冿冿冿冿冿冿冴testing鎜r嬎髐pport宑Mo?nizr匃匂7677匃匃勷T偡偡偡偠??????咜defined匃匁89375匃匃勷What蓅動????????JavaScript靑braries鮯ed噅勥勡523714勥勥勝塲倵虃晠???????resourc勦尡in€0m杺?庌1850???How膐商earn嶺re羈out?匞匞匞匞匞匞敄劮師77?劮劮劙撗刉刉刉凷p???.webm冓湩?06嵷2捛??VP8 +謔rbis = 侭??p冪冪冩呅M鰅deo髏andar栫???????????S塇et?曠828煰冞冑Multiplayer羛plich舕ectroServ?5劎劎劎劎劋w€蕜垇憚繄?76効効劯Available佲鱾S?????h儀靜op埊凊77188瀼凎凂R?omiz╭the饀zz侾pie淧?????€a醤d?刉凾30585愖刉凲Dynam尃lly襡s劅C禸刧刡傜備43276?傜?mageData醫tribu?倧倧倧?908?倧崼lter?W嚻H嚶飂€耉橝???岎€3埀??Preload僆俲举傔??岹岹岰a呿獻瀓懐圇圇効圇圇圇圇圇?圇?圇??圇圇圇傔?甇???笺搹驌廵銚妳g曶曶単曶曶俹曶卭卭卭卭卭卭"?颾j???????劎劎?刜刜?侲, <墸>錶eme??045???挋d廈塻鬿夆HTML袇袇_梂????property凮凪6765◤凮処T兡5別O媯?朞偋?123?偋偄Us嗎measureTex倃唶??喯喬劀??喯??喯喯喯刜?斪劎劎劎>唩Me恏c勍勄堬堬勄堬堬堬剹?彿凮彿i禭w堬?堧33640??堨Docu暽執蚾del (DOM)濿匃怬?8707?????鈥淗ello護rld!鈥潅鐐鐐鐐?€(傜傜傜傜傜傜傜傜備7553?傜堼initGame()苪nction偋偋偋偁8741偋偂Export煰煩an丧Q傁????对ddEv?Listener( )捫thod勭奼奼勭奼奼€??媭€匟ello護rld!鈥?/u>, The閚itGame()苪nction偋偄<€g鑕ight="4pt"鱥dth="0€`>load鍁ent剣剠38707剣剣剙HTML5胊nvas 鈥渿g噂勄勄勄勄勄勄open( )韊thod勭勫87413勭勭勦Exporting?to醤蒻age勏勏勎p剣剣剝windows,鉹ea傗logical?€焰or鷒omed飏餫nn€Pi儥咃呾410709咃咃呰C?a讉譼忴??傜傛6268傜傜傕P劙傎倃倃坰p???剤iarczyk,耬n冿冹52909尫冿冮Ball?tera曏s€h餳ysics凣凣凣凣凞?size€鑰xb>X嶩?侘侌8侘侒Xcod?DE??1夎346???Go壻Mob亪!厪?俉侾45765俉俉侾Inst坔倅刡俹俹俹俬50劺俹俹憞帿BS聙`o衕oneGap衦oject媋僩僩僩僥66411僩僩?es僙on價Simulator偗偗偗偍8068?偗偐Step 2:茥p偤device鈥檚課iqu峚????345椏??Us媈燳Target?唝膬r??犠擶抔抍爒嬜嬚p嬘卂巜巜卂巜巜偋巜巜巜吙収????i擽匞??匞??凮凮凮凮凮凮碏ok俼up頉??D?捵捵?捵捵捵偀捵呑厀呑呑呑呎set崚buil?掚硲億収昰昰収昰昰昰昰媑厳厳€g厳厳厯t??瀫i?獱灉叿犗犗叿犗犗犗卂卂粀?????Z???侘侌z哖絇r紁€8a忚game硞El欨roServe??53969???Z偡偡e颠∽勭喿勭om掘?p紎i糦偁剋綶09882剋剋剅侴窘an痉劅﹐傁937?傁偵Keyboard塸put俖俖俖俋10709俖俖勅诇ow鎜r??傜傜傛626橤傜傖嚗倃倃倃倃倃倃倃倃倃倃倃倃1835岀倃屽屚偀偀偀偀倶2161奯偀倷Applic妏on:脕rolle?僎儥???徔??徔徔俖?⒆桏桏>c勛栬勔棄刜噂噂刜噂噂倵噂噂噂?噂??噂噂俖??嚡嚡嚡嚚?log吚l€钘m勄檱檱勄檱檱檱?匫嚙傜?傜??倃倃嚳嚳嚳嚳嚳ヵ尠?剣剣剣剣剣剣剣剣?剣剣剣糉畅taneously撀玂卂卂卂?卂卂??厙厙厙
About鬶e羥thors亸亸亰,啿剦past 3 1/2鵨ars.萫垻one飂?h咢e?Alexa騛nk?咅mo塜噿娤娛姁?.Jeff戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺戺恛恛戺戺戺亸亸戺戺寳戺戺戺戺戺戺戺娤戺戹寶戯戯戯戯戯戯戯戯戯戯戯戯戯戫ЁЁЁ?ЁЁЁВC寈phon昰??T喨animal匬?co懾嬞憏憉柋?New趀al捹kaka (乭N?塜meridionali仮)?夃rrot錸demic墶th?country.詡▊I夑n巌懆e嬥rom儝Ma桜嶑d寕倓(a鋟plic櫢咗憚?剤k膩?,侅伭鈥渻鄐崍ech鈥?.蓆啽倛t?Strigopida涴amily,漍ich鋷恟g?劼o乭刔s 80鈥?00韎ll剄態醙o佽?傃墘mas?囸兏溋妎d鈘ok寛剅囨su枲c巔扝彁Gondw昘.習鴉in?charact嬥st?哛?咞€y??b両l?彸?t歱uⅠ嘯are鮯嘪?ollect?ctar?挧挧挔A?dium-斸d峞?18閚c瀤€8靍ngt剦?勮?ckyオ潄a蠼瑕0squ剻tail崱嗀洜??€竝r?r嘮l?-夽wn哫ith嘫匑峆sp嚒f潣ims憴屗u斎rw⒒冃rump愐?yellow偯侶奞佖i€8唄ek伝a鐁ay傕?侜posse€嫞s?p疈rv埌b焫???`y塙spec疊孲it孖?o?y骵eds靜os旔?愋€饎dig鮬娦s岺猉毜?墍殙ui妏ber瞇帥?f?妶???。冟bir凘嬶嬮arbol,靑v敼?ⅱan殌嬘?瀂〃匬Ve喲oc禭猻u€?呹嘸狝憏a涏?c媭?s?ti挩lud玿湤?侶?妝w?屓穐in悙園燞d匢pai惫uil筯劇儔h椑股?刪厜l庿a鉲ut屓?wo咢ur錱硺聞冄漃s?旽??yg???榼憄俌娻┼an带俬du楬o熼?ш,?da?匼掄p堣ㄊзfood構non-n仺姲堜慬cl挔働rel秞e懶?p撹?彊fac壉siⅧarq?勷s鈥攣檳鑱揌??冮悓眫膊genu塰a剤al忦dy鐤ê1幚?mo回rec圫?1851)奜奜奜奓秢?懾▔檻C?怭砵凲搚憖Hory剻垖佲?佖Adobe蒚C谦`澙d?t??Linotype耰rka;噅h啇塹侽侷Myriad脗@e潏d;媌?朒値ucasF€h卹儉SansMono佄?簇縣€2mbp:p噣栬ak/€祤*塷1em塷壣絸gn="?er">Tabl?f厵t桖HTML5?nva?u?a僈b?quot娽儞??儑儐2752儑儑儉Pre昿e僟僜僄儳儳僁€蟺g?刧刧刦3356刧刧刞Run緤怚Examp?櫞Book???€o€o勛??€蟻/???€5458??咗WYou?Пo薾ow収収?block瑑巰卶uote>How詇is耾ok蓅蟫ganizedHTML5胊nvas 鈥淗ello護rld!鈥?/u><€g鑕ight="0pt"€蟻/?width?a鎖lepos=0000094236>What鈥檚蝒xtc€╡xt.arc()Applying徼oriz?al鐁adie亁to€萻trokeFont觟ze,芶ce譭ight,醤d觮yle耡sics<叡鉶囅嚿H?ling茍嚔?in詄xt羠ranger囷囷喎€o€o€o€o€o?囷囷?€g€g€g€g圤圤圤圝868圤圤圚Availab廝€鷖彥?嚄儻€o€o€o€o€o€o叿??€蟺g€g€g€g???圐4219???圐w剛??兎€o€o€o€o€o€o吙??€蟺g€g€g€g????6120???Generic圀f楌囩囩儣€o€o€o€o€o€o厽囩囩€蟺g€g€g€g囩囩囩囧7233囩囩ыs熭HTML5驘憗Pntrol坃坃喛€o€o€o€o€o€o?坃坃?€g€g€g€g坃坃坃圽9291坃坃圶Creat▂the頴?sary鯽ri橀sā€賑anvasApp()鎢nction??嚄€o€o€o€o€o€o嗭???€g€g€g€g????40憳???Set?eve€餳?er堚埱)??嗊€o€o€o€o€o€o????€g€g€g€g???坾1426??坸Defin垏垊惼埾埾埾喦?€o€o€o€o€o€o€g埾埾?€g€g€g€g埾埾埾埲250埾慓歬?欞drawScreen??埧刼€o€o€o€o€o€o唚埧埧€蟺g€g€g坃坃坃圼3818坃坃?C€﹪G嘒収€o€o€o€o€o匃嗊嗊?€g€g€g€g????4894???H椺彊€鱾`th蔛囷囷哋喎€o€o€o€o€o??圵圵?€g€g€g圇圇圅5046燨圇?Base?簁Alignm牥囅囅?€o€o€o€o€o?噂噂?€g€g€g€g嚽嚽嚽嚵101狗嚽嚵Vertical釃??咷€o€o€o€o€o€o厽囩囩?€g€g€g€g囩囩囩団44竒囩棑oriz€葒鲊鲊鲀o€o€o€o€o€o叝圇圇€蟻/€g€g€g侽圇圇圅7187圇圇焽?ext鈼遜坵坵坵喿€o€o€o€o€o€o?坵坵?€ge>Text羠ranger謊rsion 2.04.蒻ages飊鬶e胊nvas<€g鑕ight兣€蟺g?wid勭勭勩1832勭勭勦T剎Basic苼樣etup鎜r詇is胔apter匴匴?€o€o???€蟻/????3995???婈?姱卂僩€o€o?卂卂€蟻/€g€g????504???Preloading慭咷咷呥€o€o€o€o€o????€g€g€g???346580???Display?an??榶傂th鋜aw€?)??嗙€o€o€o€o€o????€g€g€g???352123???Resiz??Painted鬿圤忂嚽?€o€o€o€o€o呥嚽嚽?€g€g€g嚽嚽嚽嚴5498嚽嚽嚴Cop徛Part飂?嚳嚳嚳冏€o€o€o€o€o呑嚳嚳?€g???60???嗻Simp┴Cell-?巟Spri倛Animation嗊嗊収€o€o勭??€蟺g€g€g喯喯喯喫141く喯嵚re咗晝唂苧am噋ou曅白喿?€o€o€o€o€o吙嚙嚙?€g€g€g嚙嚙嚙嚑2784嚙嚙嚙嚑詉mer蘯op???€o€o€o€o€o匫???€g€g€g???36383??hang?淁T可淴?噊噊?€o€o€o€o€o厙噊噊?啹啹啹啳6349啹啹啫Advanc涾淲暱喎喎?€o€o効呯呯€蟺g€g€g啩啩啩啠7596啩啩啝Examin峎峆Sheet???€o€o€o€o€o単嘜嘜?€g€g€g嘜嘜嘜36844嘜浨Arr攺噂冞€o€o€o€o€o?噂噂?€g€g€g噂噂噂嘺9噂噂涷oos帶涽涽噊儑€o€o€o€o€o厙噊噊?€g€g€g噊噊噊噄7174噊噊噄?嘺Through嚘繃嘩兿€o€o€o€o€o卭嘩嘩?€g€g€g嘩嘩嘩嘝2721嘩嘩嘝Draw幏le??呑€o€o€o€o€o????€g€g€g???375€0???Mov?Image羉ross€奀anva帶嚐?€o€o€o€o€o叿嚐嚐??嗊嗊嗈966?嗊扁pply嗛Rot[Transfors鬿醤 ?泙€匢mage<勧鉶lor="blue丠u>Canvas詒ansformation耡sics啛啛?€o€o€o€o€o厙噊噊?€g€g€g€g囅囅囅嚿2619囅囅嚾Step 1:觓ve鬶e鉼rre丣ntext鬿€簊tack圵圵?€o€o€o€o€o€o唚埧埧?€g€g€g€g埧埧埧埣3205埧埧埥2:襡se??t愡愘€8rix堮id墄ity堬堬嘜€o€o€o€o€o€o啩堬堬?€g€g€g€g堬堬堬堩607堬堬堩3:胦d懀堟醠gorithm坵坵喿€o€o€o€o€o€o?坵坵?€g€g€g€g坵坵坵坱464坵坵坴4:膔aw坮i℅??唃€o€o€o€o€o吙????€g€g侊嚙嚙嚘849?嚙嚒An?ting岍d蓢邍邊讍?€o€o€o€o厪噖噖€蟺g喎喎喎393270喎喎?re啳Grid飂詠喟啅兦€o€o剹吙吙€蟻/€g€g???唡41??唞Defin?仩蚢p哤哤咃€o€o€o€o€o????€g€g€g???39596擮?崯??俙th€rd??咷€o€o€o€o€o厳???€g€g€g???40119??帤isplay噳噏碻€YCanva昗噺?€o€o€o€o€o収噺噺?€g€g€g€g囷囷囷囮240廹囷囬噏?醤d?噺噺哤€o€o€o€o€o€o叝圇圇?€g€g€g€g圇圇圇圁3088圇圇?喝從m圥data圇圇哤€o€o€o€o€o€o叝圇圇?€g€g€g€g圇圇圇圁忦圇圇椣椢?椞c椣圵哋喎€o€o€o€o€o??圵圵?????937???Zoom桒Pann悍??厀€o€o劮呥呥?€g€g€g啛啛啛?354啛啛??Window鎜r嵤喎喎呯哋€o€o€o€o厽噰噰€蟻/€g€g噰噰噰噭121?噰旿raw??嚰嘜嘜?€o€o€o€o€o単嘜嘜?€g€g€g嘜嘜嘜415382嘜嘜嘓?the蒻age<?泙€?u><叡鉶lor="blue丠u>Zoom醤d衋n鬶e蒻ageMoving閚嵊traight蘨neBall€﹍isions閚鋏pthHTML5謎deo觰pportHTML5謎deo衦opertiesListening鎜r鬶e鈛tton餽essesLook蚢,蝟詀g!<唝鉶lor="blue丠u>Preloading醠l醩sets俻thout鏻obal鯽ri埱埱喛?€o€o€o€o€o??埱埱?€g€g€g€g埱埱埱951927埱埱埨Re圚t埞the鏰me囩囩咷€o€o€o€o€o€o厽囩囩?€g€g€g€g囩囩囩囦4971囩囩囙Mouse€皀trol嚳嚳?€o€o€o€o€o€o厀嚳嚳?€g€g€g€g嚳嚳嚳嚰8229嚳嚳嚫Boun楯box€閘ision鋏tect€P圵圵喎€o€o€o€o€o€o?圵圵?€g€g€g€g圵圵圵圫6110楋圵牚lay椷椷囎儑€o€o€o€o€o€o厪囎囎€蟻/€g€g噖噖噖噒7606噖噖噋Itera? #1:袊銼恞s誷ㄚ觻8le蟗j恏垏垏嗙€o€o€o€o€o????€g€g€g???96887椷???2:胷e€h嚫Unlimited膟namic埑?皐?劮€o€o€o€o€o哤???€g€g€g???0974902????3?忨嚭Po?嚙?€o€o€o€o€o吙嚙嚙?€g€g€g嚙嚙嚙嚑80780嚙嚙嚙嚒4:襡u棅Preload徯楥嚳嚳唶€o€o€o€o€o呑嚳嚳?€g€g€g€g????9118???Or髏uff鵲u?uld鋙鬿閙prove╛圤圤?€o€o€o€o€o€o唎埛埛?€g€g€g€g埛埛埛埑266埛埍T噽final€衐€Xor觩ace襛ider悷圵?€o€o€o€o€o€o?圵圵€蟺g???1006828???What鈥檚蝒x啛僶€o€o?単協劎劎劎7714劎劎劆8.胊nvas菗惻ssential嫙??€g?墬?墬匃匃勽914檞匃墦y劼s閚萒ML5?勄勄塤€o€o刼厳厳€蟺g€g€g哤哤哤員551哤哤哖?Compar焫Flash???€o€o€o€o€o単嘜嘜?€g€g€g嘜嘜嘜嘪58?嘜?膐崢嚋Offer嵖嘒兛€o€o€o€o€o卂嘒嘒??唶唶唵179?唶瓓ur耡sic??苼饐梿梾_€o€o劅quote??泙€卐ight="0pt">Our莂me鈥檚膃signThrusting閚鬶e騩tated鋓rectionThe餷ayer蟗jectRefresher:胊lculating鬶e魝 髈urce靜c€萶nAdding閚嵊tep詉mer嚙嚙?€o€o€o€o€o匴???€g€g€g€g嚐嚐嚐嚈8365嚐嚐嚇How鬶e髧yt噛鱫rks嚡嚡唚€o€o€o€o€o€o呄???€g€g€g嚪嚪嚪嚤45837嚪嚪嚢Geo耹a嚚r舩tended苪ll觨urc?圇?€o€o€o€o€o収噺噺??喯喯喬31214喯喯喩Creat?a膟namic?le觝eet醫襲n???呑€o€o???€蟺g???324714??淚觟mp吚呴-Bas岠G?吙僩€o€o剹吙吙吙?€g€g侊??唦6063??唜Micro詀nk蚢ze膃scription啑啑?€o€o€o€o€o?噂噂?€g€g€g€g嚽嚽嚽嚵719嚽嚽?崢餽ogress噊噊?€o€o€o€o€o€o厪囎囎€蟻/€g€g€g€g囎囎囎8076囎囎囌strategy嚳嚳?€o€o€o€o€o€o厀嚳嚳?€g€g€g嘷嘷嘷嘯751嘷嘷嘪T别?鎜r蟯r?囅吳?€o€o€o€o?噂噂€蟻/€g€g噂噂噂嘽3232枏噂噀Playfield嗺嗺吙€o€o€o€o€o?嗺嗺?€g€g€g€g嘩嘩嘩嘡96睴嘩睴睭t嚇boar??儣€o€o€o€o€o€o厽囩囩€蟺g€g€g噰噰噰噧573?噰幾ayer嘒嘒収€o€o€o€o€o匃嗊嗊?€g€g€g嗊嗊嗊341192嗊嗊嗆Enem喿僌€o€o€o€o€o勶喿喿?€g€g€g喿喿喿喰3784喿喿喸Goal喯喯厳€o€o€o€o€o勭喯喯?€g€g€g喯喯喯34438崯喯崬xplo贡s??吳€o€o€o€o€o????€g€g€g???34521嵡?嗿urn-Based?苐ow醤dSt龚蚢chin?囘刉€o€o€o€o€o咓囘囘?€g€g€g€g????687???GAME_STATE_INIT噂噂?€o€o€o€o€o€o厙囅囅?€g€gote>GAME_STATE_WAIT_FOR_LOADSimple萶megrown罥蟰erviewCreating鬶e镺S羛plic€爋n偍th衕oneGapStep 5:膔ag餽ovisioning鎖le閚to豤ode蟫ganizer鱥ndowFurther舩p€萢tions俬th譭bGLExtensions?殌処NDX??t?TAGX 0173tIDXT?INDX?t0000?秬€0001*?€00023?榉€0003>?娨€0004M?宛€0005X??剙0006j??0007t腉?穩0008??珋0062Y??觻0063??鷢0064??瀫0065??磤00667??褉0067>??陘0068G??唨0069X??006A_??絸006Bq??蝷006C-??駙006D1??焵006E4??觻006F=??鴢0070[??弨0071??瓈0072??羳0073G??鄝0074M??鮻0075T??妧0076??珋0077 ??藔0078-??鋩0079@??鰛007A]??崁007Bd碝?渶007C1??珋007D:??纮007EH??觻007Fd??鎬0080t??唨0081??瓈00829闌?蟺0083y??靲0084%鱣?弨0085 ??潃0086??畝0087N餢?褉0088&??鋩0089a閗?麁008AM奞?潃008B ??讇008C +??魛008D T??瓈008E g??葊008F u??靲0090 ~??妧0091!??瑎0092!??聙0093"/謚?踿0094#%??亐0095#V??檧0096$?硛0097$u??蟺0098%1贐?還0099%t??個009A&/??憖009B&[??畝009C'??鄝009D'L錒?梹009E(??祤009F(P??虁00A0(d??踿00A1(p??騹00A2(x??厐00A3)??殌00A4)??畝00A5)R??莯00A6)s??醼00A7*)卾?墍00A8+??00A9+:麹?讇00AA,??鼆00AB,??潃00AC,:㎞?脌00AD-鮅?趢00AE-R鐀?悁00AF.D??穩00B0.n??藔00B1/??閫00B2/T??鼆00B3/d??█00B40 ??趢00B50!凮?媭00B60p??渶00B70z??硛00B81??蕗00B91=鈉?迉00BA2!籑?€00BB2o??00BC2y??眬00BD3 ??莯00BE3$??賭00BF36??鈥00C03Q??儉00C13[??搥00C23|??畝00C34??艀00C44#肔?銆00C54p??噣00C65??粈00C75??褉00DA:T??騹00DB;??儉00DC;??秬00DD;@??韤00DE ??虁00E6>??趢00E7>7??麁00E8>J??00E9>U??瞼00EA>v??衻00EB???醼00EC?L??妧00ED?p??瞼00EE?y??踿00EF@??00F0@"??瑎00F1@&??蝷00F2@/??輤00F3@]??魛00F4@|逤?瀫00F5A@??祤00F6Af??謤00F7B ??鼆00F8B??攢00F9B"麱?祤00FABi??衻00FBC ??騹00FCC%??剙00FDC/??妧00FEC;??拃00FFCC??泙0100CL??磤0101C]??纮0102Cb??蕗0103Cu??觻0104D??髝0105D@?%?悁0106Ge??瞼0107H镕?葊0108HH??謤0109I??唨010AI??010BI??蓘010CI,??還010DIQ??髝010EIh齆?妧010FJ7??0110J>??簚0111JL??鰛0112K??瀫0113K??瓈0114K??詟0115KJ??鶂0116L?咢拃0117P 搖艪硛0118Q?驚軃0119Q?韤011AQ ?鳣麁011BQ-?藺梹011CQC?誂獉011DQn?燗祤011ER?諥縺011FR?篈葊0120R?矨讇0121R?蜛鐎0122R ?€€0123R"?夿憖0124R)?婤0125RA?鉈艀0126RI?頑還0127RR?鯞€0128R`?鍯晙0129Rf?睠畝012ARl?桟蛝012BRr?丆閫012CRw?麯剙012DR}?餌012ES?鞤箑012FS?繢衻0130S8?﨑魛0131SK?笶崁0132So?8奅獉0133V'?朎蛝0134VB?奅踿0135VU?酔饊0136Vc莇婩€€0137WG?闒墍0138We?現爛0139Wj?矲箑013AWn?肍詟013BWt?郌顎013CWy?扜拃013DW{?訥瑎013EW?罣葊013FX?蹽銆0140X?獹鴢0141X'?翲墍0142XB?鼿潃0143XY?燞蛝0144Xd?睮€€0145Y?驣0146Y&?釯線0147Y?html lang="en">?meta charset="UTF-8">?title>鈥?/title>揂 Simple HTML5 Page?div>?canvas>猅he Document Object Model (DOM) and CanvasavaScript Frameworks and Librarieshere Does JavaScript Go and Why?璄ncapsulating Your JavaScript Code for Canvas糢sing document to reference the canvas element in JavaScript睺esting to See Whether the Browser Supports Canvas橰etrieving the 2D Context橳he drawScreen() Function欴ebugging with Console.loghe 2D Context and the Current State桾he HTML5 Canvas Object扝ow the Game Works㏕he 鈥淕uess The Letter鈥?Game Variables桾he initGame() Function濼he eventKeyPressed() Function橳he drawScreen() Function淓xporting Canvas to an Image揟he Final Game Code峎hat鈥檚 Nexthe Basic File Setup for This Chapter橳he Basic Rectangle Shape焀hat鈥檚 Not Part of the State?琀ow Do We Save and Restore the Canvas State?歋tarting and Ending a Path廲ontext.lineCap恈ontext.lineJoin塴ineWidth媠trokeStylexamples of More Advanced Line Drawing峜ontext.arc()廲ontext.arcTo()岯ezier Curves歍he Canvas Clipping Region機ompositing on the Canvas僉esson 1: Transformations are applied to shapes and paths drawn after the setTransform() or other transformation function is called驦esson 2: We must 鈥渢ranslate鈥?the point of origin to the center of our shape to rotate it around its own center昐cale Transformations珻ombining Scale and Rotation Transformations橲etting Basic Fill Colors汱inear horizontal gradients狝pplying a horizontal gradient to a stroke盇pplying a horizontal gradient to a complex shape扸ertical gradients扗iagonal gradients怰adial gradients淔illing Shapes with Patternsreating Shadows on Canvas Shapes峎hat鈥檚 Next払asic Text Displayandling Basic Text in Text Arranger疌ommunicating Between HTML Forms and the Canvas欳entering text using widthhat about the height of the text?梖illText and strokeText‵ont Size, Face Weight, and Style Basics旳vailable font styles朅vailable font weights扜eneric font facesont size and HTML5 range control糃reating the necessary variables in the canvasApp() functionetting event handlers in canvasApp()疍efining event handler functions in canvasApp()璖etting the font in the drawScreen() function燞andling font color with JSColor扸ertical alignment擧orizontal alignmentandling text baseline and alignment橳ext Arranger Version 2.0andling globalAlpha transparencies桯andling global shadows橪inear Gradients and Text橰adial Gradients and Text桰mage Patterns and Text癏andling Gradients and Patterns in Text Arrangerynamically resizing in Text Arranger濪ynamically Scaling the Canvas玊he toDataURL() Method of the Canvas Object濬inal Version of Text Arranger峎hat鈥檚 Nexthe Basic File Setup for This Chapter慞reloading Images睤isplaying an Image on the Canvas with drawImage()esizing an Image Painted to the Canvasopying Part of an Image to the Canvasreating an Animation Frame Counter旵reating a Timer Loop淐hanging the Tile to Display楨xamining the Tile Sheet汣reating an Animation Array淐hoosing the Tile to Display橪ooping Through the Tiles怐rawing the Tileoving the Image Across the Canvas璖tep 1: Save the current context to the stack砈tep 2: Reset the transformation matrix to identitytep 3: Code the transform algorithm朣tep 4: Draw the image滱nimating a Transformed Image揇efining a Tile Map濩reating a Tile Map with Tiled擬ap height and width擲toring the map data燚isplaying the map on the canvas烠reating a Window for the Image楧rawing the Image Window慞anning the Image朲oom and Pan the Image嶵he zoom scale嶬eyboard input擨mageData attributes扜etting image data扨utting image data烪ow ImageData.data is organized visual look at our basic applicationdding mouse events to the canvas淭he highlightTile() functionopying from One Canvas to Another峎hat鈥檚 Next怐rawing the ballracing movement: A path of points扢oving on a Vector朆ouncing a Single Ballultiple Balls Bouncing Off Walls筂ultiple Balls Bouncing with a Dynamically Resized Canvas淏all interactions in physics窶aking sure the balls don鈥檛 start on top of each other欳ircle collision detectioneparating the code in drawScreen()漊pdating positions of objectsetter interaction with the walls旵ollisions with balls楤all collisions in depthultiple Balls Bouncing with Friction桿niform Circular Motion橫oving in a Simple Spiral汣ubic Bezier Curve Movement廙oving an Imagereating a Cubic Bezier Curve Loop嶴imple Gravity淪imple Gravity with a Bounce盙ravity with Bounce and Applied Simple Elasticity禨imple Gravity, Simple Elasticity, and Simple Friction滶asing Out (Landing the Ship)朎asing In (Taking Off)嶹hat鈥檚 Next?朤heora + Vorbis = .ogg扝.264 + $$$ = .mp4擵P8 + Vorbis = .webm揅ombining All Three楥onverting Video Formats橮lain-Vanilla Video Embedideo with Controls, Loop, and Autoplay汥ynamically scaling a video盇 Problem with Events and Embedded Video in HTML5ideo must still be embedded in HTML燰ideo is displayed like an imageet an interval to update the display朒TML5 Video Properties礥sing the currentTime Property to Create Video Eventsanvas Video Transformations: Rotation揝etting up the game漅andomizing the puzzle pieces扗rawing the screen獶etecting mouse interactions and the canvas盋reating hit test point-style collision detection癝wapping two elements in a two-dimensional array怲esting the game朇reating video buttons朠reloading the buttons揚lacing the buttons燣istening for the button pressesnimation Revisited: Moving Videos嶹hat鈥檚 Next?昑he Basic