<!DOCTYPE html>
<html lang="en">
<head><script src="//archive.org/includes/analytics.js?v=cf34f82" type="text/javascript"></script>
<script type="text/javascript">window.addEventListener('DOMContentLoaded',function(){var v=archive_analytics.values;v.service='wb';v.server_name='wwwb-app209.us.archive.org';v.server_ms=259;archive_analytics.send_pageview({});});</script>
<script type="text/javascript" src="/_static/js/bundle-playback.js?v=U25-Dms9" charset="utf-8"></script>
<script type="text/javascript" src="/_static/js/wombat.js?v=UHAOicsW" charset="utf-8"></script>
<script type="text/javascript">
__wm.init("https://web.archive.org/web");
__wm.wombat("https://melonjs.org/en","20201205075004","https://web.archive.org/","web","/_static/",
"1607154604");
</script>
<link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=fantwOh2" />
<link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=qtvMKcIJ" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://web.archive.org/web/20201205075004cs_/https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="icon" href="/web/20201205075004im_/https://melonjs.org/style/favicon.png">
<link href="/web/20201205075004cs_/https://melonjs.org/Content/css?v=4bbSif0bpnedvzZtcwc9dvw6z1ERckLIszXCeLuvgC81" rel="stylesheet"/>
<script src="/web/20201205075004js_/https://melonjs.org/bundles/modernizr?v=wBEWDufH_8Md-Pbioxomt90vm6tJN2Pyy9u9zHtWsPo1"></script>
<title>melonJS</title>
</head>
<body>
<style type="text/css">
body {
margin-top:0 !important;
padding-top:0 !important;
}
</style>
<script>__wm.rw(0);</script>
<div id="wm-ipp-base" lang="en" style="display:none;direction:ltr;">
<div id="wm-ipp" style="position:fixed;left:0;top:0;right:0;">
<div id="donato" style="position:relative;width:100%;">
<div id="donato-base">
<iframe id="donato-if" src="https://archive.org/includes/donate.php?as_page=1&platform=wb&referer=https%3A//web.archive.org/web/20201205075004/https%3A//melonjs.org/en"
scrolling="no" frameborder="0" style="width:100%; height:100%">
</iframe>
</div>
</div><div id="wm-ipp-inside">
<div id="wm-toolbar" style="position:relative;display:flex;flex-flow:row nowrap;justify-content:space-between;">
<div id="wm-logo" style="padding-top:12px;">
<a href="/web/" title="Wayback Machine home page"><img src="/_static/images/toolbar/wayback-toolbar-logo-200.png" srcset="/_static/images/toolbar/wayback-toolbar-logo-100.png, /_static/images/toolbar/wayback-toolbar-logo-150.png 1.5x, /_static/images/toolbar/wayback-toolbar-logo-200.png 2x" alt="Wayback Machine" style="width:100px" border="0" /></a>
</div>
<div class="c" style="display:flex;flex-flow:column nowrap;justify-content:space-between;flex:1;">
<form class="u" style="display:flex;flex-direction:row;flex-wrap:nowrap;" target="_top" method="get" action="/web/submit" name="wmtb" id="wmtb"><input type="text" name="url" id="wmtbURL" value="https://melonjs.org/en" onfocus="this.focus();this.select();" style="flex:1;"/><input type="hidden" name="type" value="replay" /><input type="hidden" name="date" value="20201205075004" /><input type="submit" value="Go" />
</form>
<div style="display:flex;flex-flow:row nowrap;align-items:flex-end;">
<div class="s" id="wm-nav-captures" style="flex:1;">
<a class="t" href="/web/20201205075004*/https://melonjs.org/en" title="See a list of every capture for this URL">24 captures</a>
<div class="r" title="Timespan for captures of this URL">29 Mar 2018 - 22 Jun 2022</div>
</div>
<div class="k">
<a href="" id="wm-graph-anchor">
<div id="wm-ipp-sparkline" title="Explore captures for this URL" style="position: relative">
<canvas id="wm-sparkline-canvas" width="675" height="27" border="0"></canvas>
</div>
</a>
</div>
</div>
</div>
<div class="n">
<table>
<tbody>
<tr class="m">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20200703051322/http://www.melonjs.org:80/en" title="03 Jul 2020"><strong>Jul</strong></a></td>
<td class="c" id="displayMonthEl" title="You are here: 07:50:04 Dec 05, 2020">DEC</td>
<td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="18 Apr 2022"><strong>Apr</strong></a></td>
</tr>
<tr class="d">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20201201092204/https://www.melonjs.org/en" title="09:22:04 Dec 01, 2020"><img src="/_static/images/toolbar/wm_tb_prv_on.png" alt="Previous capture" width="14" height="16" border="0" /></a></td>
<td class="c" id="displayDayEl" style="width:34px;font-size:22px;white-space:nowrap;" title="You are here: 07:50:04 Dec 05, 2020">05</td>
<td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="22:39:03 Apr 18, 2022"><img src="/_static/images/toolbar/wm_tb_nxt_on.png" alt="Next capture" width="14" height="16" border="0" /></a></td>
</tr>
<tr class="y">
<td class="b" nowrap="nowrap"><a href="https://web.archive.org/web/20191204083204/http://www.melonjs.org:80/en" title="04 Dec 2019"><strong>2019</strong></a></td>
<td class="c" id="displayYearEl" title="You are here: 07:50:04 Dec 05, 2020">2020</td>
<td class="f" nowrap="nowrap"><a href="https://web.archive.org/web/20220418223903/https://www.melonjs.org/en" title="18 Apr 2022"><strong>2022</strong></a></td>
</tr>
</tbody>
</table>
</div>
<div class="r" style="display:flex;flex-flow:column nowrap;align-items:flex-end;justify-content:space-between;">
<div id="wm-btns" style="text-align:right;height:23px;">
<span class="xxs">
<div id="wm-save-snapshot-success">success</div>
<div id="wm-save-snapshot-fail">fail</div>
<a id="wm-save-snapshot-open" href="#"
title="Share via My Web Archive" >
<span class="iconochive-web"></span>
</a>
<a href="https://archive.org/account/login.php" title="Sign In" id="wm-sign-in">
<span class="iconochive-person"></span>
</a>
<span id="wm-save-snapshot-in-progress" class="iconochive-web"></span>
</span>
<a class="xxs" href="http://faq.web.archive.org/" title="Get some help using the Wayback Machine" style="top:-6px;"><span class="iconochive-question" style="color:rgb(87,186,244);font-size:160%;"></span></a>
<a id="wm-tb-close" href="#close" style="top:-2px;" title="Close the toolbar"><span class="iconochive-remove-circle" style="color:#888888;font-size:240%;"></span></a>
</div>
<div id="wm-share" class="xxs">
<a href="/web/20201205075004/http://web.archive.org/screenshot/https://melonjs.org/en"
id="wm-screenshot"
title="screenshot">
<span class="wm-icon-screen-shot"></span>
</a>
<a href="#" id="wm-video" title="video">
<span class="iconochive-movies"></span>
</a>
<a id="wm-share-facebook" href="#" data-url="https://web.archive.org/web/20201205075004/https://melonjs.org/en" title="Share on Facebook" style="margin-right:5px;" target="_blank"><span class="iconochive-facebook" style="color:#3b5998;font-size:160%;"></span></a>
<a id="wm-share-twitter" href="#" data-url="https://web.archive.org/web/20201205075004/https://melonjs.org/en" title="Share on Twitter" style="margin-right:5px;" target="_blank"><span class="iconochive-twitter" style="color:#1dcaff;font-size:160%;"></span></a>
</div>
<div style="padding-right:2px;text-align:right;white-space:nowrap;">
<a id="wm-expand" class="wm-btn wm-closed" href="#expand" onclick="__wm.ex(event);return false;"><span id="wm-expand-icon" class="iconochive-down-solid"></span> <span class="xxs" style="font-size:80%;">About this capture</span></a>
</div>
</div>
</div>
<div id="wm-capinfo" style="border-top:1px solid #777;display:none; overflow: hidden">
<div id="wm-capinfo-collected-by">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center">COLLECTED BY</div>
<div style="padding:3px;position:relative" id="wm-collected-by-content">
<div style="display:inline-block;vertical-align:top;width:49%;">
<span class="c-logo" style="background-image:url(https://archive.org/services/img/commoncrawl)"></span>
<div>Collection: <a style="color:#33f;" href="https://archive.org/details/commoncrawl" target="_new"><span class="wm-title">Common Crawl</span></a></div>
<div style="max-height:75px;overflow:hidden;position:relative;">
<div style="position:absolute;top:0;left:0;width:100%;height:75px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 90%,rgba(255,255,255,255) 100%);"></div>
Web crawl data from Common Crawl.
</div>
</div>
</div>
</div>
<div id="wm-capinfo-timestamps">
<div style="background-color:#666;color:#fff;font-weight:bold;text-align:center" title="Timestamps for the elements of this page">TIMESTAMPS</div>
<div>
<div id="wm-capresources" style="margin:0 5px 5px 5px;max-height:250px;overflow-y:scroll !important"></div>
<div id="wm-capresources-loading" style="text-align:left;margin:0 20px 5px 5px;display:none"><img src="/_static/images/loading.gif" alt="loading" /></div>
</div>
</div>
</div></div></div></div><div id="wm-ipp-print">The Wayback Machine - https://web.archive.org/web/20201205075004/https://melonjs.org/en</div>
<script type="text/javascript">__wm.bt(675,27,25,2,"web","https://melonjs.org/en","20201205075004",1996,"/_static/",["/_static/css/banner-styles.css?v=fantwOh2","/_static/css/iconochive.css?v=qtvMKcIJ"], false);
__wm.rw(1);
END WAYBACK TOOLBAR INSERT
<a id="top"></a>
<a class="fade-slow forkme collapse" href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonjs">
<img src="https://web.archive.org/web/20201205075004im_/https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://web.archive.org/web/20201205075004/https://s3.amazonaws.com/github/ribbons/forkme_right_green_ffffff.png">
</a>
<nav class="fade-slow navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">melon<span class="logo">JS</a></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#top">Home</a></li>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/releases">Download</a></li>
<li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/docs/">API</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="https://web.archive.org/web/20201205075004/http://blog.melonjs.org/">Blog</a></li>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/made-with-melonJS">Gallery</a></li>
<li><a href="https://web.archive.org/web/20201205075004/http://forum.melongaming.com/">Forum</a></li>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS#questions-need-help-">Contact Us</a></li>
<li><a href="https://web.archive.org/web/20201205075004/http://www.melongaming.com/">Melon Gaming</a></li>
<li class="mobile-forkme"><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonjs">Github</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Language</a></li>
<li>
<div class="dropdown" style="padding-top: 7px; padding-left: 15px; margin-right: 100px;">
<button id="btnLanguage" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="active"><a href="/web/20201205075004/https://melonjs.org/en">English</a></li>
<li><a href="/web/20201205075004/https://melonjs.org/zh">Chinese</a></li>
<li><a href="/web/20201205075004/https://melonjs.org/ja">Japanese</a></li>
<li><a href="/web/20201205075004/https://melonjs.org/kr">Korea</a></li>
<li><a href="/web/20201205075004/https://melonjs.org/vi">Vietnam</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="fade-slow jumbotron">
<div class="container">
<h1>Fresh & Lightweight</h1>
<p>melonJS is an open source HTML5 game engine that empowers developers and designers to focus on content.</p>
<p>
The framework provides a collection of composable entities and support for a number of third-party tools. Giving you a powerful combination that can be used wholesale or piecemeal.
</p>
<p>
<a class="btn btn-primary btn-lg" href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/releases" role="button"><span class="glyphicon glyphicon-save"></span> Download</a>
<a class="btn btn-default btn-lg" href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/docs/" role="button">Read The Docs »</a>
</p>
</div>
</div>
<div id="attract">
<div id="screen"></div>
</div>
<div class="fade-slow">
<div class="band">
<div class="container">
<h2>Try Me!</h2>
<hr>
<p>Use the following keys to start playing a simple game built with melonJS. Try it with a gamepad!</p>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<table class="table table-condensed">
<thead>
<tr><th>Key</th><th>Action</th></tr>
</thead>
<tbody>
<tr><th><kbd><span class="glyphicon glyphicon-chevron-up"></span></kbd> <kbd>W</kbd> <kbd>Spacebar</kbd></th><td>Jump</td></tr>
<tr><th><kbd><span class="glyphicon glyphicon-chevron-left"></span></kbd> <kbd>A</kbd></th><td>Walk Left</td></tr>
<tr><th><kbd><span class="glyphicon glyphicon-chevron-down"></span></kbd> <kbd>S</kbd></th><td>Drop Down</td></tr>
<tr><th><kbd><span class="glyphicon glyphicon-chevron-right"></span></kbd> <kbd>D</kbd></th><td>Walk Right</td></tr>
<tr><th><kbd>F</kbd></th><td>Full-Screen Mode</td></tr>
<tr><th><kbd>Esc</kbd></th><td>Exit Game</td></tr>
</tbody>
</table>
</div>
</div>
<p>See you in a bit!</p>
</div>
</div>
<div class="band">
<div class="container">
<p>melonJS is a lightweight yet powerful HTML5 framework designed from the ground up to provide a true plugin-free 'write-once, run-everywhere' gaming platform. melonJS is an open-source project and supported by a community of enthusiasts. See our Gallery for a few examples of games powered by melonJS.</p>
<h2>Getting Started<a id="getting-started" class="anchor"></a></h2>
<hr>
<ul id="getting-started">
<li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/tutorial-platformer/" target="_blank">Platformer Tutorial</a>
<li><a href="https://web.archive.org/web/20201205075004/http://melonjs.github.io/tutorial-space-invaders/" target="_blank">Space Invaders Tutorial</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/boilerplate">Boilerplate Project</a>
</ul>
</div>
</div>
<div class="band">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Fast</h2>
<img class="right vspacer-20" height="128" align="top" src="/web/20201205075004im_/https://melonjs.org/media/icons/HTML5_Badge.png" alt="HTML5">
<blockquote>
<p>Built with future technology.</p>
<ul>
<li>WebGL
<li>WebAudio
<li>ES6 Collections
</ul>
</blockquote>
</div>
<div class="col-md-4">
<h2>Free</h2>
<blockquote>
<p>Released under the permissive MIT License.</p>
<p>No cost.</p>
<p>Royalty free.</p>
<p>Forever.</p>
</blockquote>
</div>
<div class="col-md-4">
<h2>Elegant</h2>
<blockquote>
<p>Your scene graph is a hierarchy of containers.</p>
<p>Updates and drawing operations are dispatched separately.</p>
<p>Draws are opt-in; add compute-only entities for AI, special effects, etc.</p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="band">
<div class="container">
<h2>Powerful Level Design</h2>
<hr>
<p>melonJS integrates the popular Tiled map format, allowing designers easily create levels using the Tiled map editor, and to focus on the game features itself.</p>
<img src="/web/20201205075004im_/https://melonjs.org/media/alex4-github.png" alt="" title="Fast and Powerful level design through Tiled">
</div>
</div>
<div class="band">
<div class="container">
<h2>Developer Spotlight</h2>
<table style="width:100%">
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://masterspygame.com/">Master Spy</a> by Turbogun</th>
<th><a href="https://web.archive.org/web/20201205075004/http://radmars.com/">Radmars Team</a> - Ludum Dare & GameJam</th>
</tr>
<tr valign="top">
<th><iframe width="500" height="315" src="https://web.archive.org/web/20201205075004if_/https://www.youtube.com/embed/WpNllTmnXFQ" frameborder="0" allowfullscreen></iframe></th>
<th><img width="500" height="315" frameborder="0" src="/web/20201205075004im_/https://melonjs.org/media/radmars_intro.gif" alt="radmars intro"></th>
</tr>
</table>
</div>
</div>
<div class="band">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Features<a id="features" class="anchor"></a></h2>
<hr>
<ul>
<li>A fresh and lightweight 2D sprite-based engine
<li>Standalone library (no additional dependencies)
<li>Fast WebGL renderer for desktop and mobile devices with fallback to Canvas rendering
<li>Web Audio support with fallback to Multi-channel HTML5 audio
<li>High DPI & auto scaling video modes
<li>Tween & Transition effects
<li>
Lightweight 2D physics implementation to ensure low cpu requirements
<ul>
<li>Polygon (SAT) based collision algorithm for accurate detection and response
<li>Fast broad-phase collision detection using spatial partitioning
<li>Advanced math API for Vector and Matrix
<li>3rd party tools support for physic body definition (PhysicEditor, Physic Body Editor)
</ul>
</li>
<li>
A basic set of extensible Object Entities:
<ul>
<li>Object Pooling
<li>Basic Particle System
<li>Basic animation management
<li>Standard spritesheet and Packed Textures (Texture Packer) support
<li>Some basic GUI elements
</ul>
</li>
<li>
Tiled map format integration for easy level design:
<ul>
<li>Orthogonal, Isometric, Hexagonal, and Perspective tilemap support
<li>Multiple layers with parallax scrolling
<li>Shape-based collision layers (Rectangle, Ellipse, Polygon, and Polyline)
<li>JSON and XML formats
</ul>
</li>
<li>System and Bitmap fonts
<li>A state manager and customizable loader
<li>Mouse, Touch, Pointer, and Gamepad device support
<li>Device motion, orientation, and accelerometer support
<li>Built-in support for 3rd party Application Wrappers such as <a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/Making-your-game-into-a-mobile-hybrid-app#cordova">Cordova </a>
<li>As light as <a href="https://web.archive.org/web/20201205075004/https://bundlephobia.com/result?p=melonjs@latest">~70kb</a> minified & gzipped
</ul>
</div>
<div class="col-md-6">
<img class="right vspacer-20" width="150" src="/web/20201205075004im_/https://melonjs.org/media/icons/browser_icons.png" alt="browser icons example">
<h2>Compatibility<a id="compatibility" class="anchor"></a></h2>
<hr>
<p>melonJS works with any full ES5 compatible browsers</p>
<table class="table">
<thead>
<tr><th>Browser</th><th>Version</th><th>Status</th></tr>
</thead>
<tbody>
<tr>
<th>
<a href="https://web.archive.org/web/20201205075004/http://www.google.com/chrome/">Chrome</a>
</th>
<td>55+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://www.apple.com/safari/">Safari</a></th>
<td>10+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://www.mozilla.com/">Firefox</a></th>
<td>50+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://www.opera.com/">Opera</a></th>
<td>42+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://windows.microsoft.com/en-US/internet-explorer/downloads/ie">IE</a></th>
<td>11+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/https://www.google.com/chrome/browser/mobile/">Chrome for Mobile</a></th>
<td>55+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
<tr>
<th><a href="https://web.archive.org/web/20201205075004/http://www.apple.com/safari/">iOS Safari</a></th>
<td>9.3+</td>
<td><span class="glyphicon glyphicon-check text-success"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="band">
<div class="container">
<h3>Third Party Tools Integration<a id="third-party" class="anchor"></a></h3>
<hr>
melonJS provides native integration and support for the following 3rd party tools :
<ul>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/bjorn/tiled/wiki">Tiled</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-use-Texture-Atlas-with-TexturePacker">TexturePacker</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/shoebox">Shoebox</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-load-PhysicEditor-Shapes-into-your-project">PhysicEditor</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-generate-and-use-Bitmap-Font-in-melonJS">BitmapFont Generator</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/Making-your-game-into-a-mobile-hybrid-app#cordova">Cordova/PhoneGap</a>
<li><a href="https://web.archive.org/web/20201205075004/https://github.com/melonjs/melonJS/wiki/How-to-build-your-game-for-tvOS-(or-iOS)-using-Ejecta">Ejecta</a>
</ul>
</div>
</div>
</div>
<div id="attract"></div>
<div id="footer" class="fade-slow">
<div class="container">
<footer>
<p>© melonJS team 2011-2020</p>
</footer>
</div>
</div>
<!-- melonJS -->
<script src="https://web.archive.org/web/20201205075004js_/https://cdn.jsdelivr.net/npm/melonjs@latest/dist/melonjs.min.js"></script>
<script src="https://web.archive.org/web/20201205075004js_/https://cdn.jsdelivr.net/npm/melonjs@latest/plugins/debug/debugPanel.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/game.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/resources.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/coin.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/enemies.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/player.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/HUD.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/entities/controls.js"></script>
<script type="text/javascript" src="https://web.archive.org/web/20201205075004js_/http://melonjs.github.io/melonJS/examples/platformer/js/screens/play.js"></script>
<script type="text/javascript">
me.device.onReady(function onReady() {
me.loader.crossOrigin = "anonymous"
me.loader.setBaseURL("*", "https://web.archive.org/web/20201205075004/http://melonjs.github.io/melonJS/examples/platformer/");
if (me.device.isMobile) {
me.device.enableSwipe();
}
game.onload();
me.audio.muteAll();
function fade_in() {
var els = document.querySelectorAll(".fade-slow, .fade-fast");
Array.prototype.slice.call(els).forEach(function (el) {
if (el.classList.contains("transparent")) {
el.classList.add("fade-fast");
el.classList.remove("fade-slow");
el.classList.remove("transparent");
setTimeout(function () {
el.classList.add("fade-slow");
el.classList.remove("fade-fast");
}, 200);
}
});
me.audio.muteAll();
if (me.sys.fps !== 25) {
me.sys.fps = 25;
me.game.updateFrameRate();
}
}
function fade_out() {
var els = document.querySelectorAll(".fade-slow, .fade-fast");
Array.prototype.slice.call(els).forEach(function (el) {
el.classList.add("transparent");
});
me.audio.unmuteAll();
if (me.sys.fps !== 60) {
me.sys.fps = 60;
me.game.updateFrameRate();
}
}
me.event.subscribe(me.event.KEYDOWN, function (action, keycode) {
switch (keycode) {
case me.input.KEY.ESC:
fade_in();
break;
case me.input.KEY.W:
case me.input.KEY.A:
case me.input.KEY.S:
case me.input.KEY.D:
case me.input.KEY.F:
case me.input.KEY.SPACE:
case me.input.KEY.UP:
case me.input.KEY.DOWN:
case me.input.KEY.LEFT:
case me.input.KEY.RIGHT:
fade_out();
break;
}
});
setTimeout(function () {
window.addEventListener("scroll", fade_in);
}, 100);
});
</script>
<script>
document.getElementById("btnLanguage").innerHTML = "en";
</script>
<script src="/web/20201205075004js_/https://melonjs.org/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
<script src="/web/20201205075004js_/https://melonjs.org/bundles/bootstrap?v=S9-VFjJll7-h6B6vedKZxuNRBdqXLY3XTPKv3OQRv1w1"></script>
</body>
</html>