Home
Videos uploaded by user “JavaScript Teacher”
Rats! WebGL Hit a Snag - Fix for Chrome Browser
 
02:28
Rats! WebGL Hit a Snag - Fix for Chrome Browser. How to fix Rats WebGL hit a snag Fix it in less than 2 minutes | rats webgl hit a snag facebook |rats webgl hit a snag windows 10 | Facebook | Enable WebGL | Disable WebGL | browser | Error Rats! WebGL hit a snag & how to fix it. Getting Rats! WebGL hit a snag error message while opening Facebook 360 degree photo | Rats! WebGL hit a snag & how to fix it in Google Chrome mince ! webgl a rencontre un probleme fix webgl fix there was a problem starting webgl rats webgl hit a snag roblox webgl enable chrome windows 10 webgl browser webgl chrome webgl hatas çözümü panzoid web gl hatasi jak na webgl webgl memory chrome there was a problem starting webgl this app requires a webgl-enabled browser to run fix windows xp this app uses 3d graphics and needs webgl this application is not supported on this computer. installation has been disabled. the following problems are detected: google chrome how to disable webgl in chrome browser how to download webgl for chrome cara buka webgl comi tirar os bug da webgl comment régler le probleme de webgl como ativar webgl como baixar e ativar o webgl google chrome como errouver o erro do webgl no pazoid como fazer quando o panzoid aparece webgl como resolver o erro webgl no baidu browser ativar webgl no panzoid comi tirar os bug da webgl comment régler le probleme de webgl como ativar webgl como baixar e ativar o webgl google chrome como errouver o erro do webgl no pazoid Chrome address bar commands from video: Type chrome://settings into your Chrome address bar Type chrome://flags into your Chrome address bar August 7th Update: Advice in this video may not work for everyone, depending on Operating System and Chrome version. If this didn't work, try adding --disable-webgl command line switch. Right-click your Chrome icon, go to Properties. And type that switch into Target input field. I recorded another vid. that explains how to do it: https://www.youtube.com/watch?v=VJgebUumBXY
Views: 235188 JavaScript Teacher
JavaScript Functional Programming Tutorial
 
15:24
Functional Programming in JavaScript is more like a style, rather than a paradigm. This JavaScript Functional Programming Tutorial was made to demonstrate it's simply writing your code in a chained, clean and efficient way. Doing this can reduce your 50-100 lines of code to just a few without sacrificing readability and logical integrity. Relevant keywords, it seems: functional programming javascript functional programming vs object oriented functional patterns functional programming patterns functional programming concepts Follow on Twitter: https://twitter.com/js_tut Learning Curve Books: http://www.learningcurvebook.net Instagram: https://www.instagram.com/javascriptteacher Facebook: https://www.facebook.com/javascriptteacher
Views: 1849 JavaScript Teacher
How to center an image in HTML
 
05:13
Hey guys, my book CSS Visual Dictionary – https://www.amazon.com/dp/1983065633 Explains all of this and more with 150+ visual diagrams in detail! In this tutorial I am going to briefly go over how to center align an image in HTML. Placing the image in the middle of your page, can be done via inline CSS "style" attribute within the element tag. Centered images can also be done by wrapping the element in "center" tags. The result of this code is an image nicely aligned to the middle of the screen in your browser. All you need to start is your favorite text editor and Chrome (or other) browser. You can use the HTML center tag, but more commonly web developers use style attribute to accomplish the same task. The quick HTML way is, just be careful because although it is becoming outdated in HTML5 it will still work. <center><img src = "lion.jpg"></center> Using CSS attribute: <img src = "lion.jpg" style = "display:block; margin-left: auto; margin-right: auto;"> or <img src = "lion.jpg" style = "display: block; margin: 0 auto;"> Or use the same CSS code within "style" attribute, but move it to your style tag inside the head tag, in your HTML page: <style type = "text/css"> img { display: block; margin: 0 auto; } </style>
Views: 59750 JavaScript Teacher
JavaScript Tutorial Part 1 - Lexical Environment
 
15:17
JavaScript Tutorial For Beginners Learning Curve Books: http://www.learningcurvebook.net Follow me on Twitter: https://twitter.com/js_tut Follow on Instagram: https://www.instagram.com/javascriptteacher/ Follow on Facebook: https://www.facebook.com/javascriptteacher Learn about Lexical Environment in this JavaScript tutorial. A pretty good starting point into the language. JavaScript lexical scope, JavaScript lexical scope example, JavaScript lexical scope definition. Other potentially relevant keywords: let, var, scope, hoist, hoisting, execution context, call stack. Self-education Computer Literacy For next generation of teachers artists, coders, designers, and makers of things. Learning Curve Books: http://www.learningcurvebook.net
Views: 1143 JavaScript Teacher
how to add background image in html
 
04:36
Hey guys, my book CSS Visual Dictionary – https://www.amazon.com/dp/1983065633 Explains all of this with visual 150+ visual diagrams. (For more detail and "Look Inside" on Amazon go there) How to add background image to your HTML page? In this tutorial I'll show you an example source code that changes your background image to anything you want. Just type in a URL address into inline or external CSS like: <body style ="background: url('here.jpg')"> The single quotes around 'here.jpg' are not required, and if your style is already wrapped in double quotes, you cannot use double quotes around "here.jpg" or it will create an error. Here are a few keyword phrases that might help get this tutorial found on YouTube search. Thanks for watching! html background image tutorial html background image full screen html background image no repeat html background image no size html background image tutorial using notepad html background image tutorial resize html how to add background image to html body inserting background image in html how to fit background image in html adding background image in html
Views: 140628 JavaScript Teacher
JavaScript Tutorial Part 2 - Execution Context and The Call Stack
 
11:16
JavaScript Tutorial For Beginners Learning Curve Books: http://www.learningcurvebook.net Follow on Twitter: https://twitter.com/js_tut Instagram: https://www.instagram.com/javascriptteacher Facebook: https://www.facebook.com/javascriptteacher Execution Context and the Call Stack in JavaScript are explained in this relatively trivial tutorial. First, recognize that the global scope is nothing more than an instance of the main Window() object. The "this" keyword, and variable environment are used to juggle around data inside the lexical environment of a particular scope. Basically, every time a function is called, a new execution context is created. An execution context is composed from the Lexical Environment of the scope it is in, the Variable Environment and "this" keyword binding. The this keyword will refer to the object, of the scope from which the function was called. However, when an object literal is used, or the function is used to instantiate a new object using the "new" operator, then the function will create its own this / execution context. You can chain execution contexts, as they are placed on the main Call Stack. When the function returns, the execution context is removed from the top of the Call Stack. Self-education + Computer Literacy For next generation of teachers, artists, coders, designers, and makers of things: Learning Curve Books: http://www.learningcurvebook.net
Views: 1259 JavaScript Teacher
JavaScript HTML Game Development Tutorial 6 - Tilemap Math Basics (2D RPG Platformer)
 
