{"id":881,"date":"2010-12-11T18:37:22","date_gmt":"2010-12-11T21:37:22","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=881"},"modified":"2010-12-11T18:37:22","modified_gmt":"2010-12-11T21:37:22","slug":"trazendo-o-atari-para-o-html5-com-canvas-space-invaders","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=881","title":{"rendered":"Trazendo o Atari para o HTML5 com Canvas: Space Invaders"},"content":{"rendered":"<p><a href=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-882\" style=\"margin: 10px;\" title=\"Hunting-Space-invaders\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg\" alt=\"\" width=\"228\" height=\"300\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg 228w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg 290w\" sizes=\"(max-width: 228px) 100vw, 228px\" \/><\/a>Continuando minha pesquisa sobre HTML5 usando canvas, aqui est\u00e1 meu mais novo experimento: recriei \u00e0 minha moda o cl\u00e1ssico &#8220;Space Invaders&#8221; do Atari. Confesso que fiquei MUITO satisfeito com o resultado e, espero, voc\u00eas tamb\u00e9m.<\/p>\n<p>Desta vez n\u00e3o posso dizer que o c\u00f3digo seja t\u00e3o m\u00ednimo quanto minha<a href=\"https:\/\/devkico.itexto.com.br\/?p=875\"> primeira grande experi\u00eancia<\/a>, pois um dos meus objetivos foi justamente trabalhar em algo mais complexo. Sendo assim, para evitar ficar perdido em uma multid\u00e3o de c\u00f3digo fonte, optei por modularizar meu projeto.<\/p>\n<p>H\u00e1 algumas diferen\u00e7as com rela\u00e7\u00e3o ao original que devem ser salientadas:<\/p>\n<ul>\n<li>O jogo possui final: basta aniquilar todos os invasores para ser saudado com os meus &#8220;peculiares parab\u00e9ns&#8221; :D (fica a surpresa). H\u00e1 somente um n\u00edvel.<\/li>\n<li>N\u00e3o h\u00e1 barreiras de prote\u00e7\u00e3o, o que torna o jogo mais dif\u00edcil e, na minha opini\u00e3o, mais divertido tamb\u00e9m.<\/li>\n<li>A coreografia dos invasores est\u00e1 ligeiramente diferente (gera uma certa confus\u00e3o que me diverte bastante)<\/li>\n<li>E, claro, eu vou te xingar o tempo inteiro :D<\/li>\n<\/ul>\n<p>\u00c9 importante mencionar que, novamente, \u00e9 apenas uma prova de conceito. Estou evoluindo aos poucos para que, em um futuro que espero pr\u00f3ximo, eu possa desenvolver coisas mais complexas usando tanto HTML5 como outras tecnologias (Flex, OpenGL, Java, etc.). Pra mim, \u00e9 muito mais uma sa\u00edda da minha zona de conforto. Saida esta que tem me feito MUITO bem (e eu recomendo a todos).<\/p>\n<h3>Sobre compatibilidade entre browsers<\/h3>\n<p>Novamente, o browser campe\u00e3o foi o Chrome. Ele renderizou tudo perfeitamente sem problemas e, o que achei mais interessante: tamb\u00e9m reproduziu meu \u00e1udio perfeitamente. Pra minha surpresa, ele aceitava o formato MP3, que foi aonde gravei os sons pela primeira vez. No Firefox, no entanto, eu s\u00f3 posso tocar arquivos no formato OGG ou WAV (fiquei com pregui\u00e7a de converter, sendo assim, para ouvir minha voz sexy, use o Chrome), por\u00e9m a renderiza\u00e7\u00e3o no Firefox, assim como no Chrome, \u00e9 perfeita.<\/p>\n<p>No IE8 o &#8220;Space Invaders&#8221; simplesmente n\u00e3o executou. Sinceramente, nem me esforcei neste caso, porque, confesso, tenho birra deste browser (como todos voc\u00eas).<\/p>\n<p>Minha grande decep\u00e7\u00e3o desta vez foi o Safari. Como n\u00e3o estou com meu macbook, tive de testar meu jogo na vers\u00e3o Windows, e por alguma raz\u00e3o, caso voc\u00ea morra ou termine o jogo, ele trava. Ao usar as ferramentas de desenvolvimento, fiquei muito frustrado, pois elas n\u00e3o me permitem depurar o c\u00f3digo t\u00e3o bem quanto no Chrome ou no Firefox usando Firebug.<\/p>\n<h3>Resultado final<\/h3>\n<p>Basta clicar na imagem abaixo para ver o resultado. Espero que se divirtam jogando-o (e fu\u00e7ando meu c\u00f3digo) tanto quanto eu AMEI trabalhar nesta brincadeira. Semana que v\u00eam coloco mais uma aventura por aqui.<\/p>\n<p><a href=\"http:\/\/www.itexto.net\/canvas\/space_invaders\/space_invaders.html\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-883\" title=\"space_invaders_kico\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/space_invaders_kico.png\" alt=\"\" width=\"399\" height=\"322\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/space_invaders_kico.png 399w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/space_invaders_kico-300x242.png 300w\" sizes=\"(max-width: 399px) 100vw, 399px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuando minha pesquisa sobre HTML5 usando canvas, aqui est\u00e1 meu mais novo experimento: recriei \u00e0 minha moda o cl\u00e1ssico &#8220;Space Invaders&#8221; do Atari. Confesso que fiquei MUITO satisfeito com o resultado e, espero, voc\u00eas tamb\u00e9m. Desta vez n\u00e3o posso dizer que o c\u00f3digo seja t\u00e3o m\u00ednimo quanto minha primeira grande experi\u00eancia, pois um dos meus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[61,53],"tags":[],"class_list":["post-881","post","type-post","status-publish","format-standard","hentry","category-javascript","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devkico.itexto.com.br\/?p=881\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Continuando minha pesquisa sobre HTML5 usando canvas, aqui est\u00e1 meu mais novo experimento: recriei \u00e0 minha moda o cl\u00e1ssico &#8220;Space Invaders&#8221; do Atari. Confesso que fiquei MUITO satisfeito com o resultado e, espero, voc\u00eas tamb\u00e9m. Desta vez n\u00e3o posso dizer que o c\u00f3digo seja t\u00e3o m\u00ednimo quanto minha primeira grande experi\u00eancia, pois um dos meus [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=881\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-11T21:37:22+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg\" \/>\n<meta name=\"author\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@loboweissmann\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kico (Henrique Lobo Weissmann)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=881\",\"name\":\"Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg\",\"datePublished\":\"2010-12-11T21:37:22+00:00\",\"dateModified\":\"2010-12-11T21:37:22+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=881\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg\",\"width\":\"290\",\"height\":\"380\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=881#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Trazendo o Atari para o HTML5 com Canvas: Space Invaders\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\",\"url\":\"https:\/\/devkico.itexto.com.br\/\",\"name\":\"\/dev\/Kico\",\"description\":\"Desenvolvendo software\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devkico.itexto.com.br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\",\"name\":\"Kico (Henrique Lobo Weissmann)\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g\",\"caption\":\"Kico (Henrique Lobo Weissmann)\"},\"sameAs\":[\"https:\/\/x.com\/loboweissmann\"],\"url\":\"https:\/\/devkico.itexto.com.br\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devkico.itexto.com.br\/?p=881","og_locale":"pt_BR","og_type":"article","og_title":"Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico","og_description":"Continuando minha pesquisa sobre HTML5 usando canvas, aqui est\u00e1 meu mais novo experimento: recriei \u00e0 minha moda o cl\u00e1ssico &#8220;Space Invaders&#8221; do Atari. Confesso que fiquei MUITO satisfeito com o resultado e, espero, voc\u00eas tamb\u00e9m. Desta vez n\u00e3o posso dizer que o c\u00f3digo seja t\u00e3o m\u00ednimo quanto minha primeira grande experi\u00eancia, pois um dos meus [&hellip;]","og_url":"https:\/\/devkico.itexto.com.br\/?p=881","og_site_name":"\/dev\/Kico","article_published_time":"2010-12-11T21:37:22+00:00","og_image":[{"url":"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg"}],"author":"Kico (Henrique Lobo Weissmann)","twitter_card":"summary_large_image","twitter_creator":"@loboweissmann","twitter_misc":{"Escrito por":"Kico (Henrique Lobo Weissmann)","Est. tempo de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=881","url":"https:\/\/devkico.itexto.com.br\/?p=881","name":"Trazendo o Atari para o HTML5 com Canvas: Space Invaders - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders-228x300.jpg","datePublished":"2010-12-11T21:37:22+00:00","dateModified":"2010-12-11T21:37:22+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=881#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=881"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=881#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/Hunting-Space-invaders.jpg","width":"290","height":"380"},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=881#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Trazendo o Atari para o HTML5 com Canvas: Space Invaders"}]},{"@type":"WebSite","@id":"https:\/\/devkico.itexto.com.br\/#website","url":"https:\/\/devkico.itexto.com.br\/","name":"\/dev\/Kico","description":"Desenvolvendo software","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devkico.itexto.com.br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7","name":"Kico (Henrique Lobo Weissmann)","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6973d86a689bc63122b2e603f25be3?s=96&d=mm&r=g","caption":"Kico (Henrique Lobo Weissmann)"},"sameAs":["https:\/\/x.com\/loboweissmann"],"url":"https:\/\/devkico.itexto.com.br\/?author=1"}]}},"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/881"}],"collection":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=881"}],"version-history":[{"count":1,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/881\/revisions"}],"predecessor-version":[{"id":884,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/881\/revisions\/884"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}