├── .gitignore ├── Game Dev 2D GWT ├── .classpath ├── .project ├── .settings │ ├── com.google.gdt.eclipse.core.prefs │ ├── com.google.gwt.eclipse.core.prefs │ ├── org.eclipse.jdt.core.prefs │ └── org.eclipse.wst.common.project.facet.core.xml └── war │ └── WEB-INF │ ├── .gitignore │ ├── lib │ └── gwt-servlet.jar │ └── web.xml ├── LICENSE ├── README.md ├── angular └── flux │ ├── README.md │ ├── app.js │ ├── bower.json │ ├── bundle.js │ ├── img │ ├── profile-photo-001.png │ ├── profile-photo-002.png │ ├── profile-photo-003.png │ ├── profile-photo-004.png │ ├── profile-photo-005.png │ ├── profile-photo-006.png │ ├── profile-photo-007.png │ ├── profile-photo-008.png │ ├── profile-photo-009.png │ ├── profile-photo-010.png │ ├── profile-photo-011.png │ ├── profile-photo-012.png │ ├── profile-photo-013.png │ ├── profile-photo-014.png │ ├── profile-photo-015.png │ ├── profile-photo-016.png │ └── user-icon.png │ ├── index.html │ ├── nes-favicon.png │ ├── package.json │ ├── style.css │ └── webpack.config.js ├── closure-tools └── compiler │ ├── app.comp.js.map │ ├── app.js │ ├── app.min.js │ ├── compiler.jar │ └── index.html ├── docs ├── CNAME ├── GemFile ├── GemFile.lock ├── _config.yml ├── _includes │ ├── disqus.html │ ├── ga.html │ ├── header.html │ ├── shared.html │ └── skills.html ├── _layouts │ └── default.html ├── _sass │ ├── bootstrap.scss │ ├── font-awesome.min.scss │ ├── main.scss │ ├── prettify.scss │ └── styles.scss ├── about.md ├── ads.txt ├── build │ ├── build-tree.php │ ├── composer.json │ ├── composer.lock │ ├── defs │ │ ├── 0b026204224372038e725b055b18816a │ │ │ └── main.json │ │ ├── 0ff927cfb47d098b46d9f527cefdd244 │ │ │ └── main.json │ │ ├── 17ab8bfd9fc8a68e116392ecd90dcee5 │ │ │ └── main.json │ │ ├── 1bb2f5c70704dca2f17fa57bdbf3f8cc │ │ │ └── main.json │ │ ├── 1cf4a40f1c9be4f78ead82770325e402 │ │ │ └── main.json │ │ ├── 2961b2d51a02b08fcad4d5be7cbb71fe │ │ │ └── main.json │ │ ├── 2c04ed3a7ff91c6efcb52163ac5756fd │ │ │ └── main.json │ │ ├── 372142bd6426dbeb8518b40b411f116a │ │ │ └── main.json │ │ ├── 4080b4145335e32ffc1716c6ff30ae8d │ │ │ └── main.json │ │ ├── 59d44af502b9dffd8b70fe3d92e25b37 │ │ │ └── main.json │ │ ├── 5ba854fabc9a32d86b2285845c6fd0c3 │ │ │ └── main.json │ │ ├── 62d1cf0b3cf3548ef2511861d7f47bf1 │ │ │ └── main.json │ │ ├── 6b9d4dabb3abdefbc9401a9af72a05ff │ │ │ └── main.json │ │ ├── 790909982ebaf28274cf744b0accfeb9 │ │ │ └── main.json │ │ ├── 7a5fe6e6ba9e7ab59866f86f9efe1c9c │ │ │ └── main.json │ │ ├── 8e31b930744727b5b78e20bc0249ee81 │ │ │ └── main.json │ │ ├── 8e4fec4ce56d3f9ccaa136190e8860ff │ │ │ └── main.json │ │ ├── a1742f9f1f2447de76eead5cd634aea9 │ │ │ └── main.json │ │ ├── a517a3067245fb350881ca41471fc0e8 │ │ │ └── main.json │ │ ├── c3cbb27ab8e93254429b6f111a25c8c4 │ │ │ └── main.json │ │ ├── c50cb2b7b569d4c9eff2d99829d361ec │ │ │ └── main.json │ │ ├── cf7a1d621be5bda2510c4f095c14d3d6 │ │ │ └── main.json │ │ ├── ddf7e5add4d5efac86819fdcc68c7290 │ │ │ └── main.json │ │ ├── de2e9ec02e17ef9ebf9cf76ac9fb9c18 │ │ │ └── main.json │ │ ├── eac2077ef3743d79dcc76602e073ecf0 │ │ │ └── main.json │ │ ├── ef457d7d3282b0755953bad8ce753eae │ │ │ └── main.json │ │ ├── f071e528b03145bf74570d9612804cfe │ │ │ └── main.json │ │ ├── f25282572bac0ceb4dbec1110f3e31ba │ │ │ └── main.json │ │ ├── f935a1620d026e5bf35333f7c34690ba │ │ │ └── main.json │ │ └── fbd6c4e3ef1f0692eb7465426ee9d7c3 │ │ │ └── main.json │ ├── make.php │ ├── sync.php │ └── utils.php ├── donate.md ├── favicon.ico ├── fonts │ ├── fontawesome-webfont (1).eot │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff ├── img │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── 06.jpg │ ├── blank.gif │ ├── computer-lecture.jpg │ ├── easy-learn-tutorial-logo-small.png │ ├── iphone.png │ ├── rodrigo-silveira-favi-tech.jpg │ └── rodrigo-silveira-favi.jpg ├── index.html ├── js │ └── echo.js ├── series.md ├── series │ ├── 2d-game-development-from-scratch.md │ ├── 2d-game-development-from-scratch │ │ └── 2d-game-development-from-scratch-preview.md │ ├── advanced-php-tutorials.md │ ├── advanced-php-tutorials │ │ ├── advanced-php-tutorial-2-what-is-polymorphism.md │ │ ├── advanced-php-tutorial-3-exception-handling.md │ │ ├── advanced-php-tutorial-4-exception-handling-error-reporting.md │ │ ├── advanced-php-tutorial-5-databse-abstraction-layer.md │ │ ├── advanced-php-tutorial-6-1-instant-search-results.md │ │ ├── advanced-php-tutorial-6-2-instant-search-results.md │ │ ├── advanced-php-tutorial-6-3-instant-search-results.md │ │ ├── advanced-php-tutorial-7-instant-search-with-results-highlighting.md │ │ ├── advanced-php-tutorial-8-pdt-eclipse-plugin.md │ │ ├── advanced-php-tutorial-9-autoload-your-classes-psr-0.md │ │ ├── dependency-injection-is-not-complicated.md │ │ └── php-command-line-how-to-run-php-from-command-line-in-windows.md │ ├── algorithms-data-structures.md │ ├── algorithms-data-structures │ │ ├── gaussian-blur-image-processing-algorithm.md │ │ ├── maze-generation-algorithm-recursive-backtracker.md │ │ └── pathfinding-algorithms-in-javascript-maze-solving.md │ ├── angularjs-game-development-tutorials.md │ ├── angularjs-game-development-tutorials │ │ ├── angularjs-game-development-1-2d-tile-map-editor.md │ │ ├── angularjs-game-tutorial-2-tile-map-bootstrap.md │ │ └── angularjs-game-tutorial-3-tile-map-dispatching-menu-events.md │ ├── computer-programming-challenges.md │ ├── computer-programming-challenges │ │ ├── programming-challenge-tic-tac-toe-tutorial-1-introduction.md │ │ ├── programming-challenge-tic-tac-toe-tutorial-2-html-css-structure.md │ │ ├── programming-challenge-tic-tac-toe-tutorial-3-javascript-structure-classes.md │ │ ├── programming-challenge-tic-tac-toe-tutorial-4-javascript-algorithm-1.md │ │ └── programming-challenge-tic-tac-toe-tutorial-5-javascript-algorithm-2.md │ ├── dependency-injection.md │ ├── dependency-injection │ │ ├── auryn-php-dependency-injection-container.md │ │ ├── dependency-injection-vs-service-locator-pattern.md │ │ └── pimple-php-dependency-injection-container.md │ ├── eclipse-java-php-development-tips-for-power-users.md │ ├── eclipse-java-php-development-tips-for-power-users │ │ ├── eclipse-java-php-development-tips-1-reorganize-code-fast.md │ │ ├── eclipse-java-php-development-tips-2-source-code-auto-format.md │ │ ├── eclipse-java-php-development-tips-3-automatic-getter-setter-functions.md │ │ ├── eclipse-java-php-development-tips-4-auto-completion-organize-project-assets.md │ │ ├── eclipse-java-php-development-tips-5-markers-view.md │ │ ├── eclipse-java-php-development-tips-6-marketplace.md │ │ ├── eclipse-java-php-development-tips-7-open-declaration-phpdoc.md │ │ ├── eclipse-java-php-development-tips-8-tasks-view.md │ │ ├── eclipse-java-php-development-tips-9-github-tasks-view.md │ │ └── how-to-add-syntax-highlighting-to-eclipse-php-java-javascript-or-c-.md │ ├── game-development-inspiration.md │ ├── game-development-inspiration │ │ ├── isometric-projection-game-development-inspiration.md │ │ ├── jungle-theme-game-development-inspiration.md │ │ ├── rain-theme-game-development-inspiration.md │ │ └── snake-game-development-inspiration.md │ ├── gwt-android-game-development-tutorials.md │ ├── gwt-android-game-development-tutorials │ │ ├── 2d-context-drawimage-gwt-android-game-development-tutorial-4.md │ │ ├── 2d-renderer-gwt-android-game-development-tutorial-1.md │ │ ├── canvas-2d-rendering-context-gwt-android-gaming-tutorial-3.md │ │ ├── drawing-sprites-gwt-android-game-development-tutorial-5.md │ │ └── road-map-gwt-android-game-development-tutorial-2.md │ ├── gwt-architecture-best-practices.md │ ├── gwt-architecture-best-practices │ │ ├── gdd-moscow-2009-gwt-app-architecture-best-practices.md │ │ ├── google-i-o-2009-best-practices-for-architecting-gwt-app.md │ │ ├── google-i-o-2009-complex-high-performance-apps-w-gwt.md │ │ ├── google-i-o-2009-the-gwt-compiler-for-an-optimized-future.md │ │ ├── google-i-o-2010-architecting-for-performance-with-gwt.md │ │ ├── google-i-o-2011-gwt-html5-a-web-developers-dream-.md │ │ ├── google-i-o-2011-highly-productive-gwt.md │ │ ├── google-i-o-2011-kick-ass-game-programming-with-google-web-toolkit.md │ │ ├── gwt-tutorial-1-1-proper-architecture-for-gwt-gui-building.md │ │ ├── mvp-how-to-use-data-model-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-model-view-presenter-gwt-tutorial-google-web-toolkit-.md │ │ └── voices-that-matter-gwt-architecture-best-practices.md │ ├── gwt-tutorials-google-web-toolkit.md │ ├── gwt-tutorials-google-web-toolkit │ │ ├── designing-with-uibinder-gwt-tutorial-google-web-toolkit-.md │ │ ├── event-bus-gwt-tutorial-google-web-toolkit-.md │ │ ├── google-web-toolkit-2014-gwt-tutorial.md │ │ ├── gwt-application-structure-gwt-tutorial-google-web-toolkit-.md │ │ ├── hello-world-gwt-tutorial-google-web-toolkit-.md │ │ ├── installing-sdk-eclipse-plugin-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-binding-presenter-events-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-how-to-use-data-model-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-model-objects-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-model-view-presenter-gwt-tutorial-google-web-toolkit-.md │ │ ├── mvp-presenter-gwt-tutorial-google-web-toolkit-.md │ │ ├── uibinder-git-repository-gwt-tutorial-google-web-toolkit-.md │ │ ├── what-is-google-web-toolkit-gwt-tutorial.md │ │ ├── widgets-application-themes-gwt-tutorial-google-web-toolkit-.md │ │ └── widgets-event-handlers-gwt-tutorial-google-web-toolkit-.md │ ├── hidden-easter-eggs.md │ ├── hidden-easter-eggs │ │ ├── hidden-easter-egg-in-google-chrome-t-rex-runner-game.md │ │ └── super-mario-brothers-google-easter-egg.md │ ├── html-5-tutorial-series.md │ ├── html-5-tutorial-series │ │ ├── html5-canvas-tutorial-2d-rendering-context-1.md │ │ ├── html5-canvas-tutorial-7-linejoin.md │ │ ├── html5-canvas-tutorial-8-draw-image.md │ │ ├── html5-canvas-tutorial-9-get-image-data.md │ │ ├── html5-canvas-tutorial-adding-color-5.md │ │ ├── html5-canvas-tutorial-drawing-lines-2.md │ │ ├── html5-canvas-tutorial-fill-path-stroke-path-3.md │ │ ├── html5-canvas-tutorial-line-cap-round-square-butt-6.md │ │ ├── html5-canvas-tutorial-line-width-thickness-4.md │ │ ├── html5-web-worker-tutorial-10-how-to-use-it.md │ │ ├── html5-web-worker-tutorial-11-example.md │ │ └── html5-web-worker-tutorial-12-inline-workers-with-blob-bloburl.md │ ├── html5-game-development-tutorial-with-gwt.md │ ├── html5-game-development-tutorial-with-gwt │ │ ├── 2d-renderer-gwt-android-game-development-tutorial-1.md │ │ └── road-map-gwt-android-game-development-tutorial-2.md │ ├── javascript-html5-game-development-tutorials.md │ ├── javascript-html5-game-development-tutorials │ │ ├── html5-game-development-tutorial-javascript-1-road-map.md │ │ └── mega-man-tetris-clone-html5-javascript-closure-tools.md │ ├── javascript-tutorial-for-beginners.md │ ├── javascript-tutorial-for-beginners │ │ ├── arrays-javascript-tutorial-for-beginners.md │ │ ├── artificial-intelligence-introduction-javascript-tutorial-for-beginners-2-.md │ │ ├── artificial-intelligence-introduction-javascript-tutorial-for-beginners.md │ │ ├── artificial-intelligence-javascript-tutorial-for-beginners-3-.md │ │ ├── binary-operators-javascript-tutorial-for-beginners.md │ │ ├── chrome-developer-console-javascript-tutorial-for-beginners.md │ │ ├── console-log-javascript-tutorial-for-beginners.md │ │ ├── console-warn-vs-console-error-javascript-tutorial-for-beginners.md │ │ ├── cookie-security-model-javascript-tutorial-for-beginners.md │ │ ├── cookies-javascript-tutorial-for-beginners.md │ │ ├── do-while-loop-javascript-tutorial-for-beginners.md │ │ ├── document-write-function-javascript-tutorial-for-beginners.md │ │ ├── for-loop-javascript-tutorial-for-beginners.md │ │ ├── functions-methods-javascript-tutorial-for-beginners.md │ │ ├── how-to-comment-code-javascript-tutorial-for-beginners.md │ │ ├── how-to-create-cookies-javascript-tutorial-for-beginners.md │ │ ├── how-to-debug-javascript-javascript-tutorial-for-beginners.md │ │ ├── how-to-enable-javascript-javascript-tutorial-for-beginners.md │ │ ├── how-to-load-code-javascript-tutorial-for-beginners.md │ │ ├── html5-logging-javascript-tutorial-for-beginners.md │ │ ├── if-else-conditional-statements-javascript-tutorial-for-beginners.md │ │ ├── json-encoding-javascript-tutorial-for-beginners.md │ │ ├── logical-operators-javascript-tutorial-for-beginners.md │ │ ├── mortgage-calculator-app-javascript-tutorial-for-beginners.md │ │ ├── parsing-cookie-values-javascript-tutorial-for-beginners.md │ │ ├── recursion-fibonacci-sequence-javascript-tutorial-for-beginners.md │ │ ├── string-manipulations-javascript-tutorial-for-beginners.md │ │ ├── switch-statement-javascript-tutorial-for-beginners.md │ │ ├── to-do-list-app-javascript-tutorial-for-beginners-2-.md │ │ ├── to-do-list-app-javascript-tutorial-for-beginners-3-.md │ │ ├── to-do-list-app-javascript-tutorial-for-beginners-4-.md │ │ ├── to-do-list-app-javascript-tutorial-for-beginners-5-.md │ │ ├── to-do-list-app-javascript-tutorial-for-beginners.md │ │ ├── unary-operators-javascript-tutorial-for-beginners.md │ │ ├── variables-javascript-tutorial-for-beginners.md │ │ ├── what-is-javascript-javascript-tutorial-for-beginners.md │ │ ├── while-loop-javascript-tutorial-for-beginners.md │ │ └── writing-source-code-javascript-tutorial-for-beginners.md │ ├── javascript-with-douglas-crockford.md │ ├── javascript-with-douglas-crockford │ │ ├── crockford-on-javascript-act-iii-function-the-ultimate.md │ │ ├── crockford-on-javascript-chapter-2-and-then-there-was-javascript.md │ │ ├── crockford-on-javascript-episode-iv-the-metamorphosis-of-ajax.md │ │ ├── crockford-on-javascript-level-7-ecmascript-5-the-new-parts.md │ │ ├── crockford-on-javascript-part-5-the-end-of-all-things.md │ │ ├── crockford-on-javascript-scene-6-loopage.md │ │ ├── crockford-on-javascript-section-8-programming-style-your-brain.md │ │ ├── crockford-on-javascript-volume-1-the-early-years.md │ │ ├── douglas-crockford-advanced-javascript.md │ │ ├── douglas-crockford-an-inconvenient-api-the-theory-of-the-dom.md │ │ ├── douglas-crockford-javascript-the-good-parts.md │ │ ├── douglas-crockford-pronouncing-json-javascript-object-notation-.md │ │ ├── douglas-crockford-quality.md │ │ ├── douglas-crockford-the-better-parts-concat-2015.md │ │ ├── douglas-crockford-the-javascript-programming-language.md │ │ ├── douglas-crockford-the-json-saga.md │ │ ├── douglas-crockford-the-state-and-future-of-javascript.md │ │ ├── goto-2013-syntaxation-douglas-crockford.md │ │ └── jseverywhere-douglas-crockford-javascript-the-world-s-most-misunderstood-language.md │ ├── live-coding-practice-javascript.md │ ├── live-coding-practice-javascript │ │ ├── learning-angular-js-from-scratch-live-coding.md │ │ ├── learning-mongodb-from-scratch-with-php-live-coding.md │ │ └── to-do-app-in-javascript-live-coding.md │ ├── local-web-development.md │ ├── local-web-development │ │ ├── how-to-create-a-virtual-host-in-windows-virtual-domain-with-apache-wamp-.md │ │ ├── how-to-use-mustache-js-template-system.md │ │ ├── local-web-development-tutorial-how-to-monitor-http-traffic.md │ │ └── local-web-development-tutorial-how-to-syntax-highlight-your-app.md │ ├── machine-learning-tutorials-computer-vision.md │ ├── machine-learning-tutorials-computer-vision │ │ ├── image-processing-tutorials-2-html5-canvas-context-2d-rendering-workflow.md │ │ ├── image-processing-tutorials-3-html5-javascript-framework.md │ │ ├── image-processing-tutorials-4-drawing-images-in-html5-canvas.md │ │ ├── image-processing-tutorials-5-loading-image-into-html5-2d-context.md │ │ ├── image-processing-tutorials-intro-demo-1.md │ │ └── pathfinding-algorithms-in-javascript-maze-solving.md │ ├── nintendo-game-development-tutorials.md │ ├── nintendo-game-development-tutorials │ │ ├── agile-pivotal-tracker-nintendo-game-development.md │ │ ├── component-base-games-nintendo-game-development.md │ │ ├── component-interface-nintendo-game-development.md │ │ ├── draw-component-nintendo-game-development.md │ │ ├── entity-system-nintendo-game-development.md │ │ ├── git-code-reposity-nintendo-game-development.md │ │ ├── google-closure-library-nintendo-game-development.md │ │ ├── google-closure-tools-nintendo-game-development.md │ │ ├── html5-tools-nintendo-game-development.md │ │ ├── image-component-nintendo-game-development.md │ │ ├── nintendo-web-framework-indie-do-i-need-the-devkit-.md │ │ ├── nintendo-web-framework-nintendo-game-development.md │ │ ├── renderer-component-nintendo-game-development.md │ │ └── writing-a-game-engine-nintendo-game-development.md │ ├── object-oriented-javascript-tutorials.md │ ├── object-oriented-javascript-tutorials │ │ ├── object-oriented-javascript-tutorial-1-class-vs-prototype.md │ │ ├── object-oriented-javascript-tutorial-2-how-to-create-objects.md │ │ ├── object-oriented-javascript-tutorial-3-how-to-create-public-members.md │ │ ├── object-oriented-javascript-tutorial-4-what-is-a-closure-private-members.md │ │ ├── object-oriented-javascript-tutorial-5-how-to-create-static-members.md │ │ ├── object-oriented-javascript-tutorial-6-how-to-extend-prototype-best-practices.md │ │ └── object-oriented-javascript-tutorial-7-how-to-inherit-subclass.md │ ├── php-design-patterns-elements-of-reusable-object-oriented-software.md │ ├── php-design-patterns-elements-of-reusable-object-oriented-software │ │ ├── adapter-pattern-php-design-patterns.md │ │ ├── command-pattern-php-design-patterns.md │ │ ├── decorator-pattern-php-design-patterns.md │ │ ├── facade-pattern-php-design-patterns.md │ │ ├── factory-pattern-php-design-patterns.md │ │ ├── observer-pattern-php-design-patterns.md │ │ ├── singleton-pattern-php-design-patterns.md │ │ ├── strategy-pattern-php-design-patterns.md │ │ └── what-is-a-design-pattern-php-design-patterns.md │ ├── pixel-art-inspiration.md │ ├── pixel-art-inspiration │ │ └── top-down-view-pixel-art-inspiration.md │ ├── pixel-art-special-effects-in-javascript.md │ ├── pixel-art-special-effects-in-javascript │ │ └── render-loop-pixel-art-special-effects-javascript-tutorial.md │ ├── programming-theory-fundamentals-tutorials.md │ ├── programming-theory-fundamentals-tutorials │ │ ├── hello-world-program-in-35-languages.md │ │ ├── programming-theory-5-tips-on-how-to-make-a-program.md │ │ ├── programming-theory-fundamentals-coupling.md │ │ ├── programming-theory-fundamentals-global-variables.md │ │ └── programming-theory-fundamentals-naming-variables.md │ ├── react-js-tutorials.md │ ├── react-js-tutorials │ │ ├── isomorphic-react-js-with-php-server-side-rendering.md │ │ └── react-js-server-side-rendering-with-php.md │ ├── react-js-with-php-tutorials.md │ ├── react-js-with-php-tutorials │ │ └── react-js-server-side-rendering-with-php.md │ ├── windows-7-power-user-tips.md │ └── windows-7-power-user-tips │ │ ├── windows-7-power-user-tip-1-shake-hide-windows.md │ │ ├── windows-7-power-user-tip-2-snap-windows.md │ │ ├── windows-7-power-user-tip-3-quick-launch-application-with-keyboard.md │ │ └── windows-7-power-user-tip-4-lorem-ipsum-filler-text-microsoft-word.md └── style.scss ├── game-dev-ai ├── README.md ├── app.js ├── asset │ ├── audio │ │ ├── mm3-intro-yt.HeVva6ddNAc.danielsymphonies.mp3 │ │ └── mm3-wily-02-yt.cJ3hNF3EyGA.mp3 │ ├── fonts │ │ └── press-start-2p.woff2 │ ├── gimp │ │ ├── main-screen-0.0.1.png │ │ ├── main-screen-0.0.2.png │ │ ├── main-screen-0.0.3.png │ │ ├── main-screen-inspiration.png │ │ ├── main-screen.xcf │ │ └── needleman-tileset.xcf │ ├── img │ │ ├── gdc221-mascot.png │ │ ├── ground_1x1.png │ │ ├── main-screen-0.0.3.png │ │ ├── megaman-items.png │ │ ├── megaman.gif │ │ ├── megaman.png │ │ ├── megaman3-needleman-stage.png │ │ ├── mm3-wily-02.png │ │ ├── needleman-tileset-32x32.png │ │ └── needleman-tileset.png │ └── sprites │ │ ├── main-screen.json │ │ ├── megaman-items.json │ │ ├── megaman.json │ │ └── mm.js ├── copyright.txt ├── decisionMaking.js ├── dist │ ├── bundle.r.js │ └── bundle.r.js.map ├── index.html ├── package.json ├── src │ ├── anim │ │ └── mm.js │ ├── main.js │ ├── scenes │ │ ├── Col.js │ │ ├── Copyright.js │ │ ├── Falling.js │ │ ├── Main.js │ │ ├── Map.js │ │ └── Placeholder.js │ └── sprites │ │ └── mm.js └── webpack.config.js ├── javascript-questions └── function-expressions-vs-function-declarations.js ├── js ├── ajax-chunked-uploader.php └── gamedev │ ├── Gruntfile.js │ ├── TOC.md │ ├── TODO.md │ ├── app │ ├── config │ │ ├── mario-anim.json │ │ ├── tile-map-mario-001.json │ │ ├── tile-map-mario-002.json │ │ ├── tile-map-mario-003.json │ │ ├── tile-map-mario-004.json │ │ └── tile-map.json │ ├── css │ │ ├── bootstrap-flat.min.css │ │ ├── bootstrap.min.css │ │ ├── elt.css │ │ ├── map-editor.css │ │ └── style.css │ ├── demo-001.html │ ├── game-loop │ │ └── index.html │ ├── img │ │ ├── anim-mario-question-block.gif │ │ ├── clear.png │ │ ├── img-mushroom-red.png │ │ ├── mario-tiles.png │ │ ├── screenshot-super-mario-bro.jpg │ │ ├── sprite-mario-bros.png │ │ └── tiles.png │ ├── index.html │ ├── js │ │ └── app │ │ │ ├── components │ │ │ └── Physics.js │ │ │ ├── core │ │ │ ├── Camera.js │ │ │ ├── Entity.js │ │ │ ├── GameLoop.js │ │ │ ├── Map.js │ │ │ ├── MapLayer.js │ │ │ └── MapTile.js │ │ │ ├── graphics │ │ │ ├── AnimRenderer.js │ │ │ ├── AnimSprite.js │ │ │ └── Sprite.js │ │ │ └── io │ │ │ ├── get.js │ │ │ └── img.js │ ├── lib │ │ ├── angularjs.min.js │ │ └── ui-bootstrap-tpls-0.11.0.min.js │ ├── map-editor.html │ ├── snake │ │ ├── .htaccess │ │ ├── css │ │ │ └── style.css │ │ ├── fallback.html │ │ ├── fonts │ │ │ ├── geo.woff │ │ │ └── vt323.woff │ │ ├── img │ │ │ ├── 9781849696029_05_01.png │ │ │ ├── 9781849696029_05_02.png │ │ │ ├── block-green.png │ │ │ └── fruit-01.png │ │ ├── index.html │ │ ├── js │ │ │ ├── next-empty.worker.js │ │ │ ├── renderer.class.js │ │ │ └── snake.class.js │ │ └── manifest.appcache │ ├── space-shooter-v2 │ │ └── index.html │ ├── space-shooter │ │ ├── css │ │ │ └── style.css │ │ ├── img │ │ │ ├── enemy_red.png │ │ │ ├── fighter.png │ │ │ ├── laser_blue.png │ │ │ ├── laser_red.png │ │ │ ├── space_bg_01.jpg │ │ │ └── spaceship.png │ │ ├── index.html │ │ └── js │ │ │ ├── Canvas.js │ │ │ ├── EnemyManager.js │ │ │ ├── GameLoop.js │ │ │ ├── PhysicsManager.js │ │ │ ├── Vec2.js │ │ │ ├── components │ │ │ ├── Drag.js │ │ │ ├── LaserGun.js │ │ │ ├── Move.js │ │ │ ├── Physics.js │ │ │ ├── Sprite.js │ │ │ └── Strength.js │ │ │ ├── entities │ │ │ └── Entity.js │ │ │ ├── main.js │ │ │ └── widgets │ │ │ └── EnergyBar.js │ ├── tutorial-001.html │ ├── tutorial-002.html │ ├── tutorial-003.html │ ├── tutorial-004.html │ ├── tutorial-005.html │ ├── tutorial-006.html │ ├── tutorial-007.html │ └── tutorial-008.html │ ├── install.sh │ ├── lib │ ├── COPYING │ └── README.md │ └── package.json ├── linear-algebra ├── index.js ├── quizzies.js └── vec.js ├── list.html ├── maze ├── graph-traversal.html ├── index.html └── maze-001.json ├── react-js └── server-rendering-php │ ├── .htaccess │ ├── bootstrap.php │ ├── bundle.js │ ├── index.php │ ├── js │ └── index.jsx │ ├── package.json │ └── webpack.config.js ├── tmpl.html └── travis-ci ├── phpunit.xml ├── src ├── LoudTranslator.php └── Translator.php └── tests └── LoudTranslatorTest.php /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | sitemap.json 3 | _site 4 | .sass-cache/ 5 | vendor 6 | node_modules/ 7 | /**/node_modules/ 8 | /**/deps.js 9 | /**/lib/closure-library 10 | .idea 11 | compiler.jar 12 | bower_components/ 13 | npm-debug.log 14 | *.hot-update.j* 15 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.classpath: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | Game Dev 2D GWT 4 | 5 | 6 | 7 | 8 | 9 | org.eclipse.wst.common.project.facet.core.builder 10 | 11 | 12 | 13 | 14 | org.eclipse.jdt.core.javabuilder 15 | 16 | 17 | 18 | 19 | com.google.gdt.eclipse.core.webAppProjectValidator 20 | 21 | 22 | 23 | 24 | com.google.gwt.eclipse.core.gwtProjectValidator 25 | 26 | 27 | 28 | 29 | 30 | org.eclipse.jdt.core.javanature 31 | com.google.gwt.eclipse.core.gwtNature 32 | org.eclipse.wst.common.project.facet.core.nature 33 | 34 | 35 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.settings/com.google.gdt.eclipse.core.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | warSrcDir=war 3 | warSrcDirIsOutput=true 4 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.settings/com.google.gwt.eclipse.core.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | filesCopiedToWebInfLib=gwt-servlet.jar 3 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.settings/org.eclipse.jdt.core.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled 3 | org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.7 4 | org.eclipse.jdt.core.compiler.compliance=1.7 5 | org.eclipse.jdt.core.compiler.problem.assertIdentifier=error 6 | org.eclipse.jdt.core.compiler.problem.enumIdentifier=error 7 | org.eclipse.jdt.core.compiler.source=1.7 8 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/.settings/org.eclipse.wst.common.project.facet.core.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/war/WEB-INF/.gitignore: -------------------------------------------------------------------------------- 1 | /classes 2 | -------------------------------------------------------------------------------- /Game Dev 2D GWT/war/WEB-INF/lib/gwt-servlet.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/Game Dev 2D GWT/war/WEB-INF/lib/gwt-servlet.jar -------------------------------------------------------------------------------- /Game Dev 2D GWT/war/WEB-INF/web.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | easylearntutorial 2 | ================= 3 | 4 | If you follow my programming tutorials at http://www.youtube.com/easylearntutorial, then here is where the source code for all the demos, examples, and tutorials can be found. 5 | 6 | 7 | Video Tutorial Series 8 | ===================== 9 | 10 | The following is a list of tutorial series that the code in this repository accompanies. Note that all of the projects inside this repository are build as an Eclipse project, and any dependency is included with the repository. This way, you can just download the repository and get the project up and running right away. 11 | 12 | 13 | ### HTML5 Game Development Tutorials with Google Web Toolkit (GWT) ### 14 | 15 | Learn HTML5 game development using Java through Google Web Toolkit (GWT) and modern concepts and APIs available in modern browsers. If you're not much into Java, and prefers straight up JavaScript game development tutorials, check out my other video series for a more vanilla experience. 16 | 17 | 18 | HTML5 Game Development Tutorial with GWT 19 | 20 | 21 | -------------------------------------------------------------------------------- /angular/flux/README.md: -------------------------------------------------------------------------------- 1 | # Building Angular Apps Using Flux Architecture 2 | 3 | 4 | ##### (In this video, we will take a look at Facebook's Flux design pattern, and how we can use it with Angular.js) 5 | 6 | > Flux is the application architecture that Facebook uses for building client-side web applications. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code. [facebook flux docs](https://facebook.github.io/flux/docs/overview.html) 7 | 8 | 9 | #### (show flux diagram) 10 | 11 | The big idea behind Flux is **unidirectional data flow**. This is in sharp contrast to Angular.js, where the core principle is two-way data binding. 12 | 13 | The three main components in a Flux application are: 14 | 15 | 16 | #### (highlight diagram) 17 | 18 | + Dispatcher - a singleton event bus (of sorts) that forward actions to stores. 19 | 20 | + Stores - hold application data and logic, similar to a *model* in traditional MVC. Stores are also event emitters, so views can listen for update messages from individual stores. 21 | 22 | + Views - stateless components responsible for displaying data to, and receiving input from the user. 23 | 24 | Interestingly enough, these components map faily easily to Angular constructs: 25 | 26 | 27 | #### (highlight code implementation) 28 | 29 | + Dispatcher - can be implemented very naturally using an Angular's service object. The easiest way to implement an AppDispatcher is to instantiate Facebook's own dispatcher class as a service. 30 | 31 | + Stores - works exactly like what Angular services are meant to work, except that Angular services are not opinionated about being driven by even dispatchers. The store service would need to be an event emitter somehow, and have an instance of the dispatcher injected into it as a dependency. 32 | 33 | + Views - can be implemented as a controller bound to a view, or more interestingly, as an Angular directive. The directive would need an instance of the dispatcher so it can dispatch events when needed, as well as an instance of each store it wants to listen to. 34 | 35 | 36 | #### (here's a demo of this in action) 37 | 38 | ```` 39 | +---------------+------------------------+ 40 | | | | 41 | +---------------+ | 42 | | | | 43 | +---------------+ | 44 | | | | 45 | | | | 46 | | | | 47 | | | | 48 | | +------------------------+ 49 | | | | 50 | +---------------+------------------------+ 51 | ```` 52 | 53 | #### (for individual videos: Building a WhatsApp in Angular - web app) 54 | 55 | ## UserBadge directive 56 | 57 | Saturday, 11. July 2015 04:22PM 58 | 59 | -------------------------------------------------------------------------------- /angular/flux/app.js: -------------------------------------------------------------------------------- 1 | var angular = require('angular'); 2 | 3 | console.log(angular.noop); 4 | -------------------------------------------------------------------------------- /angular/flux/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elt-ng-flux", 3 | "version": "0.0.0", 4 | "homepage": "https://github.com/formigone/easylearntutorial", 5 | "authors": [ 6 | "Rodrigo Silveira " 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /angular/flux/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ exports: {}, 15 | /******/ id: moduleId, 16 | /******/ loaded: false 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.loaded = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // __webpack_public_path__ 37 | /******/ __webpack_require__.p = ""; 38 | 39 | /******/ // Load entry module and return exports 40 | /******/ return __webpack_require__(0); 41 | /******/ }) 42 | /************************************************************************/ 43 | /******/ ([ 44 | /* 0 */ 45 | /***/ function(module, exports, __webpack_require__) { 46 | 47 | var angular = __webpack_require__(1); 48 | 49 | console.log(angular.noop); 50 | 51 | 52 | /***/ }, 53 | /* 1 */ 54 | /***/ function(module, exports) { 55 | 56 | module.exports = angular; 57 | 58 | /***/ } 59 | /******/ ]); -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-001.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-002.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-003.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-004.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-004.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-005.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-005.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-006.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-006.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-007.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-007.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-008.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-008.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-009.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-009.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-010.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-010.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-011.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-011.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-012.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-012.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-013.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-013.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-014.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-015.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-015.png -------------------------------------------------------------------------------- /angular/flux/img/profile-photo-016.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/profile-photo-016.png -------------------------------------------------------------------------------- /angular/flux/img/user-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/img/user-icon.png -------------------------------------------------------------------------------- /angular/flux/nes-favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/angular/flux/nes-favicon.png -------------------------------------------------------------------------------- /angular/flux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elt-ng-flux", 3 | "scripts": { 4 | "build": "./node_modules/.bin/webpack", 5 | "watch": "./node_modules/.bin/webpack --watch" 6 | }, 7 | "dependencies": { 8 | "react-dispatcher": "~0.2.1", 9 | "angular": "~1.4.2", 10 | "bootstrap": "~3.3.5" 11 | }, 12 | "devDependencies": { 13 | "node-libs-browser": "~0.5.2", 14 | "webpack": "~1.10.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /angular/flux/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | overflow: hidden; 3 | height: 100%; 4 | } 5 | 6 | ::-webkit-scrollbar { 7 | width: 6px; 8 | } 9 | 10 | ::-webkit-scrollbar-track { 11 | } 12 | 13 | ::-webkit-scrollbar-thumb { 14 | background: #aaa; 15 | } 16 | 17 | .finger { 18 | cursor: pointer; 19 | } 20 | 21 | .fakeNav { 22 | height: 127px; 23 | } 24 | 25 | #mainContainer { 26 | margin-top: -108px; 27 | } 28 | 29 | #mainContainer > .row { 30 | background: #fff; 31 | border-radius: 3px; 32 | box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); 33 | } 34 | 35 | #mainContainer > .row > div { 36 | padding: 0; 37 | } 38 | 39 | .panelHeight { 40 | height: 762px; 41 | } 42 | 43 | .round-tl { 44 | border-top-left-radius: 3px; 45 | } 46 | 47 | .round-tr { 48 | border-top-right-radius: 3px; 49 | } 50 | 51 | .round-bl { 52 | border-bottom-left-radius: 3px; 53 | } 54 | 55 | .round-br { 56 | border-bottom-right-radius: 3px; 57 | } 58 | 59 | .noPad { 60 | padding: 0 !important; 61 | } 62 | 63 | .padHor { 64 | padding: 0 15px !important; 65 | } 66 | 67 | .padLeft { 68 | padding: 10px 10px 10px 0 !important; 69 | } 70 | 71 | .padVer { 72 | padding: 10px 0 !important; 73 | } 74 | 75 | .media-body p { 76 | margin: 0; 77 | } 78 | 79 | .padLight { 80 | padding: 0 20px; 81 | } 82 | 83 | .padMed { 84 | padding: 10px 20px; 85 | } 86 | 87 | .noMarg { 88 | margin: 0; 89 | } 90 | 91 | .borderBottom { 92 | border-bottom: 1px solid #e0e0e0; 93 | } 94 | 95 | .borderLeft { 96 | border-left: 1px solid #e0e0e0; 97 | } 98 | 99 | .borderLeftDark { 100 | border-left: 1px solid #cdcdcd; 101 | } 102 | 103 | .borderRightDark { 104 | border-right: 1px solid #cfcfcf; 105 | } 106 | 107 | .mediaHover:hover { 108 | background: #e0e0e0; 109 | } 110 | 111 | .conversationsContainer { 112 | height: 629px; 113 | overflow: hidden; 114 | overflow-y: auto; 115 | } 116 | 117 | .blankCanvas { 118 | text-align: center; 119 | color: #aaa; 120 | font-weight: 300 !important; 121 | text-shadow: 0 5px 150px #333; 122 | padding: 40% 0 0; 123 | } 124 | 125 | .conversationCanvas { 126 | height: 620px; 127 | overflow: hidden; 128 | overflow-y: auto; 129 | } 130 | 131 | .text-highlight { 132 | color: #009688; 133 | font-weight: 800; 134 | } 135 | 136 | .wrapAuto { 137 | overflow: auto; 138 | } 139 | 140 | .text-light { 141 | color: #eee; 142 | } 143 | -------------------------------------------------------------------------------- /angular/flux/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './app.js', 3 | output: { 4 | filename: 'bundle.js' 5 | }, 6 | externals: { 7 | 'angular': 'angular' 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /closure-tools/compiler/app.comp.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version":3, 3 | "file":"app.min.js", 4 | "lineCount":1, 5 | "mappings":"AAKC,IAAIA,EAAO,SACC,UAAZ,EAAIA,CAAJ,GACCA,CADD,CACQ,SADR,CAKAC,MAAA,CAAMD,CADGE,IAVGC,QAAQ,CAACH,CAAD,CAAO,CAC3B,IAAAA,KAAA,CAAYA,CADe,CAUlBE,CAAWF,CAAXE,CACHF,MAAN;", 6 | "sources":["app.js"], 7 | "names":["name","alert","me","Person"] 8 | } 9 | -------------------------------------------------------------------------------- /closure-tools/compiler/app.js: -------------------------------------------------------------------------------- 1 | var Person = function(name) { 2 | this.name = name; 3 | }; 4 | 5 | function main(){ 6 | var name = "RODRIGO"; 7 | if (name != "Rodrigo") { 8 | name = "Rodrigo"; 9 | } 10 | 11 | var me = new Person(name); 12 | alert(me.name); 13 | } 14 | 15 | main(); 16 | -------------------------------------------------------------------------------- /closure-tools/compiler/app.min.js: -------------------------------------------------------------------------------- 1 | var a="RODRIGO";"Rodrigo"!=a&&(a="Rodrigo");alert((new function(b){this.name=b}(a)).name); 2 | //# sourceMappingURL=app.comp.js.map 3 | 4 | -------------------------------------------------------------------------------- /closure-tools/compiler/compiler.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/closure-tools/compiler/compiler.jar -------------------------------------------------------------------------------- /closure-tools/compiler/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /docs/CNAME: -------------------------------------------------------------------------------- 1 | easylearntutorial.com -------------------------------------------------------------------------------- /docs/GemFile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | ruby RUBY_VERSION 3 | 4 | # Hello! This is where you manage which Jekyll version is used to run. 5 | # When you want to use a different version, change it below, save the 6 | # file and run `bundle install`. Run Jekyll with `bundle exec`, like so: 7 | # 8 | # bundle exec jekyll serve 9 | # 10 | # This will help ensure the proper Jekyll version is running. 11 | # Happy Jekylling! 12 | gem "jekyll", "3.3.1" 13 | 14 | # This is the default theme for new Jekyll sites. You may change this to anything you like. 15 | gem "minima", "~> 2.0" 16 | 17 | # If you want to use GitHub Pages, remove the "gem "jekyll"" above and 18 | # uncomment the line below. To upgrade, run `bundle update github-pages`. 19 | # gem "github-pages", group: :jekyll_plugins 20 | 21 | # If you have any plugins, put them here! 22 | group :jekyll_plugins do 23 | gem "jekyll-sitemap", "~> 0.12" 24 | gem "jekyll-feed", "~> 0.6" 25 | end 26 | -------------------------------------------------------------------------------- /docs/GemFile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.0) 5 | public_suffix (~> 2.0, >= 2.0.2) 6 | colorator (1.1.0) 7 | ffi (1.9.14) 8 | forwardable-extended (2.6.0) 9 | jekyll (3.3.1) 10 | addressable (~> 2.4) 11 | colorator (~> 1.0) 12 | jekyll-sass-converter (~> 1.0) 13 | jekyll-watch (~> 1.1) 14 | kramdown (~> 1.3) 15 | liquid (~> 3.0) 16 | mercenary (~> 0.3.3) 17 | pathutil (~> 0.9) 18 | rouge (~> 1.7) 19 | safe_yaml (~> 1.0) 20 | jekyll-feed (0.8.0) 21 | jekyll (~> 3.3) 22 | jekyll-sass-converter (1.5.0) 23 | sass (~> 3.4) 24 | jekyll-sitemap (0.12.0) 25 | jekyll (~> 3.3) 26 | jekyll-watch (1.5.0) 27 | listen (~> 3.0, < 3.1) 28 | kramdown (1.13.1) 29 | liquid (3.0.6) 30 | listen (3.0.8) 31 | rb-fsevent (~> 0.9, >= 0.9.4) 32 | rb-inotify (~> 0.9, >= 0.9.7) 33 | mercenary (0.3.6) 34 | minima (2.1.0) 35 | jekyll (~> 3.3) 36 | pathutil (0.14.0) 37 | forwardable-extended (~> 2.6) 38 | public_suffix (2.0.5) 39 | rb-fsevent (0.9.8) 40 | rb-inotify (0.9.7) 41 | ffi (>= 0.5.0) 42 | rouge (1.11.1) 43 | safe_yaml (1.0.4) 44 | sass (3.4.23) 45 | 46 | PLATFORMS 47 | ruby 48 | 49 | DEPENDENCIES 50 | jekyll (= 3.3.1) 51 | jekyll-feed (~> 0.6) 52 | jekyll-sitemap (~> 0.12) 53 | minima (~> 2.0) 54 | 55 | RUBY VERSION 56 | ruby 2.0.0p648 57 | 58 | BUNDLED WITH 59 | 1.13.7 60 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | # 2 | # This file contains configuration flags to customize your site 3 | # 4 | 5 | # Name of your site (displayed in the header) 6 | name: Easy Learn Tutorial 7 | 8 | # Short bio or description (displayed in the header) 9 | description: Programming & Software Development Tutorials 10 | 11 | 12 | # 13 | # Flags below are optional 14 | # 15 | 16 | # Includes an icon in the footer for each username you enter 17 | footer-links: 18 | dribbble: 19 | email: 20 | facebook: 21 | flickr: 22 | github: formigone 23 | instagram: 24 | linkedin: 25 | pinterest: 26 | rss: # just type anything here for a working RSS icon 27 | twitter: easylearntuts 28 | stackoverflow: 29 | youtube: channel/UCOmFcwNbdxxRXR6Xza0m4Ew 30 | googleplus: # anything in your profile username that comes after plus.google.com/ 31 | 32 | 33 | # Enter your Disqus shortname (not your username) to enable commenting on posts 34 | # You can find your shortname on the Settings page of your Disqus account 35 | disqus: easylearntutorial 36 | 37 | # Enter your Google Analytics web tracking code (e.g. UA-2110908-2) to activate tracking 38 | google_analytics: UA-36191661-1 39 | 40 | # Your website URL (e.g. http://akshayagarwal007.github.io) 41 | # Used for Sitemap.xml and your RSS feed 42 | url: 43 | 44 | # If you're hosting your site at a Project repository on GitHub pages 45 | # (http://yourusername.github.io/repository-name) 46 | # and NOT your User repository (http://yourusername.github.io) 47 | # then add in the baseurl here, like this: "/repository-name" 48 | baseurl: "" 49 | 50 | # 51 | # !! You don't need to change any of the configuration flags below !! 52 | # 53 | 54 | permalink: /:title/ 55 | 56 | # Jekyll 3 now only supports Kramdown for Markdown 57 | kramdown: 58 | # Use GitHub flavored markdown, including triple backtick fenced code blocks 59 | input: GFM 60 | # Jekyll 3 and GitHub Pages now only support rouge for syntax highlighting 61 | syntax_highlighter: rouge 62 | syntax_highlighter_opts: 63 | # Use existing pygments syntax highlighting css 64 | css_class: 'highlight' 65 | 66 | # Set the Sass partials directory, as we're using @imports 67 | sass: 68 | style: :expanded # You might prefer to minify using :compressed 69 | 70 | # Use the following plug-ins 71 | gems: 72 | - jekyll-sitemap # Create a sitemap using the official Jekyll sitemap gem 73 | - jekyll-feed # Create an Atom feed using the official Jekyll feed gem 74 | 75 | # Exclude these files from your production _site 76 | exclude: 77 | - Gemfile 78 | - Gemfile.lock 79 | - LICENSE 80 | - README.md 81 | - CNAME -------------------------------------------------------------------------------- /docs/_includes/disqus.html: -------------------------------------------------------------------------------- 1 | {% if site.disqus %} 2 |
3 |
4 | 15 | 16 |
17 | {% endif %} 18 | -------------------------------------------------------------------------------- /docs/_includes/ga.html: -------------------------------------------------------------------------------- 1 | {% if site.google_analytics %} 2 | 3 | 15 | 16 | {% endif %} 17 | -------------------------------------------------------------------------------- /docs/_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 6 | 7 | 10 |
11 |
12 | 22 |
23 |
24 |
25 | -------------------------------------------------------------------------------- /docs/_includes/shared.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | {% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }} 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | {% include header.html %} 22 | 23 | {{ content }} 24 | 25 |
26 |
27 |

