Games Are Smarter Than Us

Rate this content
Bookmark

JS awsomeness beyond webpages. First we'll write a cool 2D game (in Javascript) - and then - write AI code (in Javascript!) that will be able to win this game for us. Oh, what a time to be alive!

This talk has been presented at React Summit 2020, check out the latest edition of this React Conference.

FAQ

The talk 'Games Always Change' focuses on how to build a game in the browser using JavaScript and then how to teach a computer to play the game using AI.

The Canvas API is preferred over React components for game development in JavaScript because it is more performant for rendering game graphics, allowing direct drawing on the canvas without the need for animating HTML elements.

Key elements to build a game in JavaScript include creating game graphics using the Canvas API, managing game elements and their properties, implementing game logic, handling user inputs with event listeners, and running a game loop with requestAnimationFrame for continuous rendering.

Popular JavaScript game engines mentioned include Phaser, Pixy.js, and GDevelop, with BitMellow also highlighted as a simple framework that allows exporting game logic and assets.

AI can be used to play games by learning from data rather than coding explicit rules. Using techniques like reinforcement learning, AI models learn optimal actions based on rewards received from interactions within the game environment.

Reinforcement learning is a method where an AI agent learns to make decisions by performing actions in an environment and receiving rewards or penalties. It helps the AI to determine the best actions based on the state of the game and the potential outcomes of different actions.

The BitMellow engine offers tools like a tile editor, tile map editor, and sound editor. It simplifies JavaScript game development by allowing users to export the game logic and assets, and it supports easy integration with web applications.

AI is integrated by using models that observe game states, process information, and perform actions, learning from the results of these actions through rewards in a simulated environment. This approach allows AI to adapt and improve its game-playing strategy over time.

Liad Yosef
Liad Yosef
26 min
17 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The video talk explores how to build games in the browser using JavaScript and how to teach computers to play these games using AI. It highlights the use of the Canvas API for game graphics, emphasizing that it is more performant than using React components. Popular JavaScript game engines like Phaser, Pixy.js, and GDevelop are mentioned, along with BitMellow, a simple framework that offers a tile editor and sound editor for game development. BitMellow allows exporting game logic and assets for easy integration with web applications. The talk delves into reinforcement learning, where an AI agent learns from rewards and penalties to make decisions in the game. TensorFlow and TensorFlow.js are noted for enabling machine learning in JavaScript. Reinforce.js is introduced as a library that simplifies implementing reinforcement learning by defining states, actions, and rewards.

1. Introduction to Games and JavaScript

Short description:

Today we're going to talk about games and how we can use computers to play them. We'll divide this talk into two parts: building a game in the browser with JavaScript and teaching the computer to play the game. In the first part, we'll explore how to build a game and the challenges that come with it. In the second part, we'll discuss the importance of game graphics and how to use the Canvas API to draw the game graphics.

Script and JavaScript Learning Script and JavaScript Learning Script and JavaScript Learning Script and JavaScript Learning Script and JavaScript Learning Script and JavaScript Learning Script and JavaScript Learning Hi people, thank you for joining, and for those of you seeing it in the streaming afterwards, thank you for watching. Today we're going to do a little bit of a different talk, we're gonna talk a little bit about games and how we can play them and how we can use computers to play them.

So the talk title is games always change. And a little bit about myself. I'm Liad, I'm the Client Architect at Duda, and the subtitle of this talk is pixels and robots because we're going to divide this talk into two parts. The first part, we're going to see how to build a game ourselves in the browser with javascript. And the second part is how to make the game or teach the game to teach the computer to play the game for us. So the game will be smarter than us.

So the first thing, the chapter one of our journey, is the village of Borden. And why do I call it the village of Borden? Because you want to build a game, right? And in your head, you see the game, and you say, you think to yourself, okay, I'm going to build this game and I'm going to add a chat so every player can talk with each other, and I'm going to add a video chat that all of my friends can talk to each other and another video chat with the rest of my friends and another box for one of my oldest friends. And then you start to say, okay, how do you develop a game in JavaScript? And you go online and you read about JavaScript game development, and you see like a six-minute read article. It's a good article, but it's only six minutes read. And you say, okay, learn as you go, how do I build it? And you go to the other schools and you see an HTML game example with just a few boxes and it kind of feels like that, right? How to draw an owl, just draw two circles and then draw the rest of the owl. So, it doesn't really help. And then you go to the other end of the scale and you see these very long tutorials, hours and hours and hours on how to build a game, how to code a game in JavaScript. And you sit in front of your VS code, and you sit in front of your screen, your bank screen, and you kind of feel like that, right? You say, okay, I'm not going to do that. I'm not going to invest 30, 40, 50 hours of coding just to understand how to write a JavaScript game. So, you get to the peak of despair, and the peak of despair leads you straight back to Netflix. But it doesn't have to be like that.

So, let's start with our chapter two, value of pixels and see what do we need to build a game in JavaScript? So, the first thing and obviously the most important thing is the game graphics. And in JavaScript, the conferences are about React. So, you're probably going to use React components to build the game. It turns out that in JavaScript games, you don't really use React components. It's not that performant. You use an API that's called Canvas. And what does it mean? It means that you have in your head the drawing of how you want to build the game, how the map looks like, and how do you want the game to look, and how do you want the character to look. And you have this thing in your head. But what you really need is to draw a canvas, to draw a canvas in the body, and then you have an API for the canvas that allows you to draw on it as if you were the browser. So, instead of putting elements and animating them, you can just draw on the canvas. And you do it by getting the context, and then just using this context and the Canvas API is very rich and very easy to search to actually draw your game graphics.

2. Building Game Elements and Using Game Engines