17:55
Download source code for tutorial series here: http://www.tigrisgames.com/src A new gamedev tutorial about mapping mouse / screen coordinates to tile map X and Y coordinates in our game map world and determining the clicked tile index. Welcome to the next installment in the 2D platformer/RPG game development (gamedev) tutorial series, where we are learning how to make a javascript game engine! This time we are going to lean on some basic mathematics, that help us determine how to navigate the tile map data back and form, from indices to 2D coordinates and in reverse. Having learned how these math calculations work within the realm of our tile map game world / level data, we will be able to apply them to make ah HTML5 game! When you support my Patreon account by becoming a $1+ patron, it helps me deliver the next tutorial sooner. Thanks for everyone who has been supporting my work so far. Support my independent gamedev tutorials on Patreon: www.patreon.com/devt JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (#indiedev #gamedev tutorial channel).
Views: 13467 JavaScript Teacher
Collision Detection JavaScript Tutorial Part 1
 
15:59
The source code: http://www.tigrisgames.com/src This is JavaScript collision detection tutorial part 1, the intro to the free course consisting of about 10 tutorials on various collision detection cases including points and rectangles, line intersection, circle (or sphere) against lines and other circles and convex and concave polygons. In my previous tutorials, the JavaScript sprite engine was nearly completed. But, the game engine is still not capable of collision detection, an important element if you're planning on making any interesting games that go beyond chess or something where nothing collides with anything. The rest of the series will follow, but this is an introduction. I hope this helps someone out there.
Views: 29495 JavaScript Teacher
JavaScript HTML Game Development Tutorial 2 - Drawing Stretched and Rotated Sprites on Canvas
 
26:26
Source code: http://www.tigrisgames.com/src This is my next HTML canvas game engine tutorial in the series. So let's continue our journey on our way to learning how to develop a 2D tile mapped HTML game engine (In the style of Mario platformer, but with a few unique twists of our own.) This Java Script game development tutorial was created to help learn how to draw image sprites / pictures on JavaScript canvas, in preparation to making your first JavaScript game engine. First we will make sure our canvas is set up, this is a must for game dev. as we deviate from HTML div element-based sprites you may already be familiar with. (We want to use HTML5 canvas tag this time, not DIV elements as sprites!) JavaScript objects are important. And so, after our JavaScript canvas has been set up, we will create a new JavaScript object conveniently called "Sprite" and add methods draw and rotate. Original size, stretched and rotated 2D tiles (32 by 32 pixels) are covered. It's a good gamedev tutorial if you're starting out to make an 2D platformer or an adventure RPG game but still need to brush up on JavaScript Canvas code. As a bonus I decided to include an animated sprite, which is just a tile with some sprite rotation applied to it, using JavaScript's setInterval time function. Source code from this sprite drawing tutorial is available here: http://jsfiddle.net/gregsidelnikov/dzuwLr8t/22/ Help me make my next JavaScript gamedev tutorial :) https://www.patreon.com/tigrisgames
Views: 48828 JavaScript Teacher
JavaScript HTML Game Development Tutorial 1 - Javascript Game Tutorial (Canvas)
 
27:54
2 years passed and the game engine developed here became Mosaic.js: http://www.tigrisgames.com/mosaic Javascript game tutorial part 1 | Canvas game tutorial | For beginners | JavaScript game engine tutorial | JavaScript game programming tutorial | javascript game coding | javascript game making | javascript game dev | javascript making a game | how to javascript a game | javascript tutorial for beginners with examples | create javascript game | javascript html game development tutorial 1 | making javascript games | how to make games with javascript Welcome to the first JavaScript game development tutorial (HTML5 js canvas) for beginners! In this JavaScript game engine tutorial I will demonstrate one way of initializing canvas in JavaScript from scratch, which is the first step before we actually start drawing sprites and 2D tile worlds and making our own game engine. [Russian/на русском языке] Как сделать игру на JavaScript? Этот урок программирования объяснит создание игры на JavaScript с нуля. Спрайт, анимация главного героя, РПГ, платформер движёк и графика и всё иное будет в этом туториал е объяснятся. To start drawing game objects on the screen such as sprites, lines, rectangles and animations we first need to set up the canvas tag. This tutorial starts with a brief example of an HTML5 game made in canvas. And then in my next JavaScript game tutorial for beginners we'll discover how to draw tiles and sprites. Then it proceeds to minimum HTML and JavaScript coding required to draw to canvas. And no, we won't be using enchant js here. Using rect method, the background is erased (cleared) to black color, concluding this canvas tutorial. The next tutorial will cover drawing 2d sprites on the canvas. In a way, this is the very first step to developing a full fledged game engine in JavaScript. I'll cover a few other subjects along the way that will prepare you for the future :P Support creation of my next tutorial on Patreon :) https://www.patreon.com/tigrisgames For my gamedev news and updates please visit: https://www.facebook.com/tigrisgames
Views: 131093 JavaScript Teacher
JavaScript Tutorial Part 3 - Difference Between var let & const
 
09:36
Learning Curve Books: http://www.learningcurvebook.net Follow on Twitter: https://twitter.com/js_tut Instagram: https://www.instagram.com/javascriptteacher Facebook: https://www.facebook.com/javascriptteacher We need to stop saying: var is hoisted. (it makes people naturally think value 1 in "var a = 1;" is hoisted, but it's actually not.) Replace that commonplace definition with: Value of a variable is set to undefined when its name is hoisted. Explore JavaScript var let and const variable difference. In order to understand them we need to understand a bit of the EcmaScript 5 (ecmascript5, es5) and EcmaScript 6 (ecmascript6, es6) background info. They are all pretty simple, and basically let and const are constrained for use to the scope in which they were defined. Whereas var -- the older counterpart from EcmaScript 5 (since year 2009) will "hoist" the identifier name (but not the value) up all the way to the global scope. Self-education + Computer Literacy For next generation of teachers, artists, coders, designers, and makers of things: Learning Curve Books: http://www.learningcurvebook.net
Views: 264 JavaScript Teacher
WebGL Tutorial 2 - Shaders in 11 Minutes
 