Copyright © 2014-2017 EasyLearnTutorial. All rights reserved.

28 |
29 |
30 | 31 | {% include shared.html %} 32 | {% include ga.html %} 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /docs/_sass/main.scss: -------------------------------------------------------------------------------- 1 | @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,700,900);body{background-color:#f2f2f2;font-family:"Lato";font-weight:300;font-size:16px;color:#555;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;margin-top:70px}h1,h2,h3,h4,h5,h6{font-family:"Raleway";font-weight:300;color:#333}p{line-height:28px;margin-bottom:25px}.centered{text-align:center}.mt{margin-top:40px}a{color:#f85c37;word-wrap:break-word;-webkit-transition:color .1s ease-in , background .1s ease-in;-moz-transition:color .1s ease-in , background .1s ease-in;-ms-transition:color .1s ease-in , background .1s ease-in;-o-transition:color .1s ease-in , background .1s ease-in;transition:color .1s ease-in , background .1s ease-in}a:hover,a:focus{color:#7b7b7b;text-decoration:none;outline:0}a:before,a:after{-webkit-transition:color .1s ease-in , background .1s ease-in;-moz-transition:color .1s ease-in , background .1s ease-in;-ms-transition:color .1s ease-in , background .1s ease-in;-o-transition:color .1s ease-in , background .1s ease-in;transition:color .1s ease-in , background .1s ease-in}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}.navbar{font-weight:800;font-size:14px;padding-top:15px;padding-bottom:15px;background-color:#fff}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{color:#fff;background-color:#74cfae}.navbar-brand{font-size:60px;padding-top:0;padding-bottom:0}.btn-theme{color:#fff;background-color:#74cfae;border-color:transparent}.btn{padding:10px 30px;margin-bottom:0;font-size:18px;border:5px solid transparent;border-radius:0}.lead{letter-spacing:1px}#hello{width:100%;padding-top:250px;padding-bottom:250px}#hello h1{font-size:90px;font-weight:700;letter-spacing:3px;color:#74cfae}#hello h2{color:silver;font-weight:400}#green{background-color:#74cfae;padding-top:50px;margin-bottom:0}#green h3{color:#fff;font-weight:400;margin-bottom:35px}#green p{color:#fff;font-weight:400;font-size:20px}#skills{background-color:#4e4e4e;padding-top:50px;padding-bottom:50px;margin-top:50px}#skills h3{color:#fff}#skills p{color:#fff;font-weight:400}#social{width:100%;padding-top:200px;padding-bottom:200px}#social i{font-size:50px;color:#74cfae}#social .col-md-3:hover{background-color:#f5f5f5}#social .col-md-3{padding:30px}#f{padding-top:20px;background-color:#74cfae}#f p{color:#fff;text-align:right;font-weight:400}.grid img{opacity:.7}.grid img:hover{opacity:1}.e-player{position:relative;padding-bottom:56.25%;padding-top:25px;height:0;margin-bottom:20px}.e-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}.yt-widget{padding:13px 0}.hor-spacer{padding-left:10px;padding-right:10px}.input-word{padding:5px;width:100%;display:block;min-height:250px}table.dash td{vertical-align:top;padding:10px}.subtle p{color:rgba(255,255,255,.5)!important}.bald{margin:0 0 20px}#skills .raw_extra{color:#fff!important}#skills .raw_desc *{color:#aaa!important}.prettyprint,.leftitup{text-align:left!important} -------------------------------------------------------------------------------- /docs/_sass/prettify.scss: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:decimal!important} -------------------------------------------------------------------------------- /docs/_sass/styles.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/_sass/styles.scss -------------------------------------------------------------------------------- /docs/ads.txt: -------------------------------------------------------------------------------- 1 | google.com, pub-8011856535245268, DIRECT, f08c47fec0942fa0 -------------------------------------------------------------------------------- /docs/build/build-tree.php: -------------------------------------------------------------------------------- 1 | md5($item['videoId'])]); 27 | }, $playlist['items']); 28 | return array_merge($playlist, ['id' => md5($playlist['id'])]); 29 | }, $in); 30 | 31 | $sitemap = []; 32 | 33 | foreach ($playlists as $playlist) { 34 | $sitemap[] = Eltcom\genPlaylist($playlist); 35 | } 36 | 37 | $json = json_encode($sitemap, JSON_PRETTY_PRINT); 38 | 39 | if ($json) { 40 | file_put_contents(Eltcom\SITEMAP_PATH, $json); 41 | } else { 42 | throw new Exception(Eltcom\getEncodingError(json_last_error())); 43 | } 44 | -------------------------------------------------------------------------------- /docs/build/composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "formigone/eltcom", 3 | "authors": [ 4 | { 5 | "name": "Rodrigo Silveria", 6 | "email": "rodrixar@gmail.com" 7 | } 8 | ], 9 | "require": { 10 | "google/apiclient": "^2.0" 11 | }, 12 | "autoload": { 13 | "files": [ 14 | "utils.php" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/build/defs/0b026204224372038e725b055b18816a/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/0ff927cfb47d098b46d9f527cefdd244/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn how I did the awesome Mega Man rain effect from http:\/\/www.html5voodoo.com\/rain using JavaScript and the 2D Canvas API (not WebGL)", 3 | "summary": "Learn how I did the awesome Mega Man rain effect from http:\/\/www.html5voodoo.com\/rain using JavaScript and the 2D Canvas API (not WebGL)" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/17ab8bfd9fc8a68e116392ecd90dcee5/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Web development tutorials for the intermediate to advanced web programmer. Tutorials will cover various topics from theory and best practices in local web development, to tips and tricks, to environment set up, to full-blown, advanced web apps.\r\n\r\nThe main languages and technologies covered in this series are:\r\n\r\n-- HTML5 APIs\r\n-- CSS3\r\n-- Javascript\r\n-- jQuery\r\n-- Template engines (Mustache.js)\r\n-- Eclipse IDE\r\n-- PHP\r\n-- MySQL\r\n-- AJAX, XHR", 3 | "summary": "Web development tutorials for the intermediate to advanced web programmer. Tutorials will cover various topics from theory and best practices in local web development, to tips and tricks, to environment set up, to full-blown, advanced web apps.\r\n\r\nThe main languages and technologies covered in this series are:\r\n\r\n-- HTML5 APIs\r\n-- CSS3\r\n-- Javascript\r\n-- jQuery\r\n-- Template engines (Mustache.js)\r\n-- Eclipse IDE\r\n-- PHP\r\n-- MySQL\r\n-- AJAX, XHR" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/1bb2f5c70704dca2f17fa57bdbf3f8cc/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn how to program HTML5 web apps in Java with GWT. The Google Web Toolkit 2.5.1 compiler generates highly optimized JavaScript code. This GWT tutorial series will walk you through what it is, how to install it, and how to start coding with it, all the way through developing more complex web applications using the Java language, and ending with awesome HTML5 code. We'll also cover design patterns specific to GWT, including the MVP pattern (model view presenter), as well as UIBinder, GWT RPC, JSON, and other advanced topics.", 3 | "summary": "Learn how to program HTML5 web apps in Java with GWT. The Google Web Toolkit 2.5.1 compiler generates highly optimized JavaScript code. This GWT tutorial series will walk you through what it is, how to install it, and how to start coding with it, all the way through developing more complex web applications using the Java language, and ending with awesome HTML5 code. We'll also cover design patterns specific to GWT, including the MVP pattern (model view presenter), as well as UIBinder, GWT RPC, JSON, and other advanced topics." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/1cf4a40f1c9be4f78ead82770325e402/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Become an Eclipse Java, PHP, or JavaScript Power User. The difference between a good software engineer, and a great one is how much one knows how to take advantage of the best tools available. \r\n\r\nSure, it was cool feeling all hardcore developing in Notepad, VIM, Emacs, or even any of the modern text editors... But it's hard to get to that next level of productivity and performance without using an IDE.\r\n\r\nThis series will teach you hundreds of power user tips and secrets for Eclipse.", 3 | "summary": "Become an Eclipse Java, PHP, or JavaScript Power User. The difference between a good software engineer, and a great one is how much one knows how to take advantage of the best tools available. \r\n\r\nSure, it was cool feeling all hardcore developing in Notepad, VIM, Emacs, or even any of the modern text editors... But it's hard to get to that next level of productivity and performance without using an IDE.\r\n\r\nThis series will teach you hundreds of power user tips and secrets for Eclipse." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/2961b2d51a02b08fcad4d5be7cbb71fe/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn programming theory and fundamentals to take you from a novice programmer to a well rooted software engineer. Or in the case that you already are more than a beginner coder, this series will help you gain a better understanding of fundamental programming concepts.\r\n\r\n\r\nOther links of interest:\r\n-- Our YouTube channel http:\/\/www.youtube.com\/user\/easylearntutorial \r\n-- Visit our website http:\/\/www.easylearntutorial.com for more text and video tutorials, updates, and upcoming tutorial articles and events\r\n-- Like us on Facebook http:\/\/www.facebook.com\/easylearntutorialonline \r\n-- Follow us on Twitter http:\/\/www.twitter.com\/easylearntuts", 3 | "summary": "Learn programming theory and fundamentals to take you from a novice programmer to a well rooted software engineer. Or in the case that you already are more than a beginner coder, this series will help you gain a better understanding of fundamental programming concepts.\r\n\r\n\r\nOther links of interest:\r\n-- Our YouTube channel http:\/\/www.youtube.com\/user\/easylearntutorial \r\n-- Visit our website http:\/\/www.easylearntutorial.com for more text and video tutorials, updates, and upcoming tutorial articles and events\r\n-- Like us on Facebook http:\/\/www.facebook.com\/easylearntutorialonline \r\n-- Follow us on Twitter http:\/\/www.twitter.com\/easylearntuts" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/2c04ed3a7ff91c6efcb52163ac5756fd/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "summary": "Learn the basics of game development using JavaScript and HTML5 technologies. Contents of this series illustrate game development principles as taught in my book Multiplayer Game Development with HTML5. The 2D tile map editor used throughout is developed using the Angular.js framework by Google.", 3 | "description": "Learn the basics of game development using JavaScript and HTML5 technologies. Contents of this series illustrate game development principles as taught in my book Multiplayer Game Development with HTML5. The 2D tile map editor used throughout is developed using the Angular.js framework by Google." 4 | } 5 | -------------------------------------------------------------------------------- /docs/build/defs/372142bd6426dbeb8518b40b411f116a/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Join the challenge if you're a creative, skillful programmer wanting to have some fun, and hopefully learn something in the process. If you think you have the programming skills required to set a record in one of these programming challenges, you are welcome to join the challenge and try to prove yourself to the community! ============ Submit your best times by posting a comment in any one of the tutorial videos. ============ The computer programming challenge is something I made up just for fun. The point of the challenge is to see how fast a developer can program a particular piece of software. That's it. Of course, you can't use any code whatsoever that you have not written during the challenge. You cannot use any non-native libraries, and you cannot reuse code from a previous challenge. You may choose the technology to be used. That's it! The first challenge is to program a Tic Tac Toe game, which should be fully functional, and fun to play. My record is 33 minutes. The complete source code that accompanies these tutorials can be found at my GitHub repository at https:\/\/github.com\/formigone\/tictactoe-challenge", 3 | "summary": "Join the challenge if you're a creative, skillful programmer wanting to have some fun, and hopefully learn something in the process. If you think you have the programming skills required to set a record in one of these programming challenges, you are welcome to join the challenge and try to prove yourself to the community!" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/4080b4145335e32ffc1716c6ff30ae8d/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/59d44af502b9dffd8b70fe3d92e25b37/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/5ba854fabc9a32d86b2285845c6fd0c3/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn how to program your own HTML5 and native Android games with beginner to advanced programming tutorials. The series will use Java, using tools like Google Web Toolkit (GWT), and Android SDK. For a refresher series of GWT tutorials for beginners, check out my playlist http:\/\/www.youtube.com\/playlist?list=PLGJDCzBP5j3yheWxkEdJCDAhzYxpudejx", 3 | "summary": "Learn how to program your own HTML5 and native Android games with beginner to advanced programming tutorials. The series will use Java, using tools like Google Web Toolkit (GWT), and Android SDK. For a refresher series of GWT tutorials for beginners, check out my playlist http:\/\/www.youtube.com\/playlist?list=PLGJDCzBP5j3yheWxkEdJCDAhzYxpudejx" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/62d1cf0b3cf3548ef2511861d7f47bf1/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn HTML5 game development using JavaScript and modern concepts and APIs available in modern browsers. If you are a mobile developers, you might also want to checkout my other tutorial series on Android game development tutorials.", 3 | "summary": "Learn HTML5 game development using JavaScript and modern concepts and APIs available in modern browsers. If you are a mobile developers, you might also want to checkout my other tutorial series on Android game development tutorials." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/6b9d4dabb3abdefbc9401a9af72a05ff/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/790909982ebaf28274cf744b0accfeb9/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/7a5fe6e6ba9e7ab59866f86f9efe1c9c/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/8e31b930744727b5b78e20bc0249ee81/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn HTML5 game development using Java through Google Web Toolkit (GWT) and modern concepts and APIs available in modern browsers. If you're not much into Java, and prefers straight up JavaScript game development tutorials, check out my other video series for a more vanilla experience.", 3 | "summary": "Learn HTML5 game development using Java through Google Web Toolkit (GWT) and modern concepts and APIs available in modern browsers. If you're not much into Java, and prefers straight up JavaScript game development tutorials, check out my other video series for a more vanilla experience." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/8e4fec4ce56d3f9ccaa136190e8860ff/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn how to implement awesome algorithms such as maze generation algorithms, computer vision algorithms, searching, sorting, shuffling, etc. We also cover basic and in-depth tutorials explaining computer data structures such as lists, linked lists, maps, trees, graphs, stacks, queues, heaps, etc. Every video includes a clear and concise definition of its subject, a demo, and a straight-forward code implementation. The programming part of each tutorial will be in JavaScript, Java, C++, Python, or PHP.", 3 | "summary": "Learn how to implement awesome algorithms such as maze generation algorithms, computer vision algorithms, searching, sorting, shuffling, etc. We also cover basic and in-depth tutorials explaining computer data structures such as lists, linked lists, maps, trees, graphs, stacks, queues, heaps, etc." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/a1742f9f1f2447de76eead5cd634aea9/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn what is HTML5 and how to use the latest and greatest APIs. While there are some tutorials about some of the more popular HTML5 tags, the main focus of the series is the Javascript functionality that's been exposed through the browser.\r\n\r\nOther links of interest:\r\n-- Our YouTube channel http:\/\/www.youtube.com\/user\/easylearntutorial \r\n-- Visit our website http:\/\/www.easylearntutorial.com for more text and video tutorials, updates, and upcoming tutorial articles and events\r\n-- Like us on Facebook http:\/\/www.facebook.com\/easylearntutorialonline \r\n-- Follow us on Twitter http:\/\/www.twitter.com\/easylearntuts", 3 | "summary": "Learn what is HTML5 and how to use the latest and greatest APIs. While there are some tutorials about some of the more popular HTML5 tags, the main focus of the series is the Javascript functionality that's been exposed through the browser.\r\n\r\nOther links of interest:\r\n-- Our YouTube channel http:\/\/www.youtube.com\/user\/easylearntutorial \r\n-- Visit our website http:\/\/www.easylearntutorial.com for more text and video tutorials, updates, and upcoming tutorial articles and events\r\n-- Like us on Facebook http:\/\/www.facebook.com\/easylearntutorialonline \r\n-- Follow us on Twitter http:\/\/www.twitter.com\/easylearntuts" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/a517a3067245fb350881ca41471fc0e8/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "My HTML5 visually similar image search engine & how to build one. This series of tutorials will teach you the basics of computer vision, focusing on image analysis and comparison, using HTML5 APIs. The demo shown is my actual senior project, which I originally presented in 2012 at Brigham Young University - Idaho (BYU-I) as part of my undergraduate work. The entire app was written in HTML because I wanted to show myself, my peers, and most of all, Brother Kevin Twitchell that we can do awesome things in a browser - the largest platform in history.The two main HTML5 APIs used in this visually similar image search engine were: + 2D Canvas Context + Web WorkersThe entire application is a single page web app, relying heavily in jQuery's XHR abstraction, as well as my own Ajax abstraction for use inside the web worker.", 3 | "summary": "My HTML5 visually similar image search engine & how to build one. This series of tutorials will teach you the basics of computer vision, focusing on image analysis and comparison, using HTML5 APIs. The demo shown is my actual senior project, which I originally presented in 2012 at Brigham Young University - Idaho (BYU-I) as part of my undergraduate work." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/c3cbb27ab8e93254429b6f111a25c8c4/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Watch me practice programming apps from scratch live. Uncut, unedited, and raw. These videos include me trying to learn a new JavaScript framework or library, developing games, or mobile apps using HTML5 without any preparation whatsoever. The purpose of these tutorials is for me to share my learning experience with other programmers. If you have any suggestions about an MVC framework you think I should try, or any API or anything of the sort, please let me know. I'm very open minded, and don't mind recording my experience so others can learn from it, or perhaps just be entertained by common coding errors I may make along the way.", 3 | "summary": "Watch me practice programming apps from scratch live. Uncut, unedited, and raw. These videos include me trying to learn a new JavaScript framework or library, developing games, or mobile apps using HTML5 without any preparation whatsoever. The purpose of these tutorials is for me to share my learning experience with other programmers. If you have any suggestions about an MVC framework you think I should try, or any API or anything of the sort, please let me know. I'm very open minded, and don't mind recording my experience so others can learn from it, or perhaps just be entertained by common coding errors I may make along the way." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/c50cb2b7b569d4c9eff2d99829d361ec/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/cf7a1d621be5bda2510c4f095c14d3d6/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn PHP programming through this series of tutorials covering topics not intended for beginners. If you are looking for PHP basic tutorials, check out my other series. These advanced tutorials will cover things such as object oriented programming, regular expressions, sockets, server programming, web crawling, search engines, and various random projects and demos. Feel free to suggest a topic or a specific article or tutorial.", 3 | "summary": "Learn PHP programming through this series of tutorials covering topics not intended for beginners. If you are looking for PHP basic tutorials, check out my other series. These advanced tutorials will cover things such as object oriented programming, regular expressions, sockets, server programming, web crawling, search engines, and various random projects and demos. Feel free to suggest a topic or a specific article or tutorial." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/ddf7e5add4d5efac86819fdcc68c7290/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Hidden easter eggs in Google Chrome web browser (hidden game) and in various video games.", 3 | "summary": "Hidden easter eggs in Google Chrome web browser (hidden game) and in various video games." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/de2e9ec02e17ef9ebf9cf76ac9fb9c18/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/eac2077ef3743d79dcc76602e073ecf0/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Design patterns are key to good PHP programming, and a fundamental to anyone wanting to learn PHP and become a better programmer. Design patterns are solutions for common problems that people have discovered and documented, so you don't have to re-invent the wheel every time you run into one of these problems on your next software engineering project.", 3 | "summary": "Design patterns are key to good PHP programming, and a fundamental to anyone wanting to learn PHP and become a better programmer. Design patterns are solutions for common problems that people have discovered and documented, so you don't have to re-invent the wheel every time you run into one of these problems on your next software engineering project." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/ef457d7d3282b0755953bad8ce753eae/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn how to create 2D games using Angular.js and HTML5. The Tile-based map editor created in this tutorials is open-source, and is a built-in (but standalone) component of the RokkoJS game engine. Check out the JavaScript game framework Git repository at https:\/\/github.com\/formigone\/rokkojs", 3 | "summary": "Learn how to create 2D games using Angular.js and HTML5. The Tile-based map editor created in this tutorials is open-source, and is a built-in (but standalone) component of the RokkoJS game engine. Check out the JavaScript game framework Git repository at https:\/\/github.com\/formigone\/rokkojs" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/f071e528b03145bf74570d9612804cfe/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/f25282572bac0ceb4dbec1110f3e31ba/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "", 3 | "summary": "" 4 | } -------------------------------------------------------------------------------- /docs/build/defs/f935a1620d026e5bf35333f7c34690ba/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "description": "Learn JavaScript programming from scratch and fast. This web development series focuses on client side JavaScript from the client-server model. The first part of the series teaches basic software development concepts, such as variables, data types, logical operations, functions, classes, etc. Later you will learn how to program DOM scripting, cookies, sessions, and other advanced HTML5 techniques. The apps and examples shown will be executed in the best modern web browser I know: Google Chrome. However, you can follow along with your favorite browser, be it Firefox, Internet Explorer, Opera, or even Safari.\r\n\r\nOnce you become an expert JavaScript programmer, you'll be able to develop 2D games from scratch. That's right! Web development is that awesome. Just keep in mind that the Java language is not at all related to, or the same thing as EcmaScript, even though they share similar names.", 3 | "summary": "Learn JavaScript programming from scratch and fast. This web development series focuses on client side JavaScript from the client-server model. The first part of the series teaches basic software development concepts, such as variables, data types, logical operations, functions, classes, etc. Later you will learn how to program DOM scripting, cookies, sessions, and other advanced HTML5 techniques." 4 | } -------------------------------------------------------------------------------- /docs/build/defs/fbd6c4e3ef1f0692eb7465426ee9d7c3/main.json: -------------------------------------------------------------------------------- 1 | { 2 | "summary": "Learn Nintendo Wii U game programming from scratch! Nintendo Web Framework allows you to develop games for the Nintendo Wii U console system using HTML5 and JavaScript. The runtime uses WebKit, so we can take advantage of that by creating a game in full HTML5, then deploying it to the Wii U. This tutorial series will show you how to become a registered and licensed independent game developer (indie game dev) for Nintendo..." 3 | } 4 | -------------------------------------------------------------------------------- /docs/build/make.php: -------------------------------------------------------------------------------- 1 | setDeveloperKey($key); 22 | $youtube = new Google_Service_YouTube($client); 23 | 24 | $lists = []; 25 | $total = 0; 26 | $next = null; 27 | 28 | do { 29 | $params = ['channelId' => $channelId, 'maxResults' => 50]; 30 | if ($next) { 31 | $params['pageToken'] = $next; 32 | } 33 | $channel = $youtube->playlists->listPlaylists('id,snippet', $params); 34 | /** @var array $items */ 35 | $items = $channel->getItems(); 36 | /** @var Google_Service_YouTube_PageInfo $pageInfo */ 37 | $pageInfo = $channel->getPageInfo(); 38 | $total = $pageInfo->getTotalResults(); 39 | $next = $channel->getNextPageToken(); 40 | 41 | $playlist = array_map(function(/** @var Google_Service_YouTube_Playlist $item */ $item) use ($youtube) { 42 | $snip = $item->getSnippet(); 43 | /** @var Google_Service_YouTube_Thumbnail $thumb */ 44 | $thumb = $snip->getThumbnails()->getDefault(); 45 | 46 | $items = $youtube->playlistItems->listPlaylistItems('id,contentDetails', [ 47 | 'playlistId' => $item->getId(), 48 | 'maxResults' => 50 49 | ]); 50 | /** @var Google_Service_YouTube_PageInfo $pageInfo */ 51 | $pageInfo = $items->getPageInfo(); 52 | $total = $pageInfo->getTotalResults(); 53 | $next = $items->getNextPageToken(); 54 | $data = []; 55 | 56 | while (count($data) < $total) { 57 | $data = array_merge($data, Eltcom\getItems($items, $youtube)); 58 | if ($next) { 59 | echo '---', PHP_EOL; 60 | print_r([ 61 | 'data' => $data, 62 | 'total' => $total, 63 | 'next' => $next, 64 | 'id' => $item->getId(), 65 | ]); 66 | throw new Exception('Should fetch next page'); 67 | } 68 | } 69 | 70 | return [ 71 | 'id' => $item->getId(), 72 | 'title' => $snip->getTitle(), 73 | 'description' => $snip->getDescription(), 74 | 'thumbnail' => $thumb->getUrl(), 75 | 'publishedAt' => $snip->getPublishedAt(), 76 | 'items' => $data, 77 | ]; 78 | }, $items); 79 | 80 | $lists = array_merge($lists, $playlist); 81 | } while (count($lists) < $total); 82 | 83 | 84 | echo json_encode($lists); 85 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/favicon.ico -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont (1).eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/fontawesome-webfont (1).eot -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /docs/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /docs/img/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/01.jpg -------------------------------------------------------------------------------- /docs/img/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/02.jpg -------------------------------------------------------------------------------- /docs/img/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/03.jpg -------------------------------------------------------------------------------- /docs/img/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/04.jpg -------------------------------------------------------------------------------- /docs/img/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/05.jpg -------------------------------------------------------------------------------- /docs/img/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/06.jpg -------------------------------------------------------------------------------- /docs/img/blank.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/blank.gif -------------------------------------------------------------------------------- /docs/img/computer-lecture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/computer-lecture.jpg -------------------------------------------------------------------------------- /docs/img/easy-learn-tutorial-logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/easy-learn-tutorial-logo-small.png -------------------------------------------------------------------------------- /docs/img/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/iphone.png -------------------------------------------------------------------------------- /docs/img/rodrigo-silveira-favi-tech.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/rodrigo-silveira-favi-tech.jpg -------------------------------------------------------------------------------- /docs/img/rodrigo-silveira-favi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/docs/img/rodrigo-silveira-favi.jpg -------------------------------------------------------------------------------- /docs/js/echo.js: -------------------------------------------------------------------------------- 1 | /*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */ 2 | !function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.echo=e(t)}(this,function(t){"use strict";var e,n,o,r,c,a={},u=function(){},d=function(t){return null===t.offsetParent},l=function(t,e){if(d(t))return!1;var n=t.getBoundingClientRect();return n.right>=e.l&&n.bottom>=e.t&&n.left<=e.r&&n.top<=e.b},i=function(){(r||!n)&&(clearTimeout(n),n=setTimeout(function(){a.render(),n=null},o))};return a.init=function(n){n=n||{};var d=n.offset||0,l=n.offsetVertical||d,f=n.offsetHorizontal||d,s=function(t,e){return parseInt(t||e,10)};e={t:s(n.offsetTop,l),b:s(n.offsetBottom,l),l:s(n.offsetLeft,f),r:s(n.offsetRight,f)},o=s(n.throttle,250),r=n.debounce!==!1,c=!!n.unload,u=n.callback||u,a.render(),document.addEventListener?(t.addEventListener("scroll",i,!1),t.addEventListener("load",i,!1)):(t.attachEvent("onscroll",i),t.attachEvent("onload",i))},a.render=function(n){for(var o,r,d=(n||document).querySelectorAll("[data-echo], [data-echo-background]"),i=d.length,f={l:0-e.l,t:0-e.t,b:(t.innerHeight||document.documentElement.clientHeight)+e.b,r:(t.innerWidth||document.documentElement.clientWidth)+e.r},s=0;i>s;s++)r=d[s],l(r,f)?(c&&r.setAttribute("data-echo-placeholder",r.src),null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+r.getAttribute("data-echo-background")+")":r.src!==(o=r.getAttribute("data-echo"))&&(r.src=o),c||(r.removeAttribute("data-echo"),r.removeAttribute("data-echo-background")),u(r,"load")):c&&(o=r.getAttribute("data-echo-placeholder"))&&(null!==r.getAttribute("data-echo-background")?r.style.backgroundImage="url("+o+")":r.src=o,r.removeAttribute("data-echo-placeholder"),u(r,"unload"));i||a.detach()},a.detach=function(){document.removeEventListener?t.removeEventListener("scroll",i):t.detachEvent("onscroll",i),clearTimeout(n)},a}); -------------------------------------------------------------------------------- /docs/series/2d-game-development-from-scratch.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: 2D Game Development from Scratch 5 | --- 6 | 7 |
8 |
9 |

2D Game Development from Scratch

10 |
11 |
12 |
13 | 2D Game Development from Scratch 14 |
15 |
16 |
17 |

Description

18 |

Learn the basics of game development using JavaScript and HTML5 technologies. Contents of this series illustrate game development principles as taught in my book Multiplayer Game Development with HTML5. The 2D tile map editor used throughout is developed using the Angular.js framework by Google.

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 2D Game Development from Scratch - Preview 27 | 28 |

29 | 2D Game Development from Scratch - Preview 30 |

31 |

Tuesday, August 26, 2014

32 |
33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /docs/series/2d-game-development-from-scratch/2d-game-development-from-scratch-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: 2D Game Development from Scratch 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

2D Game Development from Scratch - Preview

19 |

Published on Tuesday, August 12, 2014

20 |

Description

21 |

Preview of my upcoming tutorial series about game development with JavaScript. The series will cover the theory and fundamentals of game programming, which is pretty language agnostic, although the implementation will be done in JavaScript and other web and HTML5 technologies. 22 | 23 | You can buy my book "Learn HTML5 Through Game Development", from Amazon http://goo.gl/iZsdbi 24 | 25 | The tutorial series will teach game development in vanilla JavaScript using Google Closure tools (and AngularJs for tooling) using an iterative approach, as well as the entity/component architecture. We'll first write enough code to get a component working, then refactor into modular, reusable components. In the end, we'll build a small, but powerful game engine, and a full game using the engine. 26 | 27 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 28 | 29 | Copyright (c) 2014 Rodrigo Silveira - http://www.easylearntutorial.com

30 |
31 |
32 | 33 |
34 |
35 | {% include disqus.html %} 36 |
37 |
38 |
39 |
40 |
41 | -------------------------------------------------------------------------------- /docs/series/dependency-injection.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Dependency Injection 5 | --- 6 | 7 |
8 |
9 |

Dependency Injection

10 |
11 |
12 |
13 | Dependency Injection 14 |
15 |
16 |
17 |

Description

18 |

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | Pimple: PHP Dependency Injection Container 27 | 28 |

29 | Pimple: PHP Dependency Injection Container 30 |

31 |

Sunday, January 5, 2014

32 |
33 | 34 | Auryn: PHP Dependency Injection Container 35 | 36 |

37 | Auryn: PHP Dependency Injection Container 38 |

39 |

Sunday, January 5, 2014

40 |
41 | 42 | Dependency Injection VS Service Locator Pattern 43 | 44 |

45 | Dependency Injection VS Service Locator Pattern 46 |

47 |

Sunday, January 5, 2014

48 |
49 |
50 |
51 |
52 | -------------------------------------------------------------------------------- /docs/series/hidden-easter-eggs.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Hidden Easter Eggs 5 | --- 6 | 7 |
8 |
9 |

Hidden Easter Eggs

10 |
11 |
12 |
13 | Hidden Easter Eggs 14 |
15 |
16 |
17 |

Description

18 |

Hidden easter eggs in Google Chrome web browser (hidden game) and in various video games.

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | Hidden Easter Egg in Google Chrome: T-rex Runner Game 27 | 28 |

29 | Hidden Easter Egg in Google Chrome: T-rex Runner Game 30 |

31 |

Wednesday, January 11, 2017

32 |
33 | 34 | Super Mario Brothers - Google Easter Egg 35 | 36 |

37 | Super Mario Brothers - Google Easter Egg 38 |

39 |

Wednesday, January 11, 2017

40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/series/hidden-easter-eggs/hidden-easter-egg-in-google-chrome-t-rex-runner-game.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Hidden Easter Eggs 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Hidden Easter Egg in Google Chrome: T-rex Runner Game

19 |

Published on Friday, September 18, 2015

20 |

Description

21 |

There's a hidden easter egg game in Google Chrome, for those of you still considering using Microsoft's Internet Explorer browser. Worse yet, Mozilla FireFox... In Chrome, both desktop and mobile, you can find this T-Rex runner game by losing your internet connection (either by waiting for a bad day to happen, or by disconnecting your computer from the network), then trying to access a website. You will see a screen with the dinosaur, at which point you can just press the spacebar or the enter key (or just tap the screen, if that applies). 22 | 23 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 24 | 25 | Copyright (c) 2015 Rodrigo Silveira - http://www.easylearntutorial.com

26 |
27 |
28 |

Next on Hidden Easter Eggs

29 |
30 | 31 | 32 | 33 |
34 |
35 |

36 | Super Mario Brothers - Google Easter Egg 37 |

38 |
39 |
40 |
41 |
42 | {% include disqus.html %} 43 |
44 |
45 |
46 |
47 |
48 | -------------------------------------------------------------------------------- /docs/series/hidden-easter-eggs/super-mario-brothers-google-easter-egg.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Hidden Easter Eggs 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Super Mario Brothers - Google Easter Egg

19 |

Published on Wednesday, September 16, 2015

20 |

Description

21 |

Do a Google search for "super mario bros" right now, even if you don't like Nintendo or video games in general. Then click the "?" box on the right side of the page. How awesome is that?! 22 | 23 | There are tons of other easter eggs hidden away in many of Google's products, including their Chrome browser. 24 | 25 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 26 | 27 | Copyright (c) 2013 Rodrigo Silveira - http://www.easylearntutorial.com

28 |
29 |
30 |

Next on Hidden Easter Eggs

31 |
32 | 33 | 34 | 35 |
36 |
37 |

38 | Hidden Easter Egg in Google Chrome: T-rex Runner Game 39 |

40 |
41 |
42 |
43 |
44 | {% include disqus.html %} 45 |
46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /docs/series/html5-game-development-tutorial-with-gwt.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: HTML5 Game Development Tutorial with GWT 5 | --- 6 | 7 |
8 |
9 |

HTML5 Game Development Tutorial with GWT

10 |
11 |
12 |
13 | HTML5 Game Development Tutorial with GWT 14 |
15 |
16 |
17 |

Description

18 |

Learn HTML5 game development using Java through Google Web Toolkit (GWT) and modern concepts and APIs available in modern browsers. If you're not much into Java, and prefers straight up JavaScript game development tutorials, check out my other video series for a more vanilla experience.

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 2D Renderer: GWT & Android Game Development Tutorial 1 27 | 28 |

29 | 2D Renderer: GWT & Android Game Development Tutorial 1 30 |

31 |

Saturday, July 20, 2013

32 |
33 | 34 | Road map: GWT & Android Game Development Tutorial 2 35 | 36 |

37 | Road map: GWT & Android Game Development Tutorial 2 38 |

39 |

Saturday, July 20, 2013

40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/series/html5-game-development-tutorial-with-gwt/2d-renderer-gwt-android-game-development-tutorial-1.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: HTML5 Game Development Tutorial with GWT 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

2D Renderer: GWT & Android Game Development Tutorial 1

19 |

Published on Sunday, November 25, 2012

20 |

Description

21 |

Learn how to develop 2D video games using Java. This series will use the Java language, and take advantage of such great tools as Google Web Toolkit (GWT) and the Android SDK, to teach you how to program 2D games to be played through an HTML5 compatible browser, or an Android device (phone or tablet). 22 | 23 | The series is aimed at both beginner and advanced programmers who love playing and making (or hoping to learn how to) computer games. Each lesson will build upon the next, so watching the tutorials in sequence is important. During the course of the tutorial lectures, we'll first build a framework to help us keep our code well organized and high quality, then we'll implement a few concrete games using the framework. 24 | 25 | There will be tutorials where we'll discuss game development and design theory, followed by examples, UML diagrams to help you follow along, and the complete source code will be available in GitHub if you don't feel like typing everything from the videos. 26 | 27 | Happy gaming!

28 |
29 |
30 |

Next on HTML5 Game Development Tutorial with GWT

31 |
32 | 33 | 34 | 35 |
36 |
37 |

38 | Road map: GWT & Android Game Development Tutorial 2 39 |

40 |
41 |
42 |
43 |
44 | {% include disqus.html %} 45 |
46 |
47 |
48 |
49 |
50 | -------------------------------------------------------------------------------- /docs/series/javascript-html5-game-development-tutorials.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: JavaScript HTML5 Game Development Tutorials 5 | --- 6 | 7 |
8 |
9 |

JavaScript HTML5 Game Development Tutorials

10 |
11 |
12 |
13 | JavaScript HTML5 Game Development Tutorials 14 |
15 |
16 |
17 |

Description

18 |

Learn HTML5 game development using JavaScript and modern concepts and APIs available in modern browsers. If you are a mobile developers, you might also want to checkout my other tutorial series on Android game development tutorials.

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | HTML5 Game Development Tutorial - JavaScript #1 Road Map 27 | 28 |

29 | HTML5 Game Development Tutorial - JavaScript #1 Road Map 30 |

31 |

Saturday, July 20, 2013

32 |
33 | 34 | Mega Man Tetris Clone - HTML5 & JavaScript Closure Tools 35 | 36 |

37 | Mega Man Tetris Clone - HTML5 & JavaScript Closure Tools 38 |

39 |

Saturday, July 20, 2013

40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/series/javascript-html5-game-development-tutorials/mega-man-tetris-clone-html5-javascript-closure-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: JavaScript HTML5 Game Development Tutorials 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Mega Man Tetris Clone - HTML5 & JavaScript Closure Tools

19 |

Published on Saturday, August 31, 2013

20 |

Description

21 |

This HTML5 game is a demonstration of Google Closure tools and the latest HTML5 APIs that lend themselves well for game development. If you'd like to learn more about Closure Tools, how to make your own video games, or anything those lines, come find my YouTube channel or my tech blog. 22 | 23 | Play the game online at http://www.html5voodoo.com/tetris 24 | 25 | Tools and technologies used in this demo game include: JavaScript, Google Chrome, HTML5, 2D Canvas context, request animation frame, and some CSS3 styling. 26 | 27 | Copyright © 2013 Rodrigo Silveira. All rights reserved (except for all the Mega Man stuff, of course...). Thank you Google for the awesome Google App Engine PHP environment =) 28 | 29 | Also, in case you were not aware, I recently released a book titled "Learn HTML5 by Creating Fun Games". You can buy it from Amazon at http://www.amazon.com/Learning-HTML5-Creating-Fun-Games/dp/1849696020/ref=sr_1_1?ie=UTF8&qid=1378009644&sr=8-1&keywords=rodrigo+silveira

30 |
31 |
32 |

Next on JavaScript HTML5 Game Development Tutorials

33 |
34 | 35 | 36 | 37 |
38 |
39 |

40 | HTML5 Game Development Tutorial - JavaScript #1 Road Map 41 |

42 |
43 |
44 |
45 |
46 | {% include disqus.html %} 47 |
48 |
49 |
50 |
51 |
52 | -------------------------------------------------------------------------------- /docs/series/pixel-art-inspiration.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Pixel Art Inspiration 5 | --- 6 | 7 |
8 |
9 |

Pixel Art Inspiration

10 |
11 |
12 |
13 | Pixel Art Inspiration 14 |
15 |
16 |
17 |

Description

18 |

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | Top Down View - Pixel Art Inspiration 27 | 28 |

29 | Top Down View - Pixel Art Inspiration 30 |

31 |

Saturday, July 5, 2014

32 |
33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /docs/series/pixel-art-inspiration/top-down-view-pixel-art-inspiration.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Pixel Art Inspiration 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Top Down View - Pixel Art Inspiration

19 |

Published on Saturday, July 5, 2014

20 |

Description

21 |

Graphic design & video game development ideas and inspiration. Screenshot of games from Nintendo NES, SNES, Sega Genesis, and others that I don't know. Games featured include: 22 | 23 | 1. The Legend of Zelda 24 | 2. Super Mario Brothers 25 | 3. Mario RPG 26 | 4. Labyrinth Legends 27 | 5. Sonic 28 | 6. Fatal Labyrinth 29 | 30 | I'm currently working on a game where the general premise works best on a top-down view such as the one illustrated in those screenshots. 31 | 32 | For more video game development tutorials, visit our website at http://www.easylearntutorial.com

33 |
34 |
35 | 36 |
37 |
38 | {% include disqus.html %} 39 |
40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/series/pixel-art-special-effects-in-javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Pixel Art Special Effects in JavaScript 5 | --- 6 | 7 |
8 |
9 |

Pixel Art Special Effects in JavaScript

10 |
11 |
12 |
13 | Pixel Art Special Effects in JavaScript 14 |
15 |
16 |
17 |

Description

18 |

Learn how I did the awesome Mega Man rain effect from http://www.html5voodoo.com/rain using JavaScript and the 2D Canvas API (not WebGL)

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | Render Loop - Pixel Art Special Effects - JavaScript Tutorial 27 | 28 |

29 | Render Loop - Pixel Art Special Effects - JavaScript Tutorial 30 |

31 |

Wednesday, October 9, 2013

32 |
33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /docs/series/pixel-art-special-effects-in-javascript/render-loop-pixel-art-special-effects-javascript-tutorial.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: Pixel Art Special Effects in JavaScript 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Render Loop - Pixel Art Special Effects - JavaScript Tutorial

19 |

Published on Wednesday, October 9, 2013

20 |

Description

21 |

The render loop is a way to control how and when our scene is drawn to the screen. Inside it we'll just call all of the game entities using an HTML5 2D canvas. After the canvas has rendered, we will eventually post process the canvas pixel data manually. My hope is that they add a new API to CanvasRenderingContext2D that allows us to specify a GLSL fragment shader that it can use to render the scene with our custom instructions. 22 | 23 | See Mega Man rain effect live http://www.html5voodoo.com/rain 24 | 25 | See my explanatory video and the demo of the effect, along with my HTML5 feature request http://www.youtube.com/watch?v=6bXmyuTquIs 26 | 27 | Copyright (c) 2013 Rodrigo Silveira http://www.easylearntutorial.com

28 |
29 |
30 | 31 |
32 |
33 | {% include disqus.html %} 34 |
35 |
36 |
37 |
38 |
39 | -------------------------------------------------------------------------------- /docs/series/react-js-tutorials.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: React.js Tutorials 5 | --- 6 | 7 |
8 |
9 |

React.js Tutorials

10 |
11 |
12 |
13 | React.js Tutorials 14 |
15 |
16 |
17 |

Description

18 |

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | Isomorphic React.js with PHP server-side rendering 27 | 28 |

29 | Isomorphic React.js with PHP server-side rendering 30 |

31 |

Wednesday, January 11, 2017

32 |
33 | 34 | React.js Server-side Rendering with PHP 35 | 36 |

37 | React.js Server-side Rendering with PHP 38 |

39 |

Wednesday, January 11, 2017

40 |
41 |
42 |
43 |
44 | -------------------------------------------------------------------------------- /docs/series/react-js-tutorials/isomorphic-react-js-with-php-server-side-rendering.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: React.js Tutorials 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

Isomorphic React.js with PHP server-side rendering

19 |

Published on Thursday, March 31, 2016

20 |

Description

21 |

Learn how to develop isomorphic React.js applications using a PHP backend. This tutorial is especially handy for those developing React.js apps wanting to do server-side rendering, but without using Node.js or Express.js. 22 | 23 | What you'll want to do is: 24 | 25 | 1. Install V8Js PHP extension 26 | 2. Make sure your React app takes its initial input as props 27 | 3. Set up a router that uses HTML5's window.history.pushState() 28 | 4. Redirect all PHP traffic within your application so it all goes through a single entry point (front controller pattern) 29 | 5. Fetch the data needed for a given route 30 | 6. Render your React components in PHP using V8Js and React's renderToString() 31 | 7. Render your component's bootstrap using the server-fetched data 32 | 33 | Source code: https://github.com/formigone/easylearntutorial/tree/master/react-js/server-rendering-php 34 | 35 | V8Js: https://github.com/phpv8/v8js 36 | 37 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 38 | 39 | Copyright (c) 2013 Rodrigo Silveira - http://www.easylearntutorial.com

40 |
41 |
42 |

Next on React.js Tutorials

43 |
44 | 45 | 46 | 47 |
48 |
49 |

50 | React.js Server-side Rendering with PHP 51 |

52 |
53 |
54 |
55 |
56 | {% include disqus.html %} 57 |
58 |
59 |
60 |
61 |
62 | -------------------------------------------------------------------------------- /docs/series/react-js-tutorials/react-js-server-side-rendering-with-php.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: React.js Tutorials 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

React.js Server-side Rendering with PHP

19 |

Published on Wednesday, March 30, 2016

20 |

Description

21 |

Learn how to build an isomorphic React.js app by using PHP to render your components server-side. To do this, we'll use V8Js (PHP extension). 22 | 23 | The five steps mentioned in the video: 24 | 25 | 1. Use HTML5 history.pushState() to route your application without using a hash fragment 26 | 2. Configure your server to map every request to a single entry point file so you can fetch the data for that route/path 27 | 3. Figure out what data is needed for a given request, and fetch that data on the backend 28 | 4. Render your React app to a string using V8Js and output this DOM into your container HTML tag 29 | 5. Render your React app on the client with the same data generated on the server as props 30 | 31 | The demo single-page app used in the video can be found at https://github.com/formigone/easylearntutorial/tree/master/react-js/server-rendering-php 32 | 33 | For more information about V8.js, see https://github.com/phpv8/v8js 34 | 35 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 36 | 37 | Copyright (c) 2013-2016 Rodrigo Silveira - http://www.easylearntutorial.com

38 |
39 |
40 |

Next on React.js Tutorials

41 |
42 | 43 | 44 | 45 |
46 |
47 |

48 | Isomorphic React.js with PHP server-side rendering 49 |

50 |
51 |
52 |
53 |
54 | {% include disqus.html %} 55 |
56 |
57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /docs/series/react-js-with-php-tutorials.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: React.js with PHP Tutorials 5 | --- 6 | 7 |
8 |
9 |

React.js with PHP Tutorials

10 |
11 |
12 |
13 | React.js with PHP Tutorials 14 |
15 |
16 |
17 |

Description

18 |

19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | React.js Server-side Rendering with PHP 27 | 28 |

29 | React.js Server-side Rendering with PHP 30 |

31 |

Wednesday, January 11, 2017

32 |
33 |
34 |
35 |
36 | -------------------------------------------------------------------------------- /docs/series/react-js-with-php-tutorials/react-js-server-side-rendering-with-php.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | nav: series 4 | title: React.js with PHP Tutorials 5 | --- 6 | 7 |
8 |
9 |
10 |
11 |
12 |
13 | 14 |
15 |
16 |
17 |
18 |

React.js Server-side Rendering with PHP

19 |

Published on Wednesday, March 30, 2016

20 |

Description

21 |

Learn how to build an isomorphic React.js app by using PHP to render your components server-side. To do this, we'll use V8Js (PHP extension). 22 | 23 | The five steps mentioned in the video: 24 | 25 | 1. Use HTML5 history.pushState() to route your application without using a hash fragment 26 | 2. Configure your server to map every request to a single entry point file so you can fetch the data for that route/path 27 | 3. Figure out what data is needed for a given request, and fetch that data on the backend 28 | 4. Render your React app to a string using V8Js and output this DOM into your container HTML tag 29 | 5. Render your React app on the client with the same data generated on the server as props 30 | 31 | The demo single-page app used in the video can be found at https://github.com/formigone/easylearntutorial/tree/master/react-js/server-rendering-php 32 | 33 | For more information about V8.js, see https://github.com/phpv8/v8js 34 | 35 | Programming tutorials by Easy Learn Tutorial - because anyone can learn how to become an expert software and web developer! 36 | 37 | Copyright (c) 2013-2016 Rodrigo Silveira - http://www.easylearntutorial.com

38 |
39 |
40 | 41 |
42 |
43 | {% include disqus.html %} 44 |
45 |
46 |
47 |
48 |
49 | -------------------------------------------------------------------------------- /docs/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | // 5 | // IMPORTS 6 | // 7 | 8 | @import "font-awesome.min"; 9 | @import "bootstrap"; 10 | @import "main"; 11 | @import "prettify"; 12 | 13 | .video-container { 14 | position:relative; 15 | padding-bottom:56.25%; 16 | padding-top:30px; 17 | height:0; 18 | overflow:hidden; 19 | } 20 | 21 | .video-container iframe, .video-container object, .video-container embed { 22 | position:absolute; 23 | top:0; 24 | left:0; 25 | width:100%; 26 | height:100%; 27 | } 28 | -------------------------------------------------------------------------------- /game-dev-ai/README.md: -------------------------------------------------------------------------------- 1 | # Game Development Artificial Inteligence Lessons 2 | 3 | ### Course Overview 4 | 5 | + Interactive game development course with Mega Man metaphor. All "levels" are simple demos for each lesson taught. 6 | 7 | #### Screen 1 8 |
9 | > Game Development Course: GDC 221 10 | 11 | >   12 | > Free game development lessons 13 | (c) Easy Learn Tutorial 2015. All rights reserved. 14 | www.easylearntutorial.com 15 | 16 | > Mega Man and all related items are copyright of Capcom. 17 |
18 | 19 | #### Screen 2 20 | 21 | > GDC 221 22 | > 23 | \> Learn Start 24 |     About Course 25 | 26 | > (c) www.easylearntutorial.com 2015 27 | 28 | #### Learn Start Screen 29 | 30 | + Same as Mega Man 4 boss selection screen 31 | + Center panel is ELT logo 32 | + While other lessons are created, each panel is blank 33 | + boss intro screen will have lesson title and summary, maybe link to video 34 | + HTML page where app in embed allows for full screen mode 35 | 36 | ### Lesson 1: Decision Making 37 | 38 | + Select from N choices, each with the same probability of 1/N. 39 | + Select from N choices, where W1 are weighted > 1, and W2 are not. 40 | 41 | -------------------------------------------------------------------------------- /game-dev-ai/app.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015 Rodrigo Silveira. All rights reserved. 3 | * Mega Man is copyrighted by Capcom. Any use of Mega Man and its related works is intended for educational purposes only. 4 | */ 5 | 6 | function Renderer(width, height){ 7 | this.canvas = document.createElement('canvas'); 8 | this.canvas.width = width; 9 | this.canvas.height = height; 10 | 11 | this.ctx = this.canvas.getContext('2d'); 12 | this.ctx.imageSmoothingEnabled = false; 13 | } 14 | -------------------------------------------------------------------------------- /game-dev-ai/asset/audio/mm3-intro-yt.HeVva6ddNAc.danielsymphonies.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/audio/mm3-intro-yt.HeVva6ddNAc.danielsymphonies.mp3 -------------------------------------------------------------------------------- /game-dev-ai/asset/audio/mm3-wily-02-yt.cJ3hNF3EyGA.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/audio/mm3-wily-02-yt.cJ3hNF3EyGA.mp3 -------------------------------------------------------------------------------- /game-dev-ai/asset/fonts/press-start-2p.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/fonts/press-start-2p.woff2 -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/main-screen-0.0.1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/main-screen-0.0.1.png -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/main-screen-0.0.2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/main-screen-0.0.2.png -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/main-screen-0.0.3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/main-screen-0.0.3.png -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/main-screen-inspiration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/main-screen-inspiration.png -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/main-screen.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/main-screen.xcf -------------------------------------------------------------------------------- /game-dev-ai/asset/gimp/needleman-tileset.xcf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/gimp/needleman-tileset.xcf -------------------------------------------------------------------------------- /game-dev-ai/asset/img/gdc221-mascot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/gdc221-mascot.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/ground_1x1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/ground_1x1.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/main-screen-0.0.3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/main-screen-0.0.3.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/megaman-items.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/megaman-items.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/megaman.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/megaman.gif -------------------------------------------------------------------------------- /game-dev-ai/asset/img/megaman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/megaman.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/megaman3-needleman-stage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/megaman3-needleman-stage.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/mm3-wily-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/mm3-wily-02.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/needleman-tileset-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/needleman-tileset-32x32.png -------------------------------------------------------------------------------- /game-dev-ai/asset/img/needleman-tileset.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/game-dev-ai/asset/img/needleman-tileset.png -------------------------------------------------------------------------------- /game-dev-ai/asset/sprites/main-screen.json: -------------------------------------------------------------------------------- 1 | { 2 | "frames": { 3 | "logo": { 4 | "frame": { 5 | "x": 3, 6 | "y": 5, 7 | "w": 441, 8 | "h": 120 9 | }, 10 | "rotated": false, 11 | "trimmed": false 12 | }, 13 | "arrow": { 14 | "frame": { 15 | "x": 2, 16 | "y": 167, 17 | "w": 12, 18 | "h": 20 19 | }, 20 | "rotated": false, 21 | "trimmed": false 22 | }, 23 | "startLearning": { 24 | "frame": { 25 | "x": 1, 26 | "y": 125, 27 | "w": 250, 28 | "h": 18 29 | }, 30 | "rotated": false, 31 | "trimmed": false 32 | }, 33 | "aboutElt": { 34 | "frame": { 35 | "x": 1, 36 | "y": 146, 37 | "w": 160, 38 | "h": 18 39 | }, 40 | "rotated": false, 41 | "trimmed": false 42 | }, 43 | "mascot": { 44 | "frame": { 45 | "x": 255, 46 | "y": 124, 47 | "w": 128, 48 | "h": 150 49 | }, 50 | "rotated": false, 51 | "trimmed": false 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /game-dev-ai/asset/sprites/megaman-items.json: -------------------------------------------------------------------------------- 1 | { 2 | "frames": { 3 | "oneUp": { 4 | "frame": { 5 | "x": 193, 6 | "y": 27, 7 | "w": 18, 8 | "h": 18 9 | }, 10 | "rotated": false, 11 | "trimmed": false 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /game-dev-ai/asset/sprites/megaman.json: -------------------------------------------------------------------------------- 1 | { 2 | "frames": { 3 | "standingRight": { 4 | "frame": { 5 | "x": 77, 6 | "y": 8, 7 | "w": 21, 8 | "h": 24 9 | }, 10 | "rotated": false, 11 | "trimmed": false 12 | }, 13 | "standingRightBlink": { 14 | "frame": { 15 | "x": 107, 16 | "y": 8, 17 | "w": 21, 18 | "h": 24 19 | }, 20 | "rotated": false, 21 | "trimmed": false 22 | }, 23 | "runningRight0": { 24 | "frame": { 25 | "x": 162, 26 | "y": 8, 27 | "w": 24, 28 | "h": 24 29 | }, 30 | "rotated": false, 31 | "trimmed": false 32 | }, 33 | "runningRight1": { 34 | "frame": { 35 | "x": 192, 36 | "y": 8, 37 | "w": 16, 38 | "h": 24 39 | }, 40 | "rotated": false, 41 | "trimmed": false 42 | }, 43 | "runningRight2": { 44 | "frame": { 45 | "x": 213, 46 | "y": 8, 47 | "w": 21, 48 | "h": 24 49 | }, 50 | "rotated": false, 51 | "trimmed": false 52 | }, 53 | "jumpingRight": { 54 | "frame": { 55 | "x": 239, 56 | "y": 2, 57 | "w": 26, 58 | "h": 30 59 | }, 60 | "rotated": false, 61 | "trimmed": false 62 | }, 63 | 64 | "standingLeft": { 65 | "frame": { 66 | "x": 552, 67 | "y": 8, 68 | "w": 21, 69 | "h": 24 70 | }, 71 | "rotated": false, 72 | "trimmed": false 73 | }, 74 | "standingLeftBlink": { 75 | "frame": { 76 | "x": 522, 77 | "y": 8, 78 | "w": 21, 79 | "h": 24 80 | }, 81 | "rotated": false, 82 | "trimmed": false 83 | }, 84 | "runningLeft0": { 85 | "frame": { 86 | "x": 464, 87 | "y": 8, 88 | "w": 24, 89 | "h": 24 90 | }, 91 | "rotated": false, 92 | "trimmed": false 93 | }, 94 | "runningLeft1": { 95 | "frame": { 96 | "x": 442, 97 | "y": 8, 98 | "w": 16, 99 | "h": 24 100 | }, 101 | "rotated": false, 102 | "trimmed": false 103 | }, 104 | "runningLeft2": { 105 | "frame": { 106 | "x": 416, 107 | "y": 8, 108 | "w": 21, 109 | "h": 24 110 | }, 111 | "rotated": false, 112 | "trimmed": false 113 | }, 114 | "jumpingLeft": { 115 | "frame": { 116 | "x": 385, 117 | "y": 2, 118 | "w": 26, 119 | "h": 30 120 | }, 121 | "rotated": false, 122 | "trimmed": false 123 | }, 124 | 125 | "jumpingLeftShoot": { 126 | "frame": { 127 | "x": 489, 128 | "y": 37, 129 | "w": 29, 130 | "h": 30 131 | }, 132 | "rotated": false, 133 | "trimmed": false 134 | } 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /game-dev-ai/asset/sprites/mm.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preload: function (game) { 3 | game.load.atlasJSONHash('mm', '/img/megaman.gif', '/res/megaman.json'); 4 | }, 5 | get: function (game, x, y) { 6 | var heroState = { 7 | standingRight: 'standingRight', 8 | runningRight: 'runningRight', 9 | jumpingRight: 'jumpingRight', 10 | 11 | standingLeft: 'standingLeft', 12 | runningLeft: 'runningLeft', 13 | jumpingLeft: 'jumpingLeft' 14 | }; 15 | 16 | var hero = game.add.sprite(x, y, 'mm'); 17 | hero.anchor.set(0.5, 0.5); 18 | hero.heroState = heroState; 19 | 20 | hero.animations.add(heroState.standingRight, [ 21 | 'standingRight', 22 | 'standingRight', 23 | 'standingRight', 24 | 'standingRight', 25 | 'standingRight', 26 | 'standingRight', 27 | 'standingRight', 28 | 'standingRight', 29 | 'standingRight', 30 | 'standingRight', 31 | 'standingRight', 32 | 'standingRight', 33 | 'standingRight', 34 | 'standingRight', 35 | 'standingRight', 36 | 'standingRight', 37 | 'standingRight', 38 | 'standingRight', 39 | 'standingRight', 40 | 'standingRight', 41 | 'standingRight', 42 | 'standingRight', 43 | 'standingRight', 44 | 'standingRight', 45 | 'standingRight', 46 | 'standingRight', 47 | 'standingRight', 48 | 'standingRight', 49 | 'standingRight', 50 | 'standingRight', 51 | 'standingRight', 52 | 'standingRight', 53 | 'standingRight', 54 | 'standingRight', 55 | 'standingRight', 56 | 'standingRight', 57 | 'standingRight', 58 | 'standingRight', 59 | 'standingRight', 60 | 'standingRight', 61 | 'standingRight', 62 | 'standingRight', 63 | 'standingRight', 64 | 'standingRight', 65 | 'standingRight', 66 | 'standingRight', 67 | 'standingRight', 68 | 'standingRightBlink' 69 | ], 16, true, false); 70 | 71 | hero.animations.add(heroState.runningRight, [ 72 | 'runningRight0', 73 | 'runningRight1', 74 | 'runningRight2', 75 | ], 10, true, false); 76 | 77 | hero.animations.add(heroState.jumpingRight, [ 78 | 'jumpingRight' 79 | ], 1, true, false); 80 | 81 | return hero; 82 | } 83 | }; 84 | -------------------------------------------------------------------------------- /game-dev-ai/copyright.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Rodrigo Silveira 3 | * @copyright 2015 Rodrigo Silveira. 4 | */ 5 | -------------------------------------------------------------------------------- /game-dev-ai/decisionMaking.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * @param {Renderer} renderer 4 | * @constructor 5 | */ 6 | function DecisionMaking(renderer) { 7 | this.renderer = renderer; 8 | this.imgs = {}; 9 | this.player = { 10 | x: 0, 11 | y: 150, 12 | frames: [ 13 | {x: 588, y: 2584, width: 17, height: 27}, 14 | {x: 613, y: 2584, width: 16, height: 27}, 15 | {x: 630, y: 2584, width: 17, height: 27}, 16 | {x: 648, y: 2584, width: 16, height: 27}, 17 | {x: 665, y: 2584, width: 16, height: 27}, 18 | {x: 682, y: 2584, width: 17, height: 27}, 19 | {x: 682, y: 2584, width: 17, height: 27}, 20 | {x: 709, y: 2585, width: 17, height: 26} 21 | ] 22 | }; 23 | this.currFrame = 0; 24 | this.ticks = 0; 25 | 26 | this.init(); 27 | } 28 | 29 | DecisionMaking.prototype = { 30 | init: function(){ 31 | var totalLoaded = 0; 32 | var totalToLoad = 1; 33 | 34 | // TODO: Load other sprites 35 | function onLoad(name, event){ 36 | this.imgs[name] = event.target; 37 | this.render(); 38 | } 39 | var img = document.createElement('img'); 40 | img.addEventListener('load', onLoad.bind(this, 'mm')); 41 | img.src = '/img/megaman.png'; 42 | }, 43 | render: function(){ 44 | var ctx = this.renderer.ctx; 45 | var canvas = this.renderer.canvas; 46 | var frame = this.player.frames[this.currFrame]; 47 | var player = this.player; 48 | 49 | this.ticks += 1; 50 | if (this.ticks % 8 === 0) { 51 | this.currFrame = (this.currFrame + 1) % 3; 52 | } 53 | 54 | player.x -= 2.5; 55 | 56 | if (player.x + frame.width < 0) { 57 | player.x = canvas.width; 58 | } 59 | 60 | ctx.clearRect(0, 0, canvas.width, canvas.height); 61 | 62 | ctx.drawImage(this.imgs.mm, frame.x, frame.y, frame.width, frame.height, player.x, player.y, frame.width * 3, frame.height * 3); 63 | 64 | requestAnimationFrame(this.render.bind(this)); 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /game-dev-ai/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "game-dev-ai", 3 | "version": "1.0.0", 4 | "description": "Game development lessons", 5 | "scripts": { 6 | "build": "./node_modules/.bin/webpack -d -p --progress --colors", 7 | "watch": "./node_modules/.bin/webpack -watch --progress --colors", 8 | "along": "rm *hot-update*" 9 | }, 10 | "author": "Rodrigo Silveira", 11 | "dependencies": { 12 | "phaser": "*" 13 | }, 14 | "devDependencies": { 15 | "babel-core": "^5.8.3", 16 | "babel-loader": "^5.3.2", 17 | "webpack": "^1.11.0" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /game-dev-ai/src/main.js: -------------------------------------------------------------------------------- 1 | const Phaser = require('phaser'); 2 | 3 | const game = new Phaser.Game(800, 450, Phaser.AUTO, 'gdc221Container', null, false, false); 4 | 5 | //game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; 6 | 7 | game.state.add('Placeholder', require('./scenes/Placeholder')); 8 | game.state.add('Intro', require('./scenes/Copyright')); 9 | game.state.add('Falling', require('./scenes/Falling')); 10 | game.state.add('Main', require('./scenes/Main')); 11 | 12 | game.state.add('Map', require('./scenes/Map')); 13 | 14 | window.kickStart = function(){ 15 | if (!window.didKickStart){ 16 | window.didKickStart = true; 17 | game.state.start('Intro'); 18 | } 19 | }; 20 | 21 | 22 | game.state.add('Col', require('./scenes/Col')); 23 | game.state.start('Col'); 24 | -------------------------------------------------------------------------------- /game-dev-ai/src/scenes/Col.js: -------------------------------------------------------------------------------- 1 | const Phaser = require('phaser'); 2 | const MegaMan = require('../sprites/mm'); 3 | 4 | /** 5 | * @inherits Phaser.Game 6 | * @constructor 7 | */ 8 | function Col() { 9 | this.player = null; 10 | this.floor = null; 11 | this.jumpTimer = 0; 12 | this.keys = {}; 13 | } 14 | 15 | Col.prototype = { 16 | preload: function () { 17 | this.load.atlasJSONHash('mm', 'asset/img/megaman.gif', 'asset/sprites/megaman.json'); 18 | this.load.image('ground', 'asset/img/ground_1x1.png'); 19 | }, 20 | create: function () { 21 | this.keys['jump'] = this.input.keyboard.addKey(Phaser.Keyboard.A); 22 | this.keys['up'] = this.input.keyboard.addKey(Phaser.Keyboard.UP); 23 | this.keys['down'] = this.input.keyboard.addKey(Phaser.Keyboard.DOWN); 24 | this.keys['left'] = this.input.keyboard.addKey(Phaser.Keyboard.LEFT); 25 | this.keys['right'] = this.input.keyboard.addKey(Phaser.Keyboard.RIGHT); 26 | 27 | this.floor = this.add.sprite(this.world.centerX / 2, this.world.centerY + 75, 'ground'); 28 | 29 | this.player = new MegaMan(this, this.world.centerX, 0, 'mm', {scale: {x: 2, y: 2}}); 30 | this.player.jumping = false; 31 | 32 | this.physics.startSystem(Phaser.Physics.ARCADE); 33 | this.physics.arcade.gravity.y = 1000; 34 | 35 | this.physics.enable([this.player.sprite, this.floor], Phaser.Physics.ARCADE); 36 | 37 | this.player.sprite.body.collideWorldBounds = true; 38 | 39 | this.floor.body.allowGravity = false; 40 | this.floor.body.immovable = true; 41 | }, 42 | update: function () { 43 | this.player.update(this, this.keys); 44 | this.physics.arcade.collide(this.player.sprite, this.floor, this.collisionHandler); 45 | 46 | const touchingDown = this.player.sprite.body.onFloor() || this.player.sprite.body.touching.down; 47 | 48 | this.player.sprite.body.velocity.x = 0; 49 | 50 | if (this.keys['left'].isDown) { 51 | this.player.sprite.body.velocity.x = -150; 52 | } else if (this.keys['right'].isDown) { 53 | this.player.sprite.body.velocity.x = 150; 54 | } 55 | 56 | if (this.keys['jump'].isDown && touchingDown && !this.player.jumping) { 57 | this.player.sprite.body.velocity.y = -550; 58 | this.player.jumping = true; 59 | } 60 | 61 | if (touchingDown && this.keys['jump'].isUp) { 62 | this.player.jumping = false; 63 | } 64 | 65 | if (touchingDown) { 66 | this.player.standing = true; 67 | } else { 68 | this.player.standing = false; 69 | } 70 | } 71 | }; 72 | 73 | module.exports = Col; 74 | -------------------------------------------------------------------------------- /game-dev-ai/src/scenes/Copyright.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @inherits Phaser.Game 3 | * @constructor 4 | */ 5 | function Copyright() { 6 | this.style = { 7 | font: '2em "Press Start 2P"', 8 | fill: '#fff', 9 | align: 'center' 10 | }; 11 | 12 | this.styleSub = { 13 | font: '1.25em "Press Start 2P"', 14 | fill: '#555', 15 | align: 'center' 16 | }; 17 | 18 | this.text = []; 19 | this.delayBeforeFadeout_ms = 1000; 20 | this.fullyLoaded = false; 21 | this.startFadingOut = false; 22 | this.fadeRate = 0.008; 23 | this.done = false; 24 | } 25 | 26 | Copyright.prototype.preload = function(){ 27 | this.load.audio('mm3Wily02', ['asset/audio/mm3-wily-02-yt.cJ3hNF3EyGA.mp3']); 28 | }; 29 | 30 | Copyright.prototype.create = function () { 31 | this.text.push(this.add.text(this.world.centerX, 80, 'GAME DEVELOPMENT COURSE: GDC 221', this.style)); 32 | this.text.push(this.add.text(this.world.centerX, 120, 'FREE GAME DEVELOPMENT LESSONS', this.style)); 33 | this.text.push(this.add.text(this.world.centerX, 240, '(C) EASY LEARN TUTORIAL 2015.', this.style)); 34 | this.text.push(this.add.text(this.world.centerX, 280, 'ALL RIGHTS RESERVED.', this.style)); 35 | this.text.push(this.add.text(this.world.centerX, 320, 'WWW.EASYLEARNTUTORIAL.COM.', this.style)); 36 | this.text.push(this.add.text(this.world.centerX, 400, 'MEGA MAN AND ALL RELATED ITEMS ARE COPYRIGHT OF CAPCOM.', this.styleSub)); 37 | 38 | this.text.forEach(txt => { 39 | txt.anchor.set(0.5); 40 | txt.alpha = 0; 41 | }); 42 | }; 43 | 44 | Copyright.prototype.update = function () { 45 | if (this.done) { 46 | this.state.start('Main'); 47 | } 48 | 49 | this.text.forEach(txt => { 50 | if (!this.startFadingOut && txt.alpha < 1.0) { 51 | txt.alpha += this.fadeRate; 52 | } else if (!this.fullyLoaded) { 53 | this.fullyLoaded = true; 54 | setTimeout(_ => { 55 | this.startFadingOut = true; 56 | }, this.delayBeforeFadeout_ms); 57 | } 58 | 59 | if (this.startFadingOut && txt.alpha > 0.0) { 60 | txt.alpha -= this.fadeRate; 61 | } 62 | 63 | if (this.startFadingOut && txt.alpha <= 0.0) { 64 | this.done = true; 65 | } 66 | }); 67 | }; 68 | 69 | module.exports = Copyright; 70 | -------------------------------------------------------------------------------- /game-dev-ai/src/scenes/Main.js: -------------------------------------------------------------------------------- 1 | const Phaser = require('phaser'); 2 | 3 | /** 4 | * @inherits Phaser.Game 5 | * @constructor 6 | */ 7 | function Main() { 8 | this.sprites = []; 9 | this.keys = {}; 10 | this.options = {}; 11 | this.optionArrow = {}; 12 | this.selectedOption = 0; 13 | this.bgMusic = {}; 14 | 15 | this.delayBeforeFadeout_ms = 1000; 16 | this.fullyLoaded = false; 17 | this.startFadingOut = false; 18 | this.fadeRate = 0.008; 19 | this.done = false; 20 | } 21 | 22 | Main.prototype.preload = function(){ 23 | this.load.audio('bgMusic', ['asset/audio/mm3-intro-yt.HeVva6ddNAc.danielsymphonies.mp3']); 24 | this.load.atlasJSONHash('atlas', 'asset/img/main-screen-0.0.3.png', 'asset/sprites/main-screen.json'); 25 | }; 26 | 27 | Main.prototype.create = function () { 28 | this.bgMusic = this.add.audio('bgMusic').play(); 29 | 30 | this.keys['up'] = this.input.keyboard.addKey(Phaser.Keyboard.UP); 31 | this.keys['down'] = this.input.keyboard.addKey(Phaser.Keyboard.DOWN); 32 | this.keys['enter'] = this.input.keyboard.addKey(Phaser.Keyboard.ENTER); 33 | this.keys['spacebar'] = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); 34 | 35 | this.optionArrow = this.add.sprite(185, 285, 'atlas', 'arrow'); 36 | this.options.startLearning = this.add.sprite(210, 284, 'atlas', 'startLearning'); 37 | this.options.aboutElt = this.add.sprite(210, 320, 'atlas', 'aboutElt'); 38 | 39 | this.sprites.push(this.add.sprite(this.world.centerX, 125, 'atlas', 'logo')); 40 | this.sprites.push(this.add.sprite(556, 300, 'atlas', 'mascot')); 41 | this.sprites.push(this.optionArrow); 42 | this.sprites.push(this.options.startLearning); 43 | this.sprites.push(this.options.aboutElt); 44 | 45 | this.sprites.forEach(sprite => { 46 | sprite.anchor.set(0.5, 0.5); 47 | sprite.alpha = 0; 48 | }); 49 | 50 | this.options.startLearning.anchor.set(0, 0.5); 51 | this.options.aboutElt.anchor.set(0, 0.5); 52 | }; 53 | 54 | Main.prototype.update = function() { 55 | if (this.done) { 56 | // this.state.start('Placeholder'); 57 | } 58 | 59 | if (this.keys.enter.isDown || this.keys.spacebar.isDown) { 60 | if (this.selectedOption === 0) { 61 | this.state.start('Map', true); 62 | this.bgMusic.stop(); 63 | } else { 64 | window.location.href = 'http://easylearntutorial.com/about'; 65 | } 66 | 67 | this.done = true; 68 | } 69 | 70 | if (!this.startFadingOut) { 71 | this.sprites.forEach(sprite => { 72 | if (sprite.alpha < 1.0) { 73 | sprite.alpha += this.fadeRate; 74 | } 75 | }); 76 | } 77 | 78 | if (this.keys.up.isDown) { 79 | this.selectedOption = 0; 80 | } else if (this.keys.down.isDown) { 81 | this.selectedOption = 1; 82 | } 83 | 84 | this.optionArrow.y = (this.selectedOption === 0) ? 285 : 321; 85 | }; 86 | 87 | module.exports = Main; 88 | -------------------------------------------------------------------------------- /game-dev-ai/src/scenes/Placeholder.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @inherits Phaser.Game 3 | * @constructor 4 | */ 5 | function Placeholder() { 6 | this.style = { 7 | font: '2em "Press Start 2P"', 8 | fill: '#fff', 9 | align: 'center' 10 | }; 11 | 12 | this.text = {}; 13 | this.textSize = 1; 14 | this.dir = 1; 15 | } 16 | 17 | Placeholder.prototype.create = function () { 18 | this.text = this.add.text(this.world.centerX, this.world.centerY, 'PLACEHOLDER SCENE', this.style); 19 | this.text.anchor.set(0.5); 20 | }; 21 | 22 | Placeholder.prototype.update = function () { 23 | this.text.scale.set(this.textSize, this.textSize); 24 | this.textSize += 0.03 * this.dir; 25 | 26 | if (this.textSize > 1.75 || this.textSize < 0.5) { 27 | this.dir *= -1; 28 | } 29 | }; 30 | 31 | module.exports = Placeholder; 32 | -------------------------------------------------------------------------------- /game-dev-ai/src/sprites/mm.js: -------------------------------------------------------------------------------- 1 | const Phaser = require('phaser'); 2 | const animMM = require('../anim/mm'); 3 | 4 | function MegaMan(game, x, y, texture, opt){ 5 | this.sprite = game.add.sprite(x, y, texture); 6 | this.states = animMM.states; 7 | this.anim = animMM.anim; 8 | this.facingRight = true; 9 | this.jumping = false; 10 | this.standing = true; 11 | 12 | this.init(opt); 13 | } 14 | 15 | MegaMan.prototype.init = function(opt){ 16 | const sprite = this.sprite; 17 | const states = this.states; 18 | const anim = this.anim; 19 | opt = opt || {}; 20 | 21 | sprite.animations.add(states.standingRight, anim.standingRight.frames, anim.standingRight.rate, anim.standingRight.loop, false); 22 | sprite.animations.add(states.runningRight, anim.runningRight.frames, anim.runningRight.rate, anim.runningRight.loop, false); 23 | sprite.animations.add(states.jumpingRight, anim.jumpingRight.frames, anim.jumpingRight.rate, anim.jumpingRight.loop, false); 24 | 25 | sprite.animations.add(states.standingLeft, anim.standingLeft.frames, anim.standingLeft.rate, anim.standingLeft.loop, false); 26 | sprite.animations.add(states.runningLeft, anim.runningLeft.frames, anim.runningLeft.rate, anim.runningLeft.loop, false); 27 | sprite.animations.add(states.jumpingLeft, anim.jumpingLeft.frames, anim.jumpingLeft.rate, anim.jumpingLeft.loop, false); 28 | 29 | if (opt.scale) { 30 | sprite.scale.x = opt.scale.x || 1.0; 31 | sprite.scale.y = opt.scale.y || 1.0; 32 | } 33 | 34 | sprite.anchor.set(0.5, 0.5); 35 | 36 | sprite.animations.play(states.standingRight); 37 | }; 38 | 39 | MegaMan.prototype.update = function(game, keys){ 40 | const sprite = this.sprite; 41 | const states = this.states; 42 | keys = keys || { 43 | jump: {}, 44 | right: {}, 45 | left: {} 46 | }; 47 | 48 | if ((keys.jump.isDown || this.jumping) && !this.standing) { 49 | sprite.animations.play(this.facingRight ? states.jumpingRight : states.jumpingLeft); 50 | } else if (keys.right.isDown && !this.jumping && this.standing) { 51 | sprite.animations.play(states.runningRight); 52 | } else if (keys.left.isDown && !this.jumping && this.standing) { 53 | sprite.animations.play(states.runningLeft); 54 | } else { 55 | sprite.animations.play(this.facingRight ? states.standingRight : states.standingLeft); 56 | } 57 | 58 | if (keys.right.isDown && !this.facingRight) { 59 | this.facingRight = true; 60 | } 61 | 62 | if (keys.left.isDown && this.facingRight) { 63 | this.facingRight = false; 64 | } 65 | }; 66 | 67 | module.exports = MegaMan; 68 | -------------------------------------------------------------------------------- /game-dev-ai/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './src/main.js', 3 | output: { 4 | filename: 'dist/bundle.r.js' 5 | }, 6 | module: { 7 | loaders: [ 8 | { 9 | test: /\.js?$/, 10 | exclude: /(node_modules)/, 11 | loader: 'babel', 12 | query: { 13 | cacheDirectory: true, 14 | optional: ['runtime'], 15 | stage: 0 16 | } 17 | } 18 | ] 19 | }, 20 | externals: { 21 | "phaser": "Phaser" 22 | }, 23 | resolve: { 24 | extensions: ['', '.js'] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /javascript-questions/function-expressions-vs-function-declarations.js: -------------------------------------------------------------------------------- 1 | // Declaration: 2 | // function ([parameters...]) { 3 | // 4 | // } 5 | 6 | // Expression: 7 | // var varName = function [name]([parameters...]){ 8 | // 9 | // }; 10 | 11 | // Runtime difference: 12 | // 1. Hoisting 13 | (function(){ 14 | var num = randInt(); 15 | 16 | function randInt(){ 17 | return Math.random() * Number.MAX_SAFE_INTEGER | 0; 18 | } 19 | 20 | return num; 21 | }()); 22 | 23 | (function(){ 24 | var num = randInt(); 25 | 26 | var randInt = function(){ 27 | return Math.random() * Number.MAX_SAFE_INTEGER | 0; 28 | }; 29 | 30 | return num; 31 | }()); 32 | 33 | 34 | // var num; 35 | // var randInt; 36 | // 37 | // num = randInt(); 38 | // randInt = function(){ ... } 39 | 40 | // 2. Stack trace 41 | function func1(cb, shouldThrow){ 42 | return cb(shouldThrow); 43 | } 44 | 45 | function funcDec(shouldThrow) { 46 | if (shouldThrow) { 47 | throw new Error('error @funcDec') 48 | } 49 | 50 | return 'funcDec'; 51 | } 52 | 53 | var funcExp = function(shouldThrow){ 54 | if (shouldThrow) { 55 | throw new Error('error @funxExp') 56 | } 57 | 58 | return 'funxExp'; 59 | }; 60 | 61 | setTimeout(function(){ 62 | func1(funcDec, true); 63 | }, 0); 64 | 65 | setTimeout(function(){ 66 | func1(funcExp, true); 67 | }, 1000); 68 | 69 | setTimeout(function(){ 70 | func1(function (shouldThrow){ 71 | if (shouldThrow) { 72 | throw new Error('error @funcAnon') 73 | } 74 | 75 | return 'funcAnon'; 76 | }, true); 77 | }, 2000); 78 | 79 | setTimeout(function(){ 80 | func1(function funcExpNamed(shouldThrow){ 81 | if (shouldThrow) { 82 | throw new Error('error @funcExpNamed') 83 | } 84 | 85 | return 'funcExpNamed'; 86 | }, true); 87 | }, 3000); 88 | -------------------------------------------------------------------------------- /js/gamedev/Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 'use strict'; 3 | grunt.initConfig({ 4 | pkg: grunt.file.readJSON('package.json'), 5 | closureDepsWriter: { 6 | options: { 7 | closureLibraryPath: 'app/lib/closure-library', 8 | depswriter: 'app/lib/closure-library/closure/bin/build/depswriter.py', 9 | root_with_prefix: '"app ../../../../"' 10 | }, 11 | def: { 12 | dest: 'app/js/app/deps.js' 13 | } 14 | }, 15 | closureCompiler: { 16 | options: { 17 | compilerFile: 'lib/google-closure/compiler.jar' 18 | }, 19 | src: 'app/js/app/main.js', 20 | dest: 'dist/js/app.js', 21 | adv: { 22 | src: 'app/js/app/main.js', 23 | dest: 'dist/js/app.js', 24 | options: { 25 | compilerOpts: { 26 | compilation_level: 'ADVANCED_OPTIMIZATIONS' 27 | } 28 | } 29 | }, 30 | white: { 31 | src: 'app/js/app/main.js', 32 | dest: 'dist/js/app.js', 33 | options: { 34 | compilerOpts: { 35 | compilation_level: 'WHITESPACE_ONLY' 36 | } 37 | } 38 | } 39 | }, 40 | qunit: { 41 | all: ['app/js/app/**/*_test.html'] 42 | }, 43 | connect: { 44 | server: { 45 | options: { base: './app', port: 0, hostname: 'localhost', keepalive: true } 46 | }, 47 | dist: { 48 | options: { 49 | base: './dist', port: 0, hostname: 'localhost', keepalive: true 50 | } 51 | } 52 | } 53 | }); 54 | 55 | 56 | grunt.loadNpmTasks('grunt-closure-tools'); 57 | grunt.loadNpmTasks('grunt-contrib-connect'); 58 | grunt.loadNpmTasks('grunt-contrib-qunit'); 59 | 60 | grunt.registerTask('default', ['closureCompiler:white']); 61 | grunt.registerTask('comp', ['closureCompiler:adv']); 62 | grunt.registerTask('deps', ['closureDepsWriter']); 63 | grunt.registerTask('travis', ['qunit']); 64 | grunt.registerTask('server', ['connect']); 65 | grunt.registerTask('prod', ['connect:dist']); 66 | }; 67 | 68 | -------------------------------------------------------------------------------- /js/gamedev/TOC.md: -------------------------------------------------------------------------------- 1 | Table of Contents 2 | ----------------- 3 | 4 | 1. Sprites 5 | 2. Animated Sprites 6 | 3. Async Asset Loader 7 | 4. Animated Renderer 8 | 5. Entity 9 | 6. Game Loop 10 | 7. Tile Map 11 | 8. Camera 12 | 9. Controller Component - listens for dom events + updates player 13 | 10. Physics Component - refs world, hero, enemies (event based?) 14 | -------------------------------------------------------------------------------- /js/gamedev/TODO.md: -------------------------------------------------------------------------------- 1 | TODO 2 | ----------------- 3 | 4 | **Map Editor** 5 | NOW: 6 | 1. Add field 'image path' -> exported map will append this path to image name 7 | 2. Add camera w, h, x, y 8 | 9 | LATER: 10 | 1. Add layers 11 | 2. Make image preview a directive 12 | 13 | **Camera** 14 | 1. Define in world coordinate space 15 | 2. Move independent of entities -------------------------------------------------------------------------------- /js/gamedev/app/config/mario-anim.json: -------------------------------------------------------------------------------- 1 | { 2 | "frames": { 3 | "dead": { 4 | "x": 264, "y": 78, "width": 28, "height": 32 5 | }, 6 | "standing": { 7 | "right": [ 8 | {"x": 100, "y": 78, "width": 24, "height": 32} 9 | ] 10 | }, 11 | "jumping": { 12 | "right": [ 13 | {"x": 132, "y": 78, "width": 30, "height": 32} 14 | ] 15 | }, 16 | "running": { 17 | "right": [ 18 | {"x": 170, "y": 78, "width": 22, "height": 32}, 19 | {"x": 230, "y": 78, "width": 30, "height": 32}, 20 | {"x": 70, "y": 78, "width": 24, "height": 32} 21 | ] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /js/gamedev/app/config/tile-map.json: -------------------------------------------------------------------------------- 1 | { 2 | "width": 10, 3 | "height": 3, 4 | "tileTypes": { 5 | "OPEN": 0 6 | }, 7 | "layers": [ 8 | { 9 | "width": 10, 10 | "height": 10, 11 | "tileWidth": 16, 12 | "tileHeight": 16, 13 | "img": "/img/tiles.png", 14 | "atlas": [ 15 | [0, 0, 0], 16 | [16, 0, 0], 17 | [32, 0, 0] 18 | ], 19 | "tiles": [ 20 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 21 | 1, 0, 2, 0, 2, 0, 2, 0, 2, 1, 22 | 1, 2, 0, 2, 0, 2, 0, 2, 0, 1, 23 | 1, 0, 2, 0, 2, 0, 2, 0, 2, 1, 24 | 1, 2, 0, 2, 0, 2, 0, 2, 0, 1, 25 | 1, 0, 2, 0, 2, 0, 2, 0, 2, 1, 26 | 1, 2, 0, 2, 0, 2, 0, 2, 0, 1, 27 | 1, 0, 2, 0, 2, 0, 2, 0, 2, 1, 28 | 1, 2, 0, 2, 0, 2, 0, 2, 0, 1, 29 | 1, 1, 1, 1, 1, 1, 1, 1, 1, 1 30 | ] 31 | } 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /js/gamedev/app/css/elt.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | padding: 0; 3 | margin: 0; 4 | background: #000; 5 | position: absolute; 6 | left: 50%; 7 | top: 50%; 8 | } 9 | 10 | canvas { 11 | width: 100%; 12 | height: 100%; 13 | display: block; 14 | } 15 | -------------------------------------------------------------------------------- /js/gamedev/app/css/map-editor.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #ddd; 3 | } 4 | 5 | #stage { 6 | width: 100%; 7 | margin: 0 auto; 8 | overflow: scroll; 9 | background: #fff; 10 | } 11 | 12 | #stage table { 13 | border-collapse: collapse; 14 | } 15 | 16 | #stage tr { 17 | border: 0; 18 | } 19 | 20 | #stage td { 21 | border: 1px dotted #aaa; 22 | } 23 | 24 | #stage tr:first-child td { 25 | border-top: 0; 26 | } 27 | 28 | #stage td:first-child { 29 | border-left: 0; 30 | } 31 | 32 | #stage tr:last-child td { 33 | border-bottom: 0; 34 | } 35 | 36 | #stage td:last-child { 37 | border-right: 0; 38 | } 39 | 40 | #stage td img { 41 | width: 32px; 42 | height: 32px; 43 | display: inline-block; 44 | } 45 | 46 | .navbar { 47 | background: #fff; 48 | box-shadow: 0 0 5px #ccc; 49 | } 50 | 51 | .navbar a { 52 | color: #333; 53 | } 54 | 55 | .panel { 56 | box-shadow: 0 0 5px #ccc; 57 | } 58 | 59 | .footer { 60 | width: 100%; 61 | margin: 20px 0 0; 62 | background: #000; 63 | } 64 | 65 | #console { 66 | color: #fff; 67 | font-family: monospace; 68 | padding: 10px 0; 69 | margin: 0; 70 | } 71 | 72 | .tilesetPreview { 73 | width: 100%; 74 | height: 200px; 75 | border: 1px solid #333; 76 | background: #eee; 77 | overflow: scroll; 78 | margin: 0 0 10px; 79 | } 80 | 81 | .codeTextArea { 82 | width: 100%; 83 | height: 200px; 84 | font-family: monospace; 85 | } -------------------------------------------------------------------------------- /js/gamedev/app/css/style.css: -------------------------------------------------------------------------------- 1 | .card-img { 2 | overflow: hidden; 3 | height: 150px; 4 | position: relative; 5 | margin: 0 0 10px; 6 | background: #de0717; 7 | } 8 | 9 | .card-img img { 10 | display: block; 11 | position: relative; 12 | z-index: 9; 13 | top: 25%; 14 | left: 25%; 15 | margin: -50% 0 0 -50%; 16 | transition: all 0.5s; 17 | } 18 | 19 | .card-img h2 { 20 | position: absolute; 21 | z-index: 99; 22 | bottom: 0; 23 | padding: 5px 10px; 24 | background: rgba(0, 0, 0, 0.5); 25 | display: block; 26 | width: 100%; 27 | margin: 0; 28 | color: #fff; 29 | } 30 | 31 | .btn-dark { 32 | background: #333; 33 | color: #fff; 34 | } 35 | 36 | .btn-dark:hover { 37 | background: #444; 38 | color: #eee; 39 | border: 1px solid #333 40 | } 41 | 42 | details { 43 | display: none; 44 | } 45 | 46 | .card { 47 | margin: 0 0 20px; 48 | } 49 | 50 | .card-img:hover img { 51 | margin: -50% 0 0; 52 | box-shadow: 0 0 100px #000; 53 | } -------------------------------------------------------------------------------- /js/gamedev/app/img/anim-mario-question-block.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/anim-mario-question-block.gif -------------------------------------------------------------------------------- /js/gamedev/app/img/clear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/clear.png -------------------------------------------------------------------------------- /js/gamedev/app/img/img-mushroom-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/img-mushroom-red.png -------------------------------------------------------------------------------- /js/gamedev/app/img/mario-tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/mario-tiles.png -------------------------------------------------------------------------------- /js/gamedev/app/img/screenshot-super-mario-bro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/screenshot-super-mario-bro.jpg -------------------------------------------------------------------------------- /js/gamedev/app/img/sprite-mario-bros.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/sprite-mario-bros.png -------------------------------------------------------------------------------- /js/gamedev/app/img/tiles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/img/tiles.png -------------------------------------------------------------------------------- /js/gamedev/app/js/app/components/Physics.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.components.Physics'); 2 | 3 | elt.components.Physics = function(speed) { 4 | this.speed = speed; 5 | }; 6 | 7 | elt.components.Physics.prototype.update = function(entity, now) { 8 | now = now || 1; 9 | if (now > 150) { 10 | now = 150; 11 | } 12 | 13 | if (keys[keys.code.RIGHT]) { 14 | entity.x += this.speed * now; 15 | } 16 | 17 | if (keys[keys.code.LEFT]) { 18 | entity.x -= this.speed * now; 19 | } 20 | 21 | if (keys[keys.code.SPACE]) { 22 | entity.y -= this.speed * now; 23 | } 24 | }; 25 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/core/Camera.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.core.Camera'); 2 | 3 | /** 4 | * 5 | * @constructor 6 | */ 7 | elt.core.Camera = function(x, y, cols, rows) { 8 | this.x = x; 9 | this.y = y; 10 | this.cols = cols; 11 | this.rows = rows; 12 | 13 | this.offset = 0; 14 | }; 15 | 16 | /** 17 | * 18 | * @type {elt.core.MapLayer} layer 19 | */ 20 | elt.core.Camera.prototype.calculateOffset = function(layer) { 21 | var width = this.cols * layer.tileWidth; 22 | var height = this.rows * layer.tileHeight; 23 | 24 | if (this.x < 0) { 25 | this.x = 0; 26 | } 27 | 28 | if (this.y < 0) { 29 | this.y = 0; 30 | } 31 | 32 | // if (this.y + heightPx > layer.maxY) { 33 | // this.y = 100; 34 | // } 35 | // 36 | // if (this.x + widthPx > layer.maxX) { 37 | // this.x = layer.maxX - this.width; 38 | // } 39 | 40 | this.offset = parseInt(this.y / layer.tileHeight, 10) * layer.width + parseInt(this.x / layer.tileWidth, 10); 41 | }; 42 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/core/Entity.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.core.Entity'); 2 | 3 | /** 4 | * 5 | * @type {number} x 6 | * @type {number} y 7 | * @type {elt.graphics.AnimSprite} sprites 8 | * @type {Array.=} components 9 | * @constructor 10 | */ 11 | elt.core.Entity = function (x, y, sprites, components) { 12 | this.x = x; 13 | this.y = y; 14 | this.sprites = sprites; 15 | 16 | this.components = components || []; 17 | }; 18 | 19 | /** 20 | * 21 | * @type {number} now 22 | */ 23 | elt.core.Entity.prototype.update = function(now) { 24 | for (var i = 0, len = this.components.length; i < len; i++) { 25 | this.components[i].update(this, now); 26 | } 27 | }; 28 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/core/GameLoop.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.core.GameLoop'); 2 | 3 | /** 4 | * 5 | * @type {number=} fps 6 | * @type {Function=} onUpdate 7 | * @type {Function=} onRnder 8 | * @constructor 9 | */ 10 | elt.core.GameLoop = function (fps, onUpdate, onRender) { 11 | this.fps = fps || 32; 12 | this.freq = 1000 / this.fps; 13 | this.lastTime = 0; 14 | this.delta = 0; 15 | 16 | this.onUpdate = onUpdate || goog.nullFunction; 17 | this.onRender = onRender || goog.nullFunction; 18 | }; 19 | 20 | elt.core.GameLoop.prototype.run = function(){ 21 | var _run = function(now) { 22 | this.delta = now - this.lastTime; 23 | 24 | if (this.delta > this.freq) { 25 | this.onUpdate(now); 26 | this.lastTime = now; 27 | } 28 | 29 | this.onRender(now); 30 | 31 | requestAnimationFrame(_run.bind(this)); 32 | }; 33 | 34 | _run.bind(this, 0).call(); 35 | }; 36 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/core/MapLayer.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.core.MapLayer'); 2 | 3 | /** 4 | * 5 | * @type {number} width 6 | * @type {number} height 7 | * @type {number} tileWidth 8 | * @type {number} tileHeight 9 | * @type {Element} img 10 | * @type {Array.} atlas 11 | * @type {Array.} tiles 12 | * @constructor 13 | */ 14 | elt.core.MapLayer = function(width, height, tileWidth, tileHeight, img, atlas, tiles){ 15 | this.width = width; 16 | this.height = height; 17 | this.tileWidth = tileWidth; 18 | this.tileHeight = tileHeight; 19 | 20 | this.maxX = this.width * this.tileWidth; 21 | this.maxY = this.height * this.tileHeight; 22 | 23 | this.img = img; 24 | this.atlas = atlas; 25 | this.tiles = tiles; 26 | }; 27 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/core/MapTile.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.core.MapTile'); 2 | 3 | /** 4 | * 5 | * @type {number} x 6 | * @type {number} y 7 | * @type {number} type 8 | * @constructor 9 | */ 10 | elt.core.MapTile = function(x, y, type) { 11 | this.x = x; 12 | this.y = y; 13 | this.type = type; 14 | }; 15 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/graphics/AnimRenderer.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.graphics.AnimRenderer'); 2 | 3 | goog.require('goog.dom'); 4 | 5 | /** 6 | * 7 | * @type {number} width 8 | * @type {number} height 9 | * @type {Function=} onRender 10 | * @constructor 11 | */ 12 | elt.graphics.AnimRenderer = function(width, height, onRender) { 13 | this.canvas = goog.dom.createDom('canvas', {width: width, height: height}); 14 | this.ctx = this.canvas.getContext('2d'); 15 | this.ctx.imageSmoothingEnabled = false; 16 | 17 | this.resizeTimer = null; 18 | this.aspRation = width / height; 19 | 20 | this.onRender = onRender || goog.nullFunction; 21 | 22 | this.resize(); 23 | }; 24 | 25 | elt.graphics.AnimRenderer.prototype.resize = function() { 26 | clearTimeout(this.resizeTimer); 27 | var self = this; 28 | 29 | this.resizeTimer = setTimeout(function() { 30 | var newWidth = window.innerWidth; 31 | var newHeight = window.innerHeight; 32 | var newWidthToHeight = newWidth / newHeight; 33 | 34 | if (newWidthToHeight > self.aspRation) { 35 | newWidth = newHeight * self.aspRation; 36 | self.canvas.style.height = newHeight + 'px'; 37 | self.canvas.style.width = newWidth + 'px'; 38 | } else { 39 | newHeight = newWidth / self.aspRation; 40 | self.canvas.style.width = newWidth + 'px'; 41 | self.canvas.style.height = newHeight + 'px'; 42 | } 43 | 44 | document.body.style.marginTop = (-newHeight / 2) + 'px'; 45 | document.body.style.marginLeft = (-newWidth / 2) + 'px'; 46 | }, 100); 47 | }; 48 | 49 | /** 50 | * 51 | * @type {Element} container 52 | */ 53 | elt.graphics.AnimRenderer.prototype.bindTo = function(container) { 54 | goog.dom.appendChild(container, this.canvas); 55 | }; 56 | 57 | /** 58 | * 59 | * @type {string} name 60 | * @type {string|number} val 61 | */ 62 | elt.graphics.AnimRenderer.prototype.attr = function(name, val) { 63 | this.ctx[name] = val; 64 | }; 65 | 66 | /** 67 | * 68 | */ 69 | elt.graphics.AnimRenderer.prototype.render = function(now) { 70 | this.onRender(now); 71 | }; 72 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/graphics/AnimSprite.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.graphics.AnimSprite'); 2 | 3 | goog.require('goog.dom'); 4 | 5 | /** 6 | * 7 | * @type {string|Element} img 8 | * @type {Array.} frames} 9 | * @constructor 10 | */ 11 | elt.graphics.AnimSprite = function(img, frames) { 12 | this.frames = frames; 13 | this.lastTime = 0; 14 | this.delta = 0; 15 | this.currentFrame = 0; 16 | 17 | if (goog.isString(img)) { 18 | this.img = goog.dom.createDom('img', {src: img}); 19 | } else { 20 | this.img = img; 21 | } 22 | }; 23 | 24 | /** 25 | * 26 | * @type {number} delay 27 | * @type {number} x 28 | * @type {number} y 29 | * @type {number} width 30 | * @type {number} height 31 | * @constructor 32 | */ 33 | elt.graphics.AnimSpriteFrame = function(delay, x, y, width, height) { 34 | this.delay = delay; 35 | this.x = x; 36 | this.y = y; 37 | this.width = width; 38 | this.height = height; 39 | }; 40 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/graphics/Sprite.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.graphics.Sprite'); 2 | 3 | goog.require('goog.dom'); 4 | 5 | /** 6 | * 7 | * @type {string|Element} img 8 | * @type {number} x 9 | * @type {number} y 10 | * @type {number} width 11 | * @type {number} height 12 | * @constructor 13 | */ 14 | elt.graphics.Sprite = function(img, x, y, width, height){ 15 | this.x = x; 16 | this.y = y; 17 | this.width = width; 18 | this.height = height; 19 | 20 | if (goog.isString(img)) { 21 | this.img = goog.dom.createDom('img', {src: img}); 22 | } else { 23 | this.img = img; 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/io/get.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.io.get'); 2 | 3 | elt.io.get = function(url) { 4 | return new Promise(function(resolve, reject) { 5 | var req = new XMLHttpRequest(); 6 | req.open('GET', url); 7 | 8 | req.onload = function() { 9 | if (req.status === 200) { 10 | resolve(req.response); 11 | } else { 12 | reject(Error(req.statusText)); 13 | } 14 | }; 15 | 16 | req.onerror = function() { 17 | reject(Error('Network error')); 18 | }; 19 | 20 | req.send(); 21 | }); 22 | }; 23 | 24 | elt.io.getJson = function(url) { 25 | return elt.io.get(url).then(JSON.parse); 26 | }; 27 | -------------------------------------------------------------------------------- /js/gamedev/app/js/app/io/img.js: -------------------------------------------------------------------------------- 1 | goog.provide('elt.io.img'); 2 | 3 | elt.io.img = function(src) { 4 | return new Promise(function(resolve, reject) { 5 | var img = new Image(); 6 | img.onload = function() { 7 | resolve(this); 8 | }; 9 | 10 | img.onerror = function() { 11 | reject(Error('Network error')); 12 | }; 13 | 14 | img.src = src; 15 | }); 16 | }; 17 | -------------------------------------------------------------------------------- /js/gamedev/app/snake/.htaccess: -------------------------------------------------------------------------------- 1 | AddType text/cache-manifest .appcache 2 | -------------------------------------------------------------------------------- /js/gamedev/app/snake/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Geo"; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: local("Geo"), local("Geo-Regular"), url("../fonts/geo.woff") format("woff"); 6 | } 7 | 8 | @font-face { 9 | font-family: "VT323"; 10 | font-style: normal; 11 | font-weight: 400; 12 | src: local("VT323"), local("VT323-Regular"), url("../fonts/vt323.woff") format("woff"); 13 | } 14 | 15 | body { 16 | margin: 0; 17 | padding: 0; 18 | background: #eee; 19 | overflow: hidden; 20 | overflow-y: auto; 21 | } 22 | 23 | h1 { 24 | text-align: center; 25 | font-family: Geo, Arial; 26 | font-size: 4em; 27 | padding: 0; 28 | margin: 20px 0; 29 | color: #0c0; 30 | font-weight: 400; 31 | } 32 | 33 | #scores { 34 | width: 960px; 35 | margin: 20px auto; 36 | overflow: auto; 37 | } 38 | 39 | #scores h3 { 40 | font-weight: 300; 41 | font-family: VT323, Arial; 42 | font-size: 2em; 43 | margin: 0; 44 | padding: 0; 45 | float: left; 46 | color: #333; 47 | } 48 | 49 | #scores h3:last-child { 50 | float: right; 51 | } 52 | 53 | #gameMenu { 54 | position: absolute; 55 | top: 0; 56 | left: 0; 57 | z-index: 999; 58 | width: 100%; 59 | height: 100%; 60 | background: rgba(0, 0, 0, 0.88); 61 | overflow: auto; 62 | -webkit-transition: all 0.5s; 63 | } 64 | 65 | #gameMenu h3 { 66 | color: #fff; 67 | font-family: Geo, Arial; 68 | font-size: 15em; 69 | margin: 0; 70 | padding: 0; 71 | text-align: center; 72 | } 73 | 74 | #gameMenu button { 75 | cursor: pointer; 76 | display: block; 77 | margin: 20px auto; 78 | padding: 10px 50px; 79 | outline: none; 80 | border: 0; 81 | background: #0c0; 82 | font-family: Geo, Arial; 83 | font-size: 5em; 84 | color: #ff0; 85 | text-shadow: 2px 2px 0 #555; 86 | } 87 | 88 | #gameMenu button:hover { 89 | text-shadow: -2px -2px 0 #555; 90 | } 91 | 92 | #gameMenu.show { 93 | top: 0; 94 | opacity: 1.0; 95 | } 96 | 97 | #gameMenu.hide { 98 | top: -110%; 99 | opacity: 0.0; 100 | } 101 | 102 | canvas { 103 | background: #fff; 104 | display: block; 105 | margin: 20px auto; 106 | cursor: none; 107 | box-shadow: 0 15px 42px #aaa; 108 | } 109 | 110 | #screenShots { 111 | overflow: auto; 112 | margin: -5px 10px 10px; 113 | } 114 | 115 | #screenShots img { 116 | display: block; 117 | float: left; 118 | margin: 10px; 119 | width: 15%; 120 | background: #fff; 121 | } -------------------------------------------------------------------------------- /js/gamedev/app/snake/fallback.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 Snake 6 | 7 | 8 | 9 | 10 |

HTML5 Snake

11 | 12 |

App not accessible ='(

13 | 14 | 15 | -------------------------------------------------------------------------------- /js/gamedev/app/snake/fonts/geo.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/fonts/geo.woff -------------------------------------------------------------------------------- /js/gamedev/app/snake/fonts/vt323.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/fonts/vt323.woff -------------------------------------------------------------------------------- /js/gamedev/app/snake/img/9781849696029_05_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/img/9781849696029_05_01.png -------------------------------------------------------------------------------- /js/gamedev/app/snake/img/9781849696029_05_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/img/9781849696029_05_02.png -------------------------------------------------------------------------------- /js/gamedev/app/snake/img/block-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/img/block-green.png -------------------------------------------------------------------------------- /js/gamedev/app/snake/img/fruit-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/snake/img/fruit-01.png -------------------------------------------------------------------------------- /js/gamedev/app/snake/js/next-empty.worker.js: -------------------------------------------------------------------------------- 1 | self.addEventListener("message", nextEmpty); 2 | 3 | function isAt(points, x, y) { 4 | for (var i = 0, len = points.length; i < len; i += 2) { 5 | if (points[i] == x && points[i + 1] == y) 6 | return true; 7 | } 8 | 9 | return false; 10 | } 11 | 12 | function nextEmpty(event) { 13 | var data = event.data; 14 | 15 | var x = 0; 16 | var y = 0; 17 | 18 | while (true) { 19 | x = parseInt(Math.random() * data.width); 20 | y = parseInt(Math.random() * data.height); 21 | 22 | if (!isAt(data.points, x, y)) 23 | break; 24 | } 25 | 26 | self.postMessage({x: x, y: y}); 27 | } -------------------------------------------------------------------------------- /js/gamedev/app/snake/js/renderer.class.js: -------------------------------------------------------------------------------- 1 | var Renderer = function(canvas) { 2 | 3 | var canvas = canvas; 4 | var ctx = canvas.getContext("2d"); 5 | var width = canvas.width; 6 | var height = canvas.height; 7 | 8 | var getIndex = function(x, y) { 9 | return width * y + x; 10 | }; 11 | 12 | var getPosition = function(index) { 13 | return { 14 | x: index % width, 15 | y: parseInt(index / width) 16 | }; 17 | }; 18 | 19 | this.clear = function() { 20 | ctx.clearRect(0, 0, canvas.width, canvas.height); 21 | } 22 | 23 | this.draw = function(points, img) { 24 | for (var i = 0, len = points.length; i < len; i += 2) { 25 | ctx.drawImage(img, points[i] * img.width, points[i + 1] * img.height, img.width, img.height); 26 | } 27 | }; 28 | 29 | this.toImg = function() { 30 | var screenShot = new Image(); 31 | screenShot.src = canvas.toDataURL("image/png"); 32 | return screenShot; 33 | }; 34 | }; 35 | -------------------------------------------------------------------------------- /js/gamedev/app/snake/manifest.appcache: -------------------------------------------------------------------------------- 1 | CACHE MANIFEST 2 | 3 | # HTML5 Snake, Version 2.0.0 4 | 5 | CACHE: 6 | index.html 7 | js/next-empty.worker.js 8 | js/renderer.class.js 9 | js/snake.class.js 10 | img/block-green.png 11 | img/fruit-01.png 12 | fonts/geo.woff 13 | fonts/vt323.woff 14 | css/style.css 15 | 16 | NETWORK: 17 | * 18 | 19 | FALLBACK: 20 | fallback.html -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/css/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 0; 6 | overflow: hidden; 7 | } 8 | /* 9 | @-webkit-keyframes NebulaBg { 10 | from { 11 | background-position: 0 0; 12 | } 13 | to { 14 | background-position: 1300% 600%; 15 | } 16 | } 17 | */ 18 | body { 19 | background: url('../img/space_bg_01.jpg') -500px 0 repeat; 20 | /* -webkit-transition: box-shadow 8s; 21 | 22 | -webkit-animation: NebulaBg; 23 | -webkit-animation-duration: 500s; 24 | -webkit-animation-timing-function: linear; 25 | -webkit-animation-iteration-count: infinite; 26 | */ 27 | } 28 | 29 | .zoomOut { 30 | box-shadow: inset 0 500px 1000px #fff; 31 | } 32 | 33 | canvas { 34 | margin: 0; 35 | } 36 | 37 | .energyBar { 38 | position: absolute; 39 | top: 2%; 40 | left: 4%; 41 | z-index: 99999; 42 | width: 92%; 43 | height: 25px; 44 | border: 1px solid #ff5; 45 | background: #c00; 46 | overflow: hidden; 47 | } 48 | 49 | .energyBar div { 50 | background: #ff5; 51 | height: 100%; 52 | width: 100%; 53 | } 54 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/enemy_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/enemy_red.png -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/fighter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/fighter.png -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/laser_blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/laser_blue.png -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/laser_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/laser_red.png -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/space_bg_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/space_bg_01.jpg -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/img/spaceship.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/formigone/easylearntutorial/c3161fa247506c1892029d7d6f8c4d3c9a5c86fe/js/gamedev/app/space-shooter/img/spaceship.png -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | RokkoJs - 2D Space Shooter 7 | 8 | 9 | 10 | 11 |

12 | Copyright (c) 2013-2014 Rodrigo Silveira. All Rights Reserved. 13 |

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/Canvas.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Canvas = function(w, h) { 3 | var width = w; 4 | var height = h; 5 | var canvas = document.createElement("canvas"); 6 | 7 | canvas.width = width; 8 | canvas.height = height; 9 | 10 | var ctx = canvas.getContext("2d"); 11 | 12 | this.getCanvas = function() { 13 | return canvas; 14 | }; 15 | 16 | this.getContext = function() { 17 | return ctx; 18 | }; 19 | 20 | this.getWidth = function() { 21 | return width; 22 | }; 23 | 24 | this.getHeight = function() { 25 | return height; 26 | }; 27 | 28 | this.clear = function() { 29 | ctx.clearRect(0, 0, width, height); 30 | }; 31 | }; -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/EnemyManager.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.EnemyManager = function(canvas) { 3 | var entities = new Array(); 4 | var canvas = canvas; 5 | var worldWidth = canvas.getWidth(); 6 | var worldHeight = canvas.getHeight(); 7 | 8 | this.getEntities = function() { 9 | return entities; 10 | }; 11 | 12 | function addEnemies(x, y, width, height, components) { 13 | var entity = new rokko.Entity(rokko.ENTITY_TYPES.SHIP, x || 0, y || 30); 14 | for (var c in components) { 15 | entity.addComponent(c, components[c]); 16 | }; 17 | 18 | var strengthComp = new rokko.Components.Strength(entity, 0.5, 25); 19 | var physComp = new rokko.Components.Physics(entity); 20 | var mockMove = new rokko.Components.Move(entity, (Math.random() * 5 >> 0) + 2); 21 | var spriteComp = new rokko.Components.Sprite(entity, "./img/enemy_red.png", width, height); 22 | spriteComp.setCtx(canvas.getContext()); 23 | spriteComp.setSpriteCoords(0, 0, 64, 64); 24 | entity.addComponent("sprite", spriteComp); 25 | entity.addComponent("move", mockMove); 26 | entity.addComponent("physics", physComp); 27 | entity.addComponent("strength", strengthComp); 28 | 29 | var randPathX = (Math.random() * 100 % 10) - 5; 30 | var randPathY = (Math.random() * 100 % 50) + 10; 31 | entity.setOnUpdate(function() { 32 | mockMove.setDirection(randPathX, 1); 33 | mockMove.update(); 34 | }); 35 | 36 | entities.push(entity); 37 | } 38 | 39 | this.add = addEnemies; 40 | 41 | this.remove = function(entity) { 42 | for (var i = 0, len = entities.length; i < len; i++) { 43 | if (entities[i] === entity) { 44 | entities.splice(i, 1); 45 | return entity; 46 | } 47 | } 48 | 49 | return null; 50 | }; 51 | 52 | this.update = function() { 53 | var enemiesDeleted = 0; 54 | var deleted = []; 55 | 56 | for (var i = 0, len = entities.length; i < len; i++) { 57 | try { 58 | entities[i].update(); 59 | 60 | var pos = entities[i].getPosition(); 61 | 62 | if (pos.y > worldHeight + 100 || !entities[i].isActive()) { 63 | enemiesDeleted++; 64 | deleted.push(i); 65 | } 66 | 67 | if (pos.x < -100) { 68 | pos.x = worldWidth + 50; 69 | entities[i].setPosition(pos); 70 | } else if (pos.x > worldWidth + 100) { 71 | pos.x = -50; 72 | entities[i].setPosition(pos); 73 | } 74 | } catch (e) {} 75 | } 76 | 77 | if (enemiesDeleted > 0) { 78 | var e = []; 79 | for (var i = 0, len = entities.length; i < len; i++) { 80 | if (deleted.indexOf(i) < 0) { 81 | e.push(entities[i]); 82 | } 83 | } 84 | 85 | entities = e; 86 | 87 | for (var i = 0; i < enemiesDeleted; i++) { 88 | var offset = parseInt(Math.random() * 100, 10) % parseInt(worldWidth / 75, 10); 89 | var x = 50 * offset + 25 + (25 * offset); 90 | var y = 0 - Math.random() * 100 - 100; 91 | addEnemies(x, y, 32, 32, {}); 92 | } 93 | } 94 | 95 | return enemiesDeleted; 96 | }; 97 | }; 98 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/GameLoop.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.GameLoop = function(fps) { 3 | var fps = fps; 4 | var frameDelay = 1000 / fps; 5 | var lastFrameTime = 0; 6 | var isRunning = true; 7 | 8 | var update = function(){}; 9 | 10 | function run(time) { 11 | if (isRunning) { 12 | var delta = time - lastFrameTime; 13 | 14 | if (delta >= frameDelay) { 15 | update(); 16 | lastFrameTime = time; 17 | } 18 | 19 | requestAnimationFrame(run); 20 | } 21 | } 22 | 23 | this.setRunning = function(running) { 24 | isRunning = running; 25 | return isRunning; 26 | }; 27 | 28 | this.isRunning = function() { 29 | return isRunning; 30 | }; 31 | 32 | this.run = run; 33 | this.setOnUpdate = function(cb){ 34 | update = cb; 35 | }; 36 | }; 37 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/Vec2.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Vec2 = function(x, y) { 3 | var components = { 4 | x: x, 5 | y: y 6 | }; 7 | 8 | function normalize() { 9 | var len = Math.sqrt( 10 | components.x * components.x + 11 | components.y * components.y 12 | ); 13 | 14 | len = 1 / len; 15 | components.x *= len; 16 | components.y *= len; 17 | } 18 | 19 | this.get = function(component) { 20 | return components[component]; 21 | }; 22 | 23 | this.set = function(x, y) { 24 | components.x = x; 25 | components.y = y; 26 | }; 27 | 28 | this.setComp = function(component, val) { 29 | if (components[component]) { 30 | components[component] = val; 31 | } 32 | }; 33 | 34 | this.normalize = normalize; 35 | }; 36 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/Drag.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.Drag = function(entity, canvas) { 4 | var entity = entity; 5 | var canvas = canvas; 6 | var isDown = false; 7 | var pos = entity.getPosition(); 8 | 9 | canvas.getCanvas().addEventListener("mousedown", doOnTouchDown); 10 | canvas.getCanvas().addEventListener("mouseup", doOnTouchUp); 11 | canvas.getCanvas().addEventListener("mousemove", doOnTouchMove); 12 | 13 | canvas.getCanvas().addEventListener("touchstart", doOnTouchDown); 14 | canvas.getCanvas().addEventListener("touchend", doOnTouchUp); 15 | canvas.getCanvas().addEventListener("touchmove", doOnTouchMove); 16 | 17 | function doOnTouchDown(event) { 18 | event.preventDefault(); 19 | if (event.touches && event.touches.length) { 20 | event = event.touches[0] || event; 21 | } 22 | 23 | var phy = entity.getComponent("physics"); 24 | 25 | if (phy) { 26 | isDown = phy.collide(event.clientX, event.clientY, 0, 0); 27 | } 28 | } 29 | 30 | function doOnTouchUp(event) { 31 | event.preventDefault(); 32 | isDown = false; 33 | } 34 | 35 | function doOnTouchMove(event) { 36 | event.preventDefault(); 37 | if (event.touches && event.touches.length) { 38 | event = event.touches[0] || event; 39 | } 40 | 41 | if (isDown) { 42 | pos.x = event.clientX; 43 | pos.y = event.clientY; 44 | } 45 | } 46 | 47 | this.centerEntity = function() { 48 | if (isDown) { 49 | var sprite = entity.getComponent("sprite"); 50 | 51 | if (sprite) { 52 | var size = sprite.getSize(); 53 | var x = pos.x - size.width * 0.5; 54 | var y = pos.y - size.height * 0.5; 55 | 56 | entity.setPosition({x: x, y: y}); 57 | } 58 | } 59 | }; 60 | 61 | this.getPosition = function() { 62 | return pos; 63 | }; 64 | }; 65 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/LaserGun.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.LaserGun = function(entity, canvas, maxShots) { 4 | var entity = entity; 5 | var MAX_SHOTS = maxShots; 6 | var canvas = canvas; 7 | var shots = new Array(); 8 | var shotsPerSec = 1000 / 5; 9 | var timeLastShot = 0; 10 | 11 | this.update = function() { 12 | for (var i = 0, len = shots.length; i < len; i++) { 13 | try { 14 | shots[i].update(); 15 | var shotPos = shots[i].getPosition(); 16 | 17 | if (shotPos.y < -100) { 18 | shots.splice(i, 1); 19 | } 20 | } catch (e) {} 21 | } 22 | }; 23 | 24 | this.add = function(x, y) { 25 | var time = Date.now(); 26 | if (time - timeLastShot >= shotsPerSec) { 27 | if (shots.length < MAX_SHOTS) { 28 | var shot = new rokko.Entity(rokko.ENTITY_TYPES.BULLET, x, y); 29 | var spriteComp = new rokko.Components.Sprite(shot, "./img/laser_blue.png", 8, 16); 30 | spriteComp.setCtx(canvas.getContext()); 31 | var strengthComp = new rokko.Components.Strength(shot, 10, 0); 32 | var physComp = new rokko.Components.Physics(shot); 33 | var mockMove = new rokko.Components.Move(shot, 15); 34 | shot.addComponent("sprite", spriteComp); 35 | shot.addComponent("move", mockMove); 36 | shot.addComponent("physics", physComp); 37 | shot.addComponent("strength", strengthComp); 38 | 39 | shot.setOnUpdate(function() { 40 | mockMove.setDirection(0, -1); 41 | mockMove.update(); 42 | }); 43 | 44 | shots.push(shot); 45 | } 46 | 47 | timeLastShot = time; 48 | } 49 | }; 50 | 51 | this.getShots = function() { 52 | return shots; 53 | }; 54 | }; 55 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/Move.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.Move = function(entity, speed) { 4 | var entity = entity; 5 | var speed = speed; 6 | var direction = new rokko.Vec2(0, 0); 7 | 8 | this.update = function() { 9 | var pos = entity.getPosition(); 10 | direction.normalize(); 11 | 12 | var newPos = { 13 | x: pos.x + direction.get("x") * speed, 14 | y: pos.y + direction.get("y") * speed 15 | }; 16 | 17 | entity.setPosition(newPos); 18 | }; 19 | 20 | this.setDirection = function(x, y) { 21 | direction.set(x, y); 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/Physics.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.Physics = function(entity) { 4 | var entity = entity; 5 | 6 | this.collide = function(x, y, w, h) { 7 | var sprite = entity.getComponent("sprite"); 8 | if (sprite) { 9 | var pos = entity.getPosition(); 10 | var size = sprite.getSize(); 11 | 12 | if (pos.x > x + w) { 13 | return false; 14 | } 15 | 16 | if (pos.x + size.width < x) { 17 | return false; 18 | } 19 | 20 | if (pos.y > y + h) { 21 | return false; 22 | } 23 | 24 | if (pos.y + size.height < y) { 25 | return false; 26 | } 27 | 28 | return true; 29 | } 30 | 31 | return false; 32 | }; 33 | 34 | this.getBodyDef = function() { 35 | var pos = entity.getPosition(); 36 | var sprite = entity.getComponent("sprite"); 37 | var size = sprite.getSize() || {width: 0, height: 0}; 38 | 39 | return { 40 | x: pos.x, 41 | y: pos.y, 42 | width: size.width, 43 | height: size.height 44 | }; 45 | }; 46 | }; 47 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/Sprite.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.Sprite = function(pEntity, pImgSrc, pWidth, pHeight) { 4 | var entity = pEntity; 5 | var img = new Image(); 6 | img.src = pImgSrc; 7 | 8 | var width = pWidth; 9 | var height = pHeight; 10 | var sWidth = pWidth; 11 | var sHeight = pHeight; 12 | var sX = 0; 13 | var sY = 0; 14 | var ctx = null; 15 | 16 | function setCtx(context) { 17 | ctx = context; 18 | } 19 | 20 | this.setCtx = setCtx; 21 | this.setSpriteCoords = function(x, y, width, height) { 22 | sX = x; 23 | sY = y; 24 | sWidth = width; 25 | sHeight = height; 26 | }; 27 | 28 | this.update = function() { 29 | if (ctx && entity.isActive()) { 30 | var pos = entity.getPosition(); 31 | ctx.drawImage(img, sX, sY, sWidth, sHeight, pos.x, pos.y, width, height); 32 | } 33 | }; 34 | 35 | this.getSize = function() { 36 | return { 37 | width: width, 38 | height: height 39 | }; 40 | }; 41 | }; 42 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/components/Strength.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Components = rokko.Components || {}; 3 | rokko.Components.Strength = function(pEntity, pHP, pEnergy) { 4 | var entity = pEntity; 5 | var hp = pHP; 6 | var energy = pEnergy; 7 | 8 | this.getHP = function() { 9 | return hp; 10 | }; 11 | 12 | this.getEnergy = function() { 13 | return energy; 14 | }; 15 | 16 | this.takeDamage = function(damage) { 17 | energy -= damage; 18 | return energy; 19 | }; 20 | }; 21 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/entities/Entity.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.ENTITY_TYPES = { 3 | SHIP: 0, 4 | BULLET: 1 5 | }; 6 | 7 | rokko.Entity = function(type, x, y) { 8 | var type = type; 9 | var pos = { 10 | x: x, 11 | y: y 12 | }; 13 | 14 | var isActive = true; 15 | var components = new Object(); 16 | var update = function(){}; 17 | 18 | function addComponent(key, component) { 19 | if (!components[key]) { 20 | components[key] = component; 21 | } 22 | 23 | return component; 24 | } 25 | 26 | function removeComponent(key) { 27 | if (components[key]) { 28 | return delete components[key]; 29 | } 30 | 31 | return false; 32 | } 33 | 34 | function getComponent(key) { 35 | return components[key] || null; 36 | } 37 | 38 | function draw() { 39 | if (components.sprite) { 40 | components.sprite.update(); 41 | } 42 | } 43 | 44 | this.addComponent = addComponent; 45 | this.removeComponent = removeComponent; 46 | this.getComponent = getComponent; 47 | this.getPosition = function() { 48 | return pos; 49 | }; 50 | 51 | this.setPosition = function(newPos) { 52 | pos = newPos; 53 | }; 54 | 55 | this.isActive = function() { 56 | return isActive; 57 | }; 58 | 59 | this.setActive = function(active) { 60 | isActive = active; 61 | }; 62 | 63 | this.draw = draw; 64 | this.update = update; 65 | this.update = function() { 66 | update(); 67 | }; 68 | 69 | this.setOnUpdate = function(cb){ 70 | update = cb; 71 | }; 72 | }; 73 | -------------------------------------------------------------------------------- /js/gamedev/app/space-shooter/js/widgets/EnergyBar.js: -------------------------------------------------------------------------------- 1 | var rokko = rokko || {}; 2 | rokko.Widgets = rokko.Widgets || {}; 3 | rokko.Widgets.EnergyBar = function(cssClass) { 4 | var energy = 100; 5 | var container = document.createElement("div"); 6 | container.classList.add(cssClass); 7 | 8 | var bar = document.createElement("div"); 9 | bar.style.width = energy + "%"; 10 | container.appendChild(bar); 11 | 12 | this.getElement = function() { 13 | return container; 14 | }; 15 | 16 | this.addEnergy = function(amount) { 17 | energy += amount; 18 | bar.style.width = energy + "%"; 19 | }; 20 | 21 | this.setEnergy = function(amount) { 22 | energy = amount; 23 | bar.style.width = energy + "%"; 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /js/gamedev/app/tutorial-001.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sprites - Game Engine Development 7 | 8 | 9 | 21 | 22 | 23 | 27 | 28 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /js/gamedev/app/tutorial-002.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Sprites - Game Engine Development 7 | 8 | 9 | 21 | 22 | 23 | 27 | 28 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /js/gamedev/app/tutorial-003.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Async Asset Loader - Game Engine Development 7 | 8 | 9 | 21 | 22 | 23 | 29 | 30 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /js/gamedev/app/tutorial-004.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animated Renderer - Game Engine Development 7 | 8 | 9 | 10 | 11 | 12 | 19 | 20 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /js/gamedev/app/tutorial-007.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Game Loop - Game Engine Development 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /js/gamedev/install.sh: -------------------------------------------------------------------------------- 1 | mkdir -p app/{lib,img,css,js/app} 2 | mkdir -p dist/js 3 | mkdir lib 4 | 5 | git clone https://github.com/google/closure-library app/lib/closure-library 6 | 7 | wget http://dl.google.com/closure-compiler/compiler-latest.zip 8 | unzip compiler-latest.zip -d lib 9 | rm compiler-latest.zip 10 | 11 | npm install 12 | -------------------------------------------------------------------------------- /js/gamedev/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "easy-learn-tutorial-game-development", 3 | "version": "1.0.0", 4 | "description": "JavaScript game engine written using Google Closure Tools", 5 | "author": "Rodrigo Silveira", 6 | "license": "ISC", 7 | "scripts": { 8 | "test": "grunt travis --verbose" 9 | }, 10 | "devDependencies": { 11 | "grunt-closure-tools": "~0.9.7", 12 | "grunt": "~0.4.5", 13 | "grunt-contrib-qunit": "~0.5.2", 14 | "grunt-contrib-connect": "~0.8.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /linear-algebra/index.js: -------------------------------------------------------------------------------- 1 | var Vec = require('./vec.js'); 2 | 3 | var vec1 = new Vec([1, 2, 3]); 4 | var vec2 = new Vec([1, 2, 3]); 5 | var vec3 = new Vec([2, 3, 4]); 6 | 7 | console.log('vec1 => ' + vec1); 8 | console.log('vec2 => ' + vec2); 9 | console.log('vec3 => ' + vec3); 10 | console.log('\n'); 11 | 12 | console.log('vec1 === vec2 => ' + vec1.eq(vec2)); 13 | console.log('vec2 === vec3 => ' + vec2.eq(vec3)); 14 | -------------------------------------------------------------------------------- /linear-algebra/quizzies.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const assert = require('assert'); 4 | const Vec = require('./vec.js'); 5 | 6 | // 7 | // 1.1 - Plus, Minus, Scalar Multiply 8 | // 9 | let vecA = new Vec([ 8.218, -9.341]); 10 | let vecB = new Vec([-1.129, 2.111]); 11 | let vecC = new Vec([7.089, -7.230]).toFixed(3); 12 | let out = vecA.add(vecB).toFixed(3); 13 | 14 | console.log('Quiz 1.1 - Plus, Minus, Scalar Multiply'); 15 | console.log(' ' + vecA + '\n+ ' + vecB + '\n= ' + vecC); 16 | assert(out.eq(vecC), 'Should have save components'); 17 | 18 | 19 | vecA = new Vec([ 7.119, 8.215]); 20 | vecB = new Vec([-8.223, 0.878]); 21 | vecC = new Vec([15.342, 7.337]).toFixed(3); 22 | out = vecA.sub(vecB).toFixed(3); 23 | 24 | console.log('-------'); 25 | console.log(' ' + vecA + '\n- ' + vecB + '\n= ' + vecC); 26 | assert(out.eq(vecC), 'Should have save components'); 27 | 28 | 29 | vecA = new Vec([1.671, -1.012, -0.318]); 30 | vecB = new Vec([12.38211, -7.49892, -2.35638]); 31 | let scale = 7.41; 32 | out = vecA.mult(scale).toFixed(5); 33 | 34 | console.log('-------'); 35 | console.log(' ' + vecA + '\n* ' + scale + '\n= ' + vecB); 36 | assert(out.eq(vecB), 'Should have save components'); 37 | -------------------------------------------------------------------------------- /linear-algebra/vec.js: -------------------------------------------------------------------------------- 1 | function Vec(comps) { 2 | this.comps = comps; 3 | } 4 | 5 | Vec.prototype.toString = function() { 6 | return 'Vector: (' + this.comps + ')'; 7 | }; 8 | 9 | Vec.prototype.size = function() { 10 | return this.comps.length; 11 | }; 12 | 13 | Vec.prototype.sameSize = function(vec) { 14 | return vec.size() === this.size(); 15 | }; 16 | 17 | Vec.prototype.toFixed = function(size) { 18 | const comps = this.comps.map(comp => comp.toFixed(size)); 19 | return new Vec(comps); 20 | }; 21 | 22 | Vec.prototype.eq = function(vec) { 23 | if (!this.sameSize(vec)) { 24 | return false; 25 | } 26 | 27 | return this.comps.every((val, index) => String(val) === String(vec.comps[index])); 28 | }; 29 | 30 | Vec.prototype.add = function(vec) { 31 | if (!this.sameSize(vec)) { 32 | // throw? 33 | } 34 | 35 | const res = this.comps.map((comp, index) => comp + vec.comps[index]); 36 | return new Vec(res); 37 | }; 38 | 39 | Vec.prototype.sub = function(vec) { 40 | if (!this.sameSize(vec)) { 41 | // throw? 42 | } 43 | 44 | const res = this.comps.map((comp, index) => comp - vec.comps[index]); 45 | return new Vec(res); 46 | }; 47 | 48 | Vec.prototype.mult = function(scale) { 49 | const res = this.comps.map(comp => comp * scale); 50 | return new Vec(res); 51 | }; 52 | 53 | module.exports = Vec; 54 | -------------------------------------------------------------------------------- /react-js/server-rendering-php/.htaccess: -------------------------------------------------------------------------------- 1 | RewriteEngine On 2 | RewriteCond %{REQUEST_FILENAME} !-f 3 | RewriteRule ^ index.php [QSA,L] 4 | -------------------------------------------------------------------------------- /react-js/server-rendering-php/index.php: -------------------------------------------------------------------------------- 1 | $users, 17 | 'info' => $detail 18 | ]; 19 | $propsJson = json_encode($props); 20 | 21 | $react = [ 22 | file_get_contents(__DIR__.'/node_modules/react/dist/react.min.js'), 23 | file_get_contents(__DIR__.'/node_modules/react-dom/dist/react-dom.min.js'), 24 | file_get_contents(__DIR__.'/bundle.js'), 25 | 'React.renderToString(React.createElement(App, ' . $propsJson . '))' 26 | ]; 27 | 28 | try { 29 | $reactStr = $v8->executeString(implode(PHP_EOL, $react)); 30 | } catch (Exception $e) { 31 | echo '

', $e->getMessage(), '

'; 32 | echo '
', $e->getTraceAsString(), '
'; 33 | exit; 34 | } 35 | 36 | //$reactStr = null; 37 | //$propsJson = '{}'; 38 | ?> 39 | 40 | 41 | 42 | 43 | 44 | 45 | Easy Learn Tutorial - Isomorphic React.js with PHP 46 | 47 | 48 | 58 | 59 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /react-js/server-rendering-php/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "easylearntutorial-react-php", 3 | "version": "0.0.1", 4 | "scripts": { 5 | "watch": "./node_modules/.bin/webpack --watch", 6 | "start": "php5 -S localhost:8080" 7 | }, 8 | "devDependencies": { 9 | "babel-core": "^6.4.5", 10 | "babel-loader": "^6.2.2", 11 | "babel-preset-react": "^6.1.18", 12 | "babel-preset-es2015": "^6.1.18", 13 | "webpack": "^1.12.13" 14 | } 15 | , 16 | "dependencies": { 17 | "jquery": "~2.1.4", 18 | "react": "^0.14.x", 19 | "react-dom": "^0.14.7" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /react-js/server-rendering-php/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: './js/index.jsx', 3 | output: { 4 | filename: 'bundle.js' 5 | }, 6 | module: { 7 | loaders: [ 8 | { 9 | test: /\.jsx?$/, 10 | exclude: /(node_modules)/, 11 | loader: 'babel', 12 | query: { 13 | cacheDirectory: true, 14 | presets: [ 15 | 'react', 16 | 'es2015' 17 | ] 18 | } 19 | } 20 | ] 21 | }, 22 | externals: { 23 | react: 'React', 24 | 'react-dom': 'ReactDOM', 25 | jquery: 'jQuery', 26 | }, 27 | resolve: { 28 | extensions: ['', '.js', '.jsx'] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /travis-ci/phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tests 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /travis-ci/src/LoudTranslator.php: -------------------------------------------------------------------------------- 1 | assertTrue(false); 10 | } 11 | } 12 | --------------------------------------------------------------------------------