3 |
4 |
15 |
16 |
17 | {% endif %}
18 |
--------------------------------------------------------------------------------
/docs/_includes/ga.html:
--------------------------------------------------------------------------------
1 | {% if site.google_analytics %}
2 |
3 |
15 |
16 | {% endif %}
17 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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}
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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.
26 |
30 |
31 | {% include shared.html %}
32 | {% include ga.html %}
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
27 |
28 |
29 | Copyright © 2014-2017 EasyLearnTutorial. All rights reserved.
19 |
20 |
21 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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/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/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 | }
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/docs/_includes/header.html:
--------------------------------------------------------------------------------
1 |
25 |
--------------------------------------------------------------------------------
/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/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/series/pixel-art-inspiration.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | nav: series
4 | title: Pixel Art Inspiration
5 | ---
6 |
7 |
8 |
36 |
--------------------------------------------------------------------------------
/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 |
9 |
22 | Pixel Art Inspiration
10 | 11 |
12 |
21 |
13 | 
14 |
15 |
16 |
14 |
17 |
20 | Description
18 | 19 |
23 |
35 |
24 |
34 |
25 |
26 |
27 |
28 |
33 |
27 |
28 | 29 | Top Down View - Pixel Art Inspiration 30 |
31 |Saturday, July 5, 2014
32 |
8 |
36 |
--------------------------------------------------------------------------------
/js/gamedev/app/space-shooter/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 |
22 | React.js with PHP Tutorials
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | Description
18 | 19 |
23 |
35 |
24 |
34 |
25 |
26 |
27 |
28 |
33 |
27 |
28 | 29 | React.js Server-side Rendering with PHP 30 |
31 |Wednesday, January 11, 2017
32 |
8 |
44 |
--------------------------------------------------------------------------------
/javascript-questions/function-expressions-vs-function-declarations.js:
--------------------------------------------------------------------------------
1 | // Declaration:
2 | // function
9 |
10 |
42 |
43 |
11 |
41 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
34 | 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 |
35 |
36 |
37 |
38 | {% include disqus.html %}
39 |
40 |
8 |
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 |
--------------------------------------------------------------------------------
/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 |
9 |
22 | Pixel Art Special Effects in JavaScript
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | 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 |
23 |
35 |
24 |
34 |
25 |
26 |
27 |
28 |
33 |
27 |
28 | 29 | Render Loop - Pixel Art Special Effects - JavaScript Tutorial 30 |
31 |Wednesday, October 9, 2013
32 |
8 |
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 |
9 |
22 | 2D Game Development from Scratch
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | 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 |
23 |
35 |
24 |
34 |
25 |
26 |
27 |
28 |
33 |
27 |
28 | 29 | 2D Game Development from Scratch - Preview 30 |
31 |Tuesday, August 26, 2014
32 |
8 |
39 |
--------------------------------------------------------------------------------
/docs/series/react-js-tutorials.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | nav: series
4 | title: React.js Tutorials
5 | ---
6 |
7 |
9 |
10 |
37 |
38 |
11 |
36 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
29 | 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 |
30 |
31 |
32 |
33 | {% include disqus.html %}
34 |
35 |
8 |
44 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
9 |
22 | React.js Tutorials
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | Description
18 | 19 |
23 |
43 |
24 |
42 |
25 |
26 |
27 |
28 |
27 |
28 | 29 | Isomorphic React.js with PHP server-side rendering 30 |
31 |Wednesday, January 11, 2017
32 |
33 |
34 |
35 |
36 |
41 |
35 |
36 | 37 | React.js Server-side Rendering with PHP 38 |
39 |Wednesday, January 11, 2017
40 |
8 |
41 |
--------------------------------------------------------------------------------
/docs/series/hidden-easter-eggs.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | nav: series
4 | title: Hidden Easter Eggs
5 | ---
6 |
7 |
9 |
10 |
39 |
40 |
11 |
38 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
31 | 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 |
32 |
33 |
34 |
35 | {% include disqus.html %}
36 |
37 |
8 |
44 |
--------------------------------------------------------------------------------
/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 '
9 |
22 | Hidden Easter Eggs
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | Description
18 |Hidden easter eggs in Google Chrome web browser (hidden game) and in various video games.
19 |
23 |
43 |
24 |
42 |
25 |
26 |
27 |
28 |
27 |
28 | 29 | Hidden Easter Egg in Google Chrome: T-rex Runner Game 30 |
31 |Wednesday, January 11, 2017
32 |
33 |
34 |
35 |
36 |
41 |
35 |
36 | 37 | Super Mario Brothers - Google Easter Egg 38 |
39 |Wednesday, January 11, 2017
40 |', $e->getMessage(), '
'; 32 | echo '', $e->getTraceAsString(), ''; 33 | exit; 34 | } 35 | 36 | //$reactStr = null; 37 | //$propsJson = '{}'; 38 | ?> 39 | 40 | 41 | 42 | 43 | 44 | 45 |
8 |
49 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
9 |
10 |
47 |
48 |
11 |
46 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
39 | 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 |
40 |
41 |
42 |
43 | {% include disqus.html %}
44 |
45 |
8 |
50 |
--------------------------------------------------------------------------------
/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 | }
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/series/javascript-html5-game-development-tutorials.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | nav: series
4 | title: JavaScript HTML5 Game Development Tutorials
5 | ---
6 |
7 |
9 |
10 |
48 |
49 |
11 |
47 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
29 | 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 |
30 |
43 | Next on Hidden Easter Eggs
31 |
42 |
32 |
33 |
34 |
35 |
36 |
34 |
35 |
37 |
41 | 38 | Hidden Easter Egg in Google Chrome: T-rex Runner Game 39 |
40 |
44 | {% include disqus.html %}
45 |
46 |
8 |
44 |
--------------------------------------------------------------------------------
/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 |
9 |
22 | JavaScript HTML5 Game Development Tutorials
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | 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 |
23 |
43 |
24 |
42 |
25 |
26 |
27 |
28 |
27 |
28 | 29 | HTML5 Game Development Tutorial - JavaScript #1 Road Map 30 |
31 |Saturday, July 20, 2013
32 |
33 |
34 |
35 |
36 |
41 |
35 |
36 | 37 | Mega Man Tetris Clone - HTML5 & JavaScript Closure Tools 38 |
39 |Saturday, July 20, 2013
40 |
8 |
44 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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 |
9 |
22 | HTML5 Game Development Tutorial with GWT
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | 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 |
23 |
43 |
24 |
42 |
25 |
26 |
27 |
28 |
27 |
28 | 29 | 2D Renderer: GWT & Android Game Development Tutorial 1 30 |
31 |Saturday, July 20, 2013
32 |
33 |
34 |
35 |
36 |
41 |
35 |
36 | 37 | Road map: GWT & Android Game Development Tutorial 2 38 |
39 |Saturday, July 20, 2013
40 |
8 |
48 |
--------------------------------------------------------------------------------
/docs/series/dependency-injection.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | nav: series
4 | title: Dependency Injection
5 | ---
6 |
7 |
9 |
10 |
46 |
47 |
11 |
45 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
27 | 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 |
28 |
41 | Next on Hidden Easter Eggs
29 |
40 |
30 |
31 |
32 |
33 |
34 |
32 |
33 |
35 |
39 | 36 | Super Mario Brothers - Google Easter Egg 37 |
38 |
42 | {% include disqus.html %}
43 |
44 |
8 |
52 |
--------------------------------------------------------------------------------
/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/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 |
--------------------------------------------------------------------------------
/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 | |
9 |
22 | Dependency Injection
10 | 11 |
12 |
21 |
13 |
14 |
15 |
16 |
14 |
17 |
20 | Description
18 | 19 |
23 |
51 |
24 |
50 |
25 |
26 |
27 |
28 |
27 |
28 | 29 | Pimple: PHP Dependency Injection Container 30 |
31 |Sunday, January 5, 2014
32 |
33 |
34 |
35 |
36 |
35 |
36 | 37 | Auryn: PHP Dependency Injection Container 38 |
39 |Sunday, January 5, 2014
40 |
41 |
42 |
43 |
44 |
49 |
43 |
44 | 45 | Dependency Injection VS Service Locator Pattern 46 |
47 |Sunday, January 5, 2014
48 |
8 |
62 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/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 |
9 |
10 |
60 |
61 |
11 |
59 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
41 | 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 |
42 |
55 | Next on React.js Tutorials
43 |
54 |
44 |
45 |
46 |
47 |
48 |
46 |
47 |
49 |
53 | 50 | React.js Server-side Rendering with PHP 51 |
52 |
56 | {% include disqus.html %}
57 |
58 |
8 |
60 |
--------------------------------------------------------------------------------
/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 |
9 |
10 |
58 |
59 |
11 |
57 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
39 | 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 |
40 |
53 | Next on React.js Tutorials
41 |
52 |
42 |
43 |
44 |
45 |
46 |
44 |
45 |
47 |
51 | 48 | Isomorphic React.js with PHP server-side rendering 49 |
50 |
54 | {% include disqus.html %}
55 |
56 |
8 |
50 |
--------------------------------------------------------------------------------
/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 |
9 |
10 |
48 |
49 |
11 |
47 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
29 | 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 |
30 |
43 | Next on HTML5 Game Development Tutorial with GWT
31 |
42 |
32 |
33 |
34 |
35 |
36 |
34 |
35 |
37 |
41 | 38 | Road map: GWT & Android Game Development Tutorial 2 39 |
40 |
44 | {% include disqus.html %}
45 |
46 |
8 |
52 |
--------------------------------------------------------------------------------
/js/gamedev/app/tutorial-005.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 |
10 |
50 |
51 |
11 |
49 |
12 |
16 |
17 |
13 |
14 |
15 |
18 |
31 | 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 |
32 |
45 | Next on JavaScript HTML5 Game Development Tutorials
33 |
44 |
34 |
35 |
36 |
37 |
38 |
36 |
37 |
39 |
43 | 40 | HTML5 Game Development Tutorial - JavaScript #1 Road Map 41 |
42 |
46 | {% include disqus.html %}
47 |
48 |