11:32
This tutorial was based on: http://www.webgltutorials.org/loading-shaders.html New WebGL tutorial in the series about WebGL GLSL shaders. webgl shader example webgl shader tutorial webgl shaders demo webgl glsl
Views: 6236 JavaScript Teacher
JavaScript HTML Game Development Tutorial 5 - First Realtime Editable 2D RPG Tilemap World
 
19:29
Download source code for tutorial series here: http://www.tigrisgames.com/src JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (gamedev tutorial channel). In this tutorial we determine the main game loop for our little RPG engine (without enchant js) and learn how to render the tilemap world manually, by entering 0 for water and 1 for brick wall on a small 10 by 10 game world, stored in a JavaScript array. At the end of the tutorial you will learn the basics of how to make simple but yet, real-time tilemap, on HTML5 JavaScript canvas display. We will use the JavaScript setInterval function which fires a game frame event at a designated time delay over and over again. NES (Nintendo) games that use similar RPG game engine tech are final fantasy, ff, zelda, ultima, chaos world. If you like my tutorials please support my next video tutorial at http://www.patreon.com/devt --
Views: 15511 JavaScript Teacher
React JS Tutorial 2 - Creating React.js Elements, ReactDOM.render & Using JSX instead of ReactJS
 
06:12
React.js Tutorial Site: www.reactjstutorial.net Free Premium-quality Course-like React.js tutorials ReactElement is the building block of a React.js application. In this simple tutorial we'll explore the very basics of reactJS. ReactDOM and render method explained. Converting between ReactElement and JSX "HTML in JavaScript" statements. Keywords that I hope will help with traffic React js Tutorial for beginners 1 2 3 4 5 6 react elements react element tutorial functional element javascript react constructor return value jsx react js tutorial advanced react js tutorial ninja react js tutorial app reactjs tutorial 2017 react js tutorial 2017 react js tutorial youtube react js tutorial es6 reactjs flux tutorial react tutorial 2016 react tutorial 2017 react tutorial with webpack react tutorial playlist reactjs video tutorial react js tutorial ajax react js tutorial tamil react js tutorial español react js tutorial examples
Views: 2098 JavaScript Teacher
JavaScript HTML Game Development Tutorial 4 - Tile Map Game Engine for RPG or 2D Platformer
 
14:24
Download source code for tutorial series here: http://www.tigrisgames.com/src Starting a new JavaScript HTML5 2D tile map game engine (The first step in trying to find out how to make a game like Terraria, for example) is what this gamedev tutorial is all about. This is the first tutorial in the series that determines a basic framework for creating a JavaScript game engine with tile-based game levels. This basically means that we have to think in terms of components, which are separate JavaScript files, for canvas, tiles, game world, keyboard controls, etc. The HTML tile map game engine code from this tutorial will be reused in future editions of my tutorials. By the end of this tutorial you will learn how to draw tile sprites on JavaScript canvas and learn a few game development (gamedev) tricks along the way, including drawing randomized tiles. HTML game engine programming should be fun, but because it really is a technical process (when no game maker software is used), and for this reason I tried to keep the tutorial as dense as possible. Games that use 2D tile-based worlds are Blades of Exile, Zelda, StarBound, Final Fantasy and many other RPG and adventure games. [Russian/на русском языке] Как сделать игру на JavaScript? Этот урок программирования объяснит создание игры на JavaScript с нуля. Спрайт, анимация главного героя, РПГ, платформер движёк и графика и всё иное будет в этом туториал е объяснятся. Support my work on Patreon: https://www.patreon.com/tigrisgames JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (gamedev tutorial channel).
Views: 17479 JavaScript Teacher
JavaScript HTML Game Development Tutorial 8 - JavaScript Keyboard Controls (using jQuery events)
 
41:41
Download source code for tutorial series here: http://www.tigrisgames.com/src JavaScript keyboard events tutorial for HTML5 canvas-based video games is the tutorial 8 in the gamedev series. First we cover ASCII key codes and then we go deep into the forest of keypress (keyup and keydown) events using jQuery and JavaScript keyboard event keyCode property. This can be also achieved using regular JavaScript's addEventListener functions. It's up to you. JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (indiedev tutorial channel). This may be a little tedious, but it's a necessary step before we dive into actual game development. Everyone should know how to control game characters with the keyboard anyways! ASCII codes for arrow keys on the keyboard, as well as W S A D (wsad) controls are explained. There is room for adding your own. Once we got this behind us, we'll be ready to control just about any game character using the keyboard in any future games we'll be working on .
Views: 14648 JavaScript Teacher
JavaScript Tutorial 9 - Writing Responsive JavaScript Code
 
39:03
Learn the core principles behind writing JavaScript code that makes your web page responsive. Instead of using WordPress templates for your clients, you can get more control by learning how to write your own responsive webpage code.
Views: 3953 JavaScript Teacher
JavaScript HTML Game Development Tutorial 7 - Canvas Sprite Animation [js]
 
28:39
Download source code for tutorial series here: http://www.tigrisgames.com/src Sprite Animation Using JavaScript. JavaScript Canvas sprite animation tutorial covering spritesheet (also known as sprite atlas) based in-game character animation. We will be animating a dog (canine) sprite using principles learned from previous tutorials. I suppose this animation technique works well for 2D RPG and platform based engines. A very simple JavaScript animation function is used here to accomplish the task. Why use game maker or unity when you can program it from scratch in just a few minutes? :) Please support me on Patreon! -- It matters... to me, and to you, and to everyone who wants more super informative #gamedev tutorials;) https://www.patreon.com/devt?ty=h Keywords: sprite animation javascript, game engine tutorial, js, rpg engine, sprite sheets, sprite map. JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (#indiedev #gamedev tutorial channel).
Views: 29673 JavaScript Teacher
JavaScript Game Mouse Controls | Screen Coordinates | JavaScript Mouse Position | Events | Canvas
 
06:44
How to find mouse screen coordinates in javascript, game mouse controls, x and y position of mouse pointer on canvas, javascript mouse position without event, javascript mouse coordinates without event, javascript mouse position canvas (in element), javascript mouse position coordinates.javascript mouse x y coordinates, javascript get x y coordinates of mouse click JavaScript game engines need mouse controls. But not only that, mouse controls will be essential for working on the future collision detection algorithms, because physics engines usually need a way to visualize the line data. By attaching mouse coordinates to our collision detection tests, we can visualize what's actually happening, in order to understand it!
Views: 4259 JavaScript Teacher
JavaScript HTML Game Development Tutorial 15 - Collision Detection Part 4 - Vector Library
 
