{"id":875,"date":"2010-12-04T11:03:28","date_gmt":"2010-12-04T14:03:28","guid":{"rendered":"https:\/\/devkico.itexto.com.br\/?p=875"},"modified":"2010-12-04T11:03:28","modified_gmt":"2010-12-04T14:03:28","slug":"levando-o-atari-para-o-html5-usando-canvas-e-javascript-freeway","status":"publish","type":"post","link":"https:\/\/devkico.itexto.com.br\/?p=875","title":{"rendered":"Levando o Atari para o HTML5 usando canvas e Javascript &#8211; Freeway"},"content":{"rendered":"<p><a href=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-876\" style=\"margin: 10px;\" title=\"save_the_chicken\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\" alt=\"\" width=\"238\" height=\"236\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif 238w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken-150x150.gif 150w\" sizes=\"(max-width: 238px) 100vw, 238px\" \/><\/a>Em 1985 ganhei meu primeiro video game do meu pai: era um Atari 2600, e o jogo que o acompanhava era o &#8220;Freeway&#8221;. Sendo assim, nada mais natural que o primeiro jogo que eu tente recriar seja este!<\/p>\n<p>Me propus recriar em Javascript usando o novo elemento canvas presente no HTML 5 alguns cl\u00e1ssicos do Atari (de prefer\u00eancia, todos). Optei pelo Atari pelas seguintes raz\u00f5es:<\/p>\n<ul>\n<li>S\u00e3o jogos extremamente simples do ponto de vista gr\u00e1fico (basicamente, apenas desenho de ret\u00e2ngulos e pouqu\u00edssimas transforma\u00e7\u00f5es)<\/li>\n<li>As regras s\u00e3o banais. Veja Freeway, por exemplo: tudo o que voc\u00ea precisa fazer \u00e9 levar a galinha ao outro lado da rua para que, por m\u00e1gica, mais uma tente a mesma travessia.<\/li>\n<li>O desafio t\u00e9cnico \u00e9 do caralho: basta lembrar que River Raid, com seu mapa de propor\u00e7\u00f5es quase infinitas ocupava APENAS 4 KB de mem\u00f3ria.<\/li>\n<li>O Atari possui um valor muito especial pra mim. Foi meu primeiro videogame e, al\u00e9m disto, o dispositivo no qual desperdicei minha inf\u00e2ncia. :D<\/li>\n<\/ul>\n<p>Esta minha primeira vers\u00e3o do Freeway \u00e9 apenas uma prova de conceito. Antes que postem aqui os defeitos, os listo para voc\u00eas:<\/p>\n<ul>\n<li>Meu algoritmo de colis\u00e3o \u00e9 muito fraquinho. Basicamente, os carros s\u00f3 tem a certeza de terem aniquilado nossa pobre galinha quando passam por cima da sua cabe\u00e7a<\/li>\n<li>As ruas s\u00e3o ainda mal desenhadas &#8211; eu poderia melhorar isto, mas quer saber? Fiquei com pregui\u00e7a. :D<\/li>\n<li>Ainda n\u00e3o domino bem a escrita de texto com o canvas. Repare como os textos aparecem horr\u00edvelmente borrados.<\/li>\n<li>A renderiza\u00e7\u00e3o, como j\u00e1 se era de esperar, varia um pouco entre navegadores. No caso, testei o Freeway apenas no Firefox 3.5 e Chrome.<\/li>\n<li>Ainda n\u00e3o h\u00e1 som (n\u00e3o trabalhei neste ponto ainda)<\/li>\n<li>S\u00f3 h\u00e1 uma galinha! (esta \u00e9 uma prova de conceito meu caro!)<\/li>\n<\/ul>\n<p>Clique no screenshot abaixo para tentar ajudar nossa pobre galinha a atravessar a rua. (e divirta-se com meu c\u00f3digo fonte!) :D<\/p>\n<p><a href=\"http:\/\/www.itexto.net\/canvas\/freeway.html\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-877\" title=\"freeway\" src=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/freeway-300x224.png\" alt=\"\" width=\"300\" height=\"224\" srcset=\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/freeway-300x224.png 300w, https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/freeway.png 651w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<h3>Conclus\u00f5es ap\u00f3s o experimento<\/h3>\n<p>Javascript est\u00e1 se tornando, pouco a pouco, minha linguagem favorita. O ambiente de desenvolvimento \u00e9 o que mais gosto: apenas um editor de texto e um browser, nada de IDEs (nada contra IDEs, mas adoro este sentimento de &#8220;raiz&#8221;). No caso do Freeway, o desenho \u00e9 basicamente bitmap, ou seja, s\u00e3o criadas matrizes com valores num\u00e9ricos represenando cores que em seguida s\u00e3o renderizadas, como quadrados adjacentes na tela. Bem simples.<\/p>\n<p>Freeway foi o primeiro e \u00faltimo jogo de Atari que criei &#8220;na unha&#8221;. A partir deste primeiro trabalho, iniciei o desenvolvimento de uma biblioteca que me permite automatizar diversos elementos presentes em um jogo, como por exemplo renderiza\u00e7\u00e3o, f\u00edsica, inputs, etc. Nesta biblioteca h\u00e1, por exemplo, um editor gr\u00e1fico (tudo \u00e9 escrito em Javascript) que me permite criar sprites muito mais r\u00e1pido que o m\u00e9todo aplicado em Freeway (to louco pra liberar este subprojeto).<\/p>\n<p>\u00d3bviamente, eu poderia ter implementado um Freeway muito melhor em C ou Java, mas quer saber? Estou descobrindo at\u00e9 onde posso ir no canvas. E at\u00e9 agora, poucas limita\u00e7\u00f5es apareceram (99% fruto da minha pr\u00f3pria ignor\u00e2ncia). Faz muito tempo que n\u00e3o me sinto t\u00e3o feliz aprendendo algo. Espero que gostem da minha vers\u00e3o do Freeway. Aguardo opini\u00f5es!<\/p>\n<p>Grande abra\u00e7o!<\/p>\n<p>PS: Ah! Como no original, a galinha s\u00f3 pode se mover pra cima e pra baixo. :D<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Em 1985 ganhei meu primeiro video game do meu pai: era um Atari 2600, e o jogo que o acompanhava era o &#8220;Freeway&#8221;. Sendo assim, nada mais natural que o primeiro jogo que eu tente recriar seja este! Me propus recriar em Javascript usando o novo elemento canvas presente no HTML 5 alguns cl\u00e1ssicos do [&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-875","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>Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/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=875\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/dev\/Kico\" \/>\n<meta property=\"og:description\" content=\"Em 1985 ganhei meu primeiro video game do meu pai: era um Atari 2600, e o jogo que o acompanhava era o &#8220;Freeway&#8221;. Sendo assim, nada mais natural que o primeiro jogo que eu tente recriar seja este! Me propus recriar em Javascript usando o novo elemento canvas presente no HTML 5 alguns cl\u00e1ssicos do [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devkico.itexto.com.br\/?p=875\" \/>\n<meta property=\"og:site_name\" content=\"\/dev\/Kico\" \/>\n<meta property=\"article:published_time\" content=\"2010-12-04T14:03:28+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\" \/>\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=\"3 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=875\",\"url\":\"https:\/\/devkico.itexto.com.br\/?p=875\",\"name\":\"Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/dev\/Kico\",\"isPartOf\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage\"},\"image\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage\"},\"thumbnailUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\",\"datePublished\":\"2010-12-04T14:03:28+00:00\",\"dateModified\":\"2010-12-04T14:03:28+00:00\",\"author\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7\"},\"breadcrumb\":{\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=875#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devkico.itexto.com.br\/?p=875\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage\",\"url\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\",\"contentUrl\":\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif\",\"width\":\"238\",\"height\":\"236\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devkico.itexto.com.br\/?p=875#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devkico.itexto.com.br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Levando o Atari para o HTML5 usando canvas e Javascript &#8211; Freeway\"}]},{\"@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":"Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/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=875","og_locale":"pt_BR","og_type":"article","og_title":"Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/dev\/Kico","og_description":"Em 1985 ganhei meu primeiro video game do meu pai: era um Atari 2600, e o jogo que o acompanhava era o &#8220;Freeway&#8221;. Sendo assim, nada mais natural que o primeiro jogo que eu tente recriar seja este! Me propus recriar em Javascript usando o novo elemento canvas presente no HTML 5 alguns cl\u00e1ssicos do [&hellip;]","og_url":"https:\/\/devkico.itexto.com.br\/?p=875","og_site_name":"\/dev\/Kico","article_published_time":"2010-12-04T14:03:28+00:00","og_image":[{"url":"http:\/\/www.itexto.net\/devkico\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif"}],"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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devkico.itexto.com.br\/?p=875","url":"https:\/\/devkico.itexto.com.br\/?p=875","name":"Levando o Atari para o HTML5 usando canvas e Javascript - Freeway - \/dev\/Kico","isPartOf":{"@id":"https:\/\/devkico.itexto.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage"},"image":{"@id":"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage"},"thumbnailUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif","datePublished":"2010-12-04T14:03:28+00:00","dateModified":"2010-12-04T14:03:28+00:00","author":{"@id":"https:\/\/devkico.itexto.com.br\/#\/schema\/person\/502ab8892631bb005d6da2269fe5a3a7"},"breadcrumb":{"@id":"https:\/\/devkico.itexto.com.br\/?p=875#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devkico.itexto.com.br\/?p=875"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/devkico.itexto.com.br\/?p=875#primaryimage","url":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif","contentUrl":"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2010\/12\/save_the_chicken.gif","width":"238","height":"236"},{"@type":"BreadcrumbList","@id":"https:\/\/devkico.itexto.com.br\/?p=875#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devkico.itexto.com.br\/"},{"@type":"ListItem","position":2,"name":"Levando o Atari para o HTML5 usando canvas e Javascript &#8211; Freeway"}]},{"@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\/875"}],"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=875"}],"version-history":[{"count":3,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/875\/revisions"}],"predecessor-version":[{"id":880,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=\/wp\/v2\/posts\/875\/revisions\/880"}],"wp:attachment":[{"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devkico.itexto.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}