How to Program Games Tile Classics in JS for HTML5 Canvas

seeders: 4

leechers: 8

Download torrent

Added on March 30, 2016 by nex_xenin Other > Tutorials
Torrent verified.

Main
Comments

add to bookmarks

How to Program Games Tile Classics in JS for HTML5 Canvas (Size: 2.7 GB)

		000 Introduction to Your Course and Instructor.mp4	90.23 MB
		001 Section 1 Review.html	13.87 KB
		001 Section Introduction.mp4	7.08 MB
		002 Create the HTML File.mp4	5.63 MB
		003 Proper HTML Header.mp4	13.75 MB
		004 JavaScript in HTML with Console Use.mp4	6.72 MB
		005 HTML5 Canvas with Setup Function.mp4	10.61 MB
		006 Draw Filled Rectangle and Circle.mp4	14.25 MB
		007 Variable and Timed Updates for Motion.mp4	15.26 MB
		008 Modify Speed, Also for Vertical Motion.mp4	18.33 MB
		009 Reason for a Big Rectangle Each Frame.mp4	12.05 MB
		001 Section 2 Review.html	8.5 KB
		001 Section Introduction.mp4	6.82 MB
		002 Display Mouse Coordinate by Cursor.mp4	30.11 MB
		003 Set Up and Display the First Brick.mp4	14.83 MB
		004 Draw Multiple Bricks with Gaps.mp4	15.95 MB
		005 Vanish Individual Bricks.mp4	17.46 MB
		006 Renumber Bricks to Start at Zero.mp4	17.36 MB
		007 Using an Array for Bricks.mp4	24.66 MB
		008 How For Can Loop on the Brick Array.mp4	30.02 MB
		009 Clearing Isolated Bricks in the Array.mp4	12.53 MB
		010 Label Deeply Stacked Closing Braces.mp4	10.09 MB
		001 Section 3 Review.html	7.67 KB
		001 Section Introduction.mp4	5.82 MB
		002 Display Tile Coordinate Near Mouse.mp4	29.1 MB
		003 Supporting Multiple Brick Rows.mp4	25.71 MB
		004 Changing Brick Count to Columns.mp4	10.74 MB
		005 Support Removal of Each Brick Position.mp4	43.31 MB
		006 Make More Bricks, and Smaller.mp4	17.17 MB
		007 Compute Index From Row and Column.mp4	20.42 MB
		008 Remove Bricks Under Mouse.mp4	19.45 MB
		009 Remove Bricks Where the Ball Goes.mp4	14.56 MB
		001 Section 4 Review.html	8.23 KB
		001 Section Introduction.mp4	5.99 MB
		002 Cutting Ball Code Into Functions.mp4	8.17 MB
		003 Understanding the Ball-Brick Side Test.mp4	33.94 MB
		004 Get the Ball Bouncing Off Brick Sides.mp4	30.27 MB
		005 Add Cheat to Reposition the Ball.mp4	12.97 MB
		006 Fix the Covered-Edge-Corner Case.mp4	60.01 MB
		001 Section 5 Review.html	8.72 KB
		001 Section Introduction.mp4	2.2 MB
		002 Keep Count of Bricks Remaining.mp4	18.58 MB
		003 Start with Empty Gutter at Top.mp4	20.07 MB
		004 Reset Ball at Start, Bricks After Last Hit.mp4	14.25 MB
		005 Reset Bricks When Player Misses Ball.mp4	8.75 MB
		006 Fix Bug with Hitting Bottom Bricks.mp4	31.91 MB
		007 Testing to Look for Remaining Bugs.mp4	5.95 MB
		008 Fixing the Ball-Stuck-Along-Edge Bug.mp4	19.63 MB
		009 Play Testing to Look for Bugs Again.mp4	11.96 MB
		001 Section 6 Review.html	8.15 KB
		001 Section Introduction.mp4	4.17 MB
		002 Now Lets Tear This Up.mp4	6.13 MB
		003 Remove the Paddle.mp4	8.23 MB
		004 Rename Brick in the Code to Track.mp4	13.02 MB
		005 Stretch Tile Grid to Cover the Canvas.mp4	10.92 MB
		006 Design a Grid Layout by Hand.mp4	41.72 MB
		007 Quick Example of Grid Map Design.mp4	12.17 MB
		008 Fill in a Basic Track Layout.mp4	22.4 MB
		009 Set Ball Start Location in the Array.mp4	33.67 MB
		001 Section 7 Review.html	9.58 KB
		001 Section Introduction.mp4	9.84 MB
		002 How to Create the Car Image.mp4	26.03 MB
		003 Turning on Headlights and Taillights.mp4	21.21 MB
		004 Import and Display the Car Image.mp4	30.15 MB
		001 Section 8 Review.html	8.51 KB
		001 Section Introduction.mp4	4.82 MB
		002 Replace Ball in Code with Car.mp4	11.47 MB
		003 Spin the Car Image.mp4	21.87 MB
		004 Drive the Car the Way It Faces.mp4	11.27 MB
		005 Use of Sine and Cosine for Games.mp4	9.83 MB
		006 Understanding Why We Use Sin Cos.mp4	6.18 MB
		007 Clean Away Outdated Ball Code.mp4	10.7 MB
		001 Section 9 Review.html	9.03 KB
		001 Section Introduction.mp4	9.92 MB
		002 Functions on Key Press and Release.mp4	12.04 MB
		003 Find the Key Code for Each Arrow Key.mp4	12.26 MB
		004 Crude Steering and Gas on Key Presses.mp4	15.42 MB
		005 Treat Keys More Like Buttons.mp4	35.89 MB
		006 Lose Speed From Driving Into Walls.mp4	8.39 MB
		007 Slow Down Over Time.mp4	11.19 MB
		008 Fix Cars Start Direction.mp4	12.79 MB
		001 Section 10 Review.html	10.41 KB
		001 Section Introduction.mp4	4.54 MB
		002 Label Car Tuning Values.mp4	12.83 MB
		003 Create Labels for Tile Types.mp4	19.84 MB
		004 JavaScript and HTML in Different Files.mp4	19.55 MB
		005 Give Common Graphics Code a File.mp4	14.36 MB
		006 Divide Code Into Files by Purpose.mp4	74.43 MB
		001 Section 11 Review.html	8.46 KB
		001 Section Introduction.mp4	5.45 MB
		002 Draw the Road Tile Image.mp4	10.46 MB
		003 Create Wall Tile Art.mp4	14.65 MB
		004 Load Your Tile Art in Code.mp4	12.6 MB
		005 Display the Tile Images.mp4	26.42 MB
		006 Stop Drawing Giant Rect Every Frame.mp4	11.07 MB
		001 Section 12 Review.html	8.91 KB
		001 Section Introduction.mp4	13.57 MB
		002 Bring Together All Image Code.mp4	18.91 MB
		003 Wait for the Last Image to Load.mp4	28.21 MB
		004 Connect OnLoad Automatically.mp4	13.96 MB
		005 Auto Count Images to Load A Bad Way.mp4	22.07 MB
		006 Auto Count Images to Load Good Way.mp4	24.69 MB
		007 Add a Basic Loading Screen.mp4	18.09 MB
		001 Section 13 Review.html	8.43 KB
		001 Section Introduction.mp4	6.12 MB
		002 Divide Project Files Into Folders.mp4	17.8 MB
		003 Create Images for New Track Tiles.mp4	41.3 MB
		004 Load New Track Images in Code.mp4	19.13 MB
		005 Put New Track Types in Level Grid.mp4	12.27 MB
		006 Get New Tile Types to Block Car.mp4	9.09 MB
		007 Show the Images for New Track Types.mp4	30.5 MB
		008 Make a Layout Using New Tiles.mp4	16.31 MB
		009 Tune Car Disallow Spinning in Place.mp4	17.7 MB
		001 Section 14 Review.html	8.64 KB
		001 Section Introduction.mp4	8.46 MB
		002 Save All Track Tile Art to an Array.mp4	40.89 MB
		003 Draw Track Tile Based on Index.mp4	19.49 MB
		004 Optimizing the Track Draw Loops.mp4	37.51 MB
		001 Section 15 Review.html	8.64 KB
		001 Section Introduction.mp4	17.97 MB
		002 Put Cars Vars and Functions in a Class.mp4	30.49 MB
		003 Update Use of Variables in the Class.mp4	10.93 MB
		004 Create Player Ones Car Instance.mp4	24.66 MB
		005 Make a Second Car for Player Two.mp4	23.36 MB
		006 Copy and Recolor Blue Car to Green.mp4	17.44 MB
		007 Import and Use the Green Car Image.mp4	21.99 MB
		008 Use Different Control Keys Per Car.mp4	79.5 MB
		001 Section 16 Review.html	8.43 KB
		001 Section Introduction.mp4	5.64 MB
		002 Decrease Time to Test the Finish Line.mp4	6.95 MB
		003 Vary Consequences by Tile Type Hit.mp4	23.74 MB
		004 Assign Each Car a Unique Name.mp4	11.33 MB
		005 Declare Winner When Goal is Reached.mp4	9.07 MB
		006 Understanding the Problem with Reset.mp4	21.41 MB
		007 Separate Active Map From Saved Layout.mp4	29.31 MB
		008 Reset When Finish Line is Reached.mp4	10.64 MB
		009 Reset Car Speed When Map Reloads.mp4	12.18 MB
		001 Section 17 Review.html	9.99 KB
		001 Section Introduction.mp4	12.57 MB
		002 Start with Racing Source Minus Player 2.mp4	7.14 MB
		003 Rename files and variables.mp4	8.51 MB
		004 Rework Drive Motion Into Walking.mp4	8.63 MB
		005 Enlarge Tiles to Bring Camera Closer.mp4	5.94 MB
		006 Replace Racing Art with Dungeon Art.mp4	8.53 MB
		007 Support Partially Transparent Tiles.mp4	12.68 MB
		008 New Layout and Code for Keys Doors.mp4	24.64 MB
		009 Adventure Core Wrap-Up.mp4	6.68 MB
		001 Section 18 Review.html	8.76 KB
		001 Section Introduction.mp4	22.23 MB
		002 Many Balls in Grid.mp4	28.56 MB
		003 Scrolling Camera.mp4	40.68 MB
		004 Side View Platform Jumper.mp4	25.87 MB
		005 Moving Grid with Collision Gaps.mp4	25.52 MB
		006 Board Game with Mouse Control.mp4	29.86 MB
		007 Course Wrap-Up.mp4	10.15 MB
		001 Full Included PDF Textbook Hands-On Intro to Game Programming.pdf	13.95 MB