10:48
Did you know that vectors can be added, subtracted and multiplied just like real numbers? Vector libraries are must-haves for crafting collision detection algorithms. They consist of several basic vector operations, such as addition, subtraction, multiplication, dot product and cross product. In this tutorial we will construct a JavaScript vector library that will be used throughout the tutorial series. This will be our new component that we will add to the main game engine that has been in development during all this time. Download source code for this tutorial: http://www.tigrisgames.com/src Size: 49kb Desc: JavaScript game engine Filename: Tig-jsGE-v0.1b-05-25-2016-src.zip If you want to help the series, please make a donation! http://www.tigrisgames.com/donate Become a Patreon: http://www.patreon.com/devt Tigris Games on Facebook http://www.facebook.com/tigrisgames Join the cloud-hosted game development Skype group chat https://join.skype.com/uS7Ul6G2XCe9 (Meet other game developers, share your WIP work, screenshots etc.)
Views: 2311 JavaScript Teacher
PHP Array Tutorial
 
20:28
I only noticed this after recording, when a previously undefined const name value (tree) is used as an array value, PHP will generate a Notice error warning, saying the const name doesn't exist. However, it will still insert it as a value into the array by converting the const name into a string "tree". This PHP array tutorial for beginners, demonstrates creation of PHP arrays in several different ways from scratch. The array keyword is used to create value and index-based arrays. Array key and value dynamics are examined. There is a short bit at the end about distinction between numeric and string values in PHP arrays and PHP variables in general.
Views: 4995 JavaScript Teacher
Check Point in Rectangle Collision Intersection Test | Same algorithm in Java, JavaScript, C#, C++
 
14:07
Point rectangle collision test, check point in rectangle, point rectangle intersection, test point inside rectangle, point inside polygon, point inside rectangle formula, matlab, python, ios. Collision between a single point and an arbitrary rectangle. Point inside polygon (given that the polygon is a 4-sided square or a rectangle.) In this tutorial, JavaScript HTML5 canvas is used for rendering the results. Here, we're going to add the rectangle component to the already-existing Tig 2D game engine for mobile phones, written in JavaScript. Related Keywords to this video tutorial: point in rectangle algorithm, point in rectangle java, point in rectangle javascript, geometry point in a rectangle java, point in rectangle game maker
Views: 5415 JavaScript Teacher
WebGL Tutorial 1 - How To Initialize WebGL in 11 Minutes
 
11:32
My WebGL site for more: http://www.webgltutorials.org how to create a webgl application webgl html5 webgl tutorial for beginners webgl tutorial 3d webgl tutorial youtube webgl tutorial video webgl tutorial 2017 This WebGL tutorial's source code available for download is here: http://www.tigrisgames.com/webgl/1 Rats! WebGL hit a snag solution: https://www.youtube.com/watch?v=9L6BZNz3x9o WebGL Tutorial For Beginners [Lesson 1] This tutorial started as a write up titled "WebGL Lesson 1 - Cross-Browser Initialization of WebGL And Setting Up A Blank Window;" Then I converted it into this video tutorial. You see here. It's definitely not a full blown webgl game tutorial, only a first step for setting up your webgl pipeline. No webgl shaders here, Unity or terrain rendering either. But all it is, it's just a webgl demo. In this WebGL tutorial you will learn how to set up OpenGL in HTML5 within canvas tag (how to enable WebGL, how to install WebGL). Even though only setting up a blank drawing area will be explained, important WebGL initialization principles will be covered using the JavaScript (js) language. And then source code will be provided with a browser demo. I use Google Chrome for all of my examples. Note: To check if your browser supports WebGL, visit http://get.webgl.org/ First, let’s define a basic HTML canvas area. At this point the code has nothing to do with WebGL itself. It’s simply an HTML5 tag: Initializing WebGL in your browser using JavaScript First, let’s grab an object handle to the canvas tag: // Get a handle to canvas var canvas = document.getElementById("gl"); Now, let’s write some JavaScript code that will initialize WebGL. This is done by creating a JavaScript object of aforementioned type WebGLRenderingContext. However, there is no direct way of creating this object using a constructor function, like with the standard JavaScript objects. Instead, we have to use one of the following functions on the canvas object: var gl = canvas.getContext(“webgl”); // or… var gl = canvas.getContext(“experimental-webgl”); // Alternative, if webgl is not available There are even more ways to identify a context in different browsers. For example using the literal string moz-webg instead of webgl, we can check for Mozilla’s (Firefox) implementation. And webkit-3d will try to grab GL context from a Webkit based browser. Our final initialization source code will check for these too. I’m just trying to keep things simple for now. Please take a look at the __proto__(or prototype, in browsers where available) object property attached to the WenGL context object gl in its initialized state, by expanding the small arrow in Google Chrome console, after running the WebGL initialization code below. This prototype property contains all initialized OpenGL properties, as well as all available OpenGL functions we can call to create our 3D graphics. WebGL and OpenGL Extensions Before we move on to implementing a robust cross-browser WebGL initialization function, let’s briefly talk about OpenGL Extensions. In order to grab a list of supported extensions we can use getSupportedExtensions command. This function is attached to the WebGL context object and it is called as follows: gl_context.getSupportedExtensions(); Note that in the example source code below our WebGL context object is simply called gl. Clearing the Screen With a Solid Color Once the WebGL context object is initialized and stored in gl variable, the following commands are issued as a minimum requirement for clearing the screen with a solid color. In this case we simply chose black (r=0,g=0,b=0). And value of 1.0 for alpha. *** SOURCE CODE LINK WILL APPEAR HERE SHORTLY *** And there we have it. We have just initialized WebGL in most modern browsers, set the viewport to 640x480 and cleared it out with solid black color.
Views: 31355 JavaScript Teacher
JavaScript HTML Game Development Tutorial 10 - Adaptive Character Animation & Keyboard Controls
 
32:51
Download source code here: www.tigrisgames.com/src This is the culmination of keyboard and character animation series. From this point on you can easily expand the source code to start making your own RPG game. The number of things that can be improved can't be counted, but I will try to cover it in my next tutorials, which do take time to write. Collision detection would be one example. Once you get that done, you open doors to being able to make a multitude of various games, endless runner for example or other platformers. And finally, this was... JavaScript game engine tutorial series by Dev Tigris (#indiedev #gamedev tutorial channel). 8-directional keyboard and sprite animation for more realistic character movement and controls. Keyup, keydown events covered.
Views: 8661 JavaScript Teacher
JavaScript HTML Game Development Tutorial 3 - Tile Map Theory for RPG games like Zelda
 
