Selection of materials for the novice developer of JavaScript games
The materials provided below affect only the basics, the very beginning from which a person can start, who has decided to create a game but does not know where to start. A good option would be to study the relevant literature, articles, or consider examples of ready-made games, as well as viewing the source code of various programs and solutions.
These materials do not pretend to show “how to do”, they will only help to visually understand what works and how, but how to do it correctly will be decided only by the developer. However, these materials can motivate someone for further work, as they are quite visual and explain the simplicity of creating games using JavaScript.
1. Consideration of the concept of requestAnimationFrame.
For modern JavaScript games, you can use an event-based behavior pattern when the game responds to player events, showing its interactivity, or you can use a game loop that will monitor the state of game objects, monitor logic, and respond to the user. This cycle is about:
2. A look at the music in the game application.
When a developer realizes that a single game cycle may not be enough, and besides graphics and animation, you can incorporate sound into the game, HTML5 Audio will come to the rescue. Let's look at the simplicity and accessibility of the method of working with sound.
3. Working with a translator from Yandex in an application in JavaScript.
There may be such a situation that you may need to translate certain words, or create a cool toy in which the user needs to guess the translations of some words. In this case, you can use a translator from Yandex, or rather its API, which can be used from a JavaScript application.
4. Reproduction of any text through Yandex Speech Kit.
Sometimes you may need to voice some text, and in order not to write crutches in PHP or C, and not to pile the server (if any) with different voice acting, you can use a ready-made solution from the same Yandex. Below is a tutorial on how to use the "text reader" API from a JavaScript application.
5. Animation of the image on JavaScript.
In addition to the animation of various primitives in the gaming application on JS, it is possible to use canvas to render images. This material provides detailed information on how to animate any image on canvas using JavaScript.
6. Fullscreen mode in javascript.
Some games take place comfortably when they are maximized. HTML5 technology makes it easy to do.
8. Keyboard event handling, multiple key presses, key codes and characters.
Any game implies some kind of interactivity. It's great when you can only play with the mouse, but besides the mouse most PC users have keyboards, so why not use it? The material considers the work with the keyboard, the processing of a single key, a set of keys, their combinations and keyboard events in general.
')
These materials do not pretend to show “how to do”, they will only help to visually understand what works and how, but how to do it correctly will be decided only by the developer. However, these materials can motivate someone for further work, as they are quite visual and explain the simplicity of creating games using JavaScript.
1. Consideration of the concept of requestAnimationFrame.
For modern JavaScript games, you can use an event-based behavior pattern when the game responds to player events, showing its interactivity, or you can use a game loop that will monitor the state of game objects, monitor logic, and respond to the user. This cycle is about:
Watch
2. A look at the music in the game application.
When a developer realizes that a single game cycle may not be enough, and besides graphics and animation, you can incorporate sound into the game, HTML5 Audio will come to the rescue. Let's look at the simplicity and accessibility of the method of working with sound.
Watch
3. Working with a translator from Yandex in an application in JavaScript.
There may be such a situation that you may need to translate certain words, or create a cool toy in which the user needs to guess the translations of some words. In this case, you can use a translator from Yandex, or rather its API, which can be used from a JavaScript application.
Watch
4. Reproduction of any text through Yandex Speech Kit.
Sometimes you may need to voice some text, and in order not to write crutches in PHP or C, and not to pile the server (if any) with different voice acting, you can use a ready-made solution from the same Yandex. Below is a tutorial on how to use the "text reader" API from a JavaScript application.
Watch
5. Animation of the image on JavaScript.
In addition to the animation of various primitives in the gaming application on JS, it is possible to use canvas to render images. This material provides detailed information on how to animate any image on canvas using JavaScript.
Watch
6. Fullscreen mode in javascript.
Some games take place comfortably when they are maximized. HTML5 technology makes it easy to do.
Watch
8. Keyboard event handling, multiple key presses, key codes and characters.
Any game implies some kind of interactivity. It's great when you can only play with the mouse, but besides the mouse most PC users have keyboards, so why not use it? The material considers the work with the keyboard, the processing of a single key, a set of keys, their combinations and keyboard events in general.
Watch
')
UPDThese materials are not instructions for use, they are only intended to show the ease of entering into the process of developing games for JavaScript.
Source: https://habr.com/ru/post/278621/
All Articles