CINXE.COM

<!doctype html> <html lang="en-US"> <head data-template-path="https://hacks.mozilla.org/wp-content/themes/Hax"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="w2ocEMd5yV9IsGCjhq-7ls67r4VH-Ob6oWdiZpqjN8U"> <meta property="og:site_name" content="Mozilla Hacks – the Web developer blog"> <meta property="og:url" content="https://hacks.mozilla.org/tag/games"> <meta property="og:title" content="Articles tagged with “Games” – Mozilla Hacks - the Web developer blog"> <meta property="og:description" content="hacks.mozilla.org"> <meta property="og:image" content="https://hacks.mozilla.org/wp-content/themes/Hax/img/hacks-meta-image.jpg"> <meta property="twitter:title" content="Articles tagged with “Games” – Mozilla Hacks - the Web developer blog"> <meta property="twitter:description" content="hacks.mozilla.org"> <meta name="twitter:card" content="summary_large_image"> <meta property="twitter:image" content="https://hacks.mozilla.org/wp-content/themes/Hax/img/hacks-meta-image.jpg"> <meta name="twitter:site" content="@mozhacks"> <link href='//fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/css/font-awesome.min.css"> <link rel="stylesheet" href="https://hacks.mozilla.org/wp-content/themes/Hax/style.css"> <link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.6.0/styles/solarized_light.min.css"> <script type="text/javascript"> window.hacks = {}; // http://cfsimplicity.com/61/removing-analytics-clutter-from-campaign-urls var removeUtms = function(){ var l = window.location; if( l.hash.indexOf( "utm" ) != -1 ){ var anchor = l.hash.match(/#(?!utm)[^&]+/); anchor = anchor? anchor[0]: ''; if(!anchor && window.history.replaceState){ history.replaceState({},'', l.pathname + l.search); } else { l.hash = anchor; } }; }; var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35433268-8'], ['_setAllowAnchor', true]); _gaq.push (['_gat._anonymizeIp']); _gaq.push(['_trackPageview']); _gaq.push( removeUtms ); (function(d, k) { var ga = d.createElement(k); ga.type = 'text/javascript'; ga.async = true; ga.src = 'https://ssl.google-analytics.com/ga.js'; var s = d.getElementsByTagName(k)[0]; s.parentNode.insertBefore(ga, s); })(document, 'script'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-5WVW12ST9K"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5WVW12ST9K'); </script> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>  <title>Games Archives - Mozilla Hacks - the Web developer blog</title> <link rel="canonical" href="https://hacks.mozilla.org/tag/games/" /> <link rel="next" href="https://hacks.mozilla.org/tag/games/page/2/" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://hacks.mozilla.org/tag/games/","url":"https://hacks.mozilla.org/tag/games/","name":"Games Archives - Mozilla Hacks - the Web developer blog","isPartOf":{"@id":"https://hacks.mozilla.org/#website"},"primaryImageOfPage":{"@id":"https://hacks.mozilla.org/tag/games/#primaryimage"},"image":{"@id":"https://hacks.mozilla.org/tag/games/#primaryimage"},"thumbnailUrl":"https://hacks.mozilla.org/wp-content/uploads/2020/08/mozillahacks-js13kgames-webxr-webmonetization.png","breadcrumb":{"@id":"https://hacks.mozilla.org/tag/games/#breadcrumb"},"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://hacks.mozilla.org/tag/games/#primaryimage","url":"https://hacks.mozilla.org/wp-content/uploads/2020/08/mozillahacks-js13kgames-webxr-webmonetization.png","contentUrl":"https://hacks.mozilla.org/wp-content/uploads/2020/08/mozillahacks-js13kgames-webxr-webmonetization.png","width":1280,"height":640,"caption":"js13kGames 2020"},{"@type":"BreadcrumbList","@id":"https://hacks.mozilla.org/tag/games/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://hacks.mozilla.org/"},{"@type":"ListItem","position":2,"name":"Games"}]},{"@type":"WebSite","@id":"https://hacks.mozilla.org/#website","url":"https://hacks.mozilla.org/","name":"Mozilla Hacks - the Web developer blog","description":"hacks.mozilla.org","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://hacks.mozilla.org/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}</script>  <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Feed" href="https://hacks.mozilla.org/feed/" /> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Comments Feed" href="https://hacks.mozilla.org/comments/feed/" /> <link rel="alternate" type="application/rss+xml" title="Mozilla Hacks - the Web developer blog » Games Tag Feed" href="https://hacks.mozilla.org/tag/games/feed/" /> <link rel='stylesheet' id='wp-block-library-css' href='https://hacks.mozilla.org/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' type='text/css' media='all' /> <style id='co-authors-plus-coauthors-style-inline-css' type='text/css'> .wp-block-co-authors-plus-coauthors.is-layout-flow [class*=wp-block-co-authors-plus]{display:inline} </style> <style id='co-authors-plus-avatar-style-inline-css' type='text/css'> .wp-block-co-authors-plus-avatar :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-avatar :where(img){vertical-align:middle}.wp-block-co-authors-plus-avatar:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-avatar.aligncenter{display:table;margin-inline:auto} </style> <style id='co-authors-plus-image-style-inline-css' type='text/css'> .wp-block-co-authors-plus-image{margin-bottom:0}.wp-block-co-authors-plus-image :where(img){height:auto;max-width:100%;vertical-align:bottom}.wp-block-co-authors-plus-coauthors.is-layout-flow .wp-block-co-authors-plus-image :where(img){vertical-align:middle}.wp-block-co-authors-plus-image:is(.alignfull,.alignwide) :where(img){width:100%}.wp-block-co-authors-plus-image:is(.alignleft,.alignright){display:table}.wp-block-co-authors-plus-image.aligncenter{display:table;margin-inline:auto} </style> <link rel='stylesheet' id='prismatic-blocks-css' href='https://hacks.mozilla.org/wp-content/plugins/prismatic/css/styles-blocks.css?ver=6.7.1' type='text/css' media='all' /> <style id='safe-svg-svg-icon-style-inline-css' type='text/css'> .safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://hacks.mozilla.org/wp-content/themes/Hax/js/analytics.js?ver=6.7.1" id="analytics-js"></script> <link rel="https://api.w.org/" href="https://hacks.mozilla.org/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://hacks.mozilla.org/wp-json/wp/v2/tags/20250" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://hacks.mozilla.org/xmlrpc.php?rsd" /> </head> <body> <div class="outer-wrapper"> <header class="section section--fullwidth header"> <div class="masthead row"> <div class="branding block block--3"> <h1> <a href="https://hacks.mozilla.org"> <img class="branding__logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/mdn-logo-mono.svg"> <img class="branding__wordmark" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/wordmark.svg" alt="Mozilla"> <span class="branding__title">Hac<span class="logo-askew">k</span>s</span> </a> </h1> </div> <div class="search block block--2"> <form class="search__form" method="get" action="https://hacks.mozilla.org/"> <input type="search" name="s" class="search__input" placeholder="Search Mozilla Hacks" value=""> <i class="fa fa-search search__badge"></i> </form> </div> <nav class="social"> <a class="social__link youtube" href="http://www.youtube.com/user/mozhacks" title="YouTube"><i class="fa fa-youtube" aria-hidden="true"></i><span>Hacks on YouTube</span></a> <a class="social__link twitter" href="https://twitter.com/mozhacks" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i><span>@mozhacks on Twitter</span></a> <a class="social__link rss" href="https://hacks.mozilla.org/feed/" title="RSS Feed"><i class="fa fa-rss" aria-hidden="true"></i><span>Hacks RSS Feed</span></a> <a class="fx-button" href="https://www.mozilla.org/firefox/download/thanks/?utm_source=hacks.mozilla.org&utm_medium=referral&utm_campaign=header-download-button&utm_content=header-download-button">Download Firefox</a> </nav> </div> </header>  <main id="content-main" class="section"> <h1 class="page-title"> Articles tagged “Games” </h1> <ul class="article-list"> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2020/08/js13kgames-2020-a-lean-coding-challenge/">js13kGames 2020: A lean coding challenge with WebXR and Web Monetization</a> </h3> <p class="post__tease">Announcing the return of the annual month-long competition for HTML5 game developers. For js13kGames contestants, the file size limit for all entries is set to 13 kilobytes of code. That's what makes this a <em>code golf</em> challenge. In addition to great prizes across a host of categories, including WebXR and Web Monetization, expert game reviewers provide valuable feedback on all submissions. </p> <div class="post__meta"> Posted on <abbr class="published" title="2020-08-12T08:49:36-07:00"> August 12, 2020 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2020/04/experimental-webgpu-in-firefox/">A Taste of WebGPU in Firefox</a> </h3> <p class="post__tease">We are excited to bring WebGPU support to Firefox because it will allow richer and more complex graphics applications to run portably on the web. WebGPU is an emerging API, designed from the ground up within the W3C, to provide access to the graphics and computing capabilities of hardware on the web. </p> <div class="post__meta"> Posted on <abbr class="published" title="2020-04-23T07:51:55-07:00"> April 23, 2020 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2020/03/web-monetization-coil-and-firefox-reality/">Innovating on Web Monetization: Coil and Firefox Reality</a> </h3> <p class="post__tease">An in-depth introduction to web monetization with Coil. Coil is a payments platform that doesn't really on advertising or personal data collection to support digital content creators directly. Firefox Reality is rolling out a Coil-based experiment for creators and consumers, and you're invited to participate or learn more about how it works, and why Mozilla is involved. </p> <div class="post__meta"> Posted on <abbr class="published" title="2020-03-31T11:56:59-07:00"> March 31, 2020 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://hacks.mozilla.org/wp-content/uploads/2020/03/13709_Val-72x72.png' srcset='https://hacks.mozilla.org/wp-content/uploads/2020/03/13709_Val-144x144.png 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2020/03/learn-web-technology-at-sofa-school/">Learn web technology at “sofa school”</a> </h3> <p class="post__tease">Here are some web development learning resources for kids of all ages. All you need is a web browser. This collection looks at social VR experiences using Hubs and Spoke, CSS coloring and games that teach Grid and Flexbox, and WebXR field trips that are out of this world.</p> <div class="post__meta"> Posted on <abbr class="published" title="2020-03-25T11:13:54-07:00"> March 25, 2020 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2019/10/from-js13kgames-to-mozfest-arcade-a-game-dev-web-monetization-story/">From js13kGames to MozFest Arcade: A game dev Web Monetization story</a> </h3> <p class="post__tease">This is a case study in the making: how js13kGames, an online “code golf” competition for web game developers, tried out Web Monetization this year. And ended up at the Mozilla Festival, happening this week in London, demoing dozens of interesting <i>web-monetized</i> games. You can check out the MozFest Arcade online as well. </p> <div class="post__meta"> Posted on <abbr class="published" title="2019-10-24T07:32:32-07:00"> October 24, 2019 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2018/09/performance-tuning-webvr-game/">Performance-Tuning a WebVR Game</a> </h3> <p class="post__tease">The smaller the app, the faster it loads. Here's how I reduced the size of a favorite WebVR game, optimizing font, audio, and image files to hit my target: 10-second load times in VR headsets.</p> <div class="post__meta"> Posted on <abbr class="published" title="2018-09-20T07:45:37-07:00"> September 20, 2018 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2018/03/immersive-aframe-low-poly/">Building an Immersive Game with A-Frame and Low Poly Models</a> </h3> <p class="post__tease">In the first part of this two-part tutorial, Josh Marinacci builds an immersive WebVR game using A-Frame, and walks through the key concepts and code for adding a physics engine, managing collisions, and adding 3d models and effects. </p> <div class="post__meta"> Posted on <abbr class="published" title="2018-03-07T08:11:13-08:00"> March 7, 2018 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2018/03/immersive-aframe-low-poly-part2/">Building an Immersive Game with A-Frame and Low Poly Models (Part 2)</a> </h3> <p class="post__tease">In Part 2 of this two-part tutorial on using A-Frame to build an immersive game, Josh Marinacci shows how to add lighting, audio, responsiveness and polish to the simple game he developed in Part 1. </p> <div class="post__meta"> Posted on <abbr class="published" title="2018-03-07T08:10:59-08:00"> March 7, 2018 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2018/02/create-vr-on-the-web-using-unity3d/">Create VR on the Web using Unity3D</a> </h3> <p class="post__tease">Mozilla's WebVR team has just released Unity WebVR Assets. It is free to download and available now on the Unity Asset Store. This tool allows creators to publish and share VR experiences they created in Unity on the open web, with a simple URL or link. These experiences can then be viewed with any WebVR enabled browser such as Firefox (using the Oculus Rift or HTC VIVE) and Microsoft Edge (using a Windows Mixed Reality headset).</p> <div class="post__meta"> Posted on <abbr class="published" title="2018-02-15T09:13:32-08:00"> February 15, 2018 </abbr> </div> </div> </li> <li class="list-item row listing"> <img alt='Avatar photo' src='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=72' srcset='https://secure.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=144 2x' class='avatar avatar-72 photo' height='72' width='72' loading='lazy' decoding='async'/> <div class="block block--1"> <h3 class="post__title"> <a href="https://hacks.mozilla.org/2018/01/lessons-learned-from-the-a-frame-category-in-the-js13kgames-competition/">Lessons learned from the A-Frame category in the js13kGames competition</a> </h3> <p class="post__tease">With the Global Game Jam weekend ahead, it’s a great time to consider building with WebVR and A-Frame. The js13kGames 2017 competition ended back in September last year, but the game devs who built playable WebVR entries limited to just 13 kilobytes learned a lot along the way. Here's a look at their learnings - and their code! And if you're looking for a new 3D challenge – Mozilla recently launched the WebVR Medieval Fantasy Experience Challenge, which is open now till the end of February. </p> <div class="post__meta"> Posted on <abbr class="published" title="2018-01-25T08:57:41-08:00"> January 25, 2018 </abbr> </div> </div> </li> </ul> <hr class="dino"> <nav class="nav-paging"> <span class="nav-paging__next"><a href="https://hacks.mozilla.org/tag/games/page/2/" >Older</a></span> </nav> </main> <footer class="footer section section--fullwidth"> <div class="row"> <p class="block block--1"> Except where otherwise noted, content on this site is licensed under the <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license external">Creative Commons Attribution Share-Alike License v3.0</a> or any later version. </p> <img class="footer__logo" alt="the Mozilla dino logo" src="https://hacks.mozilla.org/wp-content/themes/Hax/img/dino.svg"> </div> </footer> </div> <script> // External links should open in a new tab. (function () { var postLinks = document.querySelectorAll('#content-main a'); var origin = location.origin; for (var i = 0; i < postLinks.length; i++) { var link = postLinks[i]; if (link.origin !== origin && !link.getAttribute('target')) { link.setAttribute('target', '_blank'); } } })(); window.addEventListener('load', function () { if (document.querySelector('#newsletterForm')) { var script = document.createElement('script'); var path = document.head.getAttribute('data-template-path'); script.setAttribute('src', path + '/js/newsletter.js'); document.head.appendChild(script); } }); </script> </body> </html>