by Aarthi Elumalai | Released February 2019 | ISBN: 9781838644772

Artificial intelligence & Javascript 2D Game Development - MinMax algorithm - "Computer vs You" Tic Tac Toe AI gameAbout This VideoDelve more into theories and implementation by learning what MiniMax algorithm is, and how to implement it,Apply your new found knowledge to create a fully functional Artificial intelligence that can play a Tic Tac Toe game against expert human players.All the while learning, and becoming proficient in Javascript, HTML5 canvas, HTML5, CSS3, front end web development and 2D game development.In DetailThe author made this course as easy to understand as possible. The author structured it in such a way that each section will handle one major part of the course. Introduction: This is where we'll explain how the game works, it's various features and what we'll be using to achieve the same results. Module 1: We'll explain the basics of artificial intelligence and it's various terminologies. We'll put the ground work you'll need to understand the further concepts explained in this course. Module 2: We'll explain what the MiniMax alrogithm is and how it's implemented. We'll use pictorical and graphical representation to explain the concept with 2 detailed examples. We'll also explain the Pseudocode of the algorithm. Module 3: We'll explain how the MiniMax algorithm can be implemented in creating an artificial intelligence based player (computer player) for a Tic Tac Toe game. We'll explain the concept with another pictorial representation of the entire process. Module 4: We'll delve into Javascript and HTML5 canvas concepts that are related to the project we'll be creating. Module 5: We'll be teaching you how to create the bare bones of the app with HTML5. The result will be a page with all the elements we need in our game, devoid any colors or design elements. After that, we'll "beautify" our app. We'll be using CSS elements to give our game colors and styles. At the end of this module, we'll have a Tic Tac Toe web game that'll look like the final result, albeit one that is not playable yet. Module 6: We'll introduce a step by step algorithm that explains what we'll be doing while creating the Javascript part of our code.Module 7: We'll be delving into Javascript & HTML5 canvas code of our game in this module, and we'll teach you how to make the game playable (let the user draw on the canvas and display the game results) in here. In this part, we'll create the necessary code to make the human player play the game on the app. Module 8: This would be the meat of the course. In this module, we'll be applying the MiniMax algorithm with relevant Javascript code to create an artificial intelligence that can play against the human player (the web user). All the code files are placed at https://github.com/PacktPublishing/Artificial-intelligence-in-Game-development---Tic-Tac-Toe-AIDownloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you. Show and hide more

1. Chapter 1 : Introduction
   • Introduction 00:05:26
2. Chapter 2 : Artificial intelligence basic terms explanation
   • Artificial intelligence - an introduction 00:03:18
   • What is an AI & on intelligence 00:04:08
   • Intelligent agents 00:06:05
   • Driving problem 00:03:35
   • Floor cleaning problem 00:05:44
   • Types of environment 00:03:41
   • Types of environment part 2 00:10:22
3. Chapter 3 : MiniMax algorithm explanation + Pseudocode
   • What is MiniMax? 00:04:23
   • Technicalities & MiniMax tree 00:06:29
   • MiniMax number game 00:04:35
   • MiniMax number game part 2 00:06:50
   • Win, lose, draw example 00:04:51
   • Win, lose, draw example part 2 00:09:11
   • Win, lose, draw example part 3 00:03:59
   • Technicalities & Terms used in the algorithm 00:06:22
   • MiniMax Pseudocode 00:10:25
4. Chapter 4 : MiniMax for Tic Tac Toe - Explanation + Pseudocode
   • MiniMax algorithm for the Tic Tac Toe game 00:05:54
   • MiniMax algorithm for the Tic Tac Toe game part 2 00:03:58
5. Chapter 5 : HTML and CSS code with explanation for the game
   • Create skeleton of the HTML5 code 00:07:25
   • Meta tags of the HTML5 code 00:06:24
   • Create the header and the result heading 00:05:38
   • Create the game and rule sections' skeletons 00:04:32
   • Create the game canvases and new game button 00:06:09
   • Create the rules section's paragraphs and heading 00:03:06
   • Connect HTML and CSS files 00:03:38
   • Set background and more on colors 00:05:36
   • Set default styles and style the header 00:04:31
   • Style the headings 00:05:15
   • Style the canvases 00:03:15
   • Style the entire game area 00:07:44
   • Style the Divs that hold the canvases and rules area 00:06:26
   • Style the paragraphs and <h2> headings 00:02:05
   • Style the New Game button 00:05:40
   • Create hover effects on the canvases and new game button 00:05:35
   • Design enhancements to the game part 1 00:05:41
   • Design enhancements to the game part 2 00:04:32
   • Design enhancements to the game part 3 00:10:46
6. Chapter 6 : [OPTIONAL] JavaScript & HTML5 Canvas Basic Concepts (related to this project)
   • Connecting HTML and script/JS files 00:06:04
   • An introduction to variables and assigning values 00:09:59
   • Mathematical operators and alerts 00:09:52
   • Conditional statements - if else statement 00:06:13
   • Conditional statements - Switch case 00:07:12
   • Loops - For loop 00:06:31
   • Arrays - 1 dimensional arrays 00:06:37
   • Arrays - 2 dimensional arrays 00:05:08
   • An introduction to functions (function definition and calls) 00:10:42
   • Intro to DOM - getElementById and InnerText 00:10:48
   • Intro to DOM - adding click events to buttons 00:09:06
   • JavaScript Objects part 1 00:09:58
   • JavaScript Objects part 2 00:05:07
   • JavaScript Objects part 3 00:05:07
   • Step 1 & 2 - Getting the canvas and creating the drawing object 00:08:27
   • Drawing a line (also explanation on canvas dimensions and pixel points) 00:08:50
   • Drawing & coloring a shape with poly lines (a path) 00:09:12
   • Drawing & coloring a circle and arcs 00:09:18
7. Chapter 7 : Step by step algorithm for the JavaScript code
   • Step by step algorithm for the JavaScript code part 1 00:05:59
   • Step by step algorithm for the JavaScript code part 2 00:04:05
8. Chapter 8 : Coding the Tic Tac Toe AI in JavaScript
   • Window onload function 00:04:53
   • Initial states 00:06:58
   • Initial states part 2 00:05:29
   • Initial states part 3 00:03:21
   • Making the new game button work 00:04:53
   • Canvas click event + retrieving the clicked box's number 00:06:54
   • Drawing the X 00:07:25
   • Drawing the O 00:06:15
   • Winner check function 00:12:19
   • Box click function - code to let the human player play 00:07:17
   • Box click function - code to let the human player play part 2 00:06:50
   • Box click function - code to let the human player play part 3 00:10:45
9. Chapter 9 : MiniMax algorithm in JavaScript
   • Finding the empty boxes 00:10:41
   • Making the AI play 00:09:37
   • Making the AI play part 2 00:10:32
   • Applying the MiniMax algorithm 00:07:13
   • Applying the MiniMax algorithm - terminal tests 00:12:07
   • Applying the MiniMax algorithm - recurring conditions 00:12:07
   • Applying the MiniMax algorithm - recurring conditions part 2 00:17:18
   • Applying the MiniMax algorithm - working out an example 00:08:14
   • Applying the MiniMax algorithm - calculate scores of intermediate states 00:14:09
   • Applying the MiniMax algorithm - calculate scores of intermediate states part 2 00:16:09
   • Analyzing the final output 00:06:07
Show and hide more