20:02
Download source code for tutorial series here: http://www.tigrisgames.com/src For my game dev updates visit: https://www.facebook.com/tigrisgames The theory behind building a JavaScript HTML5 tiled map game world summarized in 20 minutes. This is one of the first tutorials in the tile map tutorial / game world creation series where we continue progressing our game engine! Materials from the tutorial: JavaScript Fiddle source code for sprite rendering, in preparation for tile map engine development from scratch, containing all JavaScript canvas sprite rendering functions (rotate, stretch, tile, etc.) http://jsfiddle.net/dzuwLr8t/43/ This tutorial is only a starting point for beginner JavaScript game engine developers. That is, if you are interested in a 2D tile map engine, don't want to use game maker software, but don't know where to start, but still want to make games like Zelda or Mario. I am not against game maker software such as unity, construct 2, gamemaker studio, unreal engine, clickteam fusion, stencyl, playcanvas and craftstudio, etc. I think they are good game makers. For this series, however, for some reason I decided to focus on straight JavaScript approach, just to demonstrate basic 2D tilemap gamedev principles. Next tutorial will cover implementation using the JavaScript (js)and canvas. So there, we are going to actually start writing the tile map code! Please support TigrisGames, the tile map game tech. described in these tutorials will be used in one way or another in my games! http://www.tigrisgames.com Support my work on Patreon: https://www.patreon.com/tigrisgames JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (gamedev tutorial channel).
Views: 20953 JavaScript Teacher
2D AABB Collision Detection in JavaScript | Rectangle AABB Test | Axis-Aligned Bounding Box
 
09:18
So this is the proverbial AABB collision detection test in JavaScript. Rectangles and squares can be tested against each other using this test. We just need to find out if two rects being tested for overlap in this collision detection tutorial that demonstrates 2D AABB (axis-aligned bounding box) test... and the basic math behind it. AABB x AABB tree is not part of this tutorial, but it's something I'm planning in the near future.. In a real world-scenario, AABB bounding box is usually first calculated from a more complex polygon. But this will be covered later in the tutorial series, when we get to physics engine development. Let's AABB pick up the pieces one by one in this tutorial. Collision between two rectangles involves writing some of the simplest algorithms you can possibly come across, and shouldn't take more than 5 minutes of your time to construct.
Views: 6387 JavaScript Teacher
JavaScript HTML Game Development Tutorial 9 - Multiple Spritesheet Animation
 
53:41
Download source code for tutorial series here: http://www.tigrisgames.com/src JavaScript game engine aka HTML5 game engine tutorial series by Dev Tigris (#indiedev #gamedev tutorial channel). This tutorial covers creating single sprite sheet object to be used by multiple or the same instance of the Sprite object. This provides tremendous flexibility. In order to accomplish that we will overload our JavaScript drawing function called "draw" from previous tutorial, which will enable us to call it using different types of parameters. This tutorial adds two new JavaScript components (animation.js and controls.js) to our existing RPG game engine base code. If you have been following the series so far, you should know everything up to this point, but if not let me know by leaving a comment and I'll try to answer. This is the most elegant way I found to deploy this type of functionality. In particular, where a single sprite object can be derived directly from a spritesheet.png file, or from a separate Spritesheet (sprite sheet) object, that is already loaded up with a PNG image as well. The main Sprite object now automatically draws the distinction and calling the draw method will choose the image supplied by either the PNG file or a Spritesheet object. Of course this is all hidden away from the JavaScript interface implementation of this function, so that we simply focus on drawing sprites on the screen by using Sprite.draw(x, y) method. We'll overload this function to fake multiple definitions, similar to C++ function overloading. In order to imitate function overloading in JavaScript, we'll simply check for the type of the arguments passed. If we encounter an animation sequence passed as an array, into a special parameter called "various", then a different thread will be executed within the same function.
Views: 6649 JavaScript Teacher
Intersection Between Line and Circle | 2D Segment Collision Algorithm | Java, JavaScript, C#, C++
 
30:07
It's the same line sphere intersection algorithm for, Java, JavaScript, C#, C++ and other programming languages. The implementation for this circle and line intersection is the same. Just follow this tutorial to find out how to actually do it. In this example JavaScript and HTML Canvas are used. This test is also known as sphere line intersection, if you add an extra 3D axis, let's say Z, for example. This collision detection test is one of the most complex ones (aside from ray vs. triangle test) and will use an extra function for "projecting" a vector (vector projection formula) onto another vector. This function will be added to our game dev library, we have developed so far. This tutorial explains how to do that! Because collision test of a sphere/circle with a segment line requires basic knowledge of 90 degree trigonometry operations, dot product function will be used. This is good, because it's already part of our segment library. Projecting a perpendicular vector onto another is a very useful algorithm to have in our game development library arsenal. And finally, toward the end of this tutorial, there is a special case. We need to make sure that the edges of the lines fall within our circle. It's a secondary part of this algorithm, that needs to be solved separately.
Views: 8615 JavaScript Teacher
Learn HTML in 14 minutes - Tutorial for Beginners (From Scratch)
 
14:41
This is my step by step HTML tutorial for beginners. It is roughly based on many other HTML tutorials on YouTube. In this tutorial I will show you how to make an HTML web page from scratch by typing HTML code into a text editor such as Notepad, TextWrangler, Eclipse etc. Then simply open it in your web browser to preview the results. I've recorded it during my practice for making video tutorials. It may not be ideal but I still decided to post it here. Making a webpage in HTML is relatively simple. Open Notepad.exe on Windows, or another text editor, and type in the basic structure of an HTML (Hypertext Mark-up Language) web page. Markup languages such as HTML define a structure of something, rather than present code line by line like JavaScript, Java or C++. In this case the structure is of a website layout. HTML web page structure is determined by HTML elements, or tags. A tag simply defines an HTML element. In this tutorial you will learn the basic HTML tags such as head, title, body, h1 and p. And then later we will move on to more advanced subjects. This HTML lesson, in particular, was greatly inspired by "Learn HTML in 12 minutes", an HTML tutorial I stumbled across on YouTube. I thought the presentation was dense and accessible. Mine is probably not as great, but I thought I needed something like this on my channel, too. My hope is that this video helps someone who is probably a beginner, and just starting to learn HTML. Once we get the basics behind our back, we can move on to other tutorials with ultimate goal of one day figuring out how to make web and even mobile apps that run on Android, iPhone or iPad. "Learn CSS" is my next tutorial in the series: https://www.youtube.com/watch?v=2-QO7Dr7RfA Visit my website for even more tutorials: http://www.LearnjQuery.org
Views: 1215 JavaScript Teacher
JavaScript Tutorial 3 - Creating Constructor Objects in JavaScript
 
16:59
My apologies for quiet audio. I started this channel just a week ago and I am adjusting my recording software to optimal settings. This was a bit of a trial and error with the equipment I use. The following tutorials will correct all of this, I am just starting out. I listen to all feedback and work on improving every aspect of my online courses. This tutorial demonstrates creating constructor objects in JavaScript using a small game examples with objects Game, Player and Camera. It is more about program composition than explaining how a constructor works. Nonetheless, I think it's good to develop an awareness of the structure of your entire program.
Views: 2948 JavaScript Teacher
Point Inside Circle Collision Test
 
18:05
This tutorial explains how to draw color-filled circles (spheres) on JavaScript canvas, and then check for collision with a point. Circle and point collision are a trivial test, calculated by determining the difference between radius of a circle and the line extending from the center of the circle to the point.
Views: 1284 JavaScript Teacher
React JS Tutorial 1 - React.js for Beginners, ReactJS ES6 Node.js, NPM, Babel, Webpack 2017
 
54:48
Tutorial Site: http://www.reactjstutorial.net Check out my React.js tutorial book: I just uploaded it to Amazon: https://www.amazon.com/dp/B01N9N3I17 Keywords that I hope will help with traffic React js Tutorial for beginners 1 2 3 4 5 6 react js tutorial advanced react js tutorial ninja react js tutorial app reactjs tutorial 2017 react js tutorial 2017 react js tutorial youtube react js tutorial es6 reactjs flux tutorial react tutorial 2016 react tutorial 2017 react tutorial with webpack react tutorial playlist reactjs video tutorial react js tutorial ajax react js tutorial tamil react js tutorial español react js tutorial examples React js tutorial for beginners with EcmaScript6 (es6) is my recent web app development tutorial in the reactjs series. Here you will learn how to set up react from scratch step by step. We'll install node.js (nodejs) use npm (node package manager) command line tool to install babel, babel watch, es2015 presets, react and react-dom. (no webpack installation needed for this tutorial.) This react tutorial goes over the set up process and setting up the development environment from the command line (cmd) on a PC under Windows 7 Operating System (OS). I tried to make this tutorial as simple as possible, because I was thinking more along the lines of a tutorial for beginners Get my book React Gems at http://www.reactgems.net for more web development education goodness. --- Setting up reactive web development environment --- Okay honestly, when we did the plain vanilla HTML and JavaScript development, all we had to do was add a few files using script tags, maybe write some CSS? Just put all these files in one directory and you're good to go. But react development assumes setting up your web development environment in the way that professional web developers do. It requires basic knowledge of the command line tool in Windows. On Mac OSX you would use the Terminal to do the same. It's actually kind of fun once you figure out how the command line tools like npm work. --- All of these other dependencies! --- React depends on node.js, babel, es2015 preset, JSX preprocessor and optionally webpack. Node's npm (node package manager) is the tool used to install all of the required presets and plugins. The good news is that all you have to do is install node js from their website and you're good to go. It includes everything you need. I know this sounds like a bunch of gibberish if you've never heard of these programs and libraries before. But by following my tutorial to build your first react application you will see & quickly understand how they all work. It might take a bit of time to sink in, but this is the kind of thing professional web developers use who work at Instagram and Netflix. And I made sure that my tutorial explains in great detail and insight of how it all works. If you ever plan on pursuing a career in web development this really prepares you for that. In a way that's why Facebook is so fired up about something that to many casual JavaScript programmers looks "too complicated" to learn. But it really doesn't have to be. The most difficult thing about coming to react from basic JavaScript programming is understanding how to properly set up the development environment. And from then on it's a breeze. It's really worth going through. --- What in the world is babel & transpiling? --- Here is the thing. Chrome, Safari and Firefox are not even capable of executing JavaScript with EcmaScript 6 specification released in 2015. But this is what React is based on. So how do we deal with that? There is a command line program tool called "babel", which is part of node js installation. Babel transpiler is the tool that makes converting ES6 to ES5 possible. Developers of babel have already figured out and implemented ES6 standard. Including the import keyword that no browser supports today as of this writing. Node for windows comes as a simple .msi installer file. Just click "Next" button until it's finished and you're ready to start using it and all the packages it includes. Once instaled... simply go to cmd.exe on your Windows and install babel using node's npm tool and you're ready to start transpiling. My video tutorial explains how to do it. You may have heard of code being compiled before. But wait, what in the world is transpiling? You know how in JavaScript, your code is first compiled behind the scenes until it actually executes in the browser? This is called "just in time compilation" so this is why you never really noticed it or thought about it. And if you've never heard of JIT compiling before. What shall we say about transpiling? Transpiling is the act of converting source code of one language into another. In this particular case of EcmaScript, we will actually be transpiling ES6 back to ES5. Again, this process is detailed in my tutorial. Just watch it and you will learn how it works.
Views: 42132 JavaScript Teacher
Line Normal Vector
 
11:36
A normal vector is a line segment extending away from the original line at a 90-degree angle. The equation for normal vector of a line can be used complex trigonometry functions, but it can also be calculated by simply reversing the X and Y coordinates of a line. Normal line calculation is an essential part of a game engine collision detection library component. And with this new addition to our library, calculating perpendicular lines equations has never been easier! By finding perpendicular vectors, we are enabled to do some really interesting things as far as game development goes. For example, it can be used to determine which side a segment (or a wall in a game world) is pointing in. It is extensively used in collision detection and physics engine algorithms. Download source code for this tutorial: http://www.tigrisgames.com/src/18 Size: 47.5kb Desc: JavaScript game engine Filename: DevTigris-GamedevTutorial-16-src If you want to help the series, please make a donation! http://www.tigrisgames.com/donate Become a Patreon: http://www.patreon.com/devt Tigris Games on Facebook http://www.facebook.com/tigrisgames Join the cloud-hosted game development Skype group chat https://join.skype.com/uS7Ul6G2XCe9 (Meet other game developers, share your WIP work, screenshots etc.)
Views: 3919 JavaScript Teacher
JavaScript Tutorial 4 - JavaScript Function Object | Prototype And jQuery Extend
 
18:42
In this tutorial we're going to look at two types of objects that are similar but different in that one has prototype property, the other doesn't. Ones created using json notation {} do not have prototype property attached to them, and therefore cannot be used as object constructor functions. All functions are objects in JavaScript. But not all objects are functions. In order to create an object we can extend with our own methods, it needs to be of type Function. Function here is an object constructor (which is also a function) already created for us by JavaScript.
Views: 5131 JavaScript Teacher
JavaScript Game Development Tutorial 11 - Tig Game Engine Source Code
 