Description

By taking this new course you'll program several classic game types that all incorporate 2D tile-based worlds. You'll code in JavaScript for HTML5 Canvas, so a text editor and ordinary web browser are all you need (an art program can be handy for a few sections but is not required). I've attached my code for each step so you'll never be stuck. At the end you'll learn even more ways to apply what you've learned. Also by completing the course you'll get a PDF of my complete 500-page textbook on game development: Hands-On Intro to Game Programming. The book contains over 100 exercises, a couple of more game types, and additional material with more detail about the projects.

What are the requirements?

Any plain text editor like Notepad will do, however one which supports features for programmers such as multiple file tabs, code highlighting, line numbers, and smart/auto-indentation can be handy for later phases as the code grows in length (Notepad++ is free for Windows, TextWrangler for Mac, or Sublime Text 2 which I use has a fully functional free trial for either).
Any common web browser should work fine, although I use Google Chrome (free) so you may prefer that one just to see on your side exactly how it shows up in the videos.
To follow along the few steps for drawing art you'll need a program that lets you draw and save images with transparency. I use a slightly older version of Photoshop, although free alternatives exist and the steps are similar. I also attach all art files that I create, so if you prefer to only focus on the coding steps you can download the images that I create in the videos.

What am I going to get from this course?

Over 149 lectures and 14 hours of content!
Create, display, and play with a 2D tile world that supports optimized collision (a central concept for generations of games in a variety of genres!).
Program games in JavaScript for HTML5 Canvas without using any external libraries or plug-ins.
Create, load, display, and rotate image graphics in games.
Break game code into multiple files to better manage large projects.
Define a class and use it to create multiple instances of gameplay objects in unique positions (note: only using the very basic first concept of object-oriented programming, it doesn't dive deep into that rabbit hole).
Handle mouse input for a one-player game, or keyboard controls for both one and two-player games.
Implement basic item pick-ups (keys) and trigger their usage upon collision (open doors).
Develop and adapt gameplay for basic platformer movement, digital board/strategy games, simple matrix formations for retro arcade-style enemies, and worlds larger than the screen viewed by scrolling camera.
Apply simple trigonometry calls to move game objects at arbitrary angles.
Implement basic loading screen functionality in HTML5.

What is the target audience?

Anyone who wants to learn practical skills to program their own games at home.
People who may already be familiar with programming concepts but are new to applying that knowledge to making real-time computer games.
Creators who have only ever tried drag-and-drop tools but are interested in learning more about how to make games by programming for an deeper level of control over the details.
Developers interested in getting practice with a more traditional "code only" approach to core gameplay programming before moving on to major engines and tools (which are not covered in this course) like Unity or Unreal.
People looking for a technical game design foundation based in indie-style games or classic gameplay as a starting point.
New developers who completed the free course "Code Your First Game: Arcade Classic in JavaScript on Canvas" and are looking to further build upon their game development skills in JavaScript on HTML5 Canvas.
Please note that advanced topics like object-oriented programming are only very briefly touched upon - software engineering patterns are generally outside the scope of this course.

Sharing Widget

Download torrent

2.7 GB

seeders:4

leechers:8

How to Program Games Tile Classics in JS for HTML5 Canvas

All Comments

joythegreat1

Thanks.