Short description:

To build a game, you need to put your game elements in the code and use the Canvas to draw them. You also need to listen for controls and implement the game logic. All of this happens in one frame of the game, which is controlled by the game loop. Drawing on the Canvas can be challenging, so sprites are often used to simplify the process. If building a game from scratch seems daunting, game engines like Phaser, Pixy.js, and GDevelop can provide a framework to focus on graphics and logic. Another option is the bitmello.com framework.

And then you have to put your game elements. Since you don't use React and don't use state management, you just put elements, you just put objects in your code, and for example, you have the first player, and you have its coordinates, and is it running or not, is it healthy or not, and then you have the enemy, for some reason it's John McLean, but Fry fighting John McLean, and you have its coordinates and the velocity, and these are the things that represent your elements, and then the Canvas, you will use the Canvas to draw from these objects.

You have to listen for controls, right, so you have the keys, and then you listen to event listeners on the window key down or key up, and once you listen to those events, you register the key. You say, okay, if the key was pressed, then I put it as true, then I put it as false, and this is the code that does that, right? You say the key code is left, then you put keys.left is pressed, and then you have in the keys object, you have the list of all the keys that are pressed.

Then you have to implement the game logic. So, the game logic is actually where the game takes place. So, for example, you say, okay, if the keys.left was pressed, then I will increase the Batman velocity X. If it's down, I'll increase the Batman velocity Y, and then you have to say, okay, to detect for edges, if the Batman.y is bigger than the screen height, then I have to put it in the screen height, and then you say, okay, if Batman and Superman are the same X, then you'll reduce Batman's lives. Otherwise, if he takes the heart, you increase his lives, and if it's smarter, you break. And this, all this is to you have to make sure that the code follows the logic of the game that you want to do.

Now, bear in mind, all of those things are happening in one frame of the game. So that brings us to the game loop. You have to run a loop using request animation frame, and you have to do with all the magic of the game inside the loop. And every animation frame, you run all the logic of the game. So, you basically update everything according to the keys that were pressed, like we saw. And then you run the actual game logic. You detect collisions, you detect edges, everything. And then in the end, when you have the updated objects, you draw them on Canvas, and then you run the next frame, and the next frame, and the next frame.

Now, we talked about drawing on Canvas, but it's not that easy. You can see here, for example, how to draw this pixel art character on the canvas. And you see that it's very, very, very, very, long to do it in code. We usually will use sprites. Sprites are, as you can see here, you have all the modes of the character in one image, compressed into one image, so you can just use the part of the image that you want according to the position and the velocity of the character.

And when you see all that, do you still want to build a game? Do you still think it's easy? Probably not so much. Luckily, we have game engines, and game engines are frameworks that encapsulate most of the things that we don't need to worry about, and they just let us focus on the graphics and the logic. That brings us to chapter 3, or the middle of efficiency. So there are a lot of JavaScript game engines. Phaser is one of the best ones, and you have Pixy.js, which is also very good. You have GDevelop, and most of them require some sort of learning or previous knowledge in order to use them. I chose to show here a framework that's called bitmello.com.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Building Brain-controlled Interfaces in JavaScript
JSNation Live 2021JSNation Live 2021
27 min
Building Brain-controlled Interfaces in JavaScript
Top Content
Learn how to build brain-controlled interfaces using JavaScript and brain sensors. Understand the functions of different parts of the brain and how they relate to sensor placement. Explore examples of calm and focus detection, as well as the Kinesis API for mental commands. Discover the applications of brain-controlled interfaces, such as scrolling web pages and password-less authentication. Understand the limits and opportunities of brain control and the potential for using brain sensors in medical applications.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
Leveraging LLMs to Build Intuitive AI Experiences With JavaScript
JSNation 2024JSNation 2024
108 min
Leveraging LLMs to Build Intuitive AI Experiences With JavaScript
Featured Workshop
Roy Derks
Shivay Lamba
2 authors
Today every developer is using LLMs in different forms and shapes, from ChatGPT to code assistants like GitHub CoPilot. Following this, lots of products have introduced embedded AI capabilities, and in this workshop we will make LLMs understandable for web developers. And we'll get into coding your own AI-driven application. No prior experience in working with LLMs or machine learning is needed. Instead, we'll use web technologies such as JavaScript, React which you already know and love while also learning about some new libraries like OpenAI, Transformers.js
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
C3 Dev Festival 2024C3 Dev Festival 2024
48 min
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
WorkshopFree
Andreia Ocanoaia
Andreia Ocanoaia
Feeling the limitations of LLMs? They can be creative, but sometimes lack accuracy or rely on outdated information. In this workshop, we’ll break down the process of building and easily deploying a Retrieval-Augmented Generation system. This approach enables you to leverage the power of LLMs with the added benefit of factual accuracy and up-to-date information.
Let AI Be Your Docs
JSNation 2024JSNation 2024
69 min
Let AI Be Your Docs
Workshop
Jesse Hall
Jesse Hall
Join our dynamic workshop to craft an AI-powered documentation portal. Learn to integrate OpenAI's ChatGPT with Next.js 14, Tailwind CSS, and cutting-edge tech to deliver instant code solutions and summaries. This hands-on session will equip you with the knowledge to revolutionize how users interact with documentation, turning tedious searches into efficient, intelligent discovery.
Key Takeaways:
- Practical experience in creating an AI-driven documentation site.- Understanding the integration of AI into user experiences.- Hands-on skills with the latest web development technologies.- Strategies for deploying and maintaining intelligent documentation resources.
Table of contents:- Introduction to AI in Documentation- Setting Up the Environment- Building the Documentation Structure- Integrating ChatGPT for Interactive Docs
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.