02:46
Grab your copy of Tig js game engine source: http://www.tigrisgames.com/tig_src A free JavaScript game engine that has was developed up to this point in the tutorial series.
Views: 1830 JavaScript Teacher
Making JavaScript Tetris in jsFiddle
 
01:42:15
This is the jsFiddle link to the Tetris game I completed over the weekend (Not shown in this video but it was the code I developed before starting the jsFiddle seen in this video): http://jsfiddle.net/gregsidelnikov/q72d57cy/38/ The second link to jsFiddle that's actually the code from this video. It's formatted better and I placed all global functions into the Game object. http://jsfiddle.net/gregsidelnikov/f3ew7cpd/1/ Note about this video: This is a second recording of a tutorial I tried to make about how to make Tetris in www.jsfiddle.net. The first one was 4 hours long so I tried to make this one shorter by explaining the code faster. I recorded this video as a demonstration of making Tetris in jsFiddle and if anyone who wants to learn JavaScript is watching, it can probably be somewhat insightful.
Views: 1838 JavaScript Teacher
How to Disable WebGL in Chrome Browser
 
01:37
This should be done only if nothing else works. Disabling WebGL will prevent you from viewing WebGL content in your browser. But if you don't mind for it, and just want to get rid of the errors, or simply want to disable webgl for whatever reason, then this video might help. This video shows how to disable WebGL completely. This could potentially solve some of the errors you've been getting on your Windows 7, 8, and Windows 10. Just change the Chrome properties Target address by adding "--disable-webgl" (notice, it's two leading dashes, not just one.) WebGL problem on Windows 10 in Chrome. Not just "Rats! WebGL has hit a snag" but also screen going blank and following errors: "Application chrome.exe has been blocked from accessing Graphics hardware” and "Display driver nvlddmkm stopped responding and has successfully recovered.” To fix: Disable WebGL -- and not all GPU-assist, i.e. via the blanket uncheck of "Use hardware acceleration when available” Disabling just WebGL -- has seemingly made those problems stop. I did this by the --disable-webgl command line switch. Right-click on the icon you use to start Chrome and select Properties, then under "Target:" scroll to the end of the line and append: --disable-webgl Now under chrome://gpu you should only see "WebGL: Disabled" and not everything else Make sure to re-check "Use hardware acceleration” This may not help everyone, but seems to have worked in my case.
Views: 11616 JavaScript Teacher
HTML how to change text color [tutorial]
 
03:03
A pretty simple tutorial about changing text color in HTML using notepad editor. How to change colour of text in html. You can find out hexadecimal codes using an online color picker tool, or simply use predefined named colors like "black", "red", "blue", etc
Views: 4890 JavaScript Teacher
Cross and dot product of vectors explained in 2 minutes
 
01:41
I intentionally won't cover the math or trigonometry behind dot and cross product's derivations. Here I just wanted to focus on the why's of two most common techniques. It's possible to understand the math behind cross and dot product, but never actually see the essence of why they are used in game development. And so I wanted to explain the two most commonly used principles that are useful for collision detection and game development in general, and the actual formulas will be provided in the following tutorials.
Views: 5312 JavaScript Teacher
Intersection of a Circle and a Circle | Circle Circle collision  | Java, JavaScript, C#, C++
 
04:54
This is a circle circle intersection or collision detection test. It's the same exact algorithm that will work in JavaScript canvas (as in this tutorial example) as well as C++, C#, Java, Python and pretty much every other programming language that can do math. Just watch this tutorial to find out how to do it. Sphere vs sphere collision test is one of the most common collision detection activities going on in a 3D game engine, however in this tutorial we are only dealing with 2D shapes. To expand and make this a 3D algorithm, you would have to add an extra axis (Z), with exactly the same calculation tests as on the other two (X and Y).
Views: 4014 JavaScript Teacher
JavaScript Tutorial 2 - How JavaScript Constructor Functions Work
 
10:22
This is an example of how JavaScript function constructors work together with main Object. A few words about prototype property.
Views: 2934 JavaScript Teacher
How to Find Point of Intersection Between Two Lines | Segment Intersection Algorithm | Collision
 
11:01
How to find point of intersection between two lines, Intersection between two lines (java, javascript, c++, c#, python, matlab) In this tutorial, this is the line segment intersection algorithm with JavaScript Canvas explanation In my experience as a game developer for over two years, line intersection has been one of the most significant game engine assets. This is true for 2D as well as 3D games. That is, for those who prefer writing their own game engines from scratch. I created this new line segment intersection tutorial that integrates line intersection algorithm function into an existing Segment library in my JavaScript game engine. I just wanted to share my new tutorial with the community, and hope someone finds it useful.
Views: 7871 JavaScript Teacher
React JS Tutorial 3 - React.js Components with JSX
 
05:06
React Tutorials: www.reactjstutorial.net Reactjs Components Example Reactjs Create Component Learn basics of React Components in this ReactJS tutorial. We'll go over creating stateless functional components using JavaScript constructor function: the most basic way of creating a React component. Babel / JSX automatically transpile HTML tags into native JavaScript code. reactjs component guide. Keywords that I hope will help with traffic reactjs component javascript react js components tutorial react.js components part 1 react components jsx react components library react components in aem React js Tutorial for beginners 1 2 3 4 5 6 7 8 9 10 react component tutorial react components tutorial react jsx tutorial reactjs component lifecycle reactjs component lifecycle methods functional component javascript react constructor return value jsx react js tutorial advanced react js tutorial ninja react js tutorial app reactjs tutorial 2017 react js tutorial 2017 react js tutorial youtube react js tutorial es6 reactjs flux tutorial react tutorial 2016 react tutorial 2017 react tutorial with webpack react tutorial playlist reactjs video tutorial react js tutorial ajax react js tutorial tamil react js tutorial español react js tutorial examples
Views: 1258 JavaScript Teacher
JavaScript Tutorial 8 - Accessing Function Properties From Within Function Body
 
07:07
JavaScript gives us access to pre-existing properties of a function from within its own body. This can be useful for enumerating arguments without having to refer to them by their parameter names. It is also possible to store the function name in a variable of type String. One of my newsletter tutorial subscribers, Mike Ridgway ([email protected]) has written software that translates audio to text. He ran his script on my tutorial video and came up with the following: http://www.mikeridgway.com/ace/vstable/start.php?id=uXkPU9EanT0 The script translated the entire tutorial into the text you are seeing below. I thought it was very interesting. And perhaps if this helps my tutorial be found on YouTube search, I am adding this transcript here. It has a few very unimportant grammatical errors, but other than that it is impressively accurate: Hey guys. So I've been trying to find a good subject to write tutorials about and I found out that it's possible to access function name and a bunch of properties from inside the function without having to define?? anything else. I'll demonstrate this We'll need a parent function in order for all of this to work So let's say we'll define this function later show_properties. And later on, we'll just keep calling it. parent. So we're going to call this function. And now we have to define show_properties with parameters a, b, c. So inside this function, what I want to demonstrate is that it's possible to access all kinds of things. For example, inside this function, Javascript already has an object called arguments. So, inside this argument, we can actually find the name of the argument that's being called. So it's going to be this. In order to access that, there's an argument property, callee, and it has a name. So function_name is callee.name me This is going to be equal to properties which is so this variable name here it's going to be equal this because it's the functions name that's being called. So that's a really cool way to access the function that's being called – the function's name Another thing is func_leng it's insde arguments So this will output 3 because we have three arguments passed, hopefully to this function. In other words, there are three parameters of this function defined. Had it been a, b, c, d, e, this would have been five. So another interesting value you can access. What is the name of the function that called this function? In other words, where is this function being called from? And you can access that by show_properties, type in the function's name, and it has a caller attached to it and name. So, because this one is called from parent, this is obviously all we're going to get. Now let's add something here. We have five parameters here Let's say somebody passed 1, 2, 3 into this function. And this one, func_arit, there used to be a property called arity – and it's no longer used so, it's actually stored inside the function property's length itself. That's argument length. That's how many we have defined. But probably, it's show_properties.length will return 3, If we had passed two arguments, it would have returned two So how do we go through each argument and figure out what it is without having to access them by their names, by a b c d e? We can write code to access them with a for loop i less than arguments.length. So this for the full value to go through each argument that was passed without accessing it by name. Sometimes, it's very useful when you don't really know what the names are. Or it's the kind of a function that takes an arbitrary number of parameters. And you don't know that it's passed until it is. So inside this loop the name of the argument, the value of the argument will be arguments[i] that's stored in the this array. So we'll get just one and two from here. So they will be in disarray. These values are stored here. So I guess you can access them with a and b. But they will also be enumerated in the arguments are ready. And finally, if you want to output the actual body of the entire function, you want to output this in a string format, you can create another variable and specify it's an arguments.callee again, toString. So this will translate this function that's being called into a string. here returned as the string representing presentation of this entire function. So it will be this entire thing, including the function's key word, the function's name in parameters so it's probably not used a lot. But if you're writing code that needs to know these things, it's really useful. So you don't have to ask these things. they will be available through all of these Well I hope you found this tutorial useful. And I'll see you next time. Thanks.
Views: 651 JavaScript Teacher
GPS Signal Not Found Pokemon Go iPhone 6 Fix
 
00:51
Hey guys, here's how you fix gps signal not found pokemon go ios & iphone 5 or 6 problem (failed to detect location fix) in this case I'm using my iphone 6, but should also work on ipad, gps signal not found pokemon go ipad | gps signal not found pokemon go ipod | gps signal not found pokemon go apple | pokemon go gps hack | Pokemon Go GPS signal not found iphone | xiaomi pokemon go signal not found fix This will not work on android & samsung. So, I'll have to make another tutorial. Let me know if you have a solution by posting it in the comments. I need other people's help because I don't have all of the devices on which this is happening. So, thanks in advance. Suggested fix for Android players, that seems to have worked for some: 1. To those running on Android and are stuck at GPS Signal Not Found at the sign in screen, make sure you've updated your Google Play services and Google Maps to the latest version. 2. If you manage to get in but are stuck in the middle of the ocean, run Google Maps at the same time as you run Pokemon Go and it should fix that.
Views: 24431 JavaScript Teacher
JavaScript Tutorial 5 - Different Ways to Create Functions in JavaScript
 
14:38
There are a few different ways JavaScript allows us to create functions. Each has its own purpose. However, because all functions are objects in JavaScript, they have a unique role. A function can act as a custom object constructor. This tutorial demonstrates how all of this works.
Views: 1861 JavaScript Teacher
JavaScript Tutorial 1½ - Learning The Basics of jQuery | jsFiddle
 
05:56
And It Still Works is a JavaScript programming (code) tutorials series based on practical situations when facing the computer screen and you have to code. There is no computer terminology. Just the way it is in a realistic setting faced by programmers with all its problems and triumphs. I decided to start using jsfiddle.net because it makes demonstrating live code examples so much easier. In this tutorial we will go over the basics of jQuery the JavaScript library. I realize you can barely see the code. I am still making adjustments to the presentation style.
Views: 771 JavaScript Teacher
Copy of Collision Detection JavaScript Tutorial Part 1
 
15:59
The source code: http://www.tigrisgames.com/src This is JavaScript collision detection tutorial part 1, the intro to the free course consisting of about 10 tutorials on various collision detection cases including points and rectangles, line intersection, circle (or sphere) against lines and other circles and convex and concave polygons. In my previous tutorials, the JavaScript sprite engine was nearly completed. But, the game engine is still not capable of collision detection, an important element if you're planning on making any interesting games that go beyond chess or something where nothing collides with anything. The rest of the series will follow, but this is an introduction. I hope this helps someone out there.
Views: 590 JavaScript Teacher
jsFiddle Tetris
 
01:10
jsFiddle Tetris: http://jsfiddle.net/gregsidelnikov/q72d57cy/38/ I've already recorded a step by step tutorial explaining how everything was done but it turned into a 4 hour long video. Then I took everything that was learned and recorded another tutorial. It was shorter but I didn't finish making the game. Then I decided to make a shorter video and include a link to the jsFiddle project. This is what you're watching right now.
Views: 554 JavaScript Teacher
CSS Tutorial for Beginners - Learn How CSS Works
 
20:20
In this CSS tutorial for beginners you will learn the very basics from scratch. It's not the best CSS tutorial I have ever written / recorded, as it was created during my practice days. But I thought I would still publish it here. CSS adds style to HTML web page layout. Styling of an HTML element can be adjusted by applying different colors, font size, font type, background color, HTML element border colors and so on. In this step by step CSS tutorial for beginners, I explain the basic principles behind CSS and what "cascading" means. Let's learn how to write CSS code from scratch. You can learn CSS without knowing HTML. However, it is probably best if you learn it within the context of HTML. For this reason, some basic HTML background from my previous tutorial is required. Don't know HTML? No problem Get up to speed with HTML in my previous tutorial "Learn HTML in 14 minutes": https://www.youtube.com/watch?v=JH73-wRs2aw
Views: 1262 JavaScript